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

add color classes

Browse Source
This commit is contained in:
hirakei1203
2022-10-28 22:11:26 +09:00
parent d302645ca1
commit 42ed8cfc19
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Progress/Progress.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700"> <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-blue-600 h-2.5 rounded-full" :class="wrapperClasses" style="width: 45%"></div> <div class="h-2.5 rounded-full" :class="wrapperClasses" style="width: 45%"></div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@@ -11,7 +11,7 @@ import { useProgressClasses } from './composables/useProgressClasses'
const props = defineProps({ const props = defineProps({
color: { color: {
type: String, // 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' type: String, // 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple'
default: 'yellow', default: 'pink',
}, },
label: { label: {
type: String, type: String,

10
src/components/Progress/composables/useProgressClasses.ts
View File

@@ -8,16 +8,16 @@ export type ProgressClassMap<T extends string> = { default: Record<T, string> }
const progressColorClasses: ProgressClassMap<ProgressVariant> = { const progressColorClasses: ProgressClassMap<ProgressVariant> = {
default: { default: {
default: '', default: 'bg-blue-600 dark:bg-blue-600',
blue: 'bg-blue-600', blue: 'bg-blue-600 dark:bg-blue-600',
alternative: '', alternative: 'dark:bg-gray-800',
dark: 'bg-gray-600 dark:bg-gray-300', dark: 'bg-gray-600 dark:bg-gray-300',
light: '', light: 'bg-white dark:bg-gray-800',
green: 'bg-green-600 dark:bg-green-500', green: 'bg-green-600 dark:bg-green-500',
red: 'bg-red-600 dark:bg-red-500', red: 'bg-red-600 dark:bg-red-500',
yellow: 'bg-yellow-400', yellow: 'bg-yellow-400',
purple: 'bg-purple-600 dark:bg-purple-500', purple: 'bg-purple-600 dark:bg-purple-500',
pink: '', pink: 'bg-pink-700 dark:bg-pink-600',
}, },
} }