自定义

默认紧凑

主题颜色

密度

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

字段行间距

字段列间距

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

图标尺寸倍率

图标来源内容比例

通用外观

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

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

分隔线

分隔线用于将相关内容划分为清晰的组。

分区一

分区二

示例

默认

Account

Preferences

内缩

垂直

自定义间距

Header

Content

参考

结构

高亮显示

元素	部件	选择器
`<div>`	root	`[data-scope="divider"][data-part="root"]` `left_click鼠标左键`单击复制

属性

名称	说明	默认值	控件
`orientation`可选	Direction of the divider line. `horizontalvertical`	`"horizontal"`	horizontalvertical
`inset`可选	Apply inset spacing on either side of the divider. `nonestartendboth`	`"none"`	nonestartendboth
`thickness`可选	Line thickness. Such as '1px' or '0.125rem'. `string \| undefined`	`undefined`
`spacing`可选	Symmetric space around the divider. Such as '0.75rem'. `string \| undefined`	`undefined`

样式4

预览

Token	说明
`--md-divider-color`Color 回退值`var(--md-sys-color-outline-variant)`	Controls color.
`--md-divider-inset`Layout 回退值`--dp(16)`	Controls inset.
`--md-divider-spacing`Style 回退值`0`	Controls spacing.
`--md-divider-thickness`Layout 回退值`0.0625rem`	Controls thickness.