0.0.23 • Published 5 years ago
@alicd/crui-dashboard v0.0.23
category: Components type: UI Views component: Basic chinese: 展示面板
english: Dashboard
一般在系统的首页展示一些指标数据，也可以快速导航的入口
API
Dashboard
| 成员 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 设定弹层宽度 | number | 100% |
| height | 设定弹层高度 | number | 100% |
| className | 设置定义的样式 | string | null |
| contentPadding | 指定相对于父元素大小的内间距，可以指定上下左右四个方向 | array | 48 |
| showGapLine | 是否展示行与列之间的border | boolean | true |
| showGapMark | 展示展示行与列交叉的交叉点样式 | boolean | true |
| column | 每一行多少列 | number | 4 |
| itemMinWidth | 单个条目的最小宽度 | number | auto |
| shadowSize | 鼠标浮上去的阴影大小 | number | 30 |
| shadowSkewingSize | 阴影动画的最大调整范围 | number | 20 |
| type | 主题风格，三种 primary,secondary,normal | string | normal |
Dashboard.Group
Dashboard 的直接子元素，用于设置分组的 title 信息，其子元素可以是任何节点，子元素如果是 Dashboard.Item ，就可以按照 组件的 API 配置相应的字段信息，如果 Dashboard.Item 满足不了您的需求，请自行设置内部展示的结构
| 成员 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 设置分组信息的 title | string/Element | '' |
| className | 设置Group 的 className | string | null |
| itemHeight | 设置内容区每一个内容区块的高度 | Number | null |
| columnFlex | 设置列的宽度比重，多少列数组中就有几个数字 | Array | null |
Dashboard.Item
设置单个条目的信息，子节点用于填充图表，当然你也可以选择放其他的元素
| 成员 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| count | 数量字段(支持 0-9￥$%.,?₽€*+-<>，超出将以文本展示) | Number/String | null |
| title | 标题 | String/Element | null |
| subtitle | 副标题 | String/Element | null |
| thousandGap | 对于 count 字段，通过 , 隔开千位 | Boolean | true |
| chartWidth | 图标元素的宽度 | number | 180 |
| chartHeight | 图标元素的高度 | number | 120 |
| href | 单个元素的链接地址，配置该属性，点击可以跳转 | string | null |
| target | 页面跳转时的打开方式 | string | '_self' |
| className | 设置单个 Item 的 className | string | null |
0.0.23
5 years ago