---
category: 导航
---

# Tabbar 标签栏

### 介绍

底部导航栏，用于在不同页面之间进行切换。

### 引入

```jsx
import { Tabbar, TabbarItem } from '@ray-js/smart-ui';
```

## 代码演示

### 基础用法

```jsx
import Tornado from '@tuya-miniapp/icons/dist/svg/Tornado';
import Timer from '@tuya-miniapp/icons/dist/svg/Timer';
import Snow from '@tuya-miniapp/icons/dist/svg/Snow';
import Airplane from '@tuya-miniapp/icons/dist/svg/Airplane';
import React from 'react';
import { Tabbar, TabbarItem } from '@ray-js/smart-ui';

export default function Demo() {
  const [active, setActive] = React.useState(0);
  const onChange = e => {
    setActive(e.detail);
  };

  return (
    <Tabbar active={active} safeAreaInsetBottom={false} onChange={onChange}>
      <TabbarItem icon={Tornado}>标签</TabbarItem>
      <TabbarItem icon={Timer}>标签</TabbarItem>
      <TabbarItem icon={Snow}>标签</TabbarItem>
      <TabbarItem icon={Airplane}>标签</TabbarItem>
    </Tabbar>
  );
}
```

### 通过名称匹配

在标签指定`name`属性的情况下，`active`的值为当前标签的`name`。

```jsx
import Tornado from '@tuya-miniapp/icons/dist/svg/Tornado';
import Timer from '@tuya-miniapp/icons/dist/svg/Timer';
import Snow from '@tuya-miniapp/icons/dist/svg/Snow';
import Airplane from '@tuya-miniapp/icons/dist/svg/Airplane';
import React, { useState } from 'react';
import { Tabbar, TabbarItem } from '@ray-js/smart-ui';

export default function Demo() {
  const [active, setActive] = useState('home');
  const onChange = e => {
    setActive(e.detail);
  };
  return (
    <Tabbar active={active} safeAreaInsetBottom={false} onChange={onChange}>
      <TabbarItem name="home" icon={Tornado}>
        标签
      </TabbarItem>
      <TabbarItem name="search" icon={Timer}>
        标签
      </TabbarItem>
      <TabbarItem name="friends" icon={Snow}>
        标签
      </TabbarItem>
      <TabbarItem name="setting" icon={Airplane}>
        标签
      </TabbarItem>
    </Tabbar>
  );
}
```

### 显示徽标

```jsx
import Tornado from '@tuya-miniapp/icons/dist/svg/Tornado';
import Timer from '@tuya-miniapp/icons/dist/svg/Timer';
import Snow from '@tuya-miniapp/icons/dist/svg/Snow';
import Airplane from '@tuya-miniapp/icons/dist/svg/Airplane';
import React, { useState } from 'react';
import { Tabbar, TabbarItem } from '@ray-js/smart-ui';

export default function Demo() {
  const [active, setActive] = useState(0);
  const onChange = e => {
    setActive(e.detail);
  };
  return (
    <Tabbar active={active} safeAreaInsetBottom={false} onChange={onChange}>
      <TabbarItem icon={Tornado}>标签</TabbarItem>
      <TabbarItem icon={Timer} dot>
        标签
      </TabbarItem>
      <TabbarItem icon={Snow} info="5">
        标签
      </TabbarItem>
      <TabbarItem icon={Airplane} info="20">
        标签
      </TabbarItem>
    </Tabbar>
  );
}
```

### 自定义图标

可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标。

```jsx
import Snow from '@tuya-miniapp/icons/dist/svg/Snow';
import Airplane from '@tuya-miniapp/icons/dist/svg/Airplane';

import React, { useState } from 'react';
import { Tabbar, TabbarItem } from '@ray-js/smart-ui';
import { Image } from '@ray-js/ray';

export default function Demo() {
  const [active, setActive] = useState(0);
  const onChange = e => {
    setActive(e.detail);
  };
  const icon = {
    normal: '',
    active: 'https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png',
  };
  return (
    <Tabbar active={active} safeAreaInsetBottom={false} onChange={onChange}>
      <TabbarItem info="3">
        <Image slot="icon" src={icon.normal} mode="aspectFit" style={{ width: 30, height: 18 }} />
        <Image
          slot="icon-active"
          src={icon.active}
          mode="aspectFit"
          style={{ width: 30, height: 18 }}
        />
        自定义
      </TabbarItem>
      <TabbarItem icon={Snow}>标签</TabbarItem>
      <TabbarItem icon={Airplane}>标签</TabbarItem>
    </Tabbar>
  );
}
```

