From 5666ff9a95477bb259d9a6ad6cf5a177b51775a8 Mon Sep 17 00:00:00 2001 From: unix Date: Sat, 30 May 2020 21:44:44 +0800 Subject: [PATCH 1/4] feat(breadcrumbs): add component docs(breadcrumbs): add docs fix(breadcrumbs): fix item types error --- .../__tests__/breadcrumbs.test.tsx | 0 components/breadcrumbs/breadcrumbs-context.ts | 12 ++ components/breadcrumbs/breadcrumbs-item.tsx | 74 +++++++++++++ .../breadcrumbs/breadcrumbs-separator.tsx | 40 +++++++ components/breadcrumbs/breadcrumbs.tsx | 88 +++++++++++++++ components/breadcrumbs/index.ts | 8 ++ components/index.ts | 1 + components/link/link.tsx | 2 +- lib/data/metadata-en-us.json | 2 +- pages/en-us/components/breadcrumbs.mdx | 104 ++++++++++++++++++ 10 files changed, 329 insertions(+), 2 deletions(-) create mode 100644 components/breadcrumbs/__tests__/breadcrumbs.test.tsx create mode 100644 components/breadcrumbs/breadcrumbs-context.ts create mode 100644 components/breadcrumbs/breadcrumbs-item.tsx create mode 100644 components/breadcrumbs/breadcrumbs-separator.tsx create mode 100644 components/breadcrumbs/breadcrumbs.tsx create mode 100644 components/breadcrumbs/index.ts create mode 100644 pages/en-us/components/breadcrumbs.mdx diff --git a/components/breadcrumbs/__tests__/breadcrumbs.test.tsx b/components/breadcrumbs/__tests__/breadcrumbs.test.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/components/breadcrumbs/breadcrumbs-context.ts b/components/breadcrumbs/breadcrumbs-context.ts new file mode 100644 index 000000000..0e653db6e --- /dev/null +++ b/components/breadcrumbs/breadcrumbs-context.ts @@ -0,0 +1,12 @@ +import React from 'react' + +export interface BreadcrumbsConfig { + separator?: string +} + +const defaultContext = {} + +export const BreadcrumbsContext = React.createContext(defaultContext) + +export const useBreadcrumbsContext = (): BreadcrumbsConfig => + React.useContext(BreadcrumbsContext) diff --git a/components/breadcrumbs/breadcrumbs-item.tsx b/components/breadcrumbs/breadcrumbs-item.tsx new file mode 100644 index 000000000..fddad183a --- /dev/null +++ b/components/breadcrumbs/breadcrumbs-item.tsx @@ -0,0 +1,74 @@ +import Link from '../link' +import { Props as LinkBasicProps } from '../link/link' +import React, { useMemo } from 'react' +import withDefaults from '../utils/with-defaults' +import { pickChild } from '../utils/collections' +import BreadcrumbsSeparator from './breadcrumbs-separator' +import { useBreadcrumbsContext } from './breadcrumbs-context' + +interface Props { + href?: string + nextLink?: boolean + onClick?: (event: React.MouseEvent) => void + className?: string +} + +const defaultProps = { + nextLink: false, + className: '', +} + +type NativeAttrs = Omit, keyof Props> +type NativeLinkAttrs = Omit +export type BreadcrumbsProps = Props & typeof defaultProps & NativeLinkAttrs + +const BreadcrumbsItem = React.forwardRef< + HTMLAnchorElement, + React.PropsWithChildren +>( + ( + { href, nextLink, onClick, children, className, ...props }, + ref: React.Ref, + ) => { + const { separator } = useBreadcrumbsContext() + const isLink = useMemo(() => href !== undefined || nextLink, [href, nextLink]) + const [withoutSepChildren, sepChildren] = pickChild(children, BreadcrumbsSeparator) + const composeSeparator = useMemo(() => { + if (React.Children.count(sepChildren) > 0) return sepChildren + return {separator} + }, [separator]) + + const clickHandler = (event: React.MouseEvent) => { + onClick && onClick(event) + } + + if (!isLink) { + return ( + <> + + {withoutSepChildren} + + {composeSeparator} + + ) + } + + return ( + <> + + {withoutSepChildren} + + {composeSeparator} + + ) + }, +) + +const MemoBreadcrumbsItem = React.memo(BreadcrumbsItem) + +export default withDefaults(MemoBreadcrumbsItem, defaultProps) diff --git a/components/breadcrumbs/breadcrumbs-separator.tsx b/components/breadcrumbs/breadcrumbs-separator.tsx new file mode 100644 index 000000000..82d2cf17b --- /dev/null +++ b/components/breadcrumbs/breadcrumbs-separator.tsx @@ -0,0 +1,40 @@ +import React from 'react' +// import useTheme from '../styles/use-theme' +import withDefaults from '../utils/with-defaults' + +interface Props { + className?: string +} + +const defaultProps = { + className: '', +} + +type NativeAttrs = Omit, keyof Props> +export type BreadcrumbsProps = Props & typeof defaultProps & NativeAttrs + +const BreadcrumbsSeparator: React.FC> = ({ + children, + className, +}) => { + // const theme = useTheme() + + return ( +
+ {children} + +
+ ) +} + +const MemoBreadcrumbsSeparator = React.memo(BreadcrumbsSeparator) + +export default withDefaults(MemoBreadcrumbsSeparator, defaultProps) diff --git a/components/breadcrumbs/breadcrumbs.tsx b/components/breadcrumbs/breadcrumbs.tsx new file mode 100644 index 000000000..063d68f3e --- /dev/null +++ b/components/breadcrumbs/breadcrumbs.tsx @@ -0,0 +1,88 @@ +import React, { ReactNode, useMemo } from 'react' +import useTheme from '../styles/use-theme' +import BreadcrumbsItem from './breadcrumbs-item' +import BreadcrumbsSeparator from './breadcrumbs-separator' +import { addColorAlpha } from '../utils/color' +import { BreadcrumbsContext } from './breadcrumbs-context' + +interface Props { + separator?: string | ReactNode + className?: string +} + +const defaultProps = { + separator: '/', + className: '', +} + +type NativeAttrs = Omit, keyof Props> +export type BreadcrumbsProps = Props & typeof defaultProps & NativeAttrs + +const Breadcrumbs: React.FC> = ({ + separator, + children, + className, +}) => { + const theme = useTheme() + const initialValue = useMemo( + () => ({ + separator, + }), + [separator], + ) + + return ( + + + + ) +} + +type MemoBreadcrumbsComponent

