Taroify

介绍

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

引入

import { Navbar } from "@taroify/core"
// or
import Navbar from "@taroify/core/navbar"

代码演示

基础用法

<Navbar title="标题">
  <Navbar.NavLeft>返回</Navbar.NavLeft>
  <Navbar.NavRight>按钮</Navbar.NavRight>
</Navbar>

使用 NavLeft 和 NavRight

<Navbar>
  <Navbar.NavLeft>返回</Navbar.NavLeft>
  <Navbar.Title>标题</Navbar.Title>
  <Navbar.NavRight icon={<Search />} />
</Navbar>

API

参数	说明	类型	默认值
title	标题	string	`''`
bordered	是否显示下边框	boolean	`true`
fixed	是否固定在顶部	boolean	`false`
safeArea	安全区域，可选值 `top` `bottom`	string	-
placeholder	固定在顶部时，是否在标签位置生成一个等高的占位元素	boolean	`false`

Navbar.NavLeft Props

参数	说明	类型	默认值
icon	左侧图标	Icon	-
children	左侧文案	ReactNode	-

Navbar.NavRight Props

参数	说明	类型	默认值
icon	右侧图标	Icon	-
children	右侧文案	ReactNode	-

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
—navbar-z-index	1	-
—navbar-height	46px $hd*	-
—navbar-line-height	var(—line-height-lg)	-
—navbar-background-color	var(—white)	-
—navbar-icon-margin-right	var(—padding-base)	-
—navbar-icon-font-size	16px $hd*	-
—navbar-icon-color	var(—blue)	-
—navbar-text-color	var(—blue)	-
—navbar-title-font-size	var(—font-size-lg)	-
—navbar-title-font-weight	var(—font-weight-bold)	-
—navbar-title-color	var(—text-color)	-