mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-23 16:30:45 +01:00
feat(Progress): new component (#697)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Italo
GitHub
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<UProgress class="progress">
|
||||
<template #indicator>
|
||||
<div class="text-right text-amber-500">
|
||||
🔥 This is too hot!
|
||||
</div>
|
||||
</template>
|
||||
</UProgress>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.progress:deep(progress:indeterminate.animation-default) {
|
||||
&:after {
|
||||
@apply w-full text-red-500;
|
||||
animation: my-glow-animation 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
@apply w-full text-red-500;
|
||||
animation: my-glow-animation 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&::-moz-progress-bar {
|
||||
@apply w-full text-red-500;
|
||||
animation: my-glow-animation 3s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes my-glow-animation {
|
||||
50% {
|
||||
@apply text-amber-400;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup>
|
||||
const temp = ref(35)
|
||||
|
||||
const color = computed(() => {
|
||||
switch (true) {
|
||||
case temp.value < 10: return 'blue'
|
||||
case temp.value < 20: return 'amber'
|
||||
case temp.value < 30: return 'orange'
|
||||
default: return 'red'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UProgress :value="temp" :max="40" :color="color">
|
||||
<template #indicator="{ percent }">
|
||||
<div class="text-right" :style="{ width: `${percent}%` }">
|
||||
<span v-if="temp < 10" class="text-blue-500">Too cold!</span>
|
||||
<span v-else-if="temp < 20" class="text-amber-500">Warm</span>
|
||||
<span v-else-if="temp < 30" class="text-orange-500">Hot</span>
|
||||
<span v-else class="text-red-500 font-bold">🔥 Too hot!</span>
|
||||
</div>
|
||||
</template>
|
||||
</UProgress>
|
||||
</template>
|
||||
31
docs/components/content/examples/ProgressExampleSlotStep.vue
Normal file
31
docs/components/content/examples/ProgressExampleSlotStep.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<script setup>
|
||||
const task = ref(1)
|
||||
|
||||
const steps = [
|
||||
'Cloning...',
|
||||
'Migrating...',
|
||||
'Deploying...'
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UProgress :value="task" :max="steps" indicator>
|
||||
<template #step-0="{ step }">
|
||||
<span class="text-lime-500">
|
||||
<UIcon name="i-heroicons-arrow-down-circle" /> {{ step }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #step-1="{ step }">
|
||||
<span class="text-amber-500">
|
||||
<UIcon name="i-heroicons-circle-stack" /> {{ step }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #step-2="{ step }">
|
||||
<span class="text-blue-500">
|
||||
<UIcon name="i-heroicons-hand-thumb-up" /> {{ step }}
|
||||
</span>
|
||||
</template>
|
||||
</UProgress>
|
||||
</template>
|
||||
153
docs/content/2.elements/10.progress.md
Normal file
153
docs/content/2.elements/10.progress.md
Normal file
@@ -0,0 +1,153 @@
|
||||
---
|
||||
title: 'Progress'
|
||||
description: Show a horizontal bar to indicate task progression.
|
||||
navigation:
|
||||
badge: New
|
||||
links:
|
||||
- label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Progress.vue
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Pass an integer as the `value` from `0` to `100` to the Progress bar component.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
value: 70
|
||||
---
|
||||
::
|
||||
|
||||
::callout{icon="i-heroicons-light-bulb"}
|
||||
Check out the [Range](/forms/range) component for forms.
|
||||
::
|
||||
|
||||
### Max
|
||||
|
||||
You may also set the `max` number to set the maximum progress value, which will be relative to 100% percent.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
value: 2
|
||||
max: 5
|
||||
options:
|
||||
- name: max
|
||||
restriction: only
|
||||
values:
|
||||
- 3
|
||||
- 4
|
||||
- 5
|
||||
- 6
|
||||
- 7
|
||||
---
|
||||
::
|
||||
|
||||
### Steps
|
||||
|
||||
You can set an array of named steps in the `max` prop to show the active step, at the same time it sets the maximum value.
|
||||
|
||||
The first step is always shown at `0%`, making the last `100%`.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
value: 0
|
||||
max:
|
||||
- Waiting to start
|
||||
- Cloning...
|
||||
- Migrating...
|
||||
- Deployed!
|
||||
excludedProps:
|
||||
- max
|
||||
---
|
||||
::
|
||||
|
||||
### Progress indicator
|
||||
|
||||
You can add a numeric indicator, which will show the percent on top the progress track.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
value: 20
|
||||
indicator: true
|
||||
---
|
||||
::
|
||||
|
||||
### Indeterminate
|
||||
|
||||
By not setting a `value`, or setting it as `null`, the progress bar becomes _indeterminate_. The bar will be animated as a carousel, but you can change it using the `animation` prop for an inverse carousel, a swinging bar or an elastic bar.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
value: null
|
||||
props:
|
||||
animation: 'carousel'
|
||||
options:
|
||||
- name: animation
|
||||
restriction: only
|
||||
values:
|
||||
- 'carousel'
|
||||
- 'carousel-inverse'
|
||||
- 'swing'
|
||||
- 'elastic'
|
||||
---
|
||||
::
|
||||
|
||||
### Size
|
||||
|
||||
Use the `size` prop to change the size of the progress bar.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
value: 70
|
||||
props:
|
||||
size: 'sm'
|
||||
indicator: false
|
||||
excludedProps:
|
||||
- value
|
||||
---
|
||||
::
|
||||
|
||||
### Style
|
||||
|
||||
Use the `color` prop to change the visual style of the Progress bar. The `color` can be any color from the `ui.colors` object.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
value: 70
|
||||
props:
|
||||
color: 'primary'
|
||||
indicator: false
|
||||
excludedProps:
|
||||
- modelValue
|
||||
---
|
||||
::
|
||||
|
||||
## Slots
|
||||
|
||||
### `indicator`
|
||||
|
||||
You can use the `#indicator` slot to show a custom indicator above the progress bar. It receives the current `percent` of progress.
|
||||
|
||||
:component-example{component="progress-example-slot-indicator"}
|
||||
|
||||
### `step-<index>`
|
||||
|
||||
Use the `#step-<index>` to alter the HTML being shown for each step.
|
||||
|
||||
:component-example{component="progress-example-slot-step"}
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
Reference in New Issue
Block a user