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
  • Props
  • CSS Variables
• progress-circle
  • Props
  • CSS Variables
• figure-code
  • Props

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 | |