SusIconRail

Vertical or horizontal strip of circular category / loadout items.

Package

SusKit · Atoms (commercial)

SusKit · Atoms

Props

Name	Type	Default
`Model`	`Prop<string>`	`""`	v-model
`Direction`	`Prop<string>`	`"vertical"`	v-model

Slots

No slots.

Events

Name	Field	Payload
`Changed`	`OnChanged`	`string`

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

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

Usage

csharp

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

Or build Items explicitly:

csharp

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";

Prop	Role
`Items`	`List<RailItem>` — `Label`, `Value`, `Icon`, `Disabled`
`Model`	Selected value
`Direction`	`vertical` \| `horizontal`
`OnChanged`	`Action<string>`

Notes

SetLabels(...) is a shortcut that fills Items with letter labels and index values.
Root layout often needs consumer USS: Sharq scoping can break self-target on .sus-icon-rail.

SusIconRail ​