68 lines
1.9 KiB
Vue
68 lines
1.9 KiB
Vue
|
<script>
|
|||
|
|
import Line from './line.md';
|
|||
|
|
import Circle from './circle.md';
|
|||
|
|
import LineMini from './line-mini.md';
|
|||
|
|
import CircleMini from './circle-mini.md';
|
|||
|
|
import CircleDynamic from './circle-dynamic.md';
|
|||
|
|
import Format from './format.md';
|
|||
|
|
import Dynamic from './dynamic.md';
|
|||
|
|
import Dashboard from './dashboard.md';
|
|||
|
|
import Segment from './segment.md';
|
|||
|
|
import Linecap from './linecap.md';
|
|||
|
|
import GradientLine from './gradient-line';
|
|||
|
|
import CN from '../index.zh-CN.md';
|
|||
|
|
import US from '../index.en-US.md';
|
|||
|
|
|
|||
|
|
const md = {
|
|||
|
|
cn: `# Progress 进度条
|
|||
|
|
展示操作的当前进度。
|
|||
|
|
## 何时使用
|
|||
|
|
在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。
|
|||
|
|
|
|||
|
|
- 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时；
|
|||
|
|
- 当需要显示一个操作完成的百分比时。
|
|||
|
|
## 代码演示`,
|
|||
|
|
us: `# Progress
|
|||
|
|
Display the current progress of an operation flow.
|
|||
|
|
## When To Use
|
|||
|
|
If it will take a long time to complete an operation, you can use \`Progress\` to show the current progress and status.
|
|||
|
|
|
|||
|
|
- When an operation will interrupt the current interface, or it needs to run in the background for more than 2 seconds.
|
|||
|
|
- When you need to display the completion percentage of an operation.
|
|||
|
|
## Examples
|
|||
|
|
`,
|
|||
|
|
};
|
|||
|
|
export default {
|
|||
|
|
category: 'Components',
|
|||
|
|
subtitle: '进度条',
|
|||
|
|
type: 'Feedback',
|
|||
|
|
title: 'Progress',
|
|||
|
|
render() {
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<md cn={md.cn} us={md.us} />
|
|||
|
|
<demo-sort>
|
|||
|
|
<Line />
|
|||
|
|
<Circle />
|
|||
|
|
<LineMini />
|
|||
|
|
<CircleMini />
|
|||
|
|
<CircleDynamic />
|
|||
|
|
<Format />
|
|||
|
|
<Dynamic />
|
|||
|
|
<Dashboard />
|
|||
|
|
<Segment />
|
|||
|
|
<Linecap />
|
|||
|
|
<GradientLine />
|
|||
|
|
</demo-sort>
|
|||
|
|
<api>
|
|||
|
|
<template slot="cn">
|
|||
|
|
<CN />
|
|||
|
|
</template>
|
|||
|
|
<US />
|
|||
|
|
</api>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|