feat(Timeline): add reverse prop (#4316)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
J-Michalek
2025-06-12 17:06:51 +02:00
committed by GitHub
parent 9bcf1ad92f
commit 5170cfd7eb
7 changed files with 383 additions and 21 deletions

View File

@@ -9,6 +9,7 @@ const orientations = Object.keys(theme.variants.orientation)
const orientation = ref('vertical' as const)
const color = ref('primary' as const)
const size = ref('md' as const)
const reverse = ref(false)
const items = [{
date: 'Mar 15, 2025',
@@ -46,6 +47,7 @@ const value = ref('kickoff')
<USelect v-model="orientation" :items="orientations" placeholder="Orientation" />
<USelect v-model="size" :items="sizes" placeholder="Size" />
<USelect v-model="value" :items="items.map(item => item.value)" placeholder="Value" />
<USelect v-model="reverse" :items="[true, false]" placeholder="Reverse" />
</div>
<UTimeline
@@ -54,6 +56,7 @@ const value = ref('kickoff')
:orientation="orientation"
:size="size"
:items="items"
:reverse="reverse"
class="data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-96"
/>
</div>