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

prepate progress.md

Browse Source
This commit is contained in:
hirakei1203
2022-10-29 11:22:25 +09:00
parent 11490b1e9a
commit eb6f4bd33a
9 changed files with 125 additions and 15 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" progress="45"></Progress>
</template>
<script setup>
import { Progress } from '../../../../src/index'
</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 '../../../../src/index'
</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 '../../../../src/index'
</script>

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

@@ -1,14 +1,22 @@
<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>
```
@@ -17,11 +25,78 @@ import { Progress } from 'flowbite-vue'
## 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" 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 />