Loading 加载
介绍
加载图标,用于表示加载中的过渡状态。
代码演示
自定义颜色
通过 color
属性设置加载图标的颜色。
<z-loading color="#1989fa" />
<z-loading type="spinner" color="#1989fa" />
自定义文案颜色
通过 color
或者 text-color
属性设置加载文案的颜色。
<!-- 可修改文案和加载图标的颜色 -->
<z-loading color="#0094ff" />
<!-- 只修改文案颜色 -->
<z-loading text-color="#0094ff" />
自定义图标
通过 icon
插槽可以自定义加载图标。
<z-loading vertical>
<template #icon>
<z-icon name="undo" size="30" />
</template>
加载中...
</z-loading>
API
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
color | 颜色 | string | #c9c9c9 |
type | 类型,可选值为 spinner | string | circular |
size | 加载图标大小,默认单位为 px | number | string | 60rpx |
text-size | 文字大小,默认单位为 px | number | string | 28rpx |
text-color | 文字颜色 | string | #c9c9c9 |
vertical | 是否垂直排列图标和文字内容 | boolean | false |
Slots
名称 | 说明 |
---|---|
default | 加载文案 |
icon | 自定义加载图标 |
主题定制
样式变量
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
--z-loading-text-color | var(--z-text-color-2) | - |
--z-loading-text-font-size | var(--z-font-size-md) | - |
--z-loading-spinner-color | var(--z-gray-5) | - |
--z-loading-spinner-size | 60rpx | - |
--z-loading-spinner-duration | 0.8s | - |