# 子屏标题 SubscreenTitle

## 使用场景

子屏标题

## 预览

![子屏标题 SubscreenTitle](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/111014/1583127587360-86883123-4bc3-4833-9ab3-f7116b45ff39.png)

## 演示

<!--before-content-->

## 基础用法

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

const { SubscreenTitle } = Text;
const header = {
 backgroundColor: "#1f3b6d",
  display: "flex",
  alignItem: "center",
  height: 56,
};

class App extends React.Component {
  render() {
    return (
      <div data-theme="dark" style={header}>
        <SubscreenTitle
          onChange={(key) => { console.log(key); }}
          dataSource={['概览统计', '实时事件', '设备感知']}
          defaultActiveKey="设备感知"
        />
      </div>
    );
  }
}

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

<!--after-content-->

### API

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

#### dataSource

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

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

#### universalStyle

```typescript
// 通用样式
universalStyle?: {
  width?: string | number;
  height?: string | number;
  position?: {
    x: string | number;
    y: string | number;
  };
  rotation?: number;
  opacity?: number;
  backgroundColor?: string;
};
```

#### textStyle

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

## TODO List