# Navbar 自定义导航

[toc]

当配置 `navigationStyle` 设置为 `custom` 的时，可以使用此组件替代原生导航栏。

## 组件引入

1.  在 `app.json` 中全局引入：

```json
// app.json

{
  "window": {
    "navigationStyle": "custom"
  }
}

```

2.  或在页面 `index.json` 中单独引入：

```json
// index.json

{
  "navigationStyle": "custom"
}
```

## 用法

### [基本设置](#示例：基本设置)

```html
<tea-navbar
  title="CUSTOM NAVBAR"
  back="{{ true }}"
  bind:back="handlerGoback"
></tea-navbar>
```

### [胶囊按钮（返回和首页）](#示例：胶囊按钮（返回和首页）)

```html
<tea-navbar
  title="CUSTOM NAVBAR"
  home="{{ true }}"
  bind:home="handlerGohome"
  back="{{ true }}"
  bind:back="handlerGoback"
></tea-navbar>
```

### [封面模式（沉浸式）](#示例：封面模式（沉浸式）)

```html
<tea-navbar
  title="CUSTOM NAVBAR"
  backgroundColor="transparent"
  back="{{ true }}"
  bind:back="handlerGoback"
  coverMode="{{ true }}"
></tea-navbar>

<map style="width: 100%; height: 100vh;" latitude="{{ latitude }}" longitude="{{ longitude }}"></map>
```

### [深色模式](#示例：深色模式)

```html
<tea-navbar
  title="CUSTOM NAVBAR"
  backgroundColor="#000000"
  textColor="#ffffff"
  back="{{ true }}"
  home="{{ true }}"
  bind:home="handlerGohome"
  bind:back="handlerGoback"
  iconTheme="white"
></tea-navbar>

<map style="width: 100%; height: 100vh;" latitude="{{ latitude }}" longitude="{{ longitude }}"></map>

```

### [完全自定义](#示例：完全自定义)

```html
<tea-navbar backgroundColor="#CCCCCC">
  <image slot="start" src="../../../common/images/home/tea-logo.svg" mode="scaleToFill" width="200" style="width:200px; height:100%;" />
</tea-navbar>

<map style="width: 100%; height: 500px;" latitude="{{ latitude }}" longitude="{{ longitude }}"></map>

<view>
  <tea-button ext-class="m10" bind:click="handlerGoback">返回</tea-button>
</view>
```

## Props

| 参数              | 描述                                                                      | 类型        | 默认值                      | 可选值                  |
| --------------- | ----------------------------------------------------------------------- | --------- | ------------------------ | -------------------- |
| coverMode       | 封面模式，封面模式下APP内容从视窗最顶部渲染。                                                | `Boolean` | `false`                  | `[true, false]`      |
| title           | 导航标题，如果不提供，则名为center的slot有效                                             | `String`  | \`\`                     | -                    |
| back            | 是否展示返回图标                                                                | `Boolean` | `false`                  | -                    |
| delta           | 当back为true时有效，表示navigateBack的delta参数                                    | `Number`  | `1`                      | -                    |
| home            | 是否展示返回首页图标                                                              | `Boolean` | `false`                  | -                    |
| backgroundColor | 导航栏背景颜色                                                                 | `String`  | `rgba(255, 255, 255, 1)` | -                    |
| textColor       | 导航文本颜色                                                                  | `String`  | `rgba(0, 0, 0, 1)`       | -                    |
| textSize        | 导航文本字号                                                                  | `Number`  | `16`                     | -                    |
| iconTheme       | 图标主题色，默认为黑色图标。值设为white时，一定要把navigationBarTextStyle设置为white，否则状态栏文本色为深色。 | `String`  | `black`                  | `["black", "white"]` |

## 事件

| 事件名  | 描述                            |
| ---- | ----------------------------- |
| home | 点击 `home` 图标时触发               |
| back | 点击 `back` 图标时触发，detail包含delta |

## Slots

| 名称     | 描述                                                                                                                                                       |
| ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| start  | LTR模式下，内容填充在导航栏左侧位置，RTL模式下相反。 仅在 `back` 和 `home` 为 `false` 时生效，slot的宽度与 end slot 的宽度一致，适用于自定义开始位置图标场景。<br> 当 `title` 也为空时，slot的宽度为 `auto`，适用于完全自定义导航栏场景。 |
| center | 内容填充在导航栏中间位置，仅在 `title` 为空时生效                                                                                                                            |
| end    | LTR模式下，内容填充在导航栏右侧位置，RTL模式下相反。因为小程序此位置为胶囊导航，所以通常不使用                                                                                                       |

## 外部样式类

| 类名          | 说明       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## 演示

### 示例：基本设置

<div style="margin-top: 20px;"><img src="https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1599555108463_1ygk9wcfbvh392j4i.png" width="400"></div>

### 示例：胶囊按钮（返回和首页）

<div style="margin-top: 20px;"><img src="https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1599555108468_hjhjl1g5hfklc8fr.png" width="400"></div>

### 示例：封面模式（沉浸式）

<div style="margin-top: 20px;"><img src="https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1571668815106_qi04so2h4nhdm42t9.jpg" width="400"></div>

### 示例：深色模式

<div style="margin-top: 20px;"><img src="https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1571668817087_q14i89ydffzgp66r.jpg" width="400"></div>

### 示例：完全自定义

<div style="margin-top: 20px;"><img src="https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1571668802541_t9yus1yz3qv9529.jpg" width="400"></div>