SusProgressCircular

圆形进度 —— 确定值或不确定的旋转动画。

包

SusKit · 原子（商业）

在 Playground 中打开

SusKit · Atoms

属性

名称	类型	默认值
Value	Prop<float>	0f	v-model
Max	Prop<float>	100f	v-model
Indeterminate	Prop<bool>	false	v-model
Color	Prop<string>	"primary"	v-model
Size	Prop<string>	"md"	v-model
Width	Prop<float>	3f	v-model
Rotate	Prop<float>	-90f	v-model
RotationSpeed	Prop<float>	4f	v-model
LabelText	Prop<string>	""	v-model

插槽

名称
label

事件

没有公开事件。

样式钩子

USS 类契约 — 无需改 C# 即可覆盖外观。状态通过这些类切换：

• sus-progress-circular
• sus-progress-circular__canvas
• sus-progress-circular__content
• sus-progress-circular__label
• sus-progress-circular--danger
• sus-progress-circular--indeterminate
• sus-progress-circular--lg
• sus-progress-circular--md
• sus-progress-circular--primary
• sus-progress-circular--secondary
• sus-progress-circular--sm
• sus-progress-circular--success
• sus-progress-circular--warning
• sus-progress-circular--white
• sus-progress-circular--xl
• sus-progress-circular--xs

用法

<template>
  <sus:SusProgressCircular :Value="LoadPct.Value"
                           Max="100"
                           Color="primary"
                           Size="md"
                           LabelText="42%" />
</template>

<script>
public Prop<float> LoadPct = new(42f);
</script>

var ring = new SusProgressCircular();
ring.Indeterminate.Value = true;
ring.Color.Value = "primary";
ring.Size.Value = "lg";

尺寸

xs · sm · md · lg · xl

备注

• 需要自定义中心内容时，插槽 label 会替代 LabelText。
• Width 是描边粗细；Rotate / RotationSpeed 用于调节不确定态的旋转。