加载 Loading

加载中的过渡状态

使用

API

安装使用

import { TiLoading } from '@titian-design/mobile-vue'

用法示例

基本使用

codesanbox

copy

code

<template>
  <TiLoading />
</template>

<script lang="ts" setup>
import { TiLoading } from 'titian-h5-vue';
</script>

基本使用

codesanbox

copy

code

<template>
  <TiLoading color="#ff0000" mode="circular" />
  <TiLoading color="#ff0000" mode="spinner" />
  <TiLoading mode="circular" :size="108" />
  <TiLoading mode="spinner" :size="108" />
</template>

<script lang="ts" setup>
import { TiLoading } from 'titian-h5-vue';
</script>

自定义展示模式

loading 支持 circular 和 spinner 两种模式

codesanbox

copy

code

<template>
  <TiLoading mode="circular" />
  <TiLoading mode="spinner" />
</template>

<script lang="ts" setup>
import { TiLoading } from 'titian-h5-vue';
</script>

添加文字

codesanbox

copy

code

<template>
  <TiLoading mode="circular" text="loading...." />
  <TiLoading mode="spinner" text="loading...." />

  <TiLoading color="#ff0000" mode="circular" text="loading...." />
  <TiLoading color="#ff0000" mode="spinner" text="loading...." />
</template>

<script lang="ts" setup>
import { TiLoading } from 'titian-h5-vue';
</script>

TiLoading API

属性 Properties

名称	类型	必填	默认值	说明	备注
text	string	否	-	loading 文字	-
size	string	否	-	loading 尺寸	-
mode	circular | spinner	否	circular	展示模式	-
direction	string	否	-	文字和加载图标的排列方式	-
color	string	否	theme.color.gray.texticon.400	自定义颜色	-

可扩展样式名 External Class

名称	说明	备注
ext-class	根节点可扩展的类名	-

CSS 变量 CSS Variables

变量	默认值	说明	备注
--loading-duration	800ms	动画时长	-
--loading-direction	row	文字和加载图标的排列方式	-
--loading-color	theme.color.gray.texticon.400	主体颜色	-
--loading-width	6px	加载框的宽度	-
--loading-text-color	theme.color.gray.texticon.400	文字颜色	-
--loading-text-padding-v	theme.spacing.vertical.v3	文字垂直方向内间距（垂直模式）	-
	theme.spacing.vertical.v0	文字垂直方向内间距（水平模式）	-
--loading-text-padding-h	theme.spacing.horizontal.h0	文字水平方向内间距（垂直模式）	-
	theme.spacing.horizontal.h2	文字水平方向内间距（水平模式）	-
--loading-wrap-padding-v	6px	-	-
--loading-wrap-padding-h	6px	-	-
--loading-margin	0	-	-
--loading-font-size	theme.fontSize.t6	文字字号	-
--loading-line-height	theme.lineHeight.multiline.t3	文字行高	-
--loading-font-weight	theme.fontWeight.regular	文字字重	-