You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
341 lines
24 KiB
341 lines
24 KiB
1 year ago
|
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[9653],{17343:function(p,i,t){t.r(i);var _=t(502143),b=t(968521),h=t(720719),g=t(28840),o=t(759907),a=t(828089),Z=t(825673),v=t(902068),f=t(574399),x=t(863942),k=t(316073),E=t(24628),y=t(719260),P=t(956140),c=t(127179),s=t(905388),D=t(40428),w=t(606965),A=t(268696),L=t(587302),r=t(424128),O=t(249706),T=t(795127),M=t(116846),C=t(212039),I=t(73024),B=t(553913),l=t(606641),d=t(667294),e=t(370917);function u(){var m=(0,l.eL)(),n=m.texts;return(0,e.tZ)(l.dY,null,(0,e.tZ)(d.Fragment,null,(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("p",null,n[0].value),(0,e.tZ)("h2",{id:"when-to-use"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#when-to-use",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"When To Use"),(0,e.tZ)("ul",null,(0,e.tZ)("li",null,n[1].value),(0,e.tZ)("li",null,n[2].value),(0,e.tZ)("li",null,n[3].value)),(0,e.tZ)(o.Z,{lang:"jsx"},n[4].value),(0,e.tZ)("h2",{id:"examples"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,e.tZ)(s.Z,{items:[{demo:{id:"components-breadcrumb-demo-basic"},previewerProps:{title:"Basic Usage",filename:"components/breadcrumb/demo/basic.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Breadcrumb } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<Breadcrumb
|
||
|
|
items={[
|
||
|
|
{
|
||
|
|
title: 'Home',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: <a href="">Application Center</a>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: <a href="">Application List</a>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'An Application',
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>The simplest use.</p>"}},{demo:{id:"components-breadcrumb-demo-withicon"},previewerProps:{title:"With an Icon",filename:"components/breadcrumb/demo/withIcon.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { HomeOutlined, UserOutlined } from '@ant-design/icons';
|
||
|
|
import { Breadcrumb } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const App = () => (
|
||
|
|
<Breadcrumb
|
||
|
|
items={[
|
||
|
|
{
|
||
|
|
href: '',
|
||
|
|
title: <HomeOutlined />,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
href: '',
|
||
|
|
title: (
|
||
|
|
<>
|
||
|
|
<UserOutlined />
|
||
|
|
<span>Application List</span>
|
||
|
|
</>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Application',
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>The icon should be placed in front of the text.</p>"}},{demo:{id:"components-breadcrumb-demo-react-router"},previewerProps:{iframe:"200",title:"react-router V6",filename:"components/breadcrumb/demo/react-router.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Alert, Breadcrumb } from 'antd';
|
||
|
|
import { HashRouter, Link, Route, Routes, useLocation } from 'react-router-dom';
|
||
|
|
const Apps = () => (
|
||
|
|
<ul className="app-list">
|
||
|
|
<li>
|
||
|
|
<Link to="/apps/1">Application1</Link>\uFF1A<Link to="/apps/1/detail">Detail</Link>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<Link to="/apps/2">Application2</Link>\uFF1A<Link to="/apps/2/detail">Detail</Link>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
);
|
||
|
|
const breadcrumbNameMap = {
|
||
|
|
'/apps': 'Application List',
|
||
|
|
'/apps/1': 'Application1',
|
||
|
|
'/apps/2': 'Application2',
|
||
|
|
'/apps/1/detail': 'Detail',
|
||
|
|
'/apps/2/detail': 'Detail',
|
||
|
|
};
|
||
|
|
const Home = () => {
|
||
|
|
const location = useLocation();
|
||
|
|
const pathSnippets = location.pathname.split('/').filter((i) => i);
|
||
|
|
const extraBreadcrumbItems = pathSnippets.map((_, index) => {
|
||
|
|
const url = \`/\${pathSnippets.slice(0, index + 1).join('/')}\`;
|
||
|
|
return {
|
||
|
|
key: url,
|
||
|
|
title: <Link to={url}>{breadcrumbNameMap[url]}</Link>,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
const breadcrumbItems = [
|
||
|
|
{
|
||
|
|
title: <Link to="/">Home</Link>,
|
||
|
|
key: 'home',
|
||
|
|
},
|
||
|
|
].concat(extraBreadcrumbItems);
|
||
|
|
return (
|
||
|
|
<div className="demo">
|
||
|
|
<div className="demo-nav">
|
||
|
|
<Link to="/">Home</Link>
|
||
|
|
<Link to="/apps">Application List</Link>
|
||
|
|
</div>
|
||
|
|
<Routes>
|
||
|
|
<Route path="/apps" element={<Apps />} />
|
||
|
|
<Route path="*" element={<span>Home Page</span>} />
|
||
|
|
</Routes>
|
||
|
|
<Alert
|
||
|
|
style={{
|
||
|
|
margin: '16px 0',
|
||
|
|
}}
|
||
|
|
message="Click the navigation above to switch:"
|
||
|
|
/>
|
||
|
|
<Breadcrumb items={breadcrumbItems} />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
const App = () => (
|
||
|
|
<HashRouter>
|
||
|
|
<Home />
|
||
|
|
</HashRouter>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Used together with <code>react-router@6+</code>.</p>",style:`.demo {
|
||
|
|
margin: 16px;
|
||
|
|
}
|
||
|
|
.demo-nav {
|
||
|
|
height: 30px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
line-height: 30px;
|
||
|
|
background: #f8f8f8;
|
||
|
|
}
|
||
|
|
.demo-nav a {
|
||
|
|
padding: 0 8px;
|
||
|
|
line-height: 30px;
|
||
|
|
}
|
||
|
|
.app-list {
|
||
|
|
margin-top: 16px;
|
||
|
|
}`}},{demo:{id:"components-breadcrumb-demo-separator"},previewerProps:{title:"Configuring the Separator",filename:"components/breadcrumb/demo/separator.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Breadcrumb } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<Breadcrumb
|
||
|
|
separator=">"
|
||
|
|
items={[
|
||
|
|
{
|
||
|
|
title: 'Home',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Application Center',
|
||
|
|
href: '',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Application List',
|
||
|
|
href: '',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'An Application',
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:'<p>The separator can be customized by setting the separator property: <code>separator=">"</code>.</p>'}},{demo:{id:"components-breadcrumb-demo-overlay"},previewerProps:{title:"Bread crumbs with drop down menu",filename:"components/breadcrumb/demo/overlay.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Breadcrumb } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const menuItems = [
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
label: (
|
||
|
|
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
|
||
|
|
General
|
||
|
|
</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '2',
|
||
|
|
label: (
|
||
|
|
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
|
||
|
|
Layout
|
||
|
|
</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '3',
|
||
|
|
label: (
|
||
|
|
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
|
||
|
|
Navigation
|
||
|
|
</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const App = () => (
|
||
|
|
<Breadcrumb
|
||
|
|
items={[
|
||
|
|
{
|
||
|
|
title: 'Ant Design',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: <a href="">Component</a>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: <a href="">General</a>,
|
||
|
|
menu: {
|
||
|
|
items: menuItems,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Button',
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Breadcrumbs support drop down menu.</p>"}},{demo:{id:"components-breadcrumb-demo-separator-component"},previewerProps:{title:"Configuring the Separator Independently",filename:"components/breadcrumb/demo/separator-component.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Breadcrumb } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const App = () => (
|
||
|
|
<Breadcrumb
|
||
|
|
separator=""
|
||
|
|
items={[
|
||
|
|
{
|
||
|
|
title: 'Location',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'separator',
|
||
|
|
separator: ':',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
href: '',
|
||
|
|
title: 'Application Center',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'separator',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
href: '',
|
||
|
|
title: 'Application List',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'separator',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'An Application',
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Customize separator for each other.</p>"}},{demo:{id:"components-breadcrumb-demo-debug-routes"},previewerProps:{title:"Debug Routes",filename:"components/breadcrumb/demo/debug-routes.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Breadcrumb } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
export default () => (
|
||
|
|
<Breadcrumb
|
||
|
|
routes={[
|
||
|
|
{
|
||
|
|
path: '/home',
|
||
|
|
breadcrumbName: 'Home',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
path: '/user',
|
||
|
|
breadcrumbName: 'User',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
path: '/user1',
|
||
|
|
breadcrumbName: 'User1',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
path: '/user2',
|
||
|
|
breadcrumbName: 'User2',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
`,description:"<p>Origin <code>routes</code> debug.</p>"}},{demo:{id:"components-breadcrumb-demo-component-token"},previewerProps:{debug:!0,title:"Component Token",filename:"components/breadcrumb/demo/component-token.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { HomeOutlined, UserOutlined } from '@ant-design/icons';
|
||
|
|
import { Breadcrumb, ConfigProvider } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const menuItems = [
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
label: (
|
||
|
|
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
|
||
|
|
General
|
||
|
|
</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '2',
|
||
|
|
label: (
|
||
|
|
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
|
||
|
|
Layout
|
||
|
|
</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '3',
|
||
|
|
label: (
|
||
|
|
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
|
||
|
|
Navigation
|
||
|
|
</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
export default () => (
|
||
|
|
<ConfigProvider
|
||
|
|
theme={{
|
||
|
|
components: {
|
||
|
|
Breadcrumb: {
|
||
|
|
itemColor: '#b02121',
|
||
|
|
lastItemColor: '#0f3a88',
|
||
|
|
iconFontSize: 28,
|
||
|
|
linkColor: '#979a42',
|
||
|
|
linkHoverColor: '#9450c0',
|
||
|
|
separatorColor: '#b41b60',
|
||
|
|
separatorMargin: 22,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Breadcrumb
|
||
|
|
separator=">"
|
||
|
|
items={[
|
||
|
|
{
|
||
|
|
title: 'Home',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: <a href="">Application Center</a>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: <a href="">General</a>,
|
||
|
|
menu: {
|
||
|
|
items: menuItems,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Application Center',
|
||
|
|
href: '',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
href: '',
|
||
|
|
title: <HomeOutlined />,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
href: '',
|
||
|
|
title: (
|
||
|
|
<>
|
||
|
|
<UserOutlined />
|
||
|
|
<span>Application List</span>
|
||
|
|
</>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</ConfigProvider>
|
||
|
|
);
|
||
|
|
`,description:"<p>Component Token Debug.</p>"}}]}),(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("h2",{id:"api"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"API"),(0,e.tZ)("h3",{id:"breadcrumb"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#breadcrumb",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Breadcrumb"),(0,e.tZ)(a.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[5].value),(0,e.tZ)("th",null,n[6].value),(0,e.tZ)("th",null,n[7].value),(0,e.tZ)("th",null,n[8].value),(0,e.tZ)("th",null,n[9].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[10].value),(0,e.tZ)("td",null,n[11].value),(0,e.tZ)("td",null,n[12].value),(0,e.tZ)("td",null,n[13].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[14].value),(0,e.tZ)("td",null,n[15].value),(0,e.tZ)("td",null,n[16].value),(0,e.tZ)("td",null,n[17].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[18].value),(0,e.tZ)("td",null,n[19].value),(0,e.tZ)("td",null,(0,e.tZ)(r.Z,{to:"#ItemType",sourceType:"Link"},n[20].value)),(0,e.tZ)("td",null,n[21].value),(0,e.tZ)("td",null,n[22].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[23].value),(0,e.tZ)("td",null,n[24].value),(0,e.tZ)("td",null,n[25].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[26].value)),(0,e.tZ)("td",null)))),(0,e.tZ)("h3",{id:"itemtype"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#itemtype",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"ItemType"),(0,e.tZ)("blockquote",null,(0,e.tZ)("p",null,n[27].value,(0,e.tZ)(r.Z,{to:"#RouteItemType",sourceType:"Link"},n[28].value),n[29].value,(0,e.tZ)(r.Z,{to:"#SeparatorType",sourceType:"Link"},n[30].value))),(0,e.tZ)("h3",{id:"routeitemtype"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#routeitemtype",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"RouteItemType"),(0,e.tZ)(a.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[31].value),(0,e.tZ)("th",null,n[32].value),(0,e.tZ)("th",null,n[33].value),(0,e.tZ)("th",null,n[34].value),(0,e.tZ)("th",null,n[35].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[36].value),(0,e.tZ)("td",null,n[37].value),(0,e.tZ)("td",null,n[38].value),(0,e.tZ)("td",null,n[39].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[40].value),(0,e.tZ)("td",null,n[41].value),(0,e.tZ)("td",null,(0,e.tZ)(r.Z,{to:"/components/dropdown",sourceType:"Link"},n[42].value)),(0,e.tZ)("td",null,n[43].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[44].value),(0,e.tZ)("td",null,n[45].value,(0,e.tZ)("code",null,n[46].value)),(0,e.tZ)("td",null,n[47].value),(0,e.tZ)("td",null,n[48].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[49].value),(0,e.tZ)("td",null,n[50].value,(0,e.tZ)("code",null,n[51].value)),(0,e.tZ)("td",null,n[52].value),(0,e.tZ)("td",null,n[53].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[54].value),(0,e.tZ)("td",null,n[55].value),(0,e.tZ)("td",null,(0,e.tZ)(r.Z,{to:"/components/menu/#api",sourceType:"Link"},n[56].value)),(0,e.tZ)("td",null,n[57].value),(0,e.tZ)("td",null,n[58].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[59].value),(0,e.tZ)("td",null,n[60].value),(0,e.tZ)("td",null,n[61].value),(0,e.tZ)("td",null,n[62].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[63].value),(0,e.tZ)("td",null,n[64].value),(0,e.tZ)("td",null,n[65].value),(0,e.tZ)("td",null,n[66].value),(0,e.tZ)("td",null)))),(0,e.tZ)("h3",{id:"separatortype"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#separatortype",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"SeparatorType"),(0,e.tZ)(o.Z,{lang:"ts"},n[67].value),(0,e.tZ)(a.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[68].value),(0,e.tZ)("th",null,n[69].value),(0,e.tZ)("th",null,n[70].value),(0,e.tZ)("th",null,n[71].value
|