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. Timeline
The timeline component serves as the main container for organizing and displaying a sequence of events or steps. It should always be used as the parent component of FluxTimelineItem, ensuring each item is properly aligned and visually connected within the timeline.
Bas Milius commented13 March 2023 1:30 PM
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquid illum quaerat ratione voluptates? Atque consequatur cupiditate ducimus enim nam necessitatibus quibusdam quos! Amet cupiditate dicta maiores natus quae sint? Slots
default
The content of the timeline.
Examples
Basic
A basic timeline.
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. Bas Milius commented13 March 2023 1:30 PM
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquid illum quaerat ratione voluptates? Atque consequatur cupiditate ducimus enim nam necessitatibus quibusdam quos! Amet cupiditate dicta maiores natus quae sint? <template>
<FluxTimeline>
<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>
<FluxTimelineItem
title="Bas Milius commented"
photo="https://avatars.githubusercontent.com/u/978257?v=4"
when="13 March 2023 1:30 PM">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquid illum quaerat ratione voluptates? Atque consequatur cupiditate ducimus enim nam necessitatibus quibusdam quos! Amet cupiditate dicta maiores natus quae sint?
</FluxTimelineItem>
</FluxTimeline>
</template>
<script
setup
lang="ts">
import { FluxTimeline, FluxTimelineItem } from '@flux-ui/components';
</script>Pane
A timeline 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. Bas Milius commented13 March 2023 1:30 PM
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquid illum quaerat ratione voluptates? Atque consequatur cupiditate ducimus enim nam necessitatibus quibusdam quos! Amet cupiditate dicta maiores natus quae sint? <template>
<FluxPane>
<FluxPaneBody>
<FluxTimeline>
<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>
<FluxTimelineItem
title="Bas Milius commented"
photo="https://avatars.githubusercontent.com/u/978257?v=4"
when="13 March 2023 1:30 PM">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquid illum quaerat ratione voluptates? Atque consequatur cupiditate ducimus enim nam necessitatibus quibusdam quos! Amet cupiditate dicta maiores natus quae sint?
</FluxTimelineItem>
</FluxTimeline>
</FluxPaneBody>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxPane, FluxPaneBody, FluxTimeline, FluxTimelineItem } from '@flux-ui/components';
</script>