---
title: 胶囊型选项卡
order: 3
docGenIncludes:
  - src/components/YwTab/index.tsx
---

第三层 tab，同一页 tab 层级嵌套较深的场景

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { YwTab } from '@ywfe/yw-design';
import 'antd/dist/antd.css';
const onChange = () => {};
const dataSource = [
  { tab: '全部', key: 'key1', content: 'Content of Tab Pane 1' },
  { tab: '我的直播', key: 'key2', content: 'Content of Tab Pane 2' },
  { tab: '进行中', key: 'key3', content: 'Content of Tab Pane 3' },
  { tab: '我的审核', key: 'key4', content: 'Content of Tab Pane 4' },
];
class App extends Component {
  render() {
    return (
      <div>
        <YwTab shape="capsule" onChange={onChange} defaultActiveKey='key2' dataSource={dataSource} />
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);
```