Navbar 导航栏

为页面提供导航功能，常用于页面顶部。

何时使用

import { HiNavbar } from 'hi-kits/navbar'

基本用法

通过 heading 属性设置导航栏标题。

<h-navbar heading="NavBar"></h-navbar>

Expand Copy Copy

自定义

通过设置slot为left | center | right自定义导航栏内容

Back NavBar

<h-navbar>
    <span slot="left">
        Back
    </span>
    <span slot="center">NavBar</span>
    <span slot="right">
        <h-icon name="search" size="24" color="#3F51B5"></h-icon>
    </span>
</h-navbar>

Expand Copy Copy

改变颜色

Back NavBar

<h-navbar style="background-color: #1E90FF; color: #Fff;">
    <span slot="left">
        Back
    </span>
    <span slot="center">NavBar</span>
    <span slot="right">
        <h-icon name="search" size="24"></h-icon>
        <h-icon name="close" size="24"></h-icon>
    </span>
</h-navbar>

Expand Copy Copy

改变位置

通过fixed属性设置导航栏吸顶

Back NavBar

<h-switch onchange="this.nextElementSibling.fixed = this.checked;"></h-switch>
<h-navbar style="background-color: #1E90FF; color: #Fff;">
    <span slot="left">
        Back
    </span>
    <span slot="center">NavBar</span>
    <span slot="right">
        <h-icon name="search" size="24"></h-icon>
        <h-icon name="close" size="24"></h-icon>
    </span>
</h-navbar>

Expand Copy Copy

参数说明

参数	说明	类型	可选值	默认值
heading	导航栏标题	string	-	-
fixed	是否固定在顶部	boolean	-	false