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>