mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-24 00:40:34 +01:00
feat(Timeline): new component (#4215)
Co-authored-by: Benjamin Canac <canacb1@gmail.com> Co-authored-by: Jakub <jakub.michalek@freelo.io>
This commit is contained in:
@@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
import type { TimelineItem } from '@nuxt/ui'
|
||||
|
||||
const items: TimelineItem[] = [{
|
||||
date: 'Mar 15, 2025',
|
||||
title: 'Project Kickoff',
|
||||
icon: 'i-lucide-rocket',
|
||||
value: 'kickoff'
|
||||
}, {
|
||||
date: 'Mar 22, 2025',
|
||||
title: 'Design Phase',
|
||||
icon: 'i-lucide-palette',
|
||||
value: 'design'
|
||||
}, {
|
||||
date: 'Mar 29, 2025',
|
||||
title: 'Development Sprint',
|
||||
icon: 'i-lucide-code',
|
||||
value: 'development'
|
||||
}, {
|
||||
date: 'Apr 5, 2025',
|
||||
title: 'Testing & Deployment',
|
||||
icon: 'i-lucide-check-circle',
|
||||
value: 'deployment'
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTimeline
|
||||
:items="items"
|
||||
:ui="{ item: 'even:flex-row-reverse even:-translate-x-[calc(100%-2rem)] even:text-right' }"
|
||||
:default-value="2"
|
||||
class="w-full translate-x-[calc(50%-2rem)]"
|
||||
/>
|
||||
</template>
|
||||
Reference in New Issue
Block a user