mirror of
https://github.com/creativetimofficial/muse-vue-ant-design-dashboard.git
synced 2025-08-16 11:31:10 +08:00
89 lines
2.3 KiB
Vue
89 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<div class="page-row">
|
|
<div class="page-content">
|
|
<section class="mb-24">
|
|
<h1>Progress</h1>
|
|
<p class="text-dark">
|
|
Display the current progress of an operation flow.
|
|
</p>
|
|
</section>
|
|
<a-divider />
|
|
<section class="mb-24" id="When-To-Use">
|
|
<h2>When To Use</h2>
|
|
<p>
|
|
If it will take a long time to complete an operation, you can use Progress
|
|
to show the current progress and status.
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
When an operation will interrupt the current interface, or it needs to
|
|
run in the background for more than 2 seconds.
|
|
</li>
|
|
<li>When you need to display the completion percentage of an operation.</li>
|
|
</ul>
|
|
</section>
|
|
<h2>Examples</h2>
|
|
<section class="mb-20" id="Progress-bar">
|
|
<a-divider orientation="left">Progress bar</a-divider>
|
|
<p>
|
|
A standard progress bar.
|
|
</p>
|
|
<div class="showcase">
|
|
<a-progress :percent="30" />
|
|
<a-progress :percent="50" status="active" />
|
|
<a-progress :percent="70" status="exception" />
|
|
<a-progress :percent="100" />
|
|
<a-progress :percent="50" :show-info="false" />
|
|
</div>
|
|
<muse-snippet :code="codeSample"></muse-snippet>
|
|
</section>
|
|
|
|
<p class="text-right font-semibold mb-24">
|
|
Looking for more Ant Design Vue Progress? Please check the
|
|
<a target="_blank" href="https://antdv.com/components/progress/">official docs</a>.
|
|
</p>
|
|
</div>
|
|
<muse-anchor :anchors="anchors"></muse-anchor>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
head () {
|
|
return {
|
|
title: 'Progress | Muse Vue Ant Design Dashboard @ Creative Tim',
|
|
meta: [
|
|
{ hid: 'description', name: 'description', content: 'Display the current progress of an operation flow.' }
|
|
]
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
anchors: {
|
|
"When-To-Use": "When To Use",
|
|
"Progress-bar": "Progress bar",
|
|
},
|
|
codeSample: `
|
|
<template>
|
|
<div>
|
|
<a-progress :percent="30" />
|
|
<a-progress :percent="50" status="active" />
|
|
<a-progress :percent="70" status="exception" />
|
|
<a-progress :percent="100" />
|
|
<a-progress :percent="50" :show-info="false" />
|
|
</div>
|
|
</template>`,
|
|
}
|
|
},
|
|
methods: {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
</style> |