SusTabs

Полоса tab-навигации — Items + активный Model.

Пакет

SusKit · Атомы (коммерческий)

Открыть в песочнице

SusKit · Atoms

Свойства

Имя	Тип	По умолчанию
Model	Prop<string>	""	v-model
Color	Prop<string>	"primary"	v-model
Align	Prop<string>	"start"	v-model
Direction	Prop<string>	"horizontal"	v-model
Grow	Prop<bool>	false	v-model
SliderVisible	Prop<bool>	true	v-model

Слоты

Имя
(по умолчанию)

События

Имя	Поле	Payload
TabChanged	OnTabChanged	string

Хуки стиля

Контракт USS-классов — внешний вид переопределяется без правки C#. Состояния переключаются этими классами:

• keyboard-focus
• sus-tabs
• sus-tabs__content
• sus-tabs__header
• sus-tabs__slider
• sus-tabs__tab
• sus-tabs__tab--active
• sus-tabs__tab--disabled
• sus-tabs__tab-icon
• sus-tabs__tab-label
• sus-tabs--align-center
• sus-tabs--align-end
• sus-tabs--align-start
• sus-tabs--danger
• sus-tabs--grow
• sus-tabs--primary
• sus-tabs--secondary
• sus-tabs--success
• sus-tabs--vertical

Использование

var tabs = new SusTabs();
tabs.Items.Value = new List<SusTabs.TabItem>
{
    new() { Title = "Overview", Value = "overview", Icon = "house" },
    new() { Title = "Loadout", Value = "loadout", Icon = "backpack" },
    new() { Title = "Stats", Value = "stats", Icon = "chart-bar" },
};
tabs.Model.Value = "overview";
tabs.Color.Value = "primary";
tabs.Align.Value = "start";
tabs.SliderVisible.Value = true;
tabs.OnTabChanged += value => { /* … */ };

Prop	Роль
Items	List<TabItem> — Title, Value, Icon, Disabled
Model	Значение активной вкладки
Align	start · center · end
Direction	horizontal · vertical
Grow	Растягивает вкладки на всю ширину

Заметки

• Слот по умолчанию — хост панели вкладки; переключайте контент через OnTabChanged / Model.