SusBottomNav

Мобильная / console tab-полоса — ячейки icon + label из Items + Model.

Пакет

SusKit · Молекулы (коммерческий)

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

SusKit · Molecules

Свойства

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

Слоты

Слотов нет.

События

Имя	Поле	Payload
Change	OnChange	string

Хуки стиля

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

• sus-bottom-nav
• sus-bottom-nav__icon
• sus-bottom-nav__item
• sus-bottom-nav__item--active
• sus-bottom-nav__item--disabled
• sus-bottom-nav__item--grow
• sus-bottom-nav__label
• sus-bottom-nav__row
• sus-bottom-nav--disabled
• sus-bottom-nav--grow
• sus-bottom-nav--primary
• sus-bottom-nav--secondary
• sus-bottom-nav--surface

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

Items задаются в коде (List<BottomNavItem>). Каждый элемент несёт Label, Value, опционально Icon / Disabled.

var nav = new SusBottomNav();
nav.Items.Value = new List<SusBottomNav.BottomNavItem>
{
    new() { Label = "Home", Value = "home", Icon = "home" },
    new() { Label = "Party", Value = "party", Icon = "users" },
    new() { Label = "Shop", Value = "shop", Icon = "shop" },
    new() { Label = "Settings", Value = "settings", Icon = "settings" },
};
nav.Model.Value = "home";
nav.Grow.Value = true;
nav.Color.Value = "primary";
nav.OnChange += value => { /* … */ };

<template>
  <sus:SusBottomNav :Model="Tab.Value"
                    Color="primary"
                    :Grow="Grow.Value"
                    @change="OnTab" />
</template>

<script>
public Prop<string> Tab = new("home");
public Prop<bool> Grow = new(true);
void OnTab(string value) { Tab.Value = value; }
// Populate Items in code (same pattern as ChipGroup / Tabs).
</script>

Prop	Role
Items	List<BottomNavItem> — отображаемые ячейки
Model	Выбранное значение
Grow	Растянуть ячейки по всей строке
Color	primary · secondary · surface