Customize

DefaultCompact

Theme color

Density

Negative values compress; positive values add space.

Field row gap

Field column gap

Apply these gaps to the parent layout using the example in Code.

Icon size multiplier

Icon source content ratio

Shared appearance

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

The imported theme already provides these styles.

Divider

Dividers separate related content into clear groups.

Section one

Section two

Examples

Default

Account

Preferences

Inset

Vertical

Custom Spacing

Header

Content

Reference

Anatomy

Highlight

Element	Part	Selector
`<div>`	root	`[data-scope="divider"][data-part="root"]` `left_clickLMB`Copy

Props

Name	Description	Default	Control
`orientation`Optional	Direction of the divider line. `horizontalvertical`	`"horizontal"`	horizontalvertical
`inset`Optional	Apply inset spacing on either side of the divider. `nonestartendboth`	`"none"`	nonestartendboth
`thickness`Optional	Line thickness. Such as '1px' or '0.125rem'. `string \| undefined`	`undefined`
`spacing`Optional	Symmetric space around the divider. Such as '0.75rem'. `string \| undefined`	`undefined`

Styling4

Preview

Token	Description
`--md-divider-color`Color Fallback`var(--md-sys-color-outline-variant)`	Controls color.
`--md-divider-inset`Layout Fallback`--dp(16)`	Controls inset.
`--md-divider-spacing`Style Fallback`0`	Controls spacing.
`--md-divider-thickness`Layout Fallback`0.0625rem`	Controls thickness.