Timeline

The timeline displays a list of events in chronological order.

Import

import {
  MpTimeline,
  MpTimelineItem,
  MpTimelineTitle,
  MpTimelineCaption,
  MpTimelineContent,
  MpTimelineDocument,
  MpTimelineLog,
  MpTimelineLogItem,
  MpTimelineAccordion
} from '@mekari/pixel3'

Playground

API

MpTimeline

Slots

Name	Type
default Timeline slot	any

MpTimelineAccordion

Props

Slots

Name	Type	Default
is-open If `true` content will be visible.	boolean	false
label Label of timeline accordion.	string	-

MpTimelineItem

Props

Slots

Name	Type	Default
status Status of timeline item.	"approved" | "canceled" | "need-approval" | "rejected" | "created"	created
icon Icon of timeline item.	IconName	created
icon-variant Icon variant of timeline item.	"outline" | "duotone" | "fill"	-
icon-color Icon color of timeline item.	ColorToken | string	-

MpTimelineTitle

Slots

Name	Type
default Timeline title slot	any

MpTimelineCaption

Slots

Name	Type
default Timeline caption slot	any

MpTimelineContent

Slots

Name	Type
default Timeline content slot	any

MpTimelineDocument

Props

Slots

Name	Type	Default
title Title of timeline document.	string	-
file-size File size of timeline document.	string	-
icon Icon of timeline document.	string	-
icon-variant Icon variant of timeline document.	"outline" | "duotone" | "fill"	-

MpTimelineLog

Props

Slots

Name	Type	Default
is-open If `true` content will be visible.	boolean	false

MpTimelineLogItem

Slots

Name	Type
default Timeline log item slot	any

Usage

With Description

With Action

With Document

With Log

With Accordion

With Multiple content

With Other component