# Tabbar Item 底部导航栏

[toc]

本组件为自定义底部导航栏的子项，可以与`Tabbar`组件结合使用。

## 组件引入

在`app.json`或在页面`index.json`中引入：

```json
{
  "usingComponents": {
    "tea-tabbar-item": "../dist/tabbar-item/index"
  }
}
```

## 用法

参见[Tabbar组件的文档](/mp/packages/tabbar/#用法)

## Props

| 参数            | 描述                                      | 类型              | 默认值     |
| ------------- | --------------------------------------- | --------------- | ------- |
| title         | 此导航栏项的文字                                | `String`        | -       |
| name          | 此导航栏唯一的标志符                              | `String`        | -       |
| icon          | 此导航栏的图标，可选                              | `String`        | -       |
| childIconSize | 此导航栏的图标大小，icon有值才会生效                    | `String,Number` | -       |
| dot           | 是否显示红点                                  | `Boolean`       | `false` |
| info          | 图标右上角提示信息                               | `String,Number` | -       |
| circle        | 显示半圆形的导航栏子项                             | `Boolean`       | `false` |
| circleSize    | 半圆形导航栏子项的大小                             | `String,Number` | `50`    |
| url           | 仅当父组件有route 属性的时候才会生效，表示路由跳转的链接         | `String`        | -       |
| redirect      | 仅当父组件有route 属性的时候才会生效，表示使用wx.redirectTo | `Boolean`       | -       |

## Slots

| 名称     | 描述             |
| ------ | -------------- |
| normal | 导航栏正常状态下的自定义图标 |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名                          | 默认值                         | 描述  |
| ---------------------------- | --------------------------- | --- |
| tabbar-item-background-color | @form-background-base-color | -   |
| tabbar-item-title-margin-top | 2px                         | -   |