# SlideTabs 滑块

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/slide-tabs/freepass)
- 平台：PC
- 维护者：屈正巍
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys/#s47
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[SlideTabs]

## 代码演示

### 基础用法

最简单的滑块标签页.

```jsx
import React from 'react';
import { SlideTabs, Button, constants } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-slide-tabs`;

const datas = [
  { id: '0', content: '标签A', },
  { id: '1', content: '标签B' },
  { id: '2', content: '标签C', },
  { id: '3', content: '标签D' }
]

export default class Main extends React.Component {

  state = {
    value: '0',
    data: datas
  }
  onChange = (value: string) => {
    this.setState({ value: value })
  }

  render() {
    const { data } = this.state;
    return (
      <div className={prefixCls}>
        <SlideTabs
          data={data}
          value={this.state.value}
          onChange={this.onChange}
        />
      </div>
    )
  }
}
```

### 其他属性

可以设置 disabled 禁用 tab ,设置 inline 让所有按钮都一行排列.

```jsx
import React from 'react';
import { SlideTabs, Button, constants } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-slide-tabs`;

const datas = [
  { id: '0', content: '标签A' },
  { id: '1', content: '标签B' },
  { id: '2', content: '标签C', },
  { id: '3', content: '标签D' }
]

const disabledDatas = [
  { id: '0', content: '标签A' },
  { id: '1', content: '标签B' },
  { id: '2', content: '禁用标签1', disabled: true },
  { id: '3', content: '禁用标签2', disabled: true }
]

export default class Main extends React.Component {
  state = {
    valueInline: '0',
    valueDis: '0',
    data: datas
  }

  onChangeInline = (value: string) => {
    this.setState({ valueInline: value })
  }
  onChangeDis = (value: string) => {
    this.setState({ valueDis: value })
  }
  onClickAdd = () => {
    const { data } = this.state;
    data.push({ id: data.length.toString(), content: '随机' })
    this.setState({ data: data });
  }
  onClickSub = () => {
    const { data } = this.state;
    data.pop()
    this.setState({ data: data });
  }
  render() {
    const { data } = this.state;
    return (
      <div className={prefixCls}>
        <Button type={'link'} onClick={this.onClickAdd}>点击增加标签</Button>
        <Button type={'link'} onClick={this.onClickSub}>点击减少标签</Button>

        <div>
          <h3>tab不换行排列</h3>
          <SlideTabs
            data={data}
            value={this.state.valueInline}
            onChange={this.onChangeInline}
            inline={false}
          />
        </div>

        <div>
          <h3>部分禁用</h3>
          <SlideTabs
            data={disabledDatas}
            value={this.state.valueDis}
            onChange={this.onChangeDis}
          />
        </div>

      </div>
    )
  }
}
```

## API

### 参数说明如下：

#### SlideTabs:

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| value | 选中的按钮 | string | 否 |  |
| data | 按钮数据 | SlideTabsItemData[] | 否 |  |
| style | style 样式 | CSSProperties | 否 |  |
| onChange | 按钮切换回调 | (value: string,data:SlideTabsItemData) => void | 否 |  |
| customRender | 自定义渲染 | (_: Component, ele: ReactNode) => ReactNode | 否 |  |
| inline | 是否设置为整行按钮（是否默认宽度 100%） | boolean | 否 | true |
#### SlideTabsItemData:

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| content | 显示的内容 | string | 否 |  |
| disabled | 设置禁用 | boolean | 否 | false |
