SusBtnToggle

互斥（或多选）模式切换器 — 由 Items + Model 驱动的一排按钮。

包

SusKit · 原子（商业）

在 Playground 中打开

SusKit · Atoms

属性

名称	类型	默认值
Model	Prop<string>	""	v-model
Multiple	Prop<bool>	false	v-model
Mandatory	Prop<bool>	true	v-model
Divided	Prop<bool>	true	v-model
Disabled	Prop<bool>	false	v-model
Color	Prop<string>	"primary"	v-model
Variant	Prop<string>	"outlined"	v-model
Size	Prop<string>	"small"	v-model

插槽

没有插槽。

事件

名称	字段	载荷
Change	OnChange	string

样式钩子

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

• sus-btn-toggle
• sus-btn-toggle__btn
• sus-btn-toggle__btn--first
• sus-btn-toggle__btn--last
• sus-btn-toggle__row
• sus-btn-toggle--disabled
• sus-btn-toggle--divided
• sus-btn-toggle--multiple
• sus-button--active
• sus-button--color-danger
• sus-button--color-info
• sus-button--color-secondary
• sus-button--color-success
• sus-button--color-warning

用法

var toggle = new SusBtnToggle();
toggle.Items.Value = new List<SusBtnToggle.BtnToggleItem>
{
    new() { Label = "List", Value = "list", Icon = "list" },
    new() { Label = "Grid", Value = "grid", Icon = "grid" },
    new() { Label = "Map", Value = "map", Icon = "map" },
};
toggle.Model.Value = "list";
toggle.Mandatory.Value = true;
toggle.Divided.Value = true;
toggle.Variant.Value = "outlined";
toggle.Size.Value = "small";
toggle.OnChange += value => { /* … */ };

属性	作用
Items	List<BtnToggleItem> — Label、Value、Icon、Disabled
Model	选中值（单选模式）
Multiple / Selection	多选模式及选中值
Mandatory	保持至少一项被选中
Divided	按钮间的视觉分隔线

变体

elevated · flat · tonal · outlined · text · plain