# Timelines

MTimeline is very useful for displaying chronological information.

# Usage

MTimeline displays a vertical time axis in its simplest form, and it should contain at least one MTimelineItem.

timeline item
timeline item
timeline item

# API

# Examples

# Props

# Color

Colored points can create visual breakpoints, making your timeline easier to read.

Timeline

8
Monday
February 2015
5pm
New Icon
Mobile App
3-4pm
Design Stand Up
Hangouts
12pm
Lunch break
9-11am
Finish Home Screen
Web App

# Dense

The Dense timeline puts everything on the right. In this example, MAlert replaces the card to provide a different design.

Loading...

# Icon dots

Conditionally use icons within the MTimelineItem's dot to provide additional context.

Loading...

# Reverse

You use the Reverse attribute to determine the direction of the timeline item. This can work in both the default mode and the Dense mode.

Loading...

# Small

The Small attribute allows different styles to provide unique designs.

Loading...

# Contents

# IconContent

Insert avatars into dots with use of the IconContent slot and MAvatar.

Loading...

# OppositeContent

The OppositeContent slot provides an extra layer of customization in your timeline.

Loading...

# Default

If you place a MCard inside of a MTimelineItem, a caret will appear on the side of the card.

Loading...

# Misc

# Advanced

Modular components allow you to create highly customized solutions that just work.

Loading...

# Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.

Edit this page on Github Compontents.Footer.Edit.End
Last updated: 3/28/2022 2:24:25 AM