jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #96 from hirakei1203/add/khirano/add_new_progress_component

Browse Source 
Add progress bar component (Issue #68)
This commit is contained in:
Ilya Artamonov
2022-11-20 21:01:29 +03:00
committed by GitHub
parent a71aaa7dd9 7f2c03024c
commit 3f5a4e169f
12 changed files with 233 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
docs/components/progress/examples/ProgressColorExample.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div class="vp-raw flex flex-col grid gap-4">
<Progress label="Default" progress="45"></Progress>
<Progress color="dark" label="Dark" progress="45"></Progress>
<Progress color="blue" label="Blue" progress="45"></Progress>
<Progress color="red" label="Red" progress="45"></Progress>
<Progress color="green" label="Green" progress="45"></Progress>
<Progress color="yellow" label="Yellow" progress="45"></Progress>
<Progress color="indigo" label="Indigo" progress="45"></Progress>
<Progress color="purple" label="Purple" progress="45"></Progress>
</div>
</template>
<script setup>
import { Progress } from '../../../../src/index'
</script>

2
docs/components/progress/examples/ProgressExample.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="vp-raw flex flex-col">
<Progress></Progress>
<Progress progress="45"></Progress>
</div>
</template>
<script setup>

6
docs/components/progress/examples/ProgressInsideLabelExample.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<Progress labelProgress="true" labelPosition="inside" size="lg" progress="45"></Progress>
</template>
<script setup>
import { Progress } from 'flowbite-vue'
</script>

6
docs/components/progress/examples/ProgressOutsideLabelExample.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<Progress labelProgress="true" labelPosition="outside" label="Flowbite Vue 3" progress="45"></Progress>
</template>
<script setup>
import { Progress } from 'flowbite-vue'
</script>

11
docs/components/progress/examples/ProgressSizeExample.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<div class="flex flex-col grid gap-4">
<Progress size="sm" label="Small" progress="45"></Progress>
<Progress size="md" label="Medium" progress="45"></Progress>
<Progress size="lg" label="Large" progress="45"></Progress>
<Progress size="xl" label="Extra Large" progress="45"></Progress>
</div>
</template>
<script setup>
import { Progress } from 'flowbite-vue'
</script>

89
docs/components/progress/progress.md
View File

@@ -1,15 +1,102 @@
<script setup>
import ProgressExample from './examples/ProgressExample.vue'
import ProgressSizeExample from './examples/ProgressSizeExample.vue'
import ProgressInsideLabelExample from './examples/ProgressInsideLabelExample.vue'
import ProgressOutsideLabelExample from './examples/ProgressOutsideLabelExample.vue'
import ProgressColorExample from './examples/ProgressColorExample.vue'
</script>
# Vue Progress Bar Component - Flowbite
## Default
```vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
<Progress></Progress>
<Progress progress="45"></Progress>
</template>
```
<ProgressExample />
## Sizes
You can also use different sizes by using various sizing.
```vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
<!-- small size -->
<Progress size="sm" label="Small" progress="45"></Progress>
<!-- medium size -->
<Progress size="md" label="Medium" progress="45"></Progress>
<!-- large size -->
<Progress size="lg" label="Large" progress="45"></Progress>
<!-- extra large size -->
<Progress size="xl" label="Extra Large" progress="45"></Progress>
</template>
```
<ProgressSizeExample />
## With label inside
Here is an example of using a progress bar with the label inside the bar.
```vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
<Progress labelProgress="true" labelPosition="inside" size="lg" progress="45"></Progress>
</template>
```
<ProgressInsideLabelExample />
## With label outside
And this is an example of using a progress bar outside the bar.
```vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
<Progress labelProgress="true" labelPosition="outside" label="Flowbite Vue 3" progress="45"></Progress>
</template>
```
<ProgressOutsideLabelExample />
## Colors
You can also apply color.
```vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
<!-- Default color -->
<Progress label="Default" progress="45"></Progress>
<!-- Dark -->
<Progress color="dark" label="Dark" progress="45"></Progress>
<!-- Blue -->
<Progress color="blue" label="Blue" progress="45"></Progress>
<!-- Red -->
<Progress color="red" label="Red" progress="45"></Progress>
<!-- Green -->
<Progress color="green" label="Green" progress="45"></Progress>
<!-- Yellow -->
<Progress color="yellow" label="Yellow" progress="45"></Progress>
<!-- Indigo -->
<Progress color="indigo" label="Indigo" progress="45"></Progress>
<!-- Purple -->
<Progress color="purple" label="Purple" progress="45"></Progress>
</template>
```
<ProgressColorExample />