Flux

Timeline item ​

The timeline item represents a single event within the timeline. It aligns its content with the timeline's structure to illustrate the order and progression of events.

Timeline component13 March 2023 1 PM
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci commodi debitis dolor dolores, ducimus facere, fugit id impedit ipsam mollitia nam nobis reiciendis temporibus vero. Accusamus in repellat voluptatibus.

Props

color?: FluxColor
The color of the marker and connecting line.
Default: gray

icon?: FluxIconName
The icon shown in the marker.

photo?: string
A photo shown in the marker. When combined with `icon`, the icon is overlaid on the photo.

title?: string
The title shown in the item header.

when?: string
A timestamp or label shown next to the title.

Slots

default
The body content of the timeline item.

WARNING

This component is best used within a Timeline.

Examples ​

Basic

A basic timeline item.

Timeline component13 March 2023 1 PM
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci commodi debitis dolor dolores, ducimus facere, fugit id impedit ipsam mollitia nam nobis reiciendis temporibus vero. Accusamus in repellat voluptatibus. 

<template>
    <div style="height: 180px;">
        <FluxTimelineItem
            icon="cubes"
            when="13 March 2023 1 PM"
            title="Timeline component">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci commodi debitis dolor dolores, ducimus facere, fugit id impedit ipsam mollitia nam nobis reiciendis temporibus vero. Accusamus in repellat voluptatibus.
        </FluxTimelineItem>
    </div>
</template>

<script
    setup
    lang="ts">
    import { FluxTimelineItem } from '@flux-ui/components';
</script>

Pane

A basic timeline item inside a pane.

Timeline component13 March 2023 1 PM
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci commodi debitis dolor dolores, ducimus facere, fugit id impedit ipsam mollitia nam nobis reiciendis temporibus vero. Accusamus in repellat voluptatibus. 

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxTimelineItem
                icon="cubes"
                when="13 March 2023 1 PM"
                title="Timeline component">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci commodi debitis dolor dolores, ducimus facere, fugit id impedit ipsam mollitia nam nobis reiciendis temporibus vero. Accusamus in repellat voluptatibus.
            </FluxTimelineItem>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxTimeline, FluxTimelineItem } from '@flux-ui/components';
</script>

Colored markers

Use the color prop to convey the meaning of each event.

Order confirmed10:24 AM
We received your order and payment.
Packed11:02 AM
Your items are packed and ready to ship.
Out for delivery1:15 PM
The courier is on the way.
Delivery delayed3:40 PM
Delivery is delayed due to weather conditions. 

<template>
    <FluxTimeline>
        <FluxTimelineItem
            color="success"
            icon="circle-check"
            when="10:24 AM"
            title="Order confirmed">
            We received your order and payment.
        </FluxTimelineItem>

        <FluxTimelineItem
            color="info"
            icon="box"
            when="11:02 AM"
            title="Packed">
            Your items are packed and ready to ship.
        </FluxTimelineItem>

        <FluxTimelineItem
            color="primary"
            icon="truck"
            when="1:15 PM"
            title="Out for delivery">
            The courier is on the way.
        </FluxTimelineItem>

        <FluxTimelineItem
            color="warning"
            icon="circle-exclamation"
            when="3:40 PM"
            title="Delivery delayed">
            Delivery is delayed due to weather conditions.
        </FluxTimelineItem>
    </FluxTimeline>
</template>

<script
    setup
    lang="ts">
    import { FluxTimeline, FluxTimelineItem } from '@flux-ui/components';
</script>

With photo

Set photo to render an avatar as the marker instead of an icon.

Bas commentedYesterday at 4:30 PM
Looks great, let's ship it!
Bas merged the pull requestToday at 9:12 AM
Merged into main. 

<template>
    <FluxTimeline>
        <FluxTimelineItem
            photo="https://avatars.githubusercontent.com/u/978257?v=4"
            when="Yesterday at 4:30 PM"
            title="Bas commented">
            Looks great, let's ship it!
        </FluxTimelineItem>

        <FluxTimelineItem
            photo="https://avatars.githubusercontent.com/u/978257?v=4"
            when="Today at 9:12 AM"
            title="Bas merged the pull request">
            Merged into <code>main</code>.
        </FluxTimelineItem>
    </FluxTimeline>
</template>

<script
    setup
    lang="ts">
    import { FluxTimeline, FluxTimelineItem } from '@flux-ui/components';
</script>

Photo with icon

Combine photo and icon to overlay an activity icon on top of the avatar.

Bas approved the requestToday at 9:12 AM
The overlay icon highlights the type of activity on top of the avatar. 

<template>
    <FluxTimeline>
        <FluxTimelineItem
            color="success"
            photo="https://avatars.githubusercontent.com/u/978257?v=4"
            icon="check"
            when="Today at 9:12 AM"
            title="Bas approved the request">
            The overlay icon highlights the type of activity on top of the avatar.
        </FluxTimelineItem>
    </FluxTimeline>
</template>

<script
    setup
    lang="ts">
    import { FluxTimeline, FluxTimelineItem } from '@flux-ui/components';
</script>

Plain markers

Without icon or photo the item renders a minimal marker on the line.

Standup9:00 AM
Daily sync with the team.
Design review11:00 AM
Walked through the new dashboard layout.
Release2:00 PM
Shipped version 2.4 to production. 

<template>
    <FluxTimeline>
        <FluxTimelineItem
            when="9:00 AM"
            title="Standup">
            Daily sync with the team.
        </FluxTimelineItem>

        <FluxTimelineItem
            when="11:00 AM"
            title="Design review">
            Walked through the new dashboard layout.
        </FluxTimelineItem>

        <FluxTimelineItem
            when="2:00 PM"
            title="Release">
            Shipped version 2.4 to production.
        </FluxTimelineItem>
    </FluxTimeline>
</template>

<script
    setup
    lang="ts">
    import { FluxTimeline, FluxTimelineItem } from '@flux-ui/components';
</script>

Used components ​