SusBottomNav

移动端 / 主机风格标签条 —— 由 Items + Model 驱动的图标 + 标签单元格。

包

SusKit · 分子（商业）

在 Playground 中打开

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

插槽

没有插槽。

事件

名称	字段	载荷
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