Loading 加载

介绍

加载图标，用于表示加载中的过渡状态。

引入

import { Loading } from "@taroify/core"

代码演示

加载类型

通过 type 属性可以设置加载图标的类型，默认为 circular，可选值为 spinner。

<Loading />
<Loading type="spinner" />

自定义颜色

通过 css 设置加载图标的颜色。

<Loading />
<Loading type="spinner" />

.custom-color {
  color: #1989fa;
  
  .taroify-loading__text {
    color: #1989fa;
  }
}

自定义大小

通过 size 属性设置加载图标的大小，默认单位为 px。

<Loading size="24px" />
<Loading type="spinner" size="24px" />

加载文案

可以使用默认插槽在图标的右侧插入加载文案。

<Loading size="24px">加载中...</Loading>

垂直排列

设置 vertical 属性后，图标和文案会垂直排列。

<Loading size="24px" direction="vertical">加载中...</Loading>

自定义文案颜色

通过 css 设置加载文案的颜色。

<!-- 可修改文案和加载图标的颜色 -->
<Loading className="custom-color" />

<!-- 只修改文案颜色 -->
<Loading className="custom-text-color" />

.custom-text-color {
  .taroify-loading__text {
    color: #1989fa;
  }
}

API

Props

参数	说明	类型	默认值
type	类型，可选值为 `spinner`	string	`circular`
size	加载图标大小，默认单位为 `px`	number \| string	`30px`
direction	排列方向，可选值为 `horizontal`	string	`vertical`
children	加载文案	ReactNode	-

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
--loading-color	var(--gray-5)	-
--loading-size	30px $hd*	-
--loading-animation-duration	0.8s	-
--loading-circular-border-width	1px $hd*	-
--loading-text-color	var(--gray-6)	-
--loading-text-font-size	var(--font-size-md)	-
--loading-text-line-height	20px $hd*	-

#Loading 加载

#介绍

#引入

#代码演示

#加载类型

#自定义颜色

#自定义大小

#加载文案

#垂直排列

#自定义文案颜色

#API

#Props

#主题定制

#样式变量