代码演示
如何引入
jsx
import { Breadcrumb } from '@kousum/semi-ui-vue';基本用法
0px x 0px
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
1
import { Breadcrumb } from '@kousum/semi-ui-vue';2
3
export default () => (4
<Breadcrumb>5
<Breadcrumb.Item>Semi-ui</Breadcrumb.Item>6
<Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>7
<Breadcrumb.Item>Default</Breadcrumb.Item>8
</Breadcrumb>9
);Show Error
Auto Save
带图标的
支持标题只显示图标或者同时显示图标和文本。
0px x 0px
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
10
1
import { Breadcrumb } from '@kousum/semi-ui-vue';2
import { IconHome, IconArticle } from '@kousum/semi-icons-vue';3
4
export default () => (5
<Breadcrumb>6
<Breadcrumb.Item icon={<IconHome size="small" />}></Breadcrumb.Item>7
<Breadcrumb.Item icon={<IconArticle size="small" />}>Breadcrumb</Breadcrumb.Item>8
<Breadcrumb.Item>With Icon</Breadcrumb.Item>9
</Breadcrumb>10
);Show Error
Auto Save
尺寸
默认为 compact，设置属性为 false 可使图标和文字尺寸增加。
0px x 0px
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
18
1
import { Breadcrumb } from '@kousum/semi-ui-vue';2
import { IconHome } from '@kousum/semi-icons-vue';3
4
export default () => (5
<div>6
<Breadcrumb compact>7
<Breadcrumb.Item icon={<IconHome size="small" />}></Breadcrumb.Item>8
<Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>9
<Breadcrumb.Item>Loose</Breadcrumb.Item>10
</Breadcrumb>11
<br/>12
<Breadcrumb compact={false}>13
<Breadcrumb.Item icon={<IconHome size="small" />}></Breadcrumb.Item>14
<Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>15
<Breadcrumb.Item>Loose</Breadcrumb.Item>16
</Breadcrumb>17
</div>18
);Show Error
Auto Save
自定义的分隔符
默认为 /。
0px x 0px
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
26
1
import { Breadcrumb, Tag } from '@kousum/semi-ui-vue';2
import { IconArrowRight } from '@kousum/semi-icons-vue';3
4
export default () => (5
<div>6
<Breadcrumb separator={'>'}>7
<Breadcrumb.Item>Semi-ui</Breadcrumb.Item>8
<Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>9
<Breadcrumb.Item>Default</Breadcrumb.Item>10
</Breadcrumb>11
<br/>12
<Breadcrumb separator={<IconArrowRight size={'small'} />}>13
<Breadcrumb.Item>Semi-ui</Breadcrumb.Item>14
<Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>15
<Breadcrumb.Item>Default</Breadcrumb.Item>16
</Breadcrumb>17
<br/>18
<Tag>{`v>=1.16.0`}</Tag>19
<br/>20
<Breadcrumb size={'small'} >21
<Breadcrumb.Item separator=":">Semi-ui</Breadcrumb.Item>22
<Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>23
<Breadcrumb.Item>Default</Breadcrumb.Item>24
</Breadcrumb>25
</div>26
);Show Error
Auto Save
截断逻辑
在 0.34.0 版本之后，当级别名字溢出设定宽度后省略截断。可以通过 showTooltip 属性设置相关参数。默认宽度150px，鼠标悬停时显示 Tooltip 完整显示级别名称。
0px x 0px
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
38
1
import { Breadcrumb, Typography } from '@kousum/semi-ui-vue';2
3
export default () => {4
const routes = ['首页', '当这个页面标题很长很长很长时需要省略', '详情页'];5
const { Text } = Typography;6
return (7
<>8
<Text size="small">默认行为</Text>9
<Breadcrumb10
routes={routes}11
/>12
<br/>13
<Text size="small">省略但不显示Tooltip</Text>14
<Breadcrumb15
showTooltip={false}16
routes={routes}17
/>18
<br/>19
<Text size="small">不截断</Text>20
<Breadcrumb21
showTooltip={{ width: 'auto' }}22
routes={routes}23
/>24
<br/>25
<Text size="small">从标题中间开始省略</Text>26
<Breadcrumb27
showTooltip={{ ellipsisPos: 'middle' }}28
routes={routes}29
/>30
<br/>31
<Text size="small">自定义 Tooltip 参数</Text>32
<Breadcrumb33
showTooltip={{ opts: { position: 'topLeft' } }}34
routes={routes}35
/>36
</>37
);38
};Show Error
Auto Save
当路径层级超过 4 个级别，则：第二层至倒数第三层省略，点击省略号展开显示全部级别；如果过长则自动换行。 在 v>=1.9.0 之后，可以通过 maxItemCount 来控制超过多少个级别进行折叠。
0px x 0px
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
13
1
import { Breadcrumb } from '@kousum/semi-ui-vue';2
3
export default () => (4
<Breadcrumb>5
<Breadcrumb.Item>首页</Breadcrumb.Item>6
<Breadcrumb.Item>当层级很多的时候</Breadcrumb.Item>7
<Breadcrumb.Item>又一层</Breadcrumb.Item>8
<Breadcrumb.Item>再一层</Breadcrumb.Item>9
<Breadcrumb.Item>上上一层</Breadcrumb.Item>10
<Breadcrumb.Item>上一层</Breadcrumb.Item>11
<Breadcrumb.Item>详情页</Breadcrumb.Item>12
</Breadcrumb>13
);Show Error
Auto Save
自定义省略号区域
组件内部提供了两种省略号区域渲染的类型，可通过 moreType 来设置，moreType 的可选值为 default 和 popover。
0px x 0px
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
13
1
import { Breadcrumb } from '@kousum/semi-ui-vue';2
3
export default () => (4
<Breadcrumb moreType='popover'>5
<Breadcrumb.Item>首页</Breadcrumb.Item>6
<Breadcrumb.Item>当层级很多的时候</Breadcrumb.Item>7
<Breadcrumb.Item>又一层</Breadcrumb.Item>8
<Breadcrumb.Item>再一层</Breadcrumb.Item>9
<Breadcrumb.Item>上上一层</Breadcrumb.Item>10
<Breadcrumb.Item>上一层</Breadcrumb.Item>11
<Breadcrumb.Item>详情页</Breadcrumb.Item>12
</Breadcrumb>13
);Show Error
Auto Save
如果想要为省略号区域自定义其他形式的渲染，则可以使用 renderMore() 方法。
0px x 0px
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
54
1
import { Breadcrumb, Popover } from '@kousum/semi-ui-vue';2
import { IconMore } from '@kousum/semi-icons-vue';3
import { Fragment } from 'vue';4
5
6
7
function Demo() {8
const separator = '-'; // 用于拼接 restItem 数组项的分隔符9
const renderMore = restItem => {10
const content = (11
<>12
{13
restItem.map((item, idx) => (14
<Fragment key={`restItem-${idx}`}>15
{item}16
{idx !== restItem.length - 1 &&17
<span style={{ color: 'var(--semi-color-text-2)', marginRight: '6px' }}>18
{separator}19
</span>20
}21
</Fragment>22
))23
}24
</>25
);26
return (27
<Popover28
content={content}29
style={{ padding: 12 }}30
showArrow31
>32
<IconMore />33
</Popover>34
);35
};36
return (37
<>38
<Breadcrumb39
renderMore={restItem => renderMore(restItem)}40
onClick={(item, e) => console.log(item, e)}Show Error
Auto Save
路由对象
Breadcrumb 支持通过 routes 传入路由对象 route: { name, path, href, icon } 或字符串组成的数组。可以配合 renderItem 来渲染节点。通过这样实现的 Breadcrumb 同样会进行截断处理。
- name 为展示的名称，不传入时为空字符串。当 route 为字符串时，默认将字符串设置为名称。
- path 为路由路径
- href 为链接目的地，挂载在 a 标签上。
- icon 为标签的显示图标
0px x 0px
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
33
1
import { Breadcrumb } from '@kousum/semi-ui-vue';2
import { IconHome, IconArticle } from '@kousum/semi-icons-vue';3
4
export default () => (5
<div>6
<Breadcrumb7
routes={['Semi-ui', 'Breadcrumb', 'Default']}8
/>9
<br />10
<Breadcrumb11
routes={12
[13
{14
path: '/',15
href: '/',16
icon: <IconHome size="small" />17
},18
{19
path: '/breadcrumb',20
href: '/zh-CN/navigation/breadcrumb',21
name: 'breadcrumb',22
icon: <IconArticle size="small" />23
},24
'with icon'25
]26
}27
/>28
<br />29
<Breadcrumb30
routes={['首页', '当这个页面标题很长时需要省略', '详情页']}31
/>32
</div>33
);Show Error
Auto Save
API 参考
Breadcrumb
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| activeIndex | 受控使用，当前选择的导航序号 | - | 2.61.0 | |
| autoCollapse | 是否超出maxItemCount后自动折叠 | boolean | true | 1.9.0 |
| className | 类名 | string | - | |
| compact | 显示尺寸，是否紧凑 | boolean | true | |
| maxItemCount | 超出多少个进行自动折叠 | number | 4 | 1.9.0 |
| moreType | 内置的...区域的渲染类型，可选值为 'default'、'popover' | string | 'default' | 1.27.0 |
| renderItem | 自定义链接函数，配合 routes 使用 | (Route: Route) => ReactNode | - | 0.27.0 |
| renderMore | 自定义...区域的渲染 | (restItem: ReactNode[]) => ReactNode | - | 1.27.0 |
| routes | router 的路由信息，由路由对象或字符串组成的数组，路由对象格式参考: Route | Array<Route | string> | - | |
| separator | 自定义的分隔符 | ReactNode | '/' | |
| showTooltip | 是否展示 Tooltip 及相关配置: width，溢出宽度； ellipsisPos，截断方式，从中间/末尾截断； opts，透传给Tooltip的属性 | boolean | showToolTipProps | {width: 150, ellipsisPos: 'end', opts: { autoAdjustOverflow: true, position: "bottomLeft" }} | 0.34.0 |
| style | 内联样式 | CSSProperties | - | |
| onClick | 单击事件 | (item: Route , e: Event) => void | - | 0.27.0 |
Breadcrumb.Item
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| href | 链接的目的地 | string | - | |
| icon | 标签的显示图标 | ReactNode | - | |
| onClick | 单击事件 | function(item: Route, e: Event) | - | 0.27.0 |
| separator | 分隔符，可以覆盖父级的分隔符 | ReactNode | - | 1.16.0 |
| noLink | 移除 hover 和 active 的样式 | boolean | false | 1.16.0 |
Route
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| href | 链接目的地 | string | - | 0.27.0 |
| icon | 标签的显示图标 | ReactNode | - | |
| name | 路由名 | string | - | |
| path | 路由路径 | string | - |
v>=1.16.0 之后 Route 支持 Breadcrumb.Item 上的相应属性。
Accessibility
- Breadcrumb 支持传入
aria-label来表示该 Breadcrumb 作用 - Breadcrumb 会对当前项设置
aria-current='page'
文案规范
- 每个页面链接都应该很简短，并且清楚地反映它链接到的位置或链接的实体
- 按句子大小写书写
设计变量
spacing
color
font
animation
other
| 变量 | 默认值 | 用法 |
|---|---|---|
| $spacing-breadcrumb_item_wrap-marginY | $spacing-extra-tight | 面包屑 Item 垂直内边距 |
| $spacing-breadcrumb_item_wrap-marginRight | $spacing-extra-tight | 面包屑 Item 右侧内边距 |
| $spacing-breadcrumb_item-marginRight | $spacing-extra-tight | 面包屑 Item 内容与分割线距离 |
| $spacing-breadcrumb_item_text-marginLeft | $spacing-extra-tight | 面包屑文字左侧外边距 |
| $spacing-breadcrumb_restItem-marginRight | $spacing-tight | 面包屑 restItem 的右侧外边距 |
显示第 1 条-第 5 条，共 5 条
- 1
| 变量 | 默认值 | 用法 |
|---|---|---|
| $color-breadcrumb_default-text-default | var(--semi-color-text-2) | 面包屑文字颜色 - 未选中 |
| $color-breadcrumb_default-text-hover | var(--semi-color-link) | 面包屑文字颜色 - 悬浮 |
| $color-breadcrumb_default-text-active | var(--semi-color-link-hover) | 面包屑文字颜色 - 按下 |
| $color-breadcrumb_active-text-default | var(--semi-color-text-0) | 面包屑文字颜色 - 选中 |
| $color-breadcrumb_active-text-active | var(--semi-color-text-0) | 面包屑文字颜色 - 选中激活 |
| $color-breadcrumb_sepearator_default-icon-default | var(--semi-color-text-2) | 面包屑分割线颜色 |
| $color-breadcrumb-restItem-text-default | var(--semi-color-text-2) | 面包屑 restItem 的分割线颜色 |
显示第 1 条-第 7 条，共 7 条
- 1
| 变量 | 默认值 | 用法 |
|---|---|---|
| $font-breadcrumb_default-fontWeight | $font-weight-regular | 面包屑文字字重 - 未选中 |
| $font-breadcrumb_active-fontWeight | $font-weight-bold | 面包屑文字字重 - 选中 |
| $font-breadcrumb_compact-fontSize | $font-size-small | 面包屑文字大小 - 紧凑 |
| $font-breadcrumb_loose-fontSize | $font-size-regular | 面包屑文字大小 - 宽松 |
显示第 1 条-第 4 条，共 4 条
- 1
| 变量 | 默认值 | 用法 |
|---|---|---|
| $transition_duration-breadcrumb_link-text | var(--semi-transition_duration-none) | 面包屑文字-文字-动画持续时间 |
| $transition_function-breadcrumb_link-text | var(--semi-transition_function-easeIn) | 面包屑文字-文字-过渡曲线 |
| $transition_delay-breadcrumb_link-text | var(--semi-transition_delay-none) | 面包屑文字-文字-延迟时间 |
显示第 1 条-第 3 条，共 3 条
- 1
| 变量 | 默认值 | 用法 |
|---|---|---|
| $transform_scale-breadcrumb_link-text | var(--semi-transform_scale-none) | 面包屑文字-放大 |
显示第 1 条-第 1 条，共 1 条
- 1