38 lines
1.0 KiB
Vue
38 lines
1.0 KiB
Vue
<template>
|
|
<button
|
|
@click="$emit('click')"
|
|
:class="[
|
|
'flex flex-col items-center justify-center min-h-12 sm:min-h-14 w-min px-2 sm:ml-4 ml-1 rounded group text-white',
|
|
active
|
|
? 'text-green-500' // Style actif
|
|
: 'hover:text-green-500' // Effet de survol
|
|
]"
|
|
:aria-label="label || 'Toolbar button'">
|
|
<component v-if="icon" :is="icon" class="h-5 w-5 sm:h-6 sm:w-6" />
|
|
<ToolbarLabel :label="label" />
|
|
</button>
|
|
</template>
|
|
|
|
<script setup>
|
|
import ToolbarLabel from './ToolbarLabel.vue';
|
|
|
|
defineProps({
|
|
icon: {
|
|
type: [Object, Function], // Heroicons sont souvent importés comme des objets/fonctions
|
|
required: false,
|
|
default: null
|
|
},
|
|
label: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
},
|
|
active: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
defineEmits(['click']);
|
|
</script>
|