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

refactor: enhance FloatingActionButton to support custom icons

Browse source
This commit is contained in:
puriphatt 2025-04-10 17:22:13 +07:00
parent 5b1ccadf92
commit a40f9f9775
1 changed files with 11 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/FloatingActionButton.vue
View file

@ -1,6 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';
defineProps<{ defineProps<{
hideIcon?: boolean; hideIcon?: boolean;
icon?: string;
}>(); }>();
</script> </script>
@ -10,10 +13,13 @@ defineProps<{
v-if="!hideIcon" v-if="!hideIcon"
id="btn-add" id="btn-add"
padding="sm" padding="sm"
icon="mdi-plus" :icon="icon ? undefined : 'mdi-plus'"
direction="up" direction="up"
class="color-btn" class="color-btn"
> >
<template #icon v-if="icon">
<Icon :icon width="24" />
</template>
<slot> <slot>
<q-fab-action <q-fab-action
padding="xs" padding="xs"
@ -29,10 +35,12 @@ defineProps<{
fab fab
id="btn-add" id="btn-add"
padding="sm" padding="sm"
icon="mdi-plus" :icon="icon ? undefined : 'mdi-plus'"
direction="up" direction="up"
class="color-btn" class="color-btn"
/> >
<Icon v-if="icon" :icon width="24" />
</q-btn>
</q-page-sticky> </q-page-sticky>
</template> </template>