### 自定义颜色

```jsx
import Tornado from '@tuya-miniapp/icons/dist/svg/Tornado';
import Timer from '@tuya-miniapp/icons/dist/svg/Timer';
import Snow from '@tuya-miniapp/icons/dist/svg/Snow';
import Airplane from '@tuya-miniapp/icons/dist/svg/Airplane';

import React, { useState } from 'react';
import { Tabbar, TabbarItem } from '@ray-js/smart-ui';

export default function Demo() {
  const [active, setActive] = useState(0);
  const onChange = e => {
    setActive(e.detail);
  };

  return (
    <Tabbar
      active={active}
      safeAreaInsetBottom={false}
      activeColor="#07c160"
      inactiveColor="rgba(0, 0, 0, 0.3)"
      onChange={onChange}
    >
      <TabbarItem icon={Tornado}>标签</TabbarItem>
      <TabbarItem icon={Timer}>标签</TabbarItem>
      <TabbarItem icon={Snow}>标签</TabbarItem>
      <TabbarItem icon={Airplane}>标签</TabbarItem>
    </Tabbar>
  );
}
```

### 切换标签事件

```jsx
import Tornado from '@tuya-miniapp/icons/dist/svg/Tornado';
import Timer from '@tuya-miniapp/icons/dist/svg/Timer';
import Snow from '@tuya-miniapp/icons/dist/svg/Snow';
import Airplane from '@tuya-miniapp/icons/dist/svg/Airplane';

import React, { useState } from 'react';
import { Tabbar, TabbarItem } from '@ray-js/smart-ui';
import { showToast } from '@ray-js/ray';

export default function Demo() {
  const [active, setActive] = useState(0);
  const handleChange = e => {
    setActive(e.detail);
    showToast({ title: `点击标签 ${e.detail + 1}`, icon: 'none' });
  };

  return (
    <Tabbar active={active} safeAreaInsetBottom={false} onChange={handleChange}>
      <TabbarItem icon={Tornado}>标签1</TabbarItem>
      <TabbarItem icon={Timer}>标签2</TabbarItem>
      <TabbarItem icon={Snow}>标签3</TabbarItem>
      <TabbarItem icon={Airplane}>标签4</TabbarItem>
    </Tabbar>
  );
}
```

### 使用插槽

```jsx
import Tornado from '@tuya-miniapp/icons/dist/svg/Tornado';
import Timer from '@tuya-miniapp/icons/dist/svg/Timer';
import Snow from '@tuya-miniapp/icons/dist/svg/Snow';
import Airplane from '@tuya-miniapp/icons/dist/svg/Airplane';

import React, { useState } from 'react';
import { Tabbar, TabbarItem, Icon } from '@ray-js/smart-ui';
import { showToast, Image } from '@ray-js/ray';
const icon = {
  normal: 'https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png',
};
export default function Demo() {
  const [active, setActive] = useState(0);
  const handleChange = e => {
    setActive(e.detail);
    showToast({ title: `点击标签 ${e.detail + 1}`, icon: 'none' });
  };

  return (
    <Tabbar
      active={active}
      safeAreaInsetBottom={false}
      slot={{
        left: (
          <Image
            src={icon.normal}
            style={{
              height: '40px',
              width: '40px',
              margin: '6px 10px',
            }}
          />
        ),
      }}
      onChange={handleChange}
    >
      <TabbarItem
        slot={{
          icon: <Icon name={Tornado} />,
          iconActive: <Icon name={Tornado} color="red" />,
        }}
      >
        标签1
      </TabbarItem>
      <TabbarItem
        slot={{
          icon: <Icon name={Timer} />,
          iconActive: <Icon name={Timer} color="red" />,
        }}
      >
        标签2
      </TabbarItem>
      <TabbarItem
        slot={{
          icon: <Icon name={Snow} />,
          iconActive: <Icon name={Snow} color="red" />,
        }}
      >
        标签3
      </TabbarItem>
      <TabbarItem
        slot={{
          icon: <Icon name={Airplane} />,
          iconActive: <Icon name={Airplane} color="red" />,
        }}
      >
        标签4
      </TabbarItem>
    </Tabbar>
  );
}
```

### 结合自定义 tabBar

请参考 [智能小程序官方文档](https://developer.tuya.com/cn/miniapp/develop/miniapp/framework/app/app-json#tabbar)

### 上下颠倒 `v2.5.1`

`upsideDown` 属性可以让标签和文案上下颠倒

```jsx
import Tornado from '@tuya-miniapp/icons/dist/svg/Tornado';
import Timer from '@tuya-miniapp/icons/dist/svg/Timer';
import Snow from '@tuya-miniapp/icons/dist/svg/Snow';
import Airplane from '@tuya-miniapp/icons/dist/svg/Airplane';
import React from 'react';
import { Tabbar, TabbarItem } from '@ray-js/smart-ui';

export default function Demo() {
  const [active, setActive] = React.useState(0);
  const onChange = e => {
    setActive(e.detail);
  };

  return (
    <Tabbar upsideDown active={active} safeAreaInsetBottom={false} onChange={onChange}>
      <TabbarItem icon={Tornado}>标签</TabbarItem>
      <TabbarItem icon={Timer}>标签</TabbarItem>
      <TabbarItem icon={Snow}>标签</TabbarItem>
      <TabbarItem icon={Airplane}>标签</TabbarItem>
    </Tabbar>
  );
}
```

## API

### Tabbar Props

| 参数                   | 说明                                               | 类型      | 默认值                                                  |
| ---------------------- | -------------------------------------------------- | --------- | ------------------------------------------------------- |
| active | 当前选中标签的索引 | _number_ | - |
| activeColor | 选中标签的颜色 | _string_ | `--tabbar-item-active-color` \| `--app-M1` \| `#3678e3` |
| border | 是否展示外边框 | _boolean_ | `true` |
| fixed | 是否固定在底部 | _boolean_ | `true` |
| inactiveColor | 未选中标签的颜色 | _string_ | `#7d7e80` |
| placeholder | 固定在底部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` |
| safeAreaInsetBottom | 是否为 iPhoneX 留出底部安全距离 | _boolean_ | `true` |
| zIndex | 元素 z-index | _number_ | `1` |
| upsideDown `v2.5.1` | 上下颠倒 | _boolean_ | `false` |

### Tabbar Slot

| 名称           | 说明                    |
| -------------- | ----------------------- |
| -              | 默认插槽，插入子 tab 页 |
| left `v2.2.0` | tab 左侧的插槽 |
| right `v2.2.0` | tab 右侧的插槽 |

### Tabbar Event

| 事件名      | 说明           | 参数                                     |
| ----------- | -------------- | ---------------------------------------- |
| onChange | 切换标签时触发 | event.detail: 当前选中标签的名称或索引值 |

### TabbarItem Props

| 参数                 | 说明                                                                                                                                         | 类型               | 默认值           |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ---------------- |
| dot | 是否显示小红点 | _boolean_ | - |
| icon | 图标 svg 值或图片链接，可选值见 [Icon 组件](/material/smartui?comId=icon) | _string_ | - |
| iconPrefix | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](/material/smartui?comId=icon#Props) | _string_ | `smart-icon` |
| info | 图标右上角提示信息 | _string \| number_ | - |
| linkType `v1.10.13` | 链接跳转类型，可选值为 `redirectTo`、[`switchTab`](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html)、`reLaunch` | _string_ | `redirectTo` |
| name | 标签名称，作为匹配的标识符 | _string \| number_ | 当前标签的索引值 |
| url `v1.10.13` | 点击后跳转的链接地址, 需要以 `/` 开头 | _string_ | - |
| disabled `v2.3.5` | 是否禁用 | _boolean_ | - |

### TabbarItem Slot

| 名称        | 说明           |
| ----------- | -------------- |
| icon | 未选中时的图标 |
| iconActive | 选中时的图标 |

### TabbarItem Event

| 名称  | 说明                                 |
| ----- | ------------------------------------ |
| click | 点击事件，设置 disabled 时也会有回调 |

### 样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider)。

| 名称                        | 默认值                                 | 描述             |
| --------------------------- | -------------------------------------- | ---------------- |
| --tabbar-height             | _55px_                                 | 标签栏高度       |
| --tabbar-background-color   | _var(--app-B5, #f6f7fb)_               | 标签栏背景颜色   |
| --tabbar-border-color       | _var(--app-B6-N7, rgba(0, 0, 0, 0.1))_ | 标签栏边框颜色   |
| --tabbar-item-font-size     | _12px_                                 | 标签项字体大小   |
| --tabbar-item-text-color    | _var(--app-B6-N5, rgba(0, 0, 0, 0.3))_ | 标签项文本颜色   |
| --tabbar-item-active-color  | _var(--app-M1, #3678e3)_               | 活动状态项目颜色 |
| --tabbar-item-line-height   | _1_                                    | 标签项行高       |
| --tabbar-item-icon-size     | _22px_                                 | 标签项图标大小   |
| --tabbar-item-margin-bottom | _4px_                                  | 标签项下边距     |