SusProgressLinear

水平条形进度 —— 确定、缓冲、条纹或不确定。

包

SusKit · 原子（商业）

在 Playground 中打开

SusKit · Atoms

属性

名称	类型	默认值
Value	Prop<float>	0f
Max	Prop<float>	100f
Height	Prop<float>	4f
Color	Prop<string>	"primary"
BgColor	Prop<string>	""
BgOpacity	Prop<float>	1f
BufferValue	Prop<float>	0f
Indeterminate	Prop<bool>	false
Active	Prop<bool>	true
Striped	Prop<bool>	false
Stream	Prop<bool>	false
Reverse	Prop<bool>	false
Absolute	Prop<bool>	false
Clickable	Prop<bool>	false
Rounded	Prop<string>	"md"
RoundedBar	Prop<bool>	false
ChunkCount	Prop<int>	0
ChunkGap	Prop<float>	4f

插槽

名称
（默认）

事件

名称	字段	载荷
ValueChanged	OnValueChanged	float

样式钩子

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

• sus-progress-linear
• sus-progress-linear__background
• sus-progress-linear__buffer
• sus-progress-linear__chunk
• sus-progress-linear__chunk-fill
• sus-progress-linear__chunks
• sus-progress-linear__content
• sus-progress-linear__fill
• sus-progress-linear__indeterminate
• sus-progress-linear__indeterminate-bar
• sus-progress-linear__stream
• sus-progress-linear--absolute
• sus-progress-linear--active
• sus-progress-linear--chunked
• sus-progress-linear--clickable
• sus-progress-linear--color-danger
• sus-progress-linear--color-info
• sus-progress-linear--color-secondary
• sus-progress-linear--color-success
• sus-progress-linear--color-warning
• sus-progress-linear--inactive
• sus-progress-linear--indeterminate
• sus-progress-linear--reverse
• sus-progress-linear--rounded-bar
• sus-progress-linear--stream
• sus-progress-linear--striped

用法

<template>
  <sus:SusProgressLinear :Value="LoadPct.Value"
                         Max="100"
                         Color="primary"
                         Height="6"
                         Rounded="md" />
</template>

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

var bar = new SusProgressLinear();
bar.Value.Value = 40f;
bar.BufferValue.Value = 70f;
bar.Color.Value = "success";
bar.Striped.Value = true;
// Indeterminate: bar.Indeterminate.Value = true;

备注

• BufferValue 绘制第二条轨道（例如已缓冲的媒体）。
• ChunkCount / ChunkGap 将填充部分拆分为多个段。
• 默认插槽叠加在进度条上，用于行内标签。