60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { Breadcrumb } from '../../src'
|
||
import { Demo } from '../components/Demo'
|
||
import { PropsTable } from '../components/PropsTable'
|
||
import { Section } from '../components/Section'
|
||
|
||
export function Breadcrumbs() {
|
||
return (
|
||
<Section
|
||
id="breadcrumb"
|
||
title="面包屑"
|
||
api="Breadcrumb"
|
||
desc="详情页的路径导航：中间项可点，最后一项是当前页（aria-current=page）。"
|
||
>
|
||
<Demo
|
||
title="基础用法"
|
||
desc="items 里只有最后一项会忽略 href；分隔符默认 `/`。"
|
||
layout="column"
|
||
code={`<Breadcrumb
|
||
items={[
|
||
{ label: '首页', href: '/' },
|
||
{ label: '常用推荐', href: '/c/recommend' },
|
||
{ label: '常用站点' },
|
||
]}
|
||
/>`}
|
||
>
|
||
<Breadcrumb
|
||
items={[
|
||
{ label: '首页', href: '#top' },
|
||
{ label: '常用推荐', href: '#top' },
|
||
{ label: '常用站点' },
|
||
]}
|
||
/>
|
||
</Demo>
|
||
|
||
<Demo
|
||
title="自定义分隔符"
|
||
desc="separator 可以是字符或图标；过深的路径在窄屏会换行。"
|
||
code={`<Breadcrumb separator="›" items={items} />`}
|
||
>
|
||
<Breadcrumb
|
||
separator="›"
|
||
items={[
|
||
{ label: '工作台', href: '#top' },
|
||
{ label: '内容库', href: '#top' },
|
||
{ label: '推荐电影' },
|
||
]}
|
||
/>
|
||
</Demo>
|
||
|
||
<PropsTable
|
||
rows={[
|
||
{ name: 'items', type: 'BreadcrumbItem[]', required: true, desc: '{ label, href? }[]' },
|
||
{ name: 'separator', type: 'ReactNode', defaultValue: "'/'", desc: '分隔符' },
|
||
{ name: 'onNavigate', type: '(href: string) => void', desc: '接管点击（SPA 路由），不传则整页跳转' },
|
||
]}
|
||
/>
|
||
</Section>
|
||
)
|
||
}
|