Files
ui/playground/app/pages/components/collapsible.vue
2024-07-09 17:08:16 +02:00

25 lines
600 B
Vue

<script setup lang="ts">
const appConfig = useAppConfig()
</script>
<template>
<div class="flex-1">
<UCollapsible class="space-y-2 w-48">
<UButton
class="group"
icon="i-heroicons-light-bulb"
:trailing-icon="appConfig.ui.icons.chevronDown"
color="gray"
variant="outline"
label="Open"
block
:ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
/>
<template #content>
<Placeholder class="h-96 w-full" />
</template>
</UCollapsible>
</div>
</template>