自定义

默认紧凑

主题颜色

密度

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

字段行间距

字段列间距

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

图标尺寸倍率

图标来源内容比例

通用外观

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

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

LinearProgressIndicator

LinearProgressIndicator 在水平轨道上显示确定或不确定进度。

示例

默认

数值动画

8%

不确定进度

参考

结构

高亮显示

元素	部件	选择器
`<div>`	root	`[data-scope="linear-progress-indicator"][data-part="root"]` `left_click鼠标左键`单击复制
`<div>`	viewport	`[data-scope="linear-progress-indicator"][data-part="viewport"]` `left_click鼠标左键`单击复制
`<div>`	track	`[data-scope="linear-progress-indicator"][data-part="track"]` `left_click鼠标左键`单击复制
`<div>`	active-indicator	`[data-scope="linear-progress-indicator"][data-part="active-indicator"]` `left_click鼠标左键`单击复制
`<span>`	active-indicator-flat	`[data-scope="linear-progress-indicator"][data-part="active-indicator-flat"]` `left_click鼠标左键`单击复制
`<svg>`	active-indicator-wavy条件显示	`[data-scope="linear-progress-indicator"][data-part="active-indicator-wavy"]` `left_click鼠标左键`单击复制
`<div>`	stop-indicator条件显示	`[data-scope="linear-progress-indicator"][data-part="stop-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`可选	Drawing direction for the visual indicator. `ltrrtl`	`"ltr"`	ltrrtl
`shape`可选	Visual shape of the active indicator. `flatwavy`	`"flat"`	flatwavy
`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`	-
`stopIndicator`可选	Whether to draw the linear stop indicator at the track end. `boolean \| undefined`	`true`
`stopIndicatorSize`可选	CSS length used for the stop indicator size. `string \| undefined`	-
`waveAmplitude`可选	CSS length used for the wavy active indicator amplitude. `string \| undefined`	-
`wavelength`可选	CSS length used for the determinate wavy active indicator wavelength. `string \| undefined`	-
`indeterminateWavelength`可选	CSS length used for the indeterminate wavy active indicator wavelength. `string \| undefined`	-
`ariaLabel`可选	Accessible label. `string \| undefined`	-	-
`ariaValueText`可选	Accessible value text. Defaults to a percentage for determinate progress. `string \| undefined`	-	-

样式14

预览

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-progress-indicator-stop-indicator-color`Color 回退值`var(--md-progress-indicator-color)`	Shared stop indicator color for linear progress.
`--md-linear-progress-indicator-active-indicator-color`Color 回退值`var(--md-progress-indicator-color)`	Active segment color for the linear indicator.
`--md-linear-progress-indicator-track-color`Color 回退值`var(--md-progress-indicator-track-color)`	Track color for the linear indicator.
`--md-linear-progress-indicator-stop-indicator-color`Color 回退值`var(--md-progress-indicator-stop-indicator-color)`	Stop indicator color for determinate linear progress.
`--md-linear-progress-indicator-track-thickness`Layout 回退值`4dp × typography/density scale`	Height of the track and active segment.
`--md-linear-progress-indicator-track-active-indicator-gap`Layout 回退值`4dp × typography/density scale`	Gap between active segment and track in determinate partial state.
`--md-linear-progress-indicator-stop-indicator-size`Layout 回退值`4dp × typography/density scale`	Size of the stop indicator dot.
`--md-linear-progress-indicator-shape`Shape 回退值`var(--md-shape-indicator)`	Corner radius for track, active segment, and stop indicator.
`--md-linear-progress-indicator-wave-amplitude`Wave 回退值`3dp × typography/density scale`	Amplitude for the wavy active segment.
`--md-linear-progress-indicator-wave-wavelength`Wave 回退值`40dp × typography/density scale`	Wavelength for determinate wavy progress.
`--md-linear-progress-indicator-indeterminate-wave-wavelength`Wave 回退值`20dp × typography/density scale`	Wavelength for indeterminate wavy progress.
`--md-linear-progress-indicator-with-wave-height`Wave 回退值`10dp × typography/density scale`	Minimum height when using the wavy shape.