自定义

默认紧凑

主题颜色

密度

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

字段行间距

字段列间距

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

图标尺寸倍率

图标来源内容比例

通用外观

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

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

圆形进度指示器

CircularProgressIndicator 沿圆形轨道显示确定或不确定进度。

示例

默认

数值动画

8%

不确定进度

参考

结构

高亮显示

元素	部件	选择器
`<div>`	root	`[data-scope="circular-progress-indicator"][data-part="root"]` `left_click鼠标左键`单击复制
`<svg>`	svg	`[data-scope="circular-progress-indicator"][data-part="svg"]` `left_click鼠标左键`单击复制
`<path>`	track条件显示	`[data-scope="circular-progress-indicator"][data-part="track"]` `left_click鼠标左键`单击复制
`<path>`	active-indicator条件显示	`[data-scope="circular-progress-indicator"][data-part="active-indicator"]` `left_click鼠标左键`单击复制

属性

名称	说明	默认值	控件
`indeterminate`可选	Whether the progress value is unknown. `boolean \| undefined`	`false`
`value`可选	Current progress value. `number \| undefined`	`0`
`min`可选	Minimum progress value. `number \| undefined`	`0`
`max`可选	Maximum progress value. `number \| undefined`	`1`
`direction`可选	Direction used to draw the active indicator. `clockwisecounterclockwise`	`"clockwise"`	clockwisecounterclockwise
`shape`可选	Visual shape of the active indicator. `flatwavy`	`"flat"`	flatwavy
`size`可选	CSS length used for the component size. `string \| undefined`	-
`thickness`可选	CSS length used for the track and active indicator thickness. `string \| undefined`	-
`trackGap`可选	CSS length used for the gap between active indicator and track. `string \| undefined`	-
`waveAmplitude`可选	CSS length used for the wavy active indicator amplitude. `string \| undefined`	-
`wavelength`可选	CSS length used for the wavy active indicator wavelength. `string \| undefined`	-
`ariaLabel`可选	Accessible label. `string \| undefined`	-	-
`ariaValueText`可选	Accessible value text. Defaults to a percentage for determinate progress. `string \| undefined`	-	-

样式10

预览

Token	说明
`--md-progress-indicator-color`Color 回退值`var(--md-color-on-container, var(--md-sys-color-primary))`	Shared active indicator color for progress indicators.
`--md-progress-indicator-track-color`Color 回退值`var(--md-color-container, var(--md-sys-color-secondary-container))`	Shared track color for progress indicators.
`--md-circular-progress-indicator-active-indicator-color`Color 回退值`var(--md-progress-indicator-color)`	Active arc color for the circular indicator.
`--md-circular-progress-indicator-track-color`Color 回退值`var(--md-progress-indicator-track-color)`	Track arc color for the circular indicator.
`--md-circular-progress-indicator-size`Layout 回退值`40dp × typography/density scale`	Default size for the circular indicator.
`--md-circular-progress-indicator-with-wave-size`Layout 回退值`48dp × typography/density scale`	Default size when using the wavy shape.
`--md-circular-progress-indicator-track-thickness`Layout 回退值`4dp × typography/density scale`	Stroke thickness for track and active arcs.
`--md-circular-progress-indicator-track-active-indicator-gap`Layout 回退值`4dp × typography/density scale`	Gap between active arc and track arc.
`--md-circular-progress-indicator-wave-amplitude`Wave 回退值`1.6dp × typography/density scale`	Amplitude for the wavy active arc.
`--md-circular-progress-indicator-wave-wavelength`Wave 回退值`15dp × typography/density scale`	Wavelength for the wavy active arc.