TimelineEvent

How to get TimelineEvent

import { TimelineEvent } from 'fds/components';

Type: Component

An event presented in a Timeline. Renders a date/time or a custom specified label and a point on the timeline in the desired color, based on the "colorName" prop.

Props

# Name Type Description
1. [children] ReactNode
  Default value
null
2. [colorName] String

Renders the point on the timeline in the specified colorName.

The name of the color to use in the component. FDS has implemented a color palette for all of the components implemented in the library.

When building a custom component, try to use the existing colors as much as possible. Try to find an FDS component which is similar to the component you're building. When using colors this way, you can guarantee your component will use the correct color when the style of the library updates.

The possible values can be found in the example.

  Default value
"timeline-event-marker-default-stroke"
  Related links
3. date String | Class

Renders a date/time label or a custom label next to the point on the timeline.

When specifying a Date instance, a date/time label will be presented formatted as YYYY (only shown when it's not the current year) DD-MM and HH:MM.

A custom label can be specified by specifying a string, this will directly output the string value.

Related links