arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(collapsible): update

Browse Source
This commit is contained in:
Benjamin Canac
2024-07-31 16:44:32 +02:00
parent 973560e6f1
commit b9f4bcbbc9
5 changed files with 80 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/app/components/content/examples/collapsible/CollapsibleExample.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<UCollapsible class="w-48 mx-auto">
<UButton label="Open" color="gray" variant="subtle" />
<template #content>
<Placeholder class="h-48" />
</template>
</UCollapsible>
</template>

17
docs/app/components/content/examples/collapsible/CollapsibleIconExample.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<UCollapsible class="w-48 mx-auto">
<UButton
class="group"
label="Open"
color="gray"
variant="subtle"
trailing-icon="i-heroicons-chevron-down-20-solid"
:ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
block
/>
<template #content>
<Placeholder class="h-48" />
</template>
</UCollapsible>
</template>

17
docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue Normal file
View File

@@ -0,0 +1,17 @@
<script setup lang="ts">
const open = ref(true)
defineShortcuts({
o: () => open.value = !open.value
})
</script>
<template>
<UCollapsible v-model:open="open" class="w-48 mx-auto">
<UButton label="Open" color="gray" variant="subtle" />
<template #content>
<Placeholder class="h-48" />
</template>
</UCollapsible>
</template>