顶部栏

概述

带有标题和操作按钮的顶部栏。这会渲染在屏幕顶部。

<native:top-bar title="Dashboard" subtitle="Welcome back">
    <native:top-bar-action
        id="search"
        label="Search"
        icon="search"
        :url="route('search')"
    />
    <native:top-bar-action
        id="settings"
        icon="settings"
        label="Settings"
        url="https://yourapp.com/my-account"
    />
</native:top-bar>

Props

• title - 标题文本（必需）
• show-navigation-icon - 显示返回/菜单按钮（可选，默认：true）
• label - 如果超过 5 个操作，iOS 将显示溢出菜单和分配给每个项目的标签（可选）
• background-color - 背景颜色。十六进制代码（可选）
• text-color - 文本颜色。十六进制代码（可选）
• elevation - 阴影深度 0-24（可选）[Android]

子元素

一个 <native:top-bar> 最多可以包含 10 个 <native:top-bar-action> 元素。这些显示在栏的尾部边缘。

Props

• id - 唯一标识符（必需）
• icon - 命名的图标（必需）
• label - 无障碍标签（可选）
• url - 要在 Web 视图中导航到的 URL（可选）

在 Android 上，前 3 个操作显示为图标按钮；额外的操作折叠到溢出菜单（⋮）中。在 iOS 上，如果提供超过 5 个操作，它们会折叠到溢出菜单中。

<native:top-bar-action> Props

• id - 唯一标识符（必需）
• icon - 命名的图标（必需）
• label - 操作的文本标签。用于无障碍访问并显示在溢出菜单中（可选但推荐）
• url - 点击时要导航到的 URL

提示

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