@linkdesign/screen/lib/single-select/README.md

屏组件库，但使用场景又不局限于屏。主要用于BI、大盘和屏

# 单选按钮 SingleSelect

## 使用场景

单选逻辑组件，多用作被集成

- 分组单选、tab切换等



## 预览

![单选按钮 SingleSelect](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/111014/1580715254581-6fa6f614-e858-4a9c-926a-b3255e4e9949.png) 



## 演示

<!--before-content-->

## 基础用法

```js
import { Text } from '@linkdesign/screen';

const { FilterButton } = Text;

class App extends React.Component {
  render() {
    return (
      <>
        <FilterButton
          className="filter-wrapper-row"
          dataSource={['全部', '选项一', '选项二']}
          defaultActiveKey="全部"
        />

        <FilterButton
          className="filter-wrapper-column"
          direction="column"
          align="right"
          defaultActiveKey="all"
          dataSource={[{
            label: '全部',
            value: 'all',
          }, {
            label: '选项一',
            value: 'option1',
          }, {
            label: <span>选项二</span>,
            value: 'option2',
          }]}
        />
      </>
    );
  }
}

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

<!--after-content-->



### API

| 参数名                    | 说明         | 必填 | 类型                                                 | 默认值 | 备注 |
| ------------------------- | ------------ | ---- | ---------------------------------------------------- | ------ | ---- |
| defaultActiveKey          | 位置坐标     | N    | String \| Number                                     | -      |      |
| onChange                  | 切换选择回调 | N    | Function<br />(activeKey: string \| number) => void; | -      |      |
| [dataSource](#dataSource) | 数据源       | Y    | Array                                                | -      |      |
| className                         | 类名         | N    | String                                  | -                                                    |              |
| [textStyle](#textStyle)           | 文本样式     | N    | Object                                  | { fontWeight: 400, fontFamily: 'PingFang SC, Microsoft YaHei, serif'} |              |
| align                             | 对齐方式     | N    | Enum<br />'left' \| 'middle' \| 'right' | 'middle'                                             | 水平排列方式 |
| direction                         | 文字排列方式 | N    | Enum<br />'row' \| 'column'             | 'row'                                                | 垂直排列方式 |

#### dataSource

```typescript
type Data = {
  name: React.ReactNode;
  key?: string;
} | string;

// 数据源
dataSource: Data[];
```

#### textStyle

```typescript
// 文本样式
textStyle?: {
  fontFamily?: string;
  fontSize?: string | number;
  color?: string;
  fontWeight?: string | number;
};
```


## TODO List

- [ ] ......