mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-28 02:40:35 +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:
J-Michalek
GitHub
@@ -200,6 +200,10 @@ Use the `#content` slot to customize the content of each item.
|
||||
|
||||
Use the `slot` property to customize a specific item.
|
||||
|
||||
You will have access to the following slots:
|
||||
|
||||
- `#{{ item.slot }}`{lang="ts-type"}
|
||||
|
||||
:component-example{name="stepper-custom-slot-example"}
|
||||
|
||||
## API
|
||||
|
||||
@@ -222,6 +222,10 @@ Use the `#content` slot to customize the content of each item.
|
||||
|
||||
Use the `slot` property to customize a specific item.
|
||||
|
||||
You will have access to the following slots:
|
||||
|
||||
- `#{{ item.slot }}`{lang="ts-type"}
|
||||
|
||||
:component-example{name="tabs-custom-slot-example"}
|
||||
|
||||
## API
|
||||
|
||||
228
docs/content/3.components/timeline.md
Normal file
228
docs/content/3.components/timeline.md
Normal file
@@ -0,0 +1,228 @@
|
||||
---
|
||||
title: Timeline
|
||||
description: 'A component that displays a sequence of events with dates, titles, icons or avatars.'
|
||||
category: data
|
||||
links:
|
||||
- label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Timeline.vue
|
||||
navigation.badge: Soon
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
### Items
|
||||
|
||||
Use the `items` prop as an array of objects with the following properties:
|
||||
|
||||
- `date?: string`{lang="ts-type"}
|
||||
- `title?: string`{lang="ts-type"}
|
||||
- `description?: AvatarProps`{lang="ts-type"}
|
||||
- `icon?: string`{lang="ts-type"}
|
||||
- `avatar?: AvatarProps`{lang="ts-type"}
|
||||
- `value?: string | number`{lang="ts-type"}
|
||||
- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
|
||||
- `class?: any`{lang="ts-type"}
|
||||
- `ui?: { item?: ClassNameValue, container?: ClassNameValue, indicator?: ClassNameValue, separator?: ClassNameValue, wrapper?: ClassNameValue, separator?: ClassNameValue, date?: ClassNameValue, title?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}
|
||||
|
||||
::component-code
|
||||
---
|
||||
ignore:
|
||||
- items
|
||||
- class
|
||||
- defaultValue
|
||||
external:
|
||||
- items
|
||||
externalTypes:
|
||||
- TimelineItem[]
|
||||
props:
|
||||
defaultValue: 2
|
||||
items:
|
||||
- date: 'Mar 15, 2025'
|
||||
title: 'Project Kickoff'
|
||||
description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.'
|
||||
icon: 'i-lucide-rocket'
|
||||
- date: 'Mar 22 2025'
|
||||
title: 'Design Phase'
|
||||
description: 'User research and design workshops. Created wireframes and prototypes for user testing.'
|
||||
icon: 'i-lucide-palette'
|
||||
- date: 'Mar 29 2025'
|
||||
title: 'Development Sprint'
|
||||
description: 'Frontend and backend development. Implemented core features and integrated with APIs.'
|
||||
icon: 'i-lucide-code'
|
||||
- date: 'Apr 5 2025'
|
||||
title: 'Testing & Deployment'
|
||||
description: 'QA testing and performance optimization. Deployed the application to production.'
|
||||
icon: 'i-lucide-check-circle'
|
||||
class: 'w-96'
|
||||
---
|
||||
::
|
||||
|
||||
### Color
|
||||
|
||||
Use the `color` prop to change the color of the active items in a Timeline.
|
||||
|
||||
::component-code
|
||||
---
|
||||
ignore:
|
||||
- items
|
||||
- class
|
||||
- defaultValue
|
||||
external:
|
||||
- items
|
||||
externalTypes:
|
||||
- TimelineItem[]
|
||||
props:
|
||||
color: neutral
|
||||
defaultValue: 2
|
||||
items:
|
||||
- date: 'Mar 15, 2025'
|
||||
title: 'Project Kickoff'
|
||||
description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.'
|
||||
icon: 'i-lucide-rocket'
|
||||
- date: 'Mar 22 2025'
|
||||
title: 'Design Phase'
|
||||
description: 'User research and design workshops. Created wireframes and prototypes for user testing.'
|
||||
icon: 'i-lucide-palette'
|
||||
- date: 'Mar 29 2025'
|
||||
title: 'Development Sprint'
|
||||
description: 'Frontend and backend development. Implemented core features and integrated with APIs.'
|
||||
icon: 'i-lucide-code'
|
||||
- date: 'Apr 5 2025'
|
||||
title: 'Testing & Deployment'
|
||||
description: 'QA testing and performance optimization. Deployed the application to production.'
|
||||
icon: 'i-lucide-check-circle'
|
||||
class: 'w-96'
|
||||
---
|
||||
::
|
||||
|
||||
### Size
|
||||
|
||||
Use the `size` prop to change the size of the Timeline.
|
||||
|
||||
::component-code
|
||||
---
|
||||
ignore:
|
||||
- items
|
||||
- class
|
||||
- defaultValue
|
||||
external:
|
||||
- items
|
||||
externalTypes:
|
||||
- TimelineItem[]
|
||||
props:
|
||||
size: xs
|
||||
defaultValue: 2
|
||||
items:
|
||||
- date: 'Mar 15, 2025'
|
||||
title: 'Project Kickoff'
|
||||
description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.'
|
||||
icon: 'i-lucide-rocket'
|
||||
- date: 'Mar 22 2025'
|
||||
title: 'Design Phase'
|
||||
description: 'User research and design workshops. Created wireframes and prototypes for user testing.'
|
||||
icon: 'i-lucide-palette'
|
||||
- date: 'Mar 29 2025'
|
||||
title: 'Development Sprint'
|
||||
description: 'Frontend and backend development. Implemented core features and integrated with APIs.'
|
||||
icon: 'i-lucide-code'
|
||||
- date: 'Apr 5 2025'
|
||||
title: 'Testing & Deployment'
|
||||
description: 'QA testing and performance optimization. Deployed the application to production.'
|
||||
icon: 'i-lucide-check-circle'
|
||||
class: 'w-96'
|
||||
---
|
||||
::
|
||||
|
||||
### Orientation
|
||||
|
||||
Use the `orientation` prop to change the orientation of the Timeline. Defaults to `vertical`.
|
||||
|
||||
::component-code
|
||||
---
|
||||
ignore:
|
||||
- items
|
||||
- class
|
||||
- defaultValue
|
||||
external:
|
||||
- items
|
||||
externalTypes:
|
||||
- TimelineItem[]
|
||||
props:
|
||||
orientation: 'horizontal'
|
||||
defaultValue: 2
|
||||
items:
|
||||
- date: 'Mar 15, 2025'
|
||||
title: 'Project Kickoff'
|
||||
description: 'Kicked off the project with team alignment.'
|
||||
icon: 'i-lucide-rocket'
|
||||
- date: 'Mar 22 2025'
|
||||
title: 'Design Phase'
|
||||
description: 'User research and design workshops.'
|
||||
icon: 'i-lucide-palette'
|
||||
- date: 'Mar 29 2025'
|
||||
title: 'Development Sprint'
|
||||
description: 'Frontend and backend development.'
|
||||
icon: 'i-lucide-code'
|
||||
- date: 'Apr 5 2025'
|
||||
title: 'Testing & Deployment'
|
||||
description: 'QA testing and performance optimization.'
|
||||
icon: 'i-lucide-check-circle'
|
||||
class: 'w-full'
|
||||
---
|
||||
::
|
||||
|
||||
## Examples
|
||||
|
||||
### Control active item
|
||||
|
||||
You can control the active item by using the `default-value` prop or the `v-model` directive with the index of the item.
|
||||
|
||||
:component-example{name="timeline-model-value-example" prettier}
|
||||
|
||||
::tip
|
||||
You can also pass the `value` of one of the items if provided.
|
||||
::
|
||||
|
||||
### With alternating layout
|
||||
|
||||
Use the `ui` prop to create a Timeline with alternating layout.
|
||||
|
||||
:component-example{name="timeline-alternating-layout-example" prettier}
|
||||
|
||||
### With custom slot
|
||||
|
||||
Use the `slot` property to customize a specific item.
|
||||
|
||||
You will have access to the following slots:
|
||||
|
||||
- `#{{ item.slot }}-indicator`{lang="ts-type"}
|
||||
- `#{{ item.slot }}-date`{lang="ts-type"}
|
||||
- `#{{ item.slot }}-title`{lang="ts-type"}
|
||||
- `#{{ item.slot }}-description`{lang="ts-type"}
|
||||
|
||||
:component-example{name="timeline-custom-slot-example" prettier}
|
||||
|
||||
### With slots
|
||||
|
||||
Use the available slots to create a more complex Timeline.
|
||||
|
||||
:component-example{name="timeline-slots-example" prettier}
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
:component-props
|
||||
|
||||
### Slots
|
||||
|
||||
:component-slots
|
||||
|
||||
### Emits
|
||||
|
||||
:component-emits
|
||||
|
||||
## Theme
|
||||
|
||||
:component-theme
|
||||
@@ -407,7 +407,14 @@ This lets you select a parent item without expanding or collapsing its children.
|
||||
|
||||
### With custom slot
|
||||
|
||||
Use the `item.slot` property to customize a specific item.
|
||||
Use the `slot` property to customize a specific item.
|
||||
|
||||
You will have access to the following slots:
|
||||
|
||||
- `#{{ item.slot }}`{lang="ts-type"}
|
||||
- `#{{ item.slot }}-leading`{lang="ts-type"}
|
||||
- `#{{ item.slot }}-label`{lang="ts-type"}
|
||||
- `#{{ item.slot }}-trailing`{lang="ts-type"}
|
||||
|
||||
::component-example
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user