帮助用户在应用中导航并理解当前所处的位置。
<flux:breadcrumbs> <flux:breadcrumbs.item href="#">Home</flux:breadcrumbs.item> <flux:breadcrumbs.item href="#">Blog</flux:breadcrumbs.item> <flux:breadcrumbs.item>Post</flux:breadcrumbs.item></flux:breadcrumbs>使用斜杠替代尖括号来分隔面包屑项目。
<flux:breadcrumbs> <flux:breadcrumbs.item href="#" separator="slash">Home</flux:breadcrumbs.item> <flux:breadcrumbs.item href="#" separator="slash">Blog</flux:breadcrumbs.item> <flux:breadcrumbs.item separator="slash">Post</flux:breadcrumbs.item></flux:breadcrumbs>为特定面包屑项目使用图标替代文本。
<flux:breadcrumbs> <flux:breadcrumbs.item href="#" icon="home" /> <flux:breadcrumbs.item href="#">Blog</flux:breadcrumbs.item> <flux:breadcrumbs.item>Post</flux:breadcrumbs.item></flux:breadcrumbs>使用省略号截断较长的面包屑列表。
<flux:breadcrumbs> <flux:breadcrumbs.item href="#" icon="home" /> <flux:breadcrumbs.item icon="ellipsis-horizontal" /> <flux:breadcrumbs.item>Post</flux:breadcrumbs.item></flux:breadcrumbs>将较长的面包屑列表收纳为一个省略号下拉菜单。
<flux:breadcrumbs> <flux:breadcrumbs.item href="#" icon="home" /> <flux:breadcrumbs.item> <flux:dropdown> <flux:button icon="ellipsis-horizontal" variant="ghost" size="sm" /> <flux:navmenu> <flux:navmenu.item>Client</flux:navmenu.item> <flux:navmenu.item icon="arrow-turn-down-right">Team</flux:navmenu.item> <flux:navmenu.item icon="arrow-turn-down-right">User</flux:navmenu.item> </flux:navmenu> </flux:dropdown> </flux:breadcrumbs.item> <flux:breadcrumbs.item>Post</flux:breadcrumbs.item></flux:breadcrumbs>|
属性
|
说明
|
|---|---|
| href |
面包屑项目指向的 URL。若省略，将渲染为不可点击的文本。
|
| icon |
徽标文本前展示的图标名称。
|
| icon:variant |
图标的变体。可选值：outline、solid、mini、micro。默认值：mini。
|
| separator |
作为分隔符展示的图标名称。默认值：chevron-right。
|