76 lines
1.4 KiB
Vue
76 lines
1.4 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
label: {
|
|
type: String,
|
|
required: false,
|
|
default: null
|
|
},
|
|
icon: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
variant: {
|
|
type: String,
|
|
default: "solid"
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: "primary"
|
|
},
|
|
pos: {
|
|
type: Number,
|
|
default: 6 // Abstand von unten in Rem (6 = 1.5rem * 6 = 9rem)
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(["click"])
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Wrapper für Position + Animation -->
|
|
<div
|
|
class="fixed right-5 z-40 transition-all"
|
|
:style="{ bottom: `calc(${props.pos}rem + env(safe-area-inset-bottom))` }"
|
|
>
|
|
<UButton
|
|
id="fab"
|
|
:icon="props.icon"
|
|
:label="props.label"
|
|
:variant="props.variant"
|
|
:color="props.color"
|
|
@click="emit('click')"
|
|
class="
|
|
fab-base
|
|
shadow-xl
|
|
hover:shadow-2xl
|
|
active:scale-95
|
|
transition
|
|
"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* FAB Basis */
|
|
.fab-base {
|
|
border-radius: 9999px;
|
|
padding: 1rem 1.25rem;
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
|
|
/* Wenn nur ein Icon vorhanden ist → runder Kreis */
|
|
/* Wenn Label + Icon → Extended FAB */
|
|
}
|
|
|
|
/* Optional: Auto-Kreisen wenn kein Label */
|
|
#fab:not([label]) {
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
padding: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
}
|
|
</style>
|