反应的亮层 UI 进度图标
这个软件包为React应用提供了一套具有动态填充能力的进度图标. 这些图标可用于显示电池的生命,健康,信号强度等类似进步的状态.
目前,一揽子计划包括:
- 电池
- 大电池
- 心脏
- 馅饼
- 信号
- 上调
安装
yarn add @brightlayer-ui/react-progress-icons
使用量
import { Battery, BatteryLarge, Heart, Pie, Signal, Ups } from '@brightlayer-ui/react-progress-icons';
<Battery percent={100} size={36} color={'green'} charging={true} outlined={true} />
<Heart percent={50} size={18} color={'pink'} outlined={true} />
<Pie percent={50} size={48} color={'blue'} ring={4} outlined={true} />
<Signal percent={80} size={36} color={'orange'} outlined={true} />
<Ups percent={75} size={36} color={'teal'} outlined={true} />
<BatteryLarge percent={56} size={28} color={'goldenrod'} outlined={true} />
API 密码
共享属性
这些道具可在此包中的所有进度图标上提供.
| Propa 名称 | 说明 | 类型 | 需求 | 默认 |
|---|---|---|---|---|
| 背景颜色 | 未填充区域的背景颜色 | string | 没有 | |
| 颜色 | 图标填充所用的颜色 | string | 没有 | 'inherit' |
| 标签颜色 | 标签文本颜色 | string | 没有 | |
| 标签选项 | 在哪里显示文本标签 | 'top' | 'bottom' | 'center' | 'right' | 'left' | 没有 | center |
| 标签大小 | Px 标签大小 | number | 没有 | size / 4 |
| 概述 | 是否使用概述的样式 | boolean | 没有 | false |
| 百分比 | 填充图标的金额 (0- 100) | number | 没有 | 100 |
| 显示中间标签 | 是否显示百分比标签 | boolean | 没有 | false |
| 大小 | Px 图标的大小 | number | 没有 | 24 |
任何额外提供的道具都会传送到根上 svg 键.
电池属性
电池图标还支持:
| Propa 名称 | 说明 | 类型 | 需求 | 默认 |
|---|---|---|---|---|
| 充电 | 是否显示充电指标 | boolean | 没有 | false |
派属性
派图标还支持:
| Propa 名称 | 说明 | 类型 | 需求 | 默认 |
|---|---|---|---|---|
| 环 | 外环厚度(1=薄环,10=全圆) | number | 没有 | 10 |
发展
从寄存器根构建反应包 :
yarn build:react
或来自此软件包目录 :
yarn build
许可证
BSD-3- 标签