@linkdesign/screen/lib/title/README.md

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

# 标题Title

## 使用场景

标题



## 预览

![标题 Title](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/111014/1580711826376-6bd51a8c-9f6e-4660-8cdf-b29729bb8487.png) 

## 演示

<!--before-content-->

## 基础用法

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

const { Title } = Text;
const { _cssPrefix } = config;

const header = {
	backgroundColor: "#1f3b6d",
  display: "flex",
  alignItem: "center",
  height: 56,
  padding: "0 24px",
};

class App extends React.Component {
  render() {
    return (
      <div data-theme="dark" style={header}>
        <Title className={`${_cssPrefix}main-title`}>物联网智慧城市中枢</Title>
        <Title className={`${_cssPrefix}sub-title`} textStyle={{marginLeft: 12}}>
          <span
            className={`${_cssPrefix}iconfont-ability`}
            dangerouslySetInnerHTML={{ __html: '&#xe6e1;' }}
          />
          无东市滨海区
        </Title>
      </div>
    );
  }
}

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

<!--after-content-->



### API

| 参数名                            | 说明         | 必填 | 类型                                    | 默认值                                                     | 备注         |
| --------------------------------- | ------------ | ---- | --------------------------------------- | ---------------------------------------------------------- | ------------ |
| className                         | 类名         | N    | String                                  | -                                                          |              |
| forwardRef                        | 类似ref      | N    | Object                                  | -                                                          | 获取dom      |
| [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                                | -                                                          |              |

#### 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

- [ ] ...