diff --git a/src/components/Breadcrumbs/README.OLD.md b/src/components/Breadcrumbs/README.OLD.md new file mode 100644 index 0000000000..84e7bdc179 --- /dev/null +++ b/src/components/Breadcrumbs/README.OLD.md @@ -0,0 +1,43 @@ +## Breadcrumbs + +Breadcrumbs component. Can collapse breadcrumbs that cause overflow. + +### PropTypes + +| Name | Type | Required | Default | Description | +| :----------------------- | :--------- | :------: | :------ | :--------------------------------------------------------------------------------------------------------------------------- | +| items | `Array` | ✓ | | Breadcrumb items array `BreadcrumbsItem[]` | +| className | `String` | | | CSS class name of root element | +| renderRootContent | `Function` | | | Custom render function of first item `(item: BreadcrumbsItem, isCurrent: boolean) => React.ReactNode;`) | +| renderItemContent | `Function` | | | Custom render function of N+1 item `(item: BreadcrumbsItem, isCurrent: boolean, isPrevCurrent: boolean) => React.ReactNode;` | +| renderItemDivider | `Function` | | | Custom render function of items separator `() => React.ReactNode;` | +| lastDisplayedItemsCount | `Enum` | ✓ | | Number of items to display after items collapse control: `LastDisplayedItemsCount` | +| firstDisplayedItemsCount | `Enum` | ✓ | | Number of items to display before items collapse control: `FirstDisplayedItemsCount` | +| popupStyle | `String` | | | Style of collapsed items popup `staircase` | + +### Examples + +```jsx +const breadcrumbs = [ + { + title: 'What is love', + }, + { + title: "Baby don't hurt me", + }, + { + title: "Don't hurt me", + }, + { + title: 'No more', + }, +]; + +return ( + +); +``` diff --git a/src/components/Breadcrumbs/README.md b/src/components/Breadcrumbs/README.md index 84e7bdc179..ee5fa8e160 100644 --- a/src/components/Breadcrumbs/README.md +++ b/src/components/Breadcrumbs/README.md @@ -1,43 +1,110 @@ -## Breadcrumbs + -Breadcrumbs component. Can collapse breadcrumbs that cause overflow. +# Breadcrumbs -### PropTypes + -| Name | Type | Required | Default | Description | -| :----------------------- | :--------- | :------: | :------ | :--------------------------------------------------------------------------------------------------------------------------- | -| items | `Array` | ✓ | | Breadcrumb items array `BreadcrumbsItem[]` | -| className | `String` | | | CSS class name of root element | -| renderRootContent | `Function` | | | Custom render function of first item `(item: BreadcrumbsItem, isCurrent: boolean) => React.ReactNode;`) | -| renderItemContent | `Function` | | | Custom render function of N+1 item `(item: BreadcrumbsItem, isCurrent: boolean, isPrevCurrent: boolean) => React.ReactNode;` | -| renderItemDivider | `Function` | | | Custom render function of items separator `() => React.ReactNode;` | -| lastDisplayedItemsCount | `Enum` | ✓ | | Number of items to display after items collapse control: `LastDisplayedItemsCount` | -| firstDisplayedItemsCount | `Enum` | ✓ | | Number of items to display before items collapse control: `FirstDisplayedItemsCount` | -| popupStyle | `String` | | | Style of collapsed items popup `staircase` | +```tsx +import {Breadcrumbs} from '@gravity-ui/uikit'; +``` + +`Breadcrumbs` can collapse breadcrumbs that cause overflow. + +## Appearance + + -### Examples + ```jsx const breadcrumbs = [ { - title: 'What is love', + text: 'Region', }, { - title: "Baby don't hurt me", + text: 'Country', }, { - title: "Don't hurt me", + text: 'City', }, { - title: 'No more', + text: 'District', + }, + { + text: 'Street', }, ]; return ( ); ``` + + + +## Properties + +| Name | Description | Type | Default | +| :----------------------- | :--------------------------------------------------------------------------------------------------------------------------- | :--------- | :------ | +| items | Breadcrumb items array `BreadcrumbsItem[]` | `Array` | | +| className | CSS class name of root element | `String` | | +| renderRootContent | Custom render function of first item `(item: BreadcrumbsItem, isCurrent: boolean) => React.ReactNode;`) | `Function` | | +| renderItemContent | Custom render function of N+1 item `(item: BreadcrumbsItem, isCurrent: boolean, isPrevCurrent: boolean) => React.ReactNode;` | `Function` | | +| renderItemDivider | Custom render function of items separator `() => React.ReactNode;` | `Function` | | +| firstDisplayedItemsCount | Number of items to display before items collapse control: `FirstDisplayedItemsCount` | `Enum` | | +| lastDisplayedItemsCount | Number of items to display after items collapse control: `LastDisplayedItemsCount` | `Enum` | | +| popupStyle | Style of collapsed items popup `staircase` | `String` | |