UNPKG

@linkdesign/screen

Version:

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

67 lines (44 loc) 1.94 kB
# 指标 Indicator ## 使用场景 标题 ## 预览 ![标题 Title](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/111014/1589188372519-e15af9ae-d5f3-44e8-8d2c-7e77041f105b.png) ## 演示 <!--before-content--> ## 基础用法 ```js import { Text, config } from '@linkdesign/screen'; const { Indicator } = Text; const { _cssPrefix } = config; const header = { backgroundColor: "#1f3b6d", display: "flex", alignItem: "center", padding: "0 24px", }; class App extends React.Component { render() { return ( <div data-theme="dark" style={header} className={`${_cssPrefix}main-body`}> <Indicator label="指标标题" value="2300" unit="个" /> </div> ); } } ReactDOM.render(<App />); ``` <!--after-content--> ### API | 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | --------------------------------- | ------------ | ---- | --------------------------------------- | ---------------------------------------------------- | ------------ | | className | 类名 | N | String | - | | | type | 指标类型 | N | Enum<br />'core' \| 'main' | 'core' | | | label | 对齐方式 | Y | ReactNode | - | | | value | 指标值 | Y | String \| Number | 0 | | | unit | 指标单位 | N | String | - | | ## TODO List - [ ] ...