---
name: Tabs 标签页
route: /guide/tabs
menu: other
---

import JsxParser from "react-jsx-parser";
import {
  MessageBox,
  InlineCode,
  Example,
  Code,
  PropsTable
} from "theme";
import { Tabs } from "shineDev";
import code from "./demo";
import Demo from "./demo/Demo";
import "./demo/index.scss";

# Tabs 标签页

## 概述

用于分隔内容上有关联但属于不同类别的数据集合。

## 代码示例

<MessageBox messageType="info">
  为了让用户直观地查看代码演示，我们加入了{" "}
  <InlineCode>shine-tabs-helper</InlineCode>{" "}
  修饰符，在开发过程中无需配置该字段。
</MessageBox>

#### 基础示例

基础的、简洁的标签页。

<Example
  display={<JsxParser {...code.basic} />}
  code={{code:code.basic.jsx}}
  components={code.basic.components}
/>

#### Pill 样式

反色样式的标签页。

<Example
  display={<JsxParser {...code.pill} />}
  code={{code:code.pill.jsx}}
  components={code.pill.components}
/>

#### 带图标的标签页

带图标展示的标签页。

<Example
  display={<JsxParser {...code.icon} />}
  code={{code:code.icon.jsx}}
  components={code.icon.components}
/>

#### 自适应宽度标签页

适配部分需要独占整行样式的标签页

<Example
  display={<JsxParser {...code.adjusted} />}
  code={{code:code.adjusted.jsx}}
  components={code.adjusted.components}
/>

#### 受控标签组件

使用受控的方式控制标签页，可以更方便控制不同标签显示的内容。

<Example
  display={<Demo />}
  code={{code:code.controller.jsx}}
  components={code.controller.components}
/>

## 配置参数

#### Tabs
<PropsTable of={Tabs} />

#### Item
<PropsTable of={Tabs.Item} />