= React.NamedExoticComponent

& { + Item: typeof BreadcrumbsItem + Separator: typeof BreadcrumbsSeparator +} +type ComponentProps = Partial & + Omit & + NativeAttrs + +Breadcrumbs.defaultProps = defaultProps + +export default React.memo(Breadcrumbs) as MemoBreadcrumbsComponent diff --git a/components/breadcrumbs/index.ts b/components/breadcrumbs/index.ts new file mode 100644 index 000000000..fe5edd80d --- /dev/null +++ b/components/breadcrumbs/index.ts @@ -0,0 +1,8 @@ +import Breadcrumbs from './breadcrumbs' +import BreadcrumbsItem from './breadcrumbs-item' +import BreadcrumbsSeparator from './breadcrumbs-separator' + +Breadcrumbs.Item = BreadcrumbsItem +Breadcrumbs.Separator = BreadcrumbsSeparator + +export default Breadcrumbs diff --git a/components/index.ts b/components/index.ts index 506ae9205..647a4b894 100644 --- a/components/index.ts +++ b/components/index.ts @@ -58,3 +58,4 @@ export { default as User } from './user' export { default as Page } from './page' export { default as Grid } from './grid' export { default as ButtonGroup } from './button-group' +export { default as Breadcrumbs } from './breadcrumbs' diff --git a/components/link/link.tsx b/components/link/link.tsx index 39cb17227..887f377ce 100644 --- a/components/link/link.tsx +++ b/components/link/link.tsx @@ -4,7 +4,7 @@ import useTheme from '../styles/use-theme' import useWarning from '../utils/use-warning' import LinkIcon from './icon' -interface Props { +export interface Props { href?: string color?: boolean pure?: boolean diff --git a/lib/data/metadata-en-us.json b/lib/data/metadata-en-us.json index ded3353cf..cd546e6a3 100644 --- a/lib/data/metadata-en-us.json +++ b/lib/data/metadata-en-us.json @@ -1 +1 @@ -[{"name":"guide","children":[{"name":"getting-started","children":[{"name":"introduction","url":"/en-us/guide/introduction","index":5,"group":"getting-started"},{"name":"installation","url":"/en-us/guide/installation","index":10,"group":"getting-started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"getting-started"}]},{"name":"customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":100,"group":"customization"},{"name":"Themes","url":"/en-us/guide/themes","index":100,"group":"customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"text","url":"/en-us/components/text","index":10,"group":"General"},{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"Grid","url":"/en-us/components/grid","index":100,"group":"layout"},{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"},{"name":"Page","url":"/en-us/components/page","index":100,"group":"layout"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"layout"}]},{"name":"Surfaces","children":[{"name":"card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"Auto-Complete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"Button-Group","url":"/en-us/components/button-group","index":100,"group":"Data Entry"},{"name":"checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File-Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"button-dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"use-body-scroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"use-click-away","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"use-clipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"use-current-state","url":"/en-us/components/use-current-state","index":100,"group":"Utils"},{"name":"use-media-query","url":"/en-us/components/use-media-query","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}] +[{"name":"guide","children":[{"name":"getting-started","children":[{"name":"introduction","url":"/en-us/guide/introduction","index":5,"group":"getting-started"},{"name":"installation","url":"/en-us/guide/installation","index":10,"group":"getting-started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"getting-started"}]},{"name":"customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":100,"group":"customization"},{"name":"Themes","url":"/en-us/guide/themes","index":100,"group":"customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"text","url":"/en-us/components/text","index":10,"group":"General"},{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"Grid","url":"/en-us/components/grid","index":100,"group":"layout"},{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"},{"name":"Page","url":"/en-us/components/page","index":100,"group":"layout"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"layout"}]},{"name":"Surfaces","children":[{"name":"card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"Auto-Complete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"Button-Group","url":"/en-us/components/button-group","index":100,"group":"Data Entry"},{"name":"checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File-Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"breadcrumbs","url":"/en-us/components/breadcrumbs","index":100,"group":"Navigation"},{"name":"link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"button-dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"use-body-scroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"use-click-away","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"use-clipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"use-current-state","url":"/en-us/components/use-current-state","index":100,"group":"Utils"},{"name":"use-media-query","url":"/en-us/components/use-media-query","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}] diff --git a/pages/en-us/components/breadcrumbs.mdx b/pages/en-us/components/breadcrumbs.mdx new file mode 100644 index 000000000..1bf8dd4ab --- /dev/null +++ b/pages/en-us/components/breadcrumbs.mdx @@ -0,0 +1,104 @@ +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: 'Navigation', +} + +## Breadcrumbs + +Show where users are in the application. + + + Home + Catalog + Page + +`} /> + + + + Home + Catalog + Page + + + + + Home + : + + Components + Basic + Button + + +`} /> + + + + Inbox + Page + +`} /> + + + + Home + + + Components + + Breadcrumbs + +`} /> + + +Breadcrumbs.Props + +| Attribute | Description | Type | Accepted values | Default +| ---------- | ---------- | ---- | -------------- | ------ | +| **separator** | separator string | `string` | - | `/` | +| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - | + +Breadcrumbs.Item.Props + +| Attribute | Description | Type | Accepted values | Default +| ---------- | ---------- | ---- | -------------- | ------ | +| **href** | link address | `string` | - | - | +| **nextLink** | in `next.js` route | `boolean` | - | `false` | +| **onClick** | click event | `(event: MouseEvent) => void` | - | - | +| **onClick** | click event | `(event: MouseEvent) => void` | - | - | +| ... | native props | `AnchorHTMLAttributes` | `'id', 'className', ...` | - | + +Breadcrumbs.Separator.Props + +| Attribute | Description | Type | Accepted values | Default +| ---------- | ---------- | ---- | -------------- | ------ | +| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - | + + + +export default ({ children }) => {children} From f1b6c2b134f1e4711f44f542f7ccff9193aee2a0 Mon Sep 17 00:00:00 2001 From: unix Date: Sun, 31 May 2020 08:04:28 +0800 Subject: [PATCH 2/4] test(breadcrumbs): add testcase docs: add api for breadcrumbs --- .../__snapshots__/breadcrumbs.test.tsx.snap | 101 +++++++++++++++++ .../__tests__/breadcrumbs.test.tsx | 77 +++++++++++++ pages/en-us/components/breadcrumbs.mdx | 1 - pages/zh-cn/components/breadcrumbs.mdx | 103 ++++++++++++++++++ 4 files changed, 281 insertions(+), 1 deletion(-) create mode 100644 components/breadcrumbs/__tests__/__snapshots__/breadcrumbs.test.tsx.snap create mode 100644 pages/zh-cn/components/breadcrumbs.mdx diff --git a/components/breadcrumbs/__tests__/__snapshots__/breadcrumbs.test.tsx.snap b/components/breadcrumbs/__tests__/__snapshots__/breadcrumbs.test.tsx.snap new file mode 100644 index 000000000..f2c7c3f2e --- /dev/null +++ b/components/breadcrumbs/__tests__/__snapshots__/breadcrumbs.test.tsx.snap @@ -0,0 +1,101 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Breadcrumbs should redefined all separators 1`] = ` +"

" +`; + +exports[`Breadcrumbs should render correctly 1`] = ` +"" +`; diff --git a/components/breadcrumbs/__tests__/breadcrumbs.test.tsx b/components/breadcrumbs/__tests__/breadcrumbs.test.tsx index e69de29bb..45ac9a087 100644 --- a/components/breadcrumbs/__tests__/breadcrumbs.test.tsx +++ b/components/breadcrumbs/__tests__/breadcrumbs.test.tsx @@ -0,0 +1,77 @@ +import React from 'react' +import { mount } from 'enzyme' +import { Breadcrumbs } from 'components' + +describe('Breadcrumbs', () => { + it('should render correctly', () => { + const wrapper = mount( + + test-1 + , + ) + expect(wrapper.html()).toMatchSnapshot() + expect(() => wrapper.unmount()).not.toThrow() + }) + + it('should redefined all separators', () => { + const wrapper = mount( + + test-1 + test-2 + , + ) + expect(wrapper.html()).toMatchSnapshot() + expect(wrapper.html()).toContain('*') + expect(() => wrapper.unmount()).not.toThrow() + }) + + it('the specified separator should be redefined', () => { + const wrapper = mount( + + + test-1 + % + + test-2 + , + ) + expect(wrapper.html()).toContain('%') + }) + + it('should render string when href missing', () => { + let wrapper = mount( + + test-1 + , + ) + let dom = wrapper.find('.breadcrums-item').at(0).getDOMNode() + expect(dom.tagName).toEqual('SPAN') + + wrapper = mount( + + test-1 + , + ) + dom = wrapper.find('.breadcrums-item').at(0).getDOMNode() + expect(dom.tagName).toEqual('A') + + wrapper = mount( + + test-1 + , + ) + dom = wrapper.find('.breadcrums-item').at(0).getDOMNode() + expect(dom.tagName).toEqual('A') + }) + + it('should trigger click event', () => { + const handler = jest.fn() + const wrapper = mount( + + test-1 + , + ) + wrapper.find('.breadcrums-item').at(0).simulate('click') + expect(handler).toHaveBeenCalled() + }) +}) diff --git a/pages/en-us/components/breadcrumbs.mdx b/pages/en-us/components/breadcrumbs.mdx index 1bf8dd4ab..04c01a30a 100644 --- a/pages/en-us/components/breadcrumbs.mdx +++ b/pages/en-us/components/breadcrumbs.mdx @@ -90,7 +90,6 @@ Show where users are in the application. | **href** | link address | `string` | - | - | | **nextLink** | in `next.js` route | `boolean` | - | `false` | | **onClick** | click event | `(event: MouseEvent) => void` | - | - | -| **onClick** | click event | `(event: MouseEvent) => void` | - | - | | ... | native props | `AnchorHTMLAttributes` | `'id', 'className', ...` | - | Breadcrumbs.Separator.Props diff --git a/pages/zh-cn/components/breadcrumbs.mdx b/pages/zh-cn/components/breadcrumbs.mdx new file mode 100644 index 000000000..8c5799b36 --- /dev/null +++ b/pages/zh-cn/components/breadcrumbs.mdx @@ -0,0 +1,103 @@ +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 / 面包屑导航 + +显示用户在应用中的层级位置。 + + + Home + Catalog + Page + +`} /> + + + + Home + Catalog + Page + + + + + Home + : + + Components + Basic + Button + + +`} /> + + + + Inbox + Page + +`} /> + + + + Home + + + Components + + Breadcrumbs + +`} /> + + +Breadcrumbs.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **separator** | 分隔符 | `string` | - | `/` | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - | + +Breadcrumbs.Item.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **href** | 链接地址 | `string` | - | - | +| **nextLink** | 是否为 `next.js` 路由 | `boolean` | - | `false` | +| **onClick** | 点击事件 | `(event: MouseEvent) => void` | - | - | +| ... | 原生属性 | `AnchorHTMLAttributes` | `'id', 'className', ...` | - | + +Breadcrumbs.Separator.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - | + + + +export default ({ children }) => {children} From a1b4fd7008061e3ff256662d0379bce0c294d1ff Mon Sep 17 00:00:00 2001 From: unix Date: Sun, 31 May 2020 08:33:46 +0800 Subject: [PATCH 3/4] feat(breadcrumbs): add size --- components/breadcrumbs/breadcrumbs.tsx | 17 +++++++++- pages/en-us/components/breadcrumbs.mdx | 43 +++++++++++++++++++++++--- pages/zh-cn/components/breadcrumbs.mdx | 35 +++++++++++++++++++++ 3 files changed, 90 insertions(+), 5 deletions(-) diff --git a/components/breadcrumbs/breadcrumbs.tsx b/components/breadcrumbs/breadcrumbs.tsx index 063d68f3e..c68ea72b5 100644 --- a/components/breadcrumbs/breadcrumbs.tsx +++ b/components/breadcrumbs/breadcrumbs.tsx @@ -4,13 +4,16 @@ import BreadcrumbsItem from './breadcrumbs-item' import BreadcrumbsSeparator from './breadcrumbs-separator' import { addColorAlpha } from '../utils/color' import { BreadcrumbsContext } from './breadcrumbs-context' +import { NormalSizes } from 'components/utils/prop-types' interface Props { + size: NormalSizes separator?: string | ReactNode className?: string } const defaultProps = { + size: 'medium' as NormalSizes, separator: '/', className: '', } @@ -18,7 +21,18 @@ const defaultProps = { type NativeAttrs = Omit, keyof Props> export type BreadcrumbsProps = Props & typeof defaultProps & NativeAttrs +const getSize = (size: NormalSizes) => { + const sizes: { [key in NormalSizes]: string } = { + mini: '.75rem', + small: '.875rem', + medium: '1rem', + large: '1.125rem', + } + return sizes[size] +} + const Breadcrumbs: React.FC> = ({ + size, separator, children, className, @@ -30,6 +44,7 @@ const Breadcrumbs: React.FC> = ({ }), [separator], ) + const fontSize = useMemo(() => getSize(size), [size]) return ( @@ -41,7 +56,7 @@ const Breadcrumbs: React.FC> = ({ padding: 0; line-height: inherit; color: ${theme.palette.accents_4}; - font-size: 1rem; + font-size: ${fontSize}; box-sizing: border-box; display: flex; align-items: center; diff --git a/pages/en-us/components/breadcrumbs.mdx b/pages/en-us/components/breadcrumbs.mdx index 04c01a30a..248386c7a 100644 --- a/pages/en-us/components/breadcrumbs.mdx +++ b/pages/en-us/components/breadcrumbs.mdx @@ -19,10 +19,38 @@ Show where users are in the application. Home Catalog - Page + Page `} /> + + + Home + Catalog + Page + + + Home + Catalog + Page + + + Home + Catalog + Page + + + Home + Catalog + Page + + +`} /> + Home Catalog - Page + Page @@ -42,7 +70,7 @@ Show where users are in the application. Components Basic - Button + Button `} /> @@ -55,7 +83,7 @@ Show where users are in the application. Inbox - Page + Page `} /> @@ -81,6 +109,7 @@ Show where users are in the application. | Attribute | Description | Type | Accepted values | Default | ---------- | ---------- | ---- | -------------- | ------ | | **separator** | separator string | `string` | - | `/` | +| **size** | breadcrumbs size | `NormalSizes` | [NormalSizes](#normalsizes) | `medium` | | ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - | Breadcrumbs.Item.Props @@ -98,6 +127,12 @@ Show where users are in the application. | ---------- | ---------- | ---- | -------------- | ------ | | ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - | +NormalSizes + +```ts +type NormalSizes = 'mini' | 'small' | 'medium' | 'large' +``` + export default ({ children }) => {children} diff --git a/pages/zh-cn/components/breadcrumbs.mdx b/pages/zh-cn/components/breadcrumbs.mdx index 8c5799b36..cec2d5922 100644 --- a/pages/zh-cn/components/breadcrumbs.mdx +++ b/pages/zh-cn/components/breadcrumbs.mdx @@ -23,6 +23,34 @@ export const meta = { `} /> + + + Home + Catalog + Page + + + Home + Catalog + Page + + + Home + Catalog + Page + + + Home + Catalog + Page + + +`} /> + Breadcrumbs.Item.Props @@ -98,6 +127,12 @@ export const meta = { | ---------- | ---------- | ---- | -------------- | ------ | | ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - | +NormalSizes + +```ts +type NormalSizes = 'mini' | 'small' | 'medium' | 'large' +``` + export default ({ children }) => {children} From 4715b78710d8d3644f9751bf0a4852ebb3d937ea Mon Sep 17 00:00:00 2001 From: unix Date: Mon, 1 Jun 2020 08:57:24 +0800 Subject: [PATCH 4/4] refactor(breadcrumbs): auto assign separator to crumbs item docs(breadcrumbs): update docs --- .../__snapshots__/breadcrumbs.test.tsx.snap | 130 ++++++++---------- .../__tests__/breadcrumbs.test.tsx | 6 +- components/breadcrumbs/breadcrumbs-context.ts | 12 -- components/breadcrumbs/breadcrumbs-item.tsx | 37 ++--- .../breadcrumbs/breadcrumbs-separator.tsx | 3 - components/breadcrumbs/breadcrumbs.tsx | 97 +++++++------ lib/data/metadata-zh-cn.json | 2 +- pages/en-us/components/breadcrumbs.mdx | 6 +- pages/zh-cn/components/breadcrumbs.mdx | 6 +- 9 files changed, 130 insertions(+), 169 deletions(-) delete mode 100644 components/breadcrumbs/breadcrumbs-context.ts diff --git a/components/breadcrumbs/__tests__/__snapshots__/breadcrumbs.test.tsx.snap b/components/breadcrumbs/__tests__/__snapshots__/breadcrumbs.test.tsx.snap index f2c7c3f2e..58a621cc6 100644 --- a/components/breadcrumbs/__tests__/__snapshots__/breadcrumbs.test.tsx.snap +++ b/components/breadcrumbs/__tests__/__snapshots__/breadcrumbs.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Breadcrumbs should redefined all separators 1`] = ` -"" + nav :global(.breadcrums-item) { + display: inline-flex; + align-items: center; + } + " `; exports[`Breadcrumbs should render correctly 1`] = ` -"" + nav :global(.breadcrums-item) { + display: inline-flex; + align-items: center; + } + " `; diff --git a/components/breadcrumbs/__tests__/breadcrumbs.test.tsx b/components/breadcrumbs/__tests__/breadcrumbs.test.tsx index 45ac9a087..b0ff8cf6c 100644 --- a/components/breadcrumbs/__tests__/breadcrumbs.test.tsx +++ b/components/breadcrumbs/__tests__/breadcrumbs.test.tsx @@ -28,10 +28,8 @@ describe('Breadcrumbs', () => { it('the specified separator should be redefined', () => { const wrapper = mount( - - test-1 - % - + test-1 + % test-2 , ) diff --git a/components/breadcrumbs/breadcrumbs-context.ts b/components/breadcrumbs/breadcrumbs-context.ts deleted file mode 100644 index 0e653db6e..000000000 --- a/components/breadcrumbs/breadcrumbs-context.ts +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -export interface BreadcrumbsConfig { - separator?: string -} - -const defaultContext = {} - -export const BreadcrumbsContext = React.createContext(defaultContext) - -export const useBreadcrumbsContext = (): BreadcrumbsConfig => - React.useContext(BreadcrumbsContext) diff --git a/components/breadcrumbs/breadcrumbs-item.tsx b/components/breadcrumbs/breadcrumbs-item.tsx index fddad183a..2ab1e95c6 100644 --- a/components/breadcrumbs/breadcrumbs-item.tsx +++ b/components/breadcrumbs/breadcrumbs-item.tsx @@ -4,7 +4,6 @@ import React, { useMemo } from 'react' import withDefaults from '../utils/with-defaults' import { pickChild } from '../utils/collections' import BreadcrumbsSeparator from './breadcrumbs-separator' -import { useBreadcrumbsContext } from './breadcrumbs-context' interface Props { href?: string @@ -30,41 +29,29 @@ const BreadcrumbsItem = React.forwardRef< { href, nextLink, onClick, children, className, ...props }, ref: React.Ref, ) => { - const { separator } = useBreadcrumbsContext() const isLink = useMemo(() => href !== undefined || nextLink, [href, nextLink]) - const [withoutSepChildren, sepChildren] = pickChild(children, BreadcrumbsSeparator) - const composeSeparator = useMemo(() => { - if (React.Children.count(sepChildren) > 0) return sepChildren - return {separator} - }, [separator]) - + const [withoutSepChildren] = pickChild(children, BreadcrumbsSeparator) const clickHandler = (event: React.MouseEvent) => { onClick && onClick(event) } if (!isLink) { return ( - <> - - {withoutSepChildren} - - {composeSeparator} - + + {withoutSepChildren} + ) } return ( - <> - - {withoutSepChildren} - - {composeSeparator} - + + {withoutSepChildren} + ) }, ) diff --git a/components/breadcrumbs/breadcrumbs-separator.tsx b/components/breadcrumbs/breadcrumbs-separator.tsx index 82d2cf17b..80e12f5b2 100644 --- a/components/breadcrumbs/breadcrumbs-separator.tsx +++ b/components/breadcrumbs/breadcrumbs-separator.tsx @@ -1,5 +1,4 @@ import React from 'react' -// import useTheme from '../styles/use-theme' import withDefaults from '../utils/with-defaults' interface Props { @@ -17,8 +16,6 @@ const BreadcrumbsSeparator: React.FC> children, className, }) => { - // const theme = useTheme() - return (
{children} diff --git a/components/breadcrumbs/breadcrumbs.tsx b/components/breadcrumbs/breadcrumbs.tsx index c68ea72b5..7850b4de5 100644 --- a/components/breadcrumbs/breadcrumbs.tsx +++ b/components/breadcrumbs/breadcrumbs.tsx @@ -3,8 +3,7 @@ import useTheme from '../styles/use-theme' import BreadcrumbsItem from './breadcrumbs-item' import BreadcrumbsSeparator from './breadcrumbs-separator' import { addColorAlpha } from '../utils/color' -import { BreadcrumbsContext } from './breadcrumbs-context' -import { NormalSizes } from 'components/utils/prop-types' +import { NormalSizes } from '../utils/prop-types' interface Props { size: NormalSizes @@ -38,55 +37,67 @@ const Breadcrumbs: React.FC> = ({ className, }) => { const theme = useTheme() - const initialValue = useMemo( - () => ({ - separator, - }), - [separator], - ) const fontSize = useMemo(() => getSize(size), [size]) + const hoverColor = useMemo(() => { + return addColorAlpha(theme.palette.link, 0.85) + }, [theme.palette.link]) + + const childrenArray = React.Children.toArray(children) + const withSeparatorChildren = childrenArray.map((item, index) => { + if (!React.isValidElement(item)) return item + const last = childrenArray[index - 1] + const lastIsSeparator = React.isValidElement(last) && last.type === BreadcrumbsSeparator + const currentIsSeparator = item.type === BreadcrumbsSeparator + if (!lastIsSeparator && !currentIsSeparator && index > 0) { + return ( + + {separator} + {item} + + ) + } + return item + }) return ( - - - + nav :global(.breadcrums-item) { + display: inline-flex; + align-items: center; + } + `} + ) } diff --git a/lib/data/metadata-zh-cn.json b/lib/data/metadata-zh-cn.json index 124e1e118..51e0f0229 100644 --- a/lib/data/metadata-zh-cn.json +++ b/lib/data/metadata-zh-cn.json @@ -1 +1 @@ -[{"name":"guide","children":[{"name":"快速上手","children":[{"name":"什么是 ZEIT UI","url":"/zh-cn/guide/introduction","index":5,"group":"快速上手"},{"name":"安装","url":"/zh-cn/guide/installation","index":10,"group":"快速上手"},{"name":"服务端渲染","url":"/zh-cn/guide/server-render","index":15,"group":"快速上手"}]},{"name":"定制化","children":[{"name":"色彩","url":"/zh-cn/guide/colors","index":100,"group":"定制化"},{"name":"主题","url":"/zh-cn/guide/themes","index":100,"group":"定制化"}]}],"localeName":"上手指南"},{"name":"components","children":[{"name":"通用","children":[{"name":"文本 Text","url":"/zh-cn/components/text","index":10,"group":"通用"},{"name":"按钮 Button","url":"/zh-cn/components/button","index":100,"group":"通用"},{"name":"代码 Code","url":"/zh-cn/components/code","index":100,"group":"通用"},{"name":"图标 Icons","url":"/zh-cn/components/icons","index":100,"group":"通用"}]},{"name":"布局","children":[{"name":"栅格 Grid","url":"/zh-cn/components/grid","index":100,"group":"布局"},{"name":"布局 Layout","url":"/zh-cn/components/layout","index":100,"group":"布局"},{"name":"页面 Page","url":"/zh-cn/components/page","index":100,"group":"布局"},{"name":"间距 Spacer","url":"/zh-cn/components/spacer","index":100,"group":"布局"}]},{"name":"表面","children":[{"name":"卡片 Card","url":"/zh-cn/components/card","index":100,"group":"表面"},{"name":"折叠框 Collapse","url":"/zh-cn/components/collapse","index":100,"group":"表面"},{"name":"控件组 Fieldset","url":"/zh-cn/components/fieldset","index":100,"group":"表面"}]},{"name":"数据录入","children":[{"name":"按钮组 Button-Group","url":"/zh-cn/components/button-group","index":100,"group":"数据录入"},{"name":"复选框 Checkbox","url":"/zh-cn/components/checkbox","index":100,"group":"数据录入"},{"name":"输入框 Input","url":"/zh-cn/components/input","index":100,"group":"数据录入"},{"name":"单选框 Radio","url":"/zh-cn/components/radio","index":100,"group":"数据录入"},{"name":"选择器 Select","url":"/zh-cn/components/select","index":100,"group":"数据录入"},{"name":"滑动输入 Slider","url":"/zh-cn/components/slider","index":100,"group":"数据录入"},{"name":"文本输入框 Textarea","url":"/zh-cn/components/textarea","index":100,"group":"数据录入"},{"name":"开关 Toggle","url":"/zh-cn/components/toggle","index":100,"group":"数据录入"},{"name":"自动完成 Auto-Complete","url":"/zh-cn/components/auto-complete","index":104,"group":"数据录入"}]},{"name":"数据展示","children":[{"name":"头像 Avatar","url":"/zh-cn/components/avatar","index":100,"group":"数据展示"},{"name":"徽章 Badge","url":"/zh-cn/components/badge","index":100,"group":"数据展示"},{"name":"容量 Capacity","url":"/zh-cn/components/capacity","index":100,"group":"数据展示"},{"name":"描述 Description","url":"/zh-cn/components/description","index":100,"group":"数据展示"},{"name":"陈列框 Display","url":"/zh-cn/components/display","index":100,"group":"数据展示"},{"name":"点 Dot","url":"/zh-cn/components/dot","index":100,"group":"数据展示"},{"name":"文件树 File Tree","url":"/zh-cn/components/file-tree","index":100,"group":"数据展示"},{"name":"图片 Image","url":"/zh-cn/components/image","index":100,"group":"数据展示"},{"name":"键盘 keyboard","url":"/zh-cn/components/keyboard","index":100,"group":"数据展示"},{"name":"气泡卡片 Popover","url":"/zh-cn/components/popover","index":100,"group":"数据展示"},{"name":"表格 Table","url":"/zh-cn/components/table","index":100,"group":"数据展示"},{"name":"标签 Tag","url":"/zh-cn/components/tag","index":100,"group":"数据展示"},{"name":"文字提示 Tooltip","url":"/zh-cn/components/tooltip","index":100,"group":"数据展示"},{"name":"用户 User","url":"/zh-cn/components/user","index":100,"group":"数据展示"}]},{"name":"反馈","children":[{"name":"加载中 Loading","url":"/zh-cn/components/loading","index":100,"group":"反馈"},{"name":"对话框 Modal","url":"/zh-cn/components/modal","index":100,"group":"反馈"},{"name":"提示 Note","url":"/zh-cn/components/note","index":100,"group":"反馈"},{"name":"进度条 Progress","url":"/zh-cn/components/progress","index":100,"group":"反馈"},{"name":"指示器 Spinner","url":"/zh-cn/components/spinner","index":100,"group":"反馈"},{"name":"通知 Toast","url":"/zh-cn/components/toast","index":100,"group":"反馈"}]},{"name":"导航","children":[{"name":"链接 Link","url":"/zh-cn/components/link","index":100,"group":"导航"},{"name":"选项卡 Tabs","url":"/zh-cn/components/tabs","index":100,"group":"导航"},{"name":"下拉按钮 Btn Dropdown","url":"/zh-cn/components/button-dropdown","index":105,"group":"导航"}]},{"name":"其他","children":[{"name":"分割线 Divider","url":"/zh-cn/components/divider","index":100,"group":"其他"},{"name":"片段 Snippet","url":"/zh-cn/components/snippet","index":100,"group":"其他"}]},{"name":"工具包","children":[{"name":"锁定滚动 useBodyScroll","url":"/zh-cn/components/use-body-scroll","index":100,"group":"工具包"},{"name":"点击他处 useClickAway","url":"/zh-cn/components/use-click-away","index":100,"group":"工具包"},{"name":"剪切板 useClipboard","url":"/zh-cn/components/use-clipboard","index":100,"group":"工具包"},{"name":" 当前值 useCurrentState","url":"/zh-cn/components/use-current-state","index":100,"group":"工具包"},{"name":"媒体查询 useMediaQuery","url":"/zh-cn/components/use-media-query","index":100,"group":"工具包"}]}],"localeName":"所有组件"},{"name":"customization","children":[],"localeName":"定制化"}] +[{"name":"guide","children":[{"name":"快速上手","children":[{"name":"什么是 ZEIT UI","url":"/zh-cn/guide/introduction","index":5,"group":"快速上手"},{"name":"安装","url":"/zh-cn/guide/installation","index":10,"group":"快速上手"},{"name":"服务端渲染","url":"/zh-cn/guide/server-render","index":15,"group":"快速上手"}]},{"name":"定制化","children":[{"name":"色彩","url":"/zh-cn/guide/colors","index":100,"group":"定制化"},{"name":"主题","url":"/zh-cn/guide/themes","index":100,"group":"定制化"}]}],"localeName":"上手指南"},{"name":"components","children":[{"name":"通用","children":[{"name":"文本 Text","url":"/zh-cn/components/text","index":10,"group":"通用"},{"name":"按钮 Button","url":"/zh-cn/components/button","index":100,"group":"通用"},{"name":"代码 Code","url":"/zh-cn/components/code","index":100,"group":"通用"},{"name":"图标 Icons","url":"/zh-cn/components/icons","index":100,"group":"通用"}]},{"name":"布局","children":[{"name":"栅格 Grid","url":"/zh-cn/components/grid","index":100,"group":"布局"},{"name":"布局 Layout","url":"/zh-cn/components/layout","index":100,"group":"布局"},{"name":"页面 Page","url":"/zh-cn/components/page","index":100,"group":"布局"},{"name":"间距 Spacer","url":"/zh-cn/components/spacer","index":100,"group":"布局"}]},{"name":"表面","children":[{"name":"卡片 Card","url":"/zh-cn/components/card","index":100,"group":"表面"},{"name":"折叠框 Collapse","url":"/zh-cn/components/collapse","index":100,"group":"表面"},{"name":"控件组 Fieldset","url":"/zh-cn/components/fieldset","index":100,"group":"表面"}]},{"name":"数据录入","children":[{"name":"按钮组 Button-Group","url":"/zh-cn/components/button-group","index":100,"group":"数据录入"},{"name":"复选框 Checkbox","url":"/zh-cn/components/checkbox","index":100,"group":"数据录入"},{"name":"输入框 Input","url":"/zh-cn/components/input","index":100,"group":"数据录入"},{"name":"单选框 Radio","url":"/zh-cn/components/radio","index":100,"group":"数据录入"},{"name":"选择器 Select","url":"/zh-cn/components/select","index":100,"group":"数据录入"},{"name":"滑动输入 Slider","url":"/zh-cn/components/slider","index":100,"group":"数据录入"},{"name":"文本输入框 Textarea","url":"/zh-cn/components/textarea","index":100,"group":"数据录入"},{"name":"开关 Toggle","url":"/zh-cn/components/toggle","index":100,"group":"数据录入"},{"name":"自动完成 Auto-Complete","url":"/zh-cn/components/auto-complete","index":104,"group":"数据录入"}]},{"name":"数据展示","children":[{"name":"头像 Avatar","url":"/zh-cn/components/avatar","index":100,"group":"数据展示"},{"name":"徽章 Badge","url":"/zh-cn/components/badge","index":100,"group":"数据展示"},{"name":"容量 Capacity","url":"/zh-cn/components/capacity","index":100,"group":"数据展示"},{"name":"描述 Description","url":"/zh-cn/components/description","index":100,"group":"数据展示"},{"name":"陈列框 Display","url":"/zh-cn/components/display","index":100,"group":"数据展示"},{"name":"点 Dot","url":"/zh-cn/components/dot","index":100,"group":"数据展示"},{"name":"文件树 File Tree","url":"/zh-cn/components/file-tree","index":100,"group":"数据展示"},{"name":"图片 Image","url":"/zh-cn/components/image","index":100,"group":"数据展示"},{"name":"键盘 keyboard","url":"/zh-cn/components/keyboard","index":100,"group":"数据展示"},{"name":"气泡卡片 Popover","url":"/zh-cn/components/popover","index":100,"group":"数据展示"},{"name":"表格 Table","url":"/zh-cn/components/table","index":100,"group":"数据展示"},{"name":"标签 Tag","url":"/zh-cn/components/tag","index":100,"group":"数据展示"},{"name":"文字提示 Tooltip","url":"/zh-cn/components/tooltip","index":100,"group":"数据展示"},{"name":"用户 User","url":"/zh-cn/components/user","index":100,"group":"数据展示"}]},{"name":"反馈","children":[{"name":"加载中 Loading","url":"/zh-cn/components/loading","index":100,"group":"反馈"},{"name":"对话框 Modal","url":"/zh-cn/components/modal","index":100,"group":"反馈"},{"name":"提示 Note","url":"/zh-cn/components/note","index":100,"group":"反馈"},{"name":"进度条 Progress","url":"/zh-cn/components/progress","index":100,"group":"反馈"},{"name":"指示器 Spinner","url":"/zh-cn/components/spinner","index":100,"group":"反馈"},{"name":"通知 Toast","url":"/zh-cn/components/toast","index":100,"group":"反馈"}]},{"name":"导航","children":[{"name":"面包屑 Breadcrumbs","url":"/zh-cn/components/breadcrumbs","index":100,"group":"导航"},{"name":"链接 Link","url":"/zh-cn/components/link","index":100,"group":"导航"},{"name":"选项卡 Tabs","url":"/zh-cn/components/tabs","index":100,"group":"导航"},{"name":"下拉按钮 Btn Dropdown","url":"/zh-cn/components/button-dropdown","index":105,"group":"导航"}]},{"name":"其他","children":[{"name":"分割线 Divider","url":"/zh-cn/components/divider","index":100,"group":"其他"},{"name":"片段 Snippet","url":"/zh-cn/components/snippet","index":100,"group":"其他"}]},{"name":"工具包","children":[{"name":"锁定滚动 useBodyScroll","url":"/zh-cn/components/use-body-scroll","index":100,"group":"工具包"},{"name":"点击他处 useClickAway","url":"/zh-cn/components/use-click-away","index":100,"group":"工具包"},{"name":"剪切板 useClipboard","url":"/zh-cn/components/use-clipboard","index":100,"group":"工具包"},{"name":" 当前值 useCurrentState","url":"/zh-cn/components/use-current-state","index":100,"group":"工具包"},{"name":"媒体查询 useMediaQuery","url":"/zh-cn/components/use-media-query","index":100,"group":"工具包"}]}],"localeName":"所有组件"},{"name":"customization","children":[],"localeName":"定制化"}] diff --git a/pages/en-us/components/breadcrumbs.mdx b/pages/en-us/components/breadcrumbs.mdx index 248386c7a..ded12ee8d 100644 --- a/pages/en-us/components/breadcrumbs.mdx +++ b/pages/en-us/components/breadcrumbs.mdx @@ -64,10 +64,8 @@ Show where users are in the application. - - Home - : - + Home + : Components Basic Button diff --git a/pages/zh-cn/components/breadcrumbs.mdx b/pages/zh-cn/components/breadcrumbs.mdx index cec2d5922..2fc0dc173 100644 --- a/pages/zh-cn/components/breadcrumbs.mdx +++ b/pages/zh-cn/components/breadcrumbs.mdx @@ -64,10 +64,8 @@ export const meta = { - - Home - : - + Home + : Components Basic Button