156 lines
3.9 KiB
Vue
156 lines
3.9 KiB
Vue
<template>
|
|
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
|
<div class="flex gap-4">
|
|
<MalioButtonIcon
|
|
icon="mdi:arrow-left"
|
|
aria-label="Retour"
|
|
/>
|
|
<MalioButtonIcon
|
|
icon="mdi:pencil-outline"
|
|
aria-label="Modifier"
|
|
/>
|
|
<MalioButtonIcon
|
|
icon="mdi:close"
|
|
aria-label="Fermer"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Icônes variées</h2>
|
|
<div class="flex gap-4">
|
|
<MalioButtonIcon
|
|
icon="mdi:download"
|
|
aria-label="Télécharger"
|
|
/>
|
|
<MalioButtonIcon
|
|
icon="mdi:bell-outline"
|
|
aria-label="Notifications"
|
|
/>
|
|
<MalioButtonIcon
|
|
icon="mdi:cog-outline"
|
|
aria-label="Paramètres"
|
|
/>
|
|
<MalioButtonIcon
|
|
icon="mdi:view-grid-outline"
|
|
aria-label="Grille"
|
|
/>
|
|
<MalioButtonIcon
|
|
icon="mdi:format-list-bulleted"
|
|
aria-label="Liste"
|
|
/>
|
|
<MalioButtonIcon
|
|
icon="mdi:folder-outline"
|
|
aria-label="Dossier"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
|
<div class="flex gap-4">
|
|
<MalioButtonIcon
|
|
icon="mdi:arrow-left"
|
|
aria-label="Retour"
|
|
disabled
|
|
/>
|
|
<MalioButtonIcon
|
|
icon="mdi:pencil-outline"
|
|
aria-label="Modifier"
|
|
disabled
|
|
/>
|
|
<MalioButtonIcon
|
|
icon="mdi:close"
|
|
aria-label="Fermer"
|
|
disabled
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Taille personnalisée</h2>
|
|
<div class="flex items-center gap-4">
|
|
<MalioButtonIcon
|
|
icon="mdi:arrow-left"
|
|
aria-label="Petit"
|
|
:icon-size="16"
|
|
/>
|
|
<MalioButtonIcon
|
|
icon="mdi:arrow-left"
|
|
aria-label="Normal"
|
|
:icon-size="24"
|
|
/>
|
|
<MalioButtonIcon
|
|
icon="mdi:arrow-left"
|
|
aria-label="Grand"
|
|
:icon-size="32"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Ghost</h2>
|
|
<div class="flex gap-4">
|
|
<MalioButtonIcon
|
|
icon="mdi:arrow-left"
|
|
aria-label="Retour"
|
|
variant="ghost"
|
|
/>
|
|
<MalioButtonIcon
|
|
icon="mdi:pencil-outline"
|
|
aria-label="Modifier"
|
|
variant="ghost"
|
|
/>
|
|
<MalioButtonIcon
|
|
icon="mdi:cancel-bold"
|
|
aria-label="Fermer"
|
|
variant="ghost"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Ghost désactivé</h2>
|
|
<div class="flex gap-4">
|
|
<MalioButtonIcon
|
|
icon="mdi:arrow-left"
|
|
aria-label="Retour"
|
|
variant="ghost"
|
|
disabled
|
|
/>
|
|
<MalioButtonIcon
|
|
icon="mdi:pencil-outline"
|
|
aria-label="Modifier"
|
|
variant="ghost"
|
|
disabled
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Avec événement click</h2>
|
|
<div class="flex items-center gap-4">
|
|
<MalioButtonIcon
|
|
icon="mdi:plus"
|
|
aria-label="Incrémenter"
|
|
@click="counter++"
|
|
/>
|
|
<span class="text-lg font-semibold">{{ counter }}</span>
|
|
<MalioButtonIcon
|
|
icon="mdi:minus"
|
|
aria-label="Décrémenter"
|
|
@click="counter--"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {ref} from 'vue'
|
|
|
|
const counter = ref(0)
|
|
</script>
|