自定义

默认紧凑

主题颜色

密度

负值会收紧间距，正值会增加间距。

字段行间距

字段列间距

请使用“代码”页签中的示例，将这些间距应用到父级布局。

图标尺寸倍率

图标来源内容比例

通用外观

main.ts

import { createApp } from 'vue';
import { M3VuePlugin } from '@chillet/m3-vue';
import App from './App.vue';
import '@chillet/m3-vue/style.css';
import { defaultPreset } from '@chillet/m3-vue/presets/default';

const app = createApp(App);
app.use(M3VuePlugin, {
  "preset": defaultPreset
});
app.mount('#app');

customization.css

导入的主题已提供这些样式。

面包屑

面包屑用于显示当前页面在导航层级中的位置。

示例

默认

折叠显示

自定义分隔符

Vue Router

使用 @item-click 将条目点击事件接入路由器。

参考

高亮显示

元素	部件	选择器
`<nav>`	root	`[data-scope="breadcrumb"][data-part="root"]` `left_click鼠标左键`单击复制
`<ol>`	list	`[data-scope="breadcrumb"][data-part="list"]` `left_click鼠标左键`单击复制
`<li>`	item	`[data-scope="breadcrumb"][data-part="item"]` `left_click鼠标左键`单击复制
`<span>`	ellipsis条件显示	`[data-scope="breadcrumb"][data-part="ellipsis"]` `left_click鼠标左键`单击复制
`<span>`	separator	`[data-scope="breadcrumb"][data-part="separator"]` `left_click鼠标左键`单击复制

名称	说明	默认值	控件
`ariaLabel`可选	Accessible label for the breadcrumb navigation landmark. `string \| undefined`	`"Breadcrumb"`
`items`可选	Breadcrumb items. The last item is treated as the current page by default. `BreadcrumbItem[] \| undefined`	`[]`	-
`separatorIcon`可选	Material Symbols icon used between items. `string \| undefined`	`"chevron_right"`
`ellipsisLabel`可选	Accessible label for ellipsis items. `string \| undefined`	`"More items"`

名称	类型	说明
`itemClick`	`[event: MouseEvent, item: BreadcrumbItem, index: number]`	-

名称	参数	说明
`default`	-	Fully custom breadcrumb content. When provided, items are not rendered.
`item`	-	Custom item content.
`separator`	-	Custom separator content.
`ellipsis`	-	Custom ellipsis content.

预览

Token	说明
`--md-breadcrumb-current-page-color`Color 回退值`var(--md-color-on-container, var(--md-sys-color-on-surface))`	Controls current page text color.
`--md-breadcrumb-ellipsis-color`Color 回退值`var(--md-color-on-container, var(--md-sys-color-on-surface-variant))`	Controls ellipsis color.
`--md-breadcrumb-item-height`Layout 回退值`--dp(32)`	Controls item height.
`--md-breadcrumb-item-space`Layout 回退值`--dp(4)`	Controls space between items.
`--md-breadcrumb-link-color`Color 回退值`var(--md-color-on-container, var(--md-sys-color-primary))`	Controls link text color.
`--md-breadcrumb-link-padding-inline`Layout 回退值`--dp(8)`	Controls link inline padding.
`--md-breadcrumb-link-shape`Shape 回退值`var(--md-shape-action)`	Controls link shape.
`--md-breadcrumb-separator-color`Color 回退值`var(--md-color-on-container, var(--md-sys-color-on-surface-variant))`	Controls separator color.
`--md-breadcrumb-separator-icon-size`Layout 回退值`Typography, density and icon scale (default reference: --dp(18))`	Controls separator and ellipsis icon size.
`--md-breadcrumb-state-layer-color`Color 回退值`var(--md-state-layer-color, var(--md-breadcrumb-link-color))`	Controls link state layer color.