MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#MUI-14] Création d'un composant bouton icône (#15)

Browse Source 
| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Reviewed-on: #15
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #15.
This commit is contained in:
Autin
2026-03-20 11:00:38 +00:00
committed by Autin
parent 9843f4d032
commit c95a3657c0
7 changed files with 634 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
.playground/pages/composant/buttonIcon.vue Normal file
View File

@@ -0,0 +1,155 @@
<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>