@linkdesign/screen
Version:
屏组件库,但使用场景又不局限于屏。主要用于BI、大盘和屏
82 lines (55 loc) • 2.35 kB
Markdown
//intranetproxy.alipay.com/skylark/lark/0/2020/png/111014/1580719377413-bec5b897-76f7-4a0a-ad6e-78609806a5fc.png)
<!--before-content-->
```js
import { Text, config } from '@linkdesign/screen';
const { Weather } = 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" className={`${_cssPrefix}main-body`} style={header}>
<Weather
params={{
key: '56a763fbaeb1992f6f00a7c4eed3cc82',
city: '110101',
}}
/>
</div>
);
}
}
ReactDOM.render(<App />);
```
<!--after-content-->
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
| ----------------- | ------------------------ | ---- | ------ | ------------------------------------ | ------------------------------------------------------------ |
| className | 类名 | N | String | - | |
| textOptions | 文本配置 | N | Array | ```{textStyle: {fontWeight: 400}}``` | |
| [params](
```typescript
// 高德天气服务请求参数配置
params: {
key: string; // 请求服务权限标识 用户在高德地图官网申请web服务API类型KEY
city: string; // 城市编码 输入城市的adcode,adcode信息可参考城市编码表
extensions?: 'base' | 'all'; // 气象类型 可选值:base/all base: 返回实况天气 all: 返回预报天气
output?: 'JSON' | 'XML'; // 返回格式 可选值:JSON,XML
interval?: number; // 请求频率 单位毫秒 默认20分钟
};
```
- [ ] ......
大盘/屏的天气状况展示
![高德天气 Weather](https: