20260720172840
This commit is contained in:
oneao committed
1 parent
cda7f16d3a
commit
94207c77ff
3117 files changed
+201407
-1236
No files matched your search
@@ -0,0 +1,64 @@
|
||||
# _semantic
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { SemanticPreview } from '@/components/semantic'
|
||||
import { useComponentLocale } from '@/composables/use-locale'
|
||||
import { locales } from '../locales'
|
||||
|
||||
const { t } = useComponentLocale(locales)
|
||||
|
||||
const semantics = computed(() => [
|
||||
{ name: 'root', desc: t('root') },
|
||||
{ name: 'body', desc: t('body') },
|
||||
{ name: 'rail', desc: t('rail') },
|
||||
{ name: 'track', desc: t('track') },
|
||||
{ name: 'indicator', desc: t('indicator') },
|
||||
])
|
||||
|
||||
const gradient = ref(false)
|
||||
const type = ref('line')
|
||||
|
||||
const colorMap = {
|
||||
'0%': '#108ee9',
|
||||
'100%': '#87d068',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SemanticPreview
|
||||
component-name="Progress"
|
||||
:semantics="semantics"
|
||||
>
|
||||
<template #default="{ classes }">
|
||||
<a-flex vertical gap="middle" :style="{ width: '100%' }" align="center">
|
||||
<a-flex align="center" gap="middle">
|
||||
<a-segmented
|
||||
:options="['line', 'steps', 'circle', 'dashboard']"
|
||||
:value="type"
|
||||
@change="(val: string) => type = val"
|
||||
/>
|
||||
<a-switch
|
||||
:checked="gradient"
|
||||
checked-children="Gradient"
|
||||
un-checked-children="Gradient"
|
||||
@change="(val: boolean) => gradient = val"
|
||||
/>
|
||||
</a-flex>
|
||||
<a-flex vertical align="center" :style="{ height: '200px', width: '100%' }">
|
||||
<a-progress
|
||||
:percent="80"
|
||||
:type="type === 'steps' ? 'line' : type"
|
||||
:steps="type === 'steps' ? 5 : undefined"
|
||||
:stroke-color="gradient ? colorMap : undefined"
|
||||
:classes="classes"
|
||||
/>
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
</template>
|
||||
</SemanticPreview>
|
||||
</template>
|
||||
```
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
# Responsive circular progress bar
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Responsive circular progress bar. When `size` is smaller than 20, progress information will be displayed in Tooltip.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-flex align="center" gap="small">
|
||||
<a-progress
|
||||
type="circle"
|
||||
rail-color="#e6f4ff"
|
||||
:percent="60"
|
||||
:stroke-width="20"
|
||||
:size="14"
|
||||
:format="number => `进行中，已完成${number}%`"
|
||||
/>
|
||||
<span>代码发布</span>
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,17 @@
|
||||
# Mini size circular progress bar
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
A smaller circular progress bar.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-flex wrap gap="small">
|
||||
<a-progress type="circle" :percent="30" :size="80" />
|
||||
<a-progress type="circle" :percent="70" status="exception" :size="80" />
|
||||
<a-progress type="circle" :percent="100" :size="80" />
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
+45
@@ -0,0 +1,45 @@
|
||||
# Circular progress bar with steps
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
A circular progress bar that supports steps and color segments, default gap is 2px.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const stepsCount = ref(5)
|
||||
const stepsGap = ref(7)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-typography-title :level="5">
|
||||
Custom count:
|
||||
</a-typography-title>
|
||||
<a-slider v-model:value="stepsCount" :min="2" :max="10" />
|
||||
<a-typography-title :level="5">
|
||||
Custom gap:
|
||||
</a-typography-title>
|
||||
<a-slider v-model:value="stepsGap" :step="4" :min="0" :max="40" />
|
||||
<a-flex wrap gap="middle" style="margin-top: 16px">
|
||||
<a-progress
|
||||
type="dashboard"
|
||||
:steps="8"
|
||||
:percent="50"
|
||||
rail-color="rgba(0, 0, 0, 0.06)"
|
||||
:stroke-width="20"
|
||||
/>
|
||||
<a-progress
|
||||
type="circle"
|
||||
:percent="100"
|
||||
:steps="{ count: stepsCount, gap: stepsGap }"
|
||||
rail-color="rgba(0, 0, 0, 0.06)"
|
||||
:stroke-width="20"
|
||||
/>
|
||||
</a-flex>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,17 @@
|
||||
# Circular progress bar
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
A circular progress bar.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-flex gap="small" wrap>
|
||||
<a-progress type="circle" :percent="75" />
|
||||
<a-progress type="circle" :percent="70" status="exception" />
|
||||
<a-progress type="circle" :percent="100" />
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,47 @@
|
||||
# Dashboard
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
By setting `type="dashboard"`, you can get a dashboard style of progress easily.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { ProgressProps } from 'antdv-next'
|
||||
import { ref } from 'vue'
|
||||
|
||||
type GapPlacement = NonNullable<ProgressProps['gapPlacement']>
|
||||
|
||||
const gapPlacement = ref<GapPlacement>('bottom')
|
||||
const gapDegree = ref<number>(50)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex vertical gap="large">
|
||||
<div>
|
||||
gapDegree:
|
||||
<a-segmented
|
||||
v-model:value="gapDegree"
|
||||
:options="[
|
||||
{ label: 50, value: 50 },
|
||||
{ label: 100, value: 100 },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
gapPlacement:
|
||||
<a-segmented
|
||||
v-model:value="gapPlacement"
|
||||
:options="[
|
||||
{ label: 'start', value: 'start' },
|
||||
{ label: 'end', value: 'end' },
|
||||
{ label: 'top', value: 'top' },
|
||||
{ label: 'bottom', value: 'bottom' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<a-progress type="dashboard" :gap-degree="gapDegree" :percent="30" :gap-placement="gapPlacement" />
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,45 @@
|
||||
# Dynamic
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
A dynamic progress bar is better.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { MinusOutlined, PlusOutlined } from '@antdv-next/icons'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const percent = ref(0)
|
||||
|
||||
function increase() {
|
||||
percent.value = Math.min(100, percent.value + 10)
|
||||
}
|
||||
|
||||
function decline() {
|
||||
percent.value = Math.max(0, percent.value - 10)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex vertical gap="small">
|
||||
<a-flex vertical gap="small">
|
||||
<a-progress :percent="percent" type="line" />
|
||||
<a-progress :percent="percent" type="circle" />
|
||||
</a-flex>
|
||||
<a-space-compact>
|
||||
<a-button @click="decline">
|
||||
<template #icon>
|
||||
<MinusOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
<a-button @click="increase">
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-space-compact>
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,16 @@
|
||||
# Custom text format
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
You can set a custom text by setting the `format` prop.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-flex gap="small" wrap>
|
||||
<a-progress type="circle" :percent="75" :format="percent => `${percent} Days`" />
|
||||
<a-progress type="circle" :percent="100" :format="() => 'Done'" />
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
+39
@@ -0,0 +1,39 @@
|
||||
# Custom line gradient
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Gradient encapsulation, `circle` and `dashboard` will ignore `strokeLinecap` when setting gradient.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const twoColors = {
|
||||
'0%': '#108ee9',
|
||||
'100%': '#87d068',
|
||||
}
|
||||
|
||||
const conicColors = {
|
||||
'0%': '#87d068',
|
||||
'50%': '#ffe58f',
|
||||
'100%': '#ffccc7',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex vertical gap="middle">
|
||||
<a-progress :percent="99.9" :stroke-color="twoColors" />
|
||||
<a-progress :percent="50" status="active" :stroke-color="{ from: '#108ee9', to: '#87d068' }" />
|
||||
<a-flex gap="small" wrap>
|
||||
<a-progress type="circle" :percent="90" :stroke-color="twoColors" />
|
||||
<a-progress type="circle" :percent="100" :stroke-color="twoColors" />
|
||||
<a-progress type="circle" :percent="93" :stroke-color="conicColors" />
|
||||
</a-flex>
|
||||
<a-flex gap="small" wrap>
|
||||
<a-progress type="dashboard" :percent="90" :stroke-color="twoColors" />
|
||||
<a-progress type="dashboard" :percent="100" :stroke-color="twoColors" />
|
||||
<a-progress type="dashboard" :percent="93" :stroke-color="conicColors" />
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
# Change progress value position
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Change the position of the progress value, you can use `percentPosition` to adjust it so that the progress bar value is inside, outside or at the bottom of the progress bar.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-flex gap="small" vertical>
|
||||
<a-progress
|
||||
:percent="0"
|
||||
:percent-position="{ align: 'center', type: 'inner' }"
|
||||
:size="[200, 20]"
|
||||
stroke-color="#E6F4FF"
|
||||
/>
|
||||
<a-progress :percent="10" :percent-position="{ align: 'center', type: 'inner' }" :size="[300, 20]" />
|
||||
<a-progress
|
||||
:percent="50"
|
||||
:percent-position="{ align: 'start', type: 'inner' }"
|
||||
:size="[300, 20]"
|
||||
stroke-color="#B7EB8F"
|
||||
/>
|
||||
<a-progress
|
||||
:percent="60"
|
||||
:percent-position="{ align: 'end', type: 'inner' }"
|
||||
:size="[300, 20]"
|
||||
stroke-color="#001342"
|
||||
/>
|
||||
<a-progress :percent="100" :percent-position="{ align: 'center', type: 'inner' }" :size="[400, 20]" />
|
||||
<a-progress :percent="60" :percent-position="{ align: 'start', type: 'outer' }" />
|
||||
<a-progress :percent="100" :percent-position="{ align: 'start', type: 'outer' }" />
|
||||
<a-progress :percent="60" :percent-position="{ align: 'center', type: 'outer' }" size="small" />
|
||||
<a-progress :percent="100" :percent-position="{ align: 'center', type: 'outer' }" />
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,18 @@
|
||||
# Mini size progress bar
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Appropriate for a narrow area.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-flex vertical gap="small" style="width: 180px">
|
||||
<a-progress :percent="30" size="small" />
|
||||
<a-progress :percent="50" size="small" status="active" />
|
||||
<a-progress :percent="70" size="small" status="exception" />
|
||||
<a-progress :percent="100" size="small" />
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,19 @@
|
||||
# Progress bar
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
A standard progress bar.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-flex gap="small" vertical>
|
||||
<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" />
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,19 @@
|
||||
# Stroke Linecap
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
By setting `strokeLinecap="butt"`, you can change the linecaps from `round` to `butt`, see [stroke-linecap](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap) for more information.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-flex vertical gap="small">
|
||||
<a-progress stroke-linecap="butt" :percent="75" />
|
||||
<a-flex wrap gap="small">
|
||||
<a-progress stroke-linecap="butt" type="circle" :percent="75" />
|
||||
<a-progress stroke-linecap="butt" type="dashboard" :percent="75" />
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,25 @@
|
||||
# Progress bar with success segment
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Show several parts of progress with different status.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-flex gap="small" vertical>
|
||||
<a-tooltip title="3 done / 3 in progress / 4 to do">
|
||||
<a-progress :percent="60" :success="{ percent: 30 }" />
|
||||
</a-tooltip>
|
||||
<a-flex gap="small" wrap>
|
||||
<a-tooltip title="3 done / 3 in progress / 4 to do">
|
||||
<a-progress type="circle" :percent="60" :success="{ percent: 30 }" />
|
||||
</a-tooltip>
|
||||
<a-tooltip title="3 done / 3 in progress / 4 to do">
|
||||
<a-progress type="dashboard" :percent="60" :success="{ percent: 30 }" />
|
||||
</a-tooltip>
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,35 @@
|
||||
# Progress size
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
The size of progress.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-flex vertical gap="middle">
|
||||
<a-flex vertical gap="small" style="width: 300px">
|
||||
<a-progress :percent="50" />
|
||||
<a-progress :percent="50" size="small" />
|
||||
<a-progress :percent="50" :size="[300, 20]" />
|
||||
</a-flex>
|
||||
<a-flex align="center" wrap :gap="30">
|
||||
<a-progress type="circle" :percent="50" />
|
||||
<a-progress type="circle" :percent="50" size="small" />
|
||||
<a-progress type="circle" :percent="50" :size="20" />
|
||||
</a-flex>
|
||||
<a-flex align="center" wrap :gap="30">
|
||||
<a-progress type="dashboard" :percent="50" />
|
||||
<a-progress type="dashboard" :percent="50" size="small" />
|
||||
<a-progress type="dashboard" :percent="50" :size="20" />
|
||||
</a-flex>
|
||||
<a-flex align="center" wrap :gap="30">
|
||||
<a-progress :steps="3" :percent="50" />
|
||||
<a-progress :steps="3" :percent="50" size="small" />
|
||||
<a-progress :steps="3" :percent="50" :size="20" />
|
||||
<a-progress :steps="3" :percent="50" :size="[20, 30]" />
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,22 @@
|
||||
# Progress bar with steps
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
A progress bar with steps.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { green, red } from '@ant-design/colors'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex gap="small" vertical>
|
||||
<a-progress :percent="50" :steps="3" />
|
||||
<a-progress :percent="30" :steps="5" />
|
||||
<a-progress :percent="100" :steps="5" size="small" :stroke-color="green[6]" />
|
||||
<a-progress :percent="60" :steps="5" :stroke-color="[green[6]!, green[6]!, red[5]!]" />
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,63 @@
|
||||
# Custom semantic dom styling
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { ProgressProps } from 'antdv-next'
|
||||
|
||||
const classes: ProgressProps['classes'] = {
|
||||
root: 'demo-progress-root',
|
||||
rail: 'demo-progress-rail',
|
||||
track: 'demo-progress-track',
|
||||
}
|
||||
|
||||
const stylesFn: ProgressProps['styles'] = (info) => {
|
||||
const percent = info?.props?.percent ?? 0
|
||||
const hue = 200 - (200 * percent) / 100
|
||||
return {
|
||||
track: {
|
||||
backgroundImage: `
|
||||
linear-gradient(
|
||||
to right,
|
||||
hsla(${hue}, 85%, 65%, 1),
|
||||
hsla(${hue + 30}, 90%, 55%, 0.95)
|
||||
)`,
|
||||
borderRadius: 8,
|
||||
transition: 'all 0.3s ease',
|
||||
},
|
||||
rail: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: 8,
|
||||
},
|
||||
} as ProgressProps['styles']
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex vertical gap="large">
|
||||
<a-progress :classes="classes" :styles="stylesFn" :percent="10" />
|
||||
<a-progress :classes="classes" :styles="stylesFn" :percent="20" />
|
||||
<a-progress :classes="classes" :styles="stylesFn" :percent="40" />
|
||||
<a-progress :classes="classes" :styles="stylesFn" :percent="60" />
|
||||
<a-progress :classes="classes" :styles="stylesFn" :percent="80" />
|
||||
<a-progress :classes="classes" :styles="stylesFn" :percent="99" />
|
||||
</a-flex>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.demo-progress-root {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.demo-progress-rail {
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.demo-progress-track {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,85 @@
|
||||
---
|
||||
title: Progress
|
||||
description: Display the current progress of the operation.
|
||||
---
|
||||
|
||||
## 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.
|
||||
|
||||
## Demos
|
||||
|
||||
| Demo | Path |
|
||||
| --- | --- |
|
||||
| Progress bar | demo/line.md |
|
||||
| Circular progress bar | demo/circle.md |
|
||||
| Mini size progress bar | demo/line-mini.md |
|
||||
| Responsive circular progress bar | demo/circle-micro.md |
|
||||
| Mini size circular progress bar | demo/circle-mini.md |
|
||||
| Dynamic | demo/dynamic.md |
|
||||
| Custom text format | demo/format.md |
|
||||
| Dashboard | demo/dashboard.md |
|
||||
| Progress bar with success segment | demo/segment.md |
|
||||
| Stroke Linecap | demo/linecap.md |
|
||||
| Custom line gradient | demo/gradient-line.md |
|
||||
| Progress bar with steps | demo/steps.md |
|
||||
| Circular progress bar with steps | demo/circle-steps.md |
|
||||
| Progress size | demo/size.md |
|
||||
| Change progress value position | demo/info-position.md |
|
||||
| Custom semantic dom styling | demo/style-class.md |
|
||||
|
||||
## API
|
||||
|
||||
Common props ref：[Common props](../../docs/vue/common-props.md)
|
||||
|
||||
### Props
|
||||
|
||||
Properties shared by all types.
|
||||
|
||||
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| classes | Customize class for each semantic structure inside the component. Supports object or function. | ProgressClassNamesType | - | - | ✓ |
|
||||
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | ProgressStylesType | - | - | ✓ |
|
||||
| rootClass | Root container class | string | - | - | × |
|
||||
| type | To set the type, options: `line` `circle` `dashboard` | ProgressType | `line` | - | × |
|
||||
| percent | To set the completion percentage | number | 0 | - | × |
|
||||
| format | The template function of the content | (percent?: number, successPercent?: number) => any | (percent) => percent + `%` | - | × |
|
||||
| status | To set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | (typeof ProgressStatuses)[number] | - | - | × |
|
||||
| showInfo | Whether to display the progress value and the status icon | boolean | true | - | × |
|
||||
| strokeWidth | - | number | - | - | × |
|
||||
| strokeLinecap | To set the style of the progress linecap | 'butt' \| 'square' \| 'round' | `round` | - | × |
|
||||
| strokeColor | The color of progress bar | string \| string[] \| ProgressGradient | - | - | × |
|
||||
| railColor | The color of unfilled part | string | - | - | × |
|
||||
| success | Configs of successfully progress bar | SuccessProps | - | - | × |
|
||||
| trailColor | The color of unfilled part. Please use `railColor` instead | string | - | - | × |
|
||||
| width | Deprecated. Use `size` instead | number | - | - | × |
|
||||
| size | Progress size | number \| [number \| string, number] \| ProgressSize \| { width?: number, height?: number } | `default` | - | × |
|
||||
|
||||
### `type="line"`
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| steps | The total step count | number | - | - |
|
||||
| rounding | The function to round the value | (step: number) => number | Math.round | - |
|
||||
| strokeColor | The color of progress bar, render `linear-gradient` when passing an object, could accept `string[]` when has `steps`. | string \| string[] \| ProgressGradient | - | - |
|
||||
| percentPosition | Progress value position, passed in object, `align` indicates the horizontal position of the value, `type` indicates whether the value is inside or outside the progress bar | PercentPositionType | { align: 'end', type: 'outer' } | - |
|
||||
|
||||
### `type="circle"`
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| steps | The total step count. When passing an object, `count` refers to the number of steps, and `gap` refers to the distance between them. When passing a number, the default value for `gap` is 2. | number \| { count: number, gap: number } | - | - |
|
||||
| strokeColor | The color of circular progress, render gradient when passing an object | string \| ProgressGradient | - | - |
|
||||
| strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number | 6 | - |
|
||||
|
||||
### `type="dashboard"`
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| steps | The total step count. When passing an object, `count` refers to the number of steps, and `gap` refers to the distance between them. When passing a number, the default value for `gap` is 2. | number \| { count: number, gap: number } | - | - |
|
||||
| gapDegree | The gap degree of half circle, 0 ~ 295 | number | 75 | - |
|
||||
| gapPlacement | The gap placement, options: `top` `bottom` `start` `end` | GapPlacement | `bottom` | - |
|
||||
| gapPosition | Deprecated. Please use `gapPlacement` instead | GapPosition | `bottom` | - |
|
||||
| strokeWidth | To set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 | - |
|
||||
|
||||
## Semantic DOM
|
||||
| _semantic | demo/_semantic.md |
|
||||
@@ -0,0 +1,31 @@
|
||||
# progress Token
|
||||
|
||||
Use these variables through `theme.components.Progress`. This document lists definitions only and does not include values.
|
||||
|
||||
```vue
|
||||
<a-config-provider
|
||||
:theme="{
|
||||
token: {
|
||||
// Global token configuration
|
||||
},
|
||||
components: {
|
||||
Progress: {
|
||||
// Token name: value
|
||||
},
|
||||
},
|
||||
}"
|
||||
>
|
||||
...
|
||||
</a-config-provider>
|
||||
```
|
||||
|
||||
## Token List
|
||||
|
||||
| Token | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `defaultColor` | `string` | Default color of progress bar |
|
||||
| `remainingColor` | `string` | Color of remaining part of progress bar |
|
||||
| `circleTextColor` | `string` | Text color of circular progress bar |
|
||||
| `lineBorderRadius` | `number` | Border radius of line progress bar |
|
||||
| `circleTextFontSize` | `string` | Text size of circular progress bar |
|
||||
| `circleIconFontSize` | `string` | Icon size of circular progress bar |
|
||||
Reference in new issue
Block a user