SusBottomNav

Mobile / console tab strip — icon + label cells driven by Items + Model.

Package

SusKit · Molecules (commercial)

Open in Playground

SusKit · Molecules

Props

Name	Type	Default
Model	Prop<string>	""	v-model
Grow	Prop<bool>	true	v-model
Disabled	Prop<bool>	false	v-model
Color	Prop<string>	"primary"	v-model

Slots

No slots.

Events

Name	Field	Payload
Change	OnChange	string

Style hooks

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

• 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

Usage

Items are set in code (List<BottomNavItem>). Each item carries Label, Value, optional 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> — cells to render
Model	Selected value
Grow	Stretch cells across the row
Color	primary · secondary · surface