ProductUI TimeLine - PrimerBlazor

Basic Timeline

📝

Issue created.

🛠️

Issue updated.

<PrimerTimeline>
    <PrimerTimelineItem>
        <PrimerTimelineBadge>📝</PrimerTimelineBadge>
        <PrimerTimelineBody>
            Issue created.
        </PrimerTimelineBody>
    </PrimerTimelineItem>

    <PrimerTimelineItem>
        <PrimerTimelineBadge>🛠️</PrimerTimelineBadge>
        <PrimerTimelineBody>
            Issue updated.
        </PrimerTimelineBody>
    </PrimerTimelineItem>
</PrimerTimeline>

Condensed Timeline

✅

Deployment successful.

❌

Test failed.

<PrimerTimeline>
    <PrimerTimelineItem Condensed="true">
        <PrimerTimelineBadge Color="TimelineBadgeColor.Success">✅</PrimerTimelineBadge>
        <PrimerTimelineBody>
            Deployment successful.
        </PrimerTimelineBody>
    </PrimerTimelineItem>

    <PrimerTimelineItem Condensed="true">
        <PrimerTimelineBadge Color="TimelineBadgeColor.Danger">❌</PrimerTimelineBadge>
        <PrimerTimelineBody>
            Test failed.
        </PrimerTimelineBody>
    </PrimerTimelineItem>
</PrimerTimeline>

Release History

🚀

Version 1.0.0 released.

🔧

Hotfix 1.0.1 applied.

📦

Version 2.0.0 released.

<PrimerTimeline>
    <PrimerTimelineHeader>Release History</PrimerTimelineHeader>

    <PrimerTimelineItem Id="v1">
        <PrimerTimelineBadge>🚀</PrimerTimelineBadge>
        <PrimerTimelineBody>
            Version 1.0.0 released.
        </PrimerTimelineBody>
    </PrimerTimelineItem>

    <PrimerTimelineItem Id="v2">
        <PrimerTimelineBadge>🔧</PrimerTimelineBadge>
        <PrimerTimelineBody>
            Hotfix 1.0.1 applied.
        </PrimerTimelineBody>
    </PrimerTimelineItem>

    <PrimerTimelineBreak />

    <PrimerTimelineItem Id="v3">
        <PrimerTimelineBadge>📦</PrimerTimelineBadge>
        <PrimerTimelineBody>
            Version 2.0.0 released.
        </PrimerTimelineBody>
    </PrimerTimelineItem>
</PrimerTimeline>

Timeline Options

Available options for Timeline component

Name	Description	Default Value	CSS Class
Condensed	Use condensed timeline style	false	TimelineItem--condensed
Color	Badge color (success, danger)	Default	TimelineItem-badge--color
Avatar	Display avatar image in timeline item	-	TimelineItem-avatar
Break	Add a break line between timeline sections	-	TimelineItem-break
Header	Add a header above timeline items	-	TimelineHeader