侧边导航

概述

支持分组、标题和分隔线的滑出式导航抽屉。

<native:side-nav gestures-enabled="true">
    <native:side-nav-header
        title="My App"
        subtitle="user@example.com"
        icon="person"
    />

    <native:side-nav-item
        id="home"
        label="Home"
        icon="home"
        url="/home"
        :active="true"
    />

    <native:side-nav-group heading="Account" :expanded="false">
        <native:side-nav-item
            id="profile"
            label="Profile"
            icon="person"
            url="/profile"
        />
        <native:side-nav-item
            id="settings"
            label="Settings"
            icon="settings"
            url="/settings"
        />
    </native:side-nav-group>

    <native:horizontal-divider />

    <native:side-nav-item
        id="help"
        label="Help"
        icon="help"
        url="https://help.example.com"
        open-in-browser="true"
    />
</native:side-nav>

Props

• gestures-enabled - 滑动打开（默认：false）[Android]
• dark - 强制深色模式（可选）

提示

在 iOS 上，侧边导航始终启用手势支持。

子元素

<native:side-nav-header>

• title - 标题文本（可选）
• subtitle - 副标题文本（可选）
• icon - 命名的图标（可选）
• background-color - 背景颜色。十六进制代码（可选）
• show-close-button - 显示关闭 ×（可选，默认：true）[Android]
• pinned - 滚动时保持标题可见（可选，默认：false）

<native:side-nav-item>

• id - 唯一标识符（必需）
• label - 显示文本（必需）
• icon - 命名的图标（必需）
• url - 要在 Web 视图中导航到的 URL（必需）
• active - 将此项高亮为活动状态（可选，默认：false）
• badge - 徽章文本（可选）
• badge-color - 十六进制代码或命名颜色（可选）

提示

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

<native:side-nav-group>

• heading - 分组的标题（必需）
• expanded - 初始展开状态（可选，默认：false）
• icon - Material 图标（可选）

<native:horizontal-divider>

在导航项之间添加视觉分隔线。此项没有属性。