亮层 UI 反应原生进度图标
这是一个具有动态填充能力的图标库,可用于显示进度(类似于传统的进度自旋器或栏). 这些可以用来显示健康,电池寿命等.
目前,我们备有下列图标:
- 电池
- 心脏
- 馅饼
- 信号
- 上调
- 电池全长
安装
要安装来自国家防范机制的 Brightlayer UI 进度图标作为您的项目的依赖, 您可以在您的工程根中运行以下命令 :
yarn add @brightlayer-ui/react-native-progress-icons
同伴依赖关系
为了使用这个图书馆,你还必须有 react-native-svg 安装在您的工程中。 你可以通过运行来添加:
yarn add react-native-svg
装入 Expo
如果您正在使用 Expo, 则 Expo 客户端应用程序中已经包含必要的本地代码 react-native-svg。 。 。 .
安装 JavaScript 依赖性 :
npx expo install react-native-svg
见 展览文件 更多信息.
使用应用程序中的进度图标
进度图标组件可以导入并使用,就像您会使用任何其他组件一样.
import {Battery, Heart, Pie, Signal, BatteryLarge} from '@brightlayer-ui/react-native-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={75} size={48} color={'teal'} outlined={true}/>
<BatteryLarge percent={56} size={28} color={'yellow'} outlined={true}/>
API 密码
共享属性
这些道具可在此包中的所有进度图标上提供.
| Propa 名称 | 说明 | 类型 | 需求 | 默认 |
|---|---|---|---|---|
| 背景颜色 | 未填充区域的背景颜色 | string | 没有 | |
| 颜色 | 图标填充所用的颜色 | string | 对 | |
| 标签颜色 | 标签文本颜色 | string | 没有 | |
| 标签选项 | 在哪里显示文本标签 | 'top' | 'bottom' | 'center' | 'right' | 'left' | 没有 | center |
| 标签大小 | Px 标签大小 | number | 没有 | size/4 |
| 概述 | 是否使用概述的样式 | boolean | 没有 | 虚假 |
| 百分比 | 填充图标的金额 (0- 100) | number | 没有 | 100个 |
| 显示中间标签 | 显示叠加百分比的选项 | boolean | 没有 | 虚假 |
| 大小 | 图标的大小 (px) | number | 没有 | 24个 |
提供的任何其他道具将提供给根元件(Svg) (中文(简体) ).
电池属性
电池支持上述所有共享属性和以下附加属性:
| Propa 名称 | 说明 | 类型 | 需求 | 默认 |
|---|---|---|---|---|
| 充电 | 是否显示充电指标 | boolean | 没有 | 虚假 |
派属性
该派支持上面所有共享属性和以下附加属性:
| Propa 名称 | 说明 | 类型 | 需求 | 默认 |
|---|---|---|---|---|
| 环 | 外环厚度(1=薄环,10=全圆) | number | 没有 | 10个 |