64 lines
2.2 KiB
Vue
64 lines
2.2 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">Multiple (filtres) — défaut</h2>
|
|
<MalioAccordion v-model="multiple">
|
|
<MalioAccordionItem title="Prix" value="prix">
|
|
<p>Slider de prix ici…</p>
|
|
</MalioAccordionItem>
|
|
<MalioAccordionItem title="Catégorie" value="cat">
|
|
<p>Liste de checkboxes ici…</p>
|
|
</MalioAccordionItem>
|
|
<MalioAccordionItem title="Marque" value="marque">
|
|
<p>Recherche + liste ici…</p>
|
|
</MalioAccordionItem>
|
|
</MalioAccordion>
|
|
<p class="mt-2 text-sm text-gray-500">Ouverts : {{ multiple }}</p>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Single (FAQ)</h2>
|
|
<MalioAccordion v-model="single" mode="single">
|
|
<MalioAccordionItem title="Question 1" value="q1">
|
|
<p>Réponse 1</p>
|
|
</MalioAccordionItem>
|
|
<MalioAccordionItem title="Question 2" value="q2">
|
|
<p>Réponse 2</p>
|
|
</MalioAccordionItem>
|
|
</MalioAccordion>
|
|
<p class="mt-2 text-sm text-gray-500">Ouvert : {{ single }}</p>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Non contrôlé + defaultOpen</h2>
|
|
<MalioAccordion>
|
|
<MalioAccordionItem title="Section A" value="a" :default-open="true">
|
|
<p>Ouverte au montage</p>
|
|
</MalioAccordionItem>
|
|
<MalioAccordionItem title="Section B" value="b">
|
|
<p>Fermée au montage</p>
|
|
</MalioAccordionItem>
|
|
</MalioAccordion>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Section désactivée</h2>
|
|
<MalioAccordion>
|
|
<MalioAccordionItem title="Active" value="ok">
|
|
<p>Contenu accessible</p>
|
|
</MalioAccordionItem>
|
|
<MalioAccordionItem title="Désactivée" value="ko" :disabled="true">
|
|
<p>Inaccessible</p>
|
|
</MalioAccordionItem>
|
|
</MalioAccordion>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {ref} from 'vue'
|
|
|
|
const multiple = ref<string[]>(['prix'])
|
|
const single = ref('q1')
|
|
</script>
|