/* argus-disable unPkgSensitiveInfo */
import React from 'react';
import Breadcrumb from '../index';
import Popover from '../../popover';
import {
IconMore,
IconArrowRight,
IconHome,
IconArticle,
IconChevronRight,
} from '@douyinfe/semi-icons';
export default {
title: 'Breadcrumb',
}
export const Default = () => (
console.log(item)}
/>
,
href: '#',
},
{
path: '/breadcrumb',
name: 'breadcrumb',
icon: ,
},
'icon',
]}
onClick={item => console.log(item)}
/>
console.log(item)}
separator={'>'}
/>
console.log(item)}
separator={}
/>
console.log(item)}
/>
console.log(item)}
/>
);
export const Compact = () => (
console.log(item)}
compact={true}
/>
,
},
{
path: '/breadcrumb',
name: 'breadcrumb',
icon: ,
},
'icon',
]}
onClick={item => console.log(item)}
compact={true}
/>
console.log(item)}
separator={'>'}
compact={true}
/>
console.log(item)}
separator={}
compact={true}
/>
console.log(item)}
compact={true}
/>
console.log(item)}
compact={true}
/>
);
export const BreadcrumbItemJSX = () => (
console.log(item)}>
console.log('child', item)}>home
breadcrumb
default
console.log(item)}>
}>
breadcrumb
default
'} onClick={item => console.log(item)}>
home
breadcrumb
separator
console.log(item)}>
home
breadcrumb
compact
console.log(item)}>
首页
当这个页面标题很长时需要省略
详情页
console.log(item)}>
首页
当层级很多的时候
又一层很长需要省略的时候
再一层
上上一层
上一层
详情页
);
export const Test = () => (
console.log(item)}>
console.log('child', item)}>home jump
breadcrumb
default
}>
}>
breadcrumb
with icon
);
const separator = '-'; // 用于拼接 restItem 数组项的分隔符
const renderMore = restItem => {
const content = (
<>
{restItem.map((item, idx) => (
{item}
{idx !== restItem.length - 1 && (
{separator}
)}
))}
);
return (
);
};
export const RenderMore = () => (
renderMore(restItem)}
onClick={(item, e) => console.log(item, e)}
>
首页
当层级很多的时候
又一层
再一层
上上一层
上一层
详情页
renderMore(restItem)}
onClick={(item, e) => console.log(item, e)}
routes={[
{
path: '/',
href: '/',
icon: ,
},
{
path: '/breadcrumb',
href: '/components/breadcrumb',
name: 'breadcrumb',
icon: ,
},
{
path: '/breadcrumb',
href: '/components/breadcrumb',
name: 'breadcrumb',
icon: ,
},
{
path: '/breadcrumb',
href: '/components/breadcrumb',
name: 'breadcrumb',
icon: ,
},
'with icon',
]}
/>
);