SusIconRail

垂直或水平排列的圆形类别 / 配装条目条带。

包

SusKit · 原子（商业）

在 Playground 中打开

SusKit · Atoms

属性

名称	类型	默认值
Model	Prop<string>	""	v-model
Direction	Prop<string>	"vertical"	v-model

插槽

没有插槽。

事件

名称	字段	载荷
Changed	OnChanged	string

样式钩子

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

• sus-icon-rail__icon
• sus-icon-rail__item
• sus-icon-rail__item--active
• sus-icon-rail__item--disabled
• sus-icon-rail__item--h
• sus-icon-rail__label
• sus-icon-rail--horizontal
• sus-icon-rail--vertical

用法

var rail = new SusIconRail();
rail.SetLabels("W", "A", "Q", "M");
rail.Model.Value = "0";
rail.Direction.Value = "vertical";
rail.OnChanged += value => { /* … */ };

或显式构建 Items：

rail.Items.Value = new List<SusIconRail.RailItem>
{
    new() { Label = "W", Value = "weapons", Icon = "sword" },
    new() { Label = "A", Value = "armor", Icon = "shield" },
};
rail.Model.Value = "weapons";

属性	作用
Items	List<RailItem> — Label、Value、Icon、Disabled
Model	选中值
Direction	vertical | horizontal
OnChanged	Action<string>

备注

• SetLabels(...) 是一个快捷方法，用字母标签和索引值填充 Items。
• 根布局通常需要消费方 USS：Sharq 作用域可能会破坏 .sus-icon-rail 上的 self-target。

另请参阅 布局技巧。