mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
53 lines
2.9 KiB
Vue
53 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
const items = [{
|
|
label: 'Getting Started',
|
|
icon: 'i-heroicons-information-circle',
|
|
defaultOpen: true,
|
|
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
|
|
}, {
|
|
label: 'Installation',
|
|
icon: 'i-heroicons-arrow-down-tray',
|
|
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
|
|
}, {
|
|
label: 'Theming',
|
|
icon: 'i-heroicons-eye-dropper',
|
|
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
|
|
}, {
|
|
label: 'Layouts',
|
|
icon: 'i-heroicons-rectangle-group',
|
|
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
|
|
}, {
|
|
label: 'Components',
|
|
icon: 'i-heroicons-square-3-stack-3d',
|
|
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
|
|
}, {
|
|
label: 'Utilities',
|
|
icon: 'i-heroicons-wrench-screwdriver',
|
|
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
|
|
}]
|
|
</script>
|
|
|
|
<template>
|
|
<UAccordion :items="items" :ui="{ wrapper: 'flex flex-col w-full' }">
|
|
<template #default="{ item, index, open }">
|
|
<UButton color="gray" variant="ghost" class="border-b border-gray-200 dark:border-gray-700" :ui="{ rounded: 'rounded-none', padding: { sm: 'p-3' } }">
|
|
<template #leading>
|
|
<div class="w-6 h-6 rounded-full bg-primary-500 dark:bg-primary-400 flex items-center justify-center -my-1">
|
|
<UIcon :name="item.icon" class="w-4 h-4 text-white dark:text-gray-900" />
|
|
</div>
|
|
</template>
|
|
|
|
<span class="truncate">{{ index + 1 }}. {{ item.label }}</span>
|
|
|
|
<template #trailing>
|
|
<UIcon
|
|
name="i-heroicons-chevron-right-20-solid"
|
|
class="w-5 h-5 ms-auto transform transition-transform duration-200"
|
|
:class="[open && 'rotate-90']"
|
|
/>
|
|
</template>
|
|
</UButton>
|
|
</template>
|
|
</UAccordion>
|
|
</template>
|