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

playground(collapsible): use #trailing slot

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-13 12:27:24 +01:00
parent 959b1295f2
commit e07088068f
1 changed files with 6 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
playground/pages/collapsible.vue
View File

@@ -1,16 +1,13 @@
<template>
<UCollapsible class="space-y-2 w-48">
<UButton
class="group"
color="gray"
label="Open"
block
trailing-icon="i-heroicons-chevron-right-20-solid"
:ui="{ trailingIcon: 'group-data-[state=open]:rotate-90 transition' }"
/>
<UButton class="group" color="gray" label="Open" block>
<template #trailing="trailingProps">
<UIcon name="i-heroicons-chevron-right-20-solid" :class="trailingProps.class" class="group-data-[state=open]:rotate-90 transition duration-200" />
</template>
</UButton>
<template #content>
<div class="bg-primary-500 dark:bg-primary-400 h-12 w-full" />
<div class="bg-primary-500 dark:bg-primary-400 rounded-md h-12 w-full" />
</template>
</UCollapsible>
</template>