[#MUI-10] Création d'un composant bouton (#19)
| 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: #19 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #19.
This commit is contained in:
112
.playground/pages/composant/button/button.vue
Normal file
112
.playground/pages/composant/button/button.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Primary</h2>
|
||||
<div class="grid grid-cols-2 items-start gap-3">
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<MalioButton label="Valider" />
|
||||
<MalioButton label="Enregistrer" />
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<MalioButton label="Valider" button-class="bg-m-btn-primary-hover" />
|
||||
<MalioButton label="Valider" button-class="bg-m-btn-primary-hover" />
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<MalioButton label="Valider" button-class="bg-m-btn-primary-active" />
|
||||
<MalioButton label="Valider" button-class="bg-m-btn-primary-active" />
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<MalioButton label="Valider" disabled />
|
||||
<MalioButton label="Valider" disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Secondary</h2>
|
||||
<div class="grid grid-cols-2 items-start gap-3">
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Default + icon</p>
|
||||
<MalioButton label="Modifier" variant="secondary" />
|
||||
<MalioButton label="Modifier" variant="secondary" icon-name="mdi:pencil" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Hover + icon</p>
|
||||
<MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-hover" />
|
||||
<MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-hover" icon-name="mdi:pencil" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Active + icon</p>
|
||||
<MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-active" />
|
||||
<MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-active" icon-name="mdi:pencil" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
|
||||
<MalioButton label="Modifier" variant="secondary" disabled />
|
||||
<MalioButton label="Modifier" variant="secondary" disabled icon-name="mdi:pencil" icon-position="left" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Tertiary</h2>
|
||||
<div class="grid grid-cols-2 items-start gap-3">
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<MalioButton label="Voir plus" variant="tertiary" />
|
||||
<MalioButton label="Afficher" variant="tertiary" />
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" />
|
||||
<MalioButton label="Afficher" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" />
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" />
|
||||
<MalioButton label="Afficher" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" />
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<MalioButton label="Voir plus" variant="tertiary" disabled />
|
||||
<MalioButton label="Afficher" variant="tertiary" disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Danger</h2>
|
||||
<div class="grid grid-cols-2 items-start gap-3">
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<MalioButton label="Supprimer" variant="danger" icon-name="mdi:trash" icon-position="left" />
|
||||
<MalioButton label="Supprimer" variant="danger" icon-name="mdi:cancel-bold" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" icon-name="mdi:trash" icon-position="left" />
|
||||
<MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" icon-name="mdi:cancel-bold" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" icon-name="mdi:trash" icon-position="left" />
|
||||
<MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" icon-name="mdi:cancel-bold" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<MalioButton label="Supprimer" variant="danger" disabled icon-name="mdi:trash" icon-position="left" />
|
||||
<MalioButton label="Supprimer" variant="danger" disabled icon-name="mdi:cancel-bold" icon-position="left" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Avec icône</h2>
|
||||
<div class="grid grid-cols-2 items-start gap-3">
|
||||
<MalioButton label="Valider" icon-name="mdi:check" />
|
||||
<MalioButton label="Icône à gauche" icon-name="mdi:arrow-left" icon-position="left" />
|
||||
<MalioButton label="Modifier" variant="secondary" icon-name="mdi:pencil-outline" />
|
||||
<MalioButton label="Annuler" variant="tertiary" icon-name="mdi:close" />
|
||||
<MalioButton label="Supprimer" variant="danger" icon-name="mdi:trash-can-outline" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Largeur personnalisée</h2>
|
||||
<div class="grid grid-cols-2 items-start gap-3">
|
||||
<MalioButton label="Pleine largeur" button-class="w-full" />
|
||||
<MalioButton label="Compact" button-class="w-auto px-6" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user