1.1.9 • Published 2 years ago
canvas-design-ui v1.1.9
canvas-design-ui
A UI component based on canvas and react
NPM package: https://www.npmjs.com/package/canvas-design-ui
Git repo: https://github.com/talktao/canvas-design-ui
If it is helpful to you, please help me to order one on GitHub 🌟, Thanks !
Installation
With NPM
npm i canvas-design-ui
With YARN
yarn add canvas-design-ui
Usage
Read the Source luke!
目录
water-sphere
import { WaterSphere } from "canvas-design-ui";
<WaterSphere
height={180}
percent={78.888}
style={{ '--bg-color': '#f7f7f7', '--font-color': '#002EFF' }}
>
<div>78.888%</div>
<div style={{ fontSize: '14px' }}>占比</div>
</WaterSphere>Props
| Name | Description | Type | Default |
|---|---|---|---|
| height | water-sphere canvas height | number | 160 |
| percent | Percent of the water sphere | number | - |
| gradientColorData | Water ball gradient | Array | [0, '#ffffff', 0.5, '#00EDFF', 1, '#002EFF'] |
| children | Customized information | React.ReactNode | - |
CSS Variables
| Name | Description | Default | Global |
|---|---|---|---|
| --bg-color | Color of the canvasBg | #f7f7f7 | - |
| --font-color | Color of the font | #002EFF | - |
progress-circle
import { ProgressCircle } from "canvas-design-ui";
<ProgressCircle
percent={60}
style={{
'--size': '180px',
'--track-width': '12px',
'--fill-color': '#ff8f1f',
}}
>
<div style={{ fontSize: '18px' }}>60%</div>
</ProgressCircle>Props
| Name | Description | Type | Default |
|---|---|---|---|
| percent | Percent of the water sphere | number | - |
| children | Customized information | React.ReactNode | - |
CSS Variables
| Name | Description | Default | Global |
|---|---|---|---|
| --fill-color | Color of the fill part | #1677ff | - |
| --size | Width and height of the canvas | 80px | - |
| --track-color | Color of the track | #e5e5e5 | - |
| --track-width | Width of the line | 4px | - |
figure-code
import { FigureCode } from "canvas-design-ui";
<FigureCode />Props
| Name | Description | Type | Default |
|---|---|---|---|
| width | with of canvas | number | 80 |
| height | height of canvas | number | 40 |
| onCheck | Return the value of the verification code | (i:string)=>void |