mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-29 04:35:32 +08:00
137 lines
4.1 KiB
Plaintext
137 lines
4.1 KiB
Plaintext
import { Layout, Playground, Attributes } from 'lib/components'
|
|
import { Breadcrumbs, Spacer } from 'components'
|
|
import NextLink from 'next/link'
|
|
import Home from '@zeit-ui/react-icons/home'
|
|
import Inbox from '@zeit-ui/react-icons/inbox'
|
|
|
|
export const meta = {
|
|
title: '面包屑 Breadcrumbs',
|
|
group: '导航',
|
|
}
|
|
|
|
## Breadcrumbs / 面包屑导航
|
|
|
|
显示用户在应用中的层级位置。
|
|
|
|
<Playground
|
|
scope={{ Breadcrumbs }}
|
|
code={`
|
|
<Breadcrumbs>
|
|
<Breadcrumbs.Item>Home</Breadcrumbs.Item>
|
|
<Breadcrumbs.Item href="">Catalog</Breadcrumbs.Item>
|
|
<Breadcrumbs.Item >Page</Breadcrumbs.Item>
|
|
</Breadcrumbs>
|
|
`} />
|
|
|
|
<Playground
|
|
title="大小"
|
|
scope={{ Breadcrumbs }}
|
|
code={`
|
|
<>
|
|
<Breadcrumbs size="mini">
|
|
<Breadcrumbs.Item href="">Home</Breadcrumbs.Item>
|
|
<Breadcrumbs.Item href="">Catalog</Breadcrumbs.Item>
|
|
<Breadcrumbs.Item>Page</Breadcrumbs.Item>
|
|
</Breadcrumbs>
|
|
<Breadcrumbs size="small">
|
|
<Breadcrumbs.Item href="">Home</Breadcrumbs.Item>
|
|
<Breadcrumbs.Item href="">Catalog</Breadcrumbs.Item>
|
|
<Breadcrumbs.Item>Page</Breadcrumbs.Item>
|
|
</Breadcrumbs>
|
|
<Breadcrumbs size="medium">
|
|
<Breadcrumbs.Item href="">Home</Breadcrumbs.Item>
|
|
<Breadcrumbs.Item href="">Catalog</Breadcrumbs.Item>
|
|
<Breadcrumbs.Item>Page</Breadcrumbs.Item>
|
|
</Breadcrumbs>
|
|
<Breadcrumbs size="large">
|
|
<Breadcrumbs.Item href="">Home</Breadcrumbs.Item>
|
|
<Breadcrumbs.Item href="">Catalog</Breadcrumbs.Item>
|
|
<Breadcrumbs.Item>Page</Breadcrumbs.Item>
|
|
</Breadcrumbs>
|
|
</>
|
|
`} />
|
|
|
|
<Playground
|
|
title="分隔符"
|
|
desc="定制字符中的分隔符。"
|
|
scope={{ Breadcrumbs, Spacer }}
|
|
code={`
|
|
<>
|
|
<Breadcrumbs separator="-">
|
|
<Breadcrumbs.Item>Home</Breadcrumbs.Item>
|
|
<Breadcrumbs.Item href="">Catalog</Breadcrumbs.Item>
|
|
<Breadcrumbs.Item >Page</Breadcrumbs.Item>
|
|
</Breadcrumbs>
|
|
<Spacer y={.5} />
|
|
<Breadcrumbs separator=">">
|
|
<Breadcrumbs.Item>Home</Breadcrumbs.Item>
|
|
<Breadcrumbs.Separator>:</Breadcrumbs.Separator>
|
|
<Breadcrumbs.Item href="">Components</Breadcrumbs.Item>
|
|
<Breadcrumbs.Item href="">Basic</Breadcrumbs.Item>
|
|
<Breadcrumbs.Item >Button</Breadcrumbs.Item>
|
|
</Breadcrumbs>
|
|
</>
|
|
`} />
|
|
|
|
<Playground
|
|
title="图标"
|
|
desc="以图标表达更多信息。"
|
|
scope={{ Breadcrumbs, Home, Inbox }}
|
|
code={`
|
|
<Breadcrumbs>
|
|
<Breadcrumbs.Item><Home /></Breadcrumbs.Item>
|
|
<Breadcrumbs.Item href=""><Inbox /> Inbox</Breadcrumbs.Item>
|
|
<Breadcrumbs.Item >Page</Breadcrumbs.Item>
|
|
</Breadcrumbs>
|
|
`} />
|
|
|
|
<Playground
|
|
title="结合 NextJS"
|
|
desc="与 `next.js` 结合使用的示例。"
|
|
scope={{ Breadcrumbs, NextLink }}
|
|
code={`
|
|
<Breadcrumbs>
|
|
<NextLink href="/">
|
|
<Breadcrumbs.Item nextLink>Home</Breadcrumbs.Item>
|
|
</NextLink>
|
|
<NextLink href="/en-us/components">
|
|
<Breadcrumbs.Item nextLink>Components</Breadcrumbs.Item>
|
|
</NextLink>
|
|
<Breadcrumbs.Item>Breadcrumbs</Breadcrumbs.Item>
|
|
</Breadcrumbs>
|
|
`} />
|
|
|
|
<Attributes edit="/pages/zh-cn/components/breadcrumbs.mdx">
|
|
<Attributes.Title>Breadcrumbs.Props</Attributes.Title>
|
|
|
|
| 属性 | 描述 | 类型 | 推荐值 | 默认
|
|
| ---------- | ---------- | ---- | -------------- | ------ |
|
|
| **separator** | 分隔符 | `string` | - | `/` |
|
|
| **size** | 面包屑导航的大小 | `NormalSizes` | [NormalSizes](#normalsizes) | `medium` |
|
|
| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - |
|
|
|
|
<Attributes.Title>Breadcrumbs.Item.Props</Attributes.Title>
|
|
|
|
| 属性 | 描述 | 类型 | 推荐值 | 默认
|
|
| ---------- | ---------- | ---- | -------------- | ------ |
|
|
| **href** | 链接地址 | `string` | - | - |
|
|
| **nextLink** | 是否为 `next.js` 路由 | `boolean` | - | `false` |
|
|
| **onClick** | 点击事件 | `(event: MouseEvent) => void` | - | - |
|
|
| ... | 原生属性 | `AnchorHTMLAttributes` | `'id', 'className', ...` | - |
|
|
|
|
<Attributes.Title>Breadcrumbs.Separator.Props</Attributes.Title>
|
|
|
|
| 属性 | 描述 | 类型 | 推荐值 | 默认
|
|
| ---------- | ---------- | ---- | -------------- | ------ |
|
|
| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - |
|
|
|
|
<Attributes.Title>NormalSizes</Attributes.Title>
|
|
|
|
```ts
|
|
type NormalSizes = 'mini' | 'small' | 'medium' | 'large'
|
|
```
|
|
|
|
</Attributes>
|
|
|
|
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|