指南组件

Spinner 加载器

用于显示加载状态的组件

sKy
@skiyee
Source 
<template>
  <div class="p-4">
    <SkSpinner />
  </div>
</template>

用法

Variant 变体

Prop类型默认值描述
variant{Variant}circular设置加载器的显示变体
Variant描述
circular圆形旋转
dots点状跳动
<template>
  <div class="p-4 flex items-center justify-center gap-8">
    <SkSpinner variant="circular" />
    <SkSpinner variant="dots" />
  </div>
</template>

Size 尺寸

Prop类型默认值描述
size{Size}medium设置加载器的尺寸大小
Size描述
small小型
medium中型
large大型
<template>
  <div class="p-4 flex gap-8">
    <SkSpinner size="small" />
    <SkSpinner size="medium" />
    <SkSpinner size="large" />
  </div>
</template>

Color 颜色

Prop类型默认值描述
color{Color}current设置加载器的显示颜色
Color描述
current当前色
brand品牌色
success成功色
warning警告色
danger危险色
neutral中性色
<template>
  <div class="p-4 flex gap-4">
    <SkSpinner color="current" />
    <SkSpinner color="brand" />
    <SkSpinner color="danger" />
    <SkSpinner color="warning" />
    <SkSpinner color="success" />
    <SkSpinner color="neutral" />
  </div>
</template>

接口

Props

属性名类型默认值描述
variant{Variant}circular详见 Variant 变体
size{Size}medium详见 Size 尺寸
color{Color}current详见 Color 颜色

交互

正在完善中，敬请期待！😊

点颗星星 打赏项目