chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

feat: add icon support for badge component

Browse source
This commit is contained in:
Methapon Metanipat 2024-10-28 10:23:35 +07:00
parent 8ea21b1795
commit de20b984e8
1 changed files with 4 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/BadgeComponent.vue
View file

@ -1,5 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { Icon } from '@iconify/vue';
defineProps<{ defineProps<{
icon?: string;
title?: string; title?: string;
titleI18n?: string; titleI18n?: string;
hslaColor?: string; hslaColor?: string;
@ -11,7 +13,8 @@ defineProps<{
class="rounded q-px-sm flex-center" class="rounded q-px-sm flex-center"
:style="`color: hsla(var(${!!hslaColor ? hslaColor : '--green-6-hsl'}) / 0.8); background: hsla(var(${!!hslaColor ? hslaColor : '--green-6-hsl'}) / 0.1); `" :style="`color: hsla(var(${!!hslaColor ? hslaColor : '--green-6-hsl'}) / 0.8); background: hsla(var(${!!hslaColor ? hslaColor : '--green-6-hsl'}) / 0.1); `"
> >
&#128900; <template v-if="!icon">&#128900;</template>
<Icon v-else :icon style="margin-right: 0.25rem" />
{{ title || (!!titleI18n ? $t(titleI18n) : '-') }} {{ title || (!!titleI18n ? $t(titleI18n) : '-') }}
</div> </div>
</template> </template>