mirror of
https://github.com/zhigang1992/react.git
synced 2026-02-09 22:50:06 +08:00
75 lines
2.1 KiB
Plaintext
75 lines
2.1 KiB
Plaintext
import { Layout, Playground, Attributes } from 'lib/components'
|
|
import { Link, Text, Code } from 'components'
|
|
import NextLink from 'next/link'
|
|
|
|
export const meta = {
|
|
title: 'link',
|
|
description: 'tenotext',
|
|
}
|
|
|
|
## Link
|
|
|
|
Hyperlinks between pages.
|
|
|
|
<Playground
|
|
desc="Use `Text` to standardize text content."
|
|
scope={{ Link }}
|
|
code={`
|
|
<Link href="#">The Evil Rabbit Jumped over the Fence.</Link>
|
|
`} />
|
|
|
|
<Playground
|
|
title="highlight"
|
|
desc="Use `Text` to standardize text content."
|
|
scope={{ Link }}
|
|
code={`
|
|
<Link href="#" color>The Evil Rabbit Jumped over the Fence.</Link>
|
|
`} />
|
|
|
|
<Playground
|
|
title="variant"
|
|
desc="Use `Text` to standardize text content."
|
|
scope={{ Link, Text }}
|
|
code={`
|
|
<>
|
|
<Text><Link href="#" pure>The Evil Rabbit Jumped over the Fence.</Link></Text>
|
|
<Text><Link href="#" color pure>The Evil Rabbit Jumped over the Fence.</Link></Text>
|
|
<Text><Link href="#" pure underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
|
|
<Text><Link href="#" underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
|
|
</>
|
|
`} />
|
|
|
|
<Playground
|
|
title="block"
|
|
desc="Display as a separate block."
|
|
scope={{ Link }}
|
|
code={`
|
|
<Link href="#" pure block>The Evil Rabbit Jumped over the Fence.</Link>
|
|
`} />
|
|
|
|
<Playground
|
|
title={<>With <Code>next/link</Code></>}
|
|
desc="Use `Link` with NextJS without any configuration."
|
|
scope={{ Link, NextLink }}
|
|
code={`
|
|
<NextLink href="/docs/components/button">
|
|
<Link pure block>Docs of Button</Link>
|
|
</NextLink>
|
|
`} />
|
|
|
|
<Attributes edit="/pages/docs/components/link.mdx">
|
|
<Attributes.Title>Link.Props</Attributes.Title>
|
|
|
|
| Attribute | Description | Type | Accepted values | Default
|
|
| ---------- | ---------- | ---- | -------------- | ------ |
|
|
| **href** | link url | `string` | - | - |
|
|
| **color** | display color for link | `boolean` | - | `false` |
|
|
| **pure** | hide icon | `boolean` | - | `false` |
|
|
| **underline** | display underline | `boolean` | - | `false` |
|
|
| **block** | display as a separate block | `boolean` | - | `false` |
|
|
| ... | native props | `AnchorHTMLAttributes` | `'rel', 'target', ...` | - |
|
|
|
|
</Attributes>
|
|
|
|
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|