自定义

默认紧凑

主题颜色

密度

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

字段行间距

字段列间距

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

图标尺寸倍率

图标来源内容比例

通用外观

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

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

LoadingIndicator

LoadingIndicator 使用形状变化的活动指示器显示短暂等待中的不确定进度。

活动指示器会在 Material 形状路径之间变形。有关来源和许可信息，请参阅 Material Shape Paths。

示例

默认

容器内

尺寸

参考

结构

高亮显示

元素	部件	选择器
`<span>`	root	`[data-scope="loading-indicator"][data-part="root"]` `left_click鼠标左键`单击复制
`<span>`	container	`[data-scope="loading-indicator"][data-part="container"]` `left_click鼠标左键`单击复制
`<svg>`	active-indicator-svg	`[data-scope="loading-indicator"][data-part="active-indicator-svg"]` `left_click鼠标左键`单击复制
`<path>`	active-indicator	`[data-scope="loading-indicator"][data-part="active-indicator"]` `left_click鼠标左键`单击复制

属性

名称	说明	默认值	控件
`variant`可选	Visual configuration of the loading indicator. `uncontainedcontained`	`"uncontained"`	uncontainedcontained
`visible`可选	Whether the loading indicator is visible. Hidden indicators keep their layout space. `boolean \| undefined`	`true`
`indicatorSize`可选	CSS length used for the active indicator size. `string \| undefined`	-
`containerSize`可选	CSS length used for both container dimensions. `string \| undefined`	-
`containerWidth`可选	CSS length used for the container width. `string \| undefined`	-
`containerHeight`可选	CSS length used for the container height. `string \| undefined`	-
`showDelay`可选	Delay in milliseconds before showing after visible becomes true. `number \| undefined`	`0`
`minHideDelay`可选	Minimum visible duration in milliseconds before hiding, capped at 1000ms. `number \| undefined`	`0`
`ariaLabel`可选	Accessible label. `string \| undefined`	-	-

样式7

预览

Token	说明
`--md-loading-indicator-active-indicator-color`Color 回退值`var(--md-color-on-container,var(--md-sys-color-primary))`	Controls active indicator color.
`--md-loading-indicator-active-indicator-size`Layout 回退值`--dp(38)`	Controls active indicator size.
`--md-loading-indicator-contained-active-indicator-color`Color 回退值`var(--md-color-on-container,var(--md-sys-color-on-primary-container))`	Controls contained active indicator color.
`--md-loading-indicator-contained-container-color`Color 回退值`var(--md-color-container,var(--md-sys-color-primary-container))`	Controls contained container color.
`--md-loading-indicator-container-height`Layout 回退值`--dp(48)`	Controls container height.
`--md-loading-indicator-container-shape`Shape 回退值`var(--md-shape-indicator)`	Controls container shape.
`--md-loading-indicator-container-width`Layout 回退值`--dp(48)`	Controls container width.