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