js+css+vue
vue-css-百分比圆 (vue-css-percentage-circle)
Vue CSS Percentage Circle.
Vue CSS百分比圈子。
入门 (Getting Started)
npm install --save vue-css-percentage-circle
用法 (Usage)
<PercentageCircle :percent="50" />
主题化 (Theming)
<PercentageCircle :percent="50" active-color="blue" complete-color="green"/>
<PercentageCircle :percent="50" active-color="green" complete-color="orange"/>
<PercentageCircle :percent="50" active-color="orange" complete-color="blue"/>
动画的 (Animated)
<PercentageCircle :percent="50" :animate="true"/>
暗模式 (Dark Mode)
<PercentageCircle :percent="50" :dark-mode="true" />
API (API)
百分比圆 (percentage-circle)
道具 (props)
-
percent
Number (optional)percent
数字 ( 可选 )Percentage of progress (0-100)
进度百分比(0-100)
-
size
String (optional)default: 'small'
size
字符串 ( 可选 ),default: 'small'
Size of percentage circle [micro, small, big]
百分比圆的大小[微,小,大]
-
active-color
String (optional)default: 'blue'
active-color
字符串 ( 可选 ),default: 'blue'
Color when active. [blue, green, orange]
活动时的颜色。 [蓝色,绿色,橙色]
-
complete-color
String (optional)default: ''
complete-color
字符串 ( 可选 )default: ''
Color when complete. [blue, green, orange]
完成后颜色。 [蓝色,绿色,橙色]
-
animate
Boolean (optional)default: false
animate
布尔 ( 可选 )default: false
Animate percentage changes.
动画百分比变化。
-
refresh-rate
Number (optional)default: 5
refresh-rate
数字 ( 可选 ),default: 5
Only applicable when animated is set to true. Speed in which animation changes happen
仅在将animated设置为true时适用。 动画更改发生的速度
-
dark-mode
Boolean (optional)default: false
dark-mode
布尔值 ( 可选 )default: false
Toggle between normal and dark themes
在正常和黑暗主题之间切换
大事记 (events)
-
click
click
Click event.
点击事件。
测试中 (Testing)
Storybook used for testing. To run storybook, run:
用于测试的故事书。 要运行故事书,请运行:
npm run dev
or
要么
npm run storybook
翻译自: https://vuejsexamples.com/vue-pure-css-percentage-circle/
js+css+vue