Timeline

Timeline component shows a list of events in chronological order.

• 1984
  First Macintosh computer

  ---

• ---

  1998
  iMac

  ---

• ---

  2001
  iPod

  ---

• ---

  2007
  iPhone

  ---

• ---

  2015
  Apple Watch

Explicit vertical direction.

• 1984
  First Macintosh computer

  ---

• ---

  1998
  iMac

  ---

• ---

  2001
  iPod

  ---

Snaps the icon to the start instead of middle.

• 1984
  First Macintosh computer

  ---

• ---

  1998
  iMac

  ---

• ---

  2001
  iPod

  ---

Content only on the bottom/end side.

• First Macintosh computer

  ---

• ---

  iMac

  ---

• ---

  iPod

  ---

Content only on the top/start side.

• First Macintosh computer

  ---

• ---

  iMac

  ---

• ---

  iPod

  ---

Forces all items on one side.

• 1984
  First Macintosh computer

  ---

• ---

  1998
  iMac

  ---

• ---

  2001
  iPod

  ---

Horizontal layout.

• Start
  End

  ---

• ---

  Start
  End

  ---

• ---

  Start
  End

use rsxui::components::{Timeline, TimelineItem, TimelineStart, TimelineMiddle, TimelineEnd};

use rsx_macros::rsx;

let html = rsx! {

    <Timeline>

        <TimelineItem>

            <TimelineStart>"1984"</TimelineStart>

            <TimelineMiddle>"●"</TimelineMiddle>

            <TimelineEnd class="timeline-box">"First Mac"</TimelineEnd>

            <hr />

        </TimelineItem>

    </Timeline>

};