底部导航

概述

一个最多包含 5 个项目的底部导航栏。用于应用的主要导航。

<native:bottom-nav label-visibility="labeled">
    <native:bottom-nav-item
        id="home"
        icon="home"
        label="Home"
        url="/home"
        :active="true"
    />
    <native:bottom-nav-item
        id="profile"
        icon="person"
        label="Profile"
        url="/profile"
        badge="3"
    />
</native:bottom-nav>

Props

• label-visibility - labeled、selected 或 unlabeled（可选，默认：labeled）
• dark - 强制深色模式样式（可选）

子元素

一个 <native:bottom-nav> 最多可以包含 5 个 <native:bottom-nav-item> 元素。

• id - 唯一标识符（必需）
• icon - 命名的图标（必需）
• label - 无障碍标签（必需）
• url - 要在 Web 视图中导航到的 URL（必需）
• active - 将此项高亮为活动状态（可选，默认：false）
• badge - 徽章文本/数字（可选）
• news - 显示"新"指示器点（可选，默认：false）

提示

任何与 Web 视图域名不匹配的 url 都将在用户的默认浏览器中打开。

badge 示例