Skip to content
BlazorUI

Lists

Timeline

Bit.BlazorUI

The Timeline component displays events in chronological order along a vertical or horizontal line, each one marked by a dot, which can carry an icon or a template, with its contents on either side.

Notes

The BitTimeline is a Multi-API component which can accept the list of Items in 3 different ways:
1. The BitTimelineItem class
2. A Custom Generic class
3. The BitTimelineOption component

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

Each item puts a dot on the line, its PrimaryText before the line and its SecondaryText after it. Horizontal runs the line from start to end, with the contents above and below each dot.

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3



Horizontal

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3

Disabled

Disabled on the timeline disables every item; the IsDisabled of an item disables that item alone.



Disabled component

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3



Disabled item

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3

Icon & variant

IconName puts an icon in the dot. Variant sets how the dot is painted: Fill (default), Outline (hollow, with a colored border) or Text (the icon alone).



Fill

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3



Outline

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3



Text

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3

Reversed & alternate

Reversed swaps the sides of the line, for every item when set on the timeline, or for a single item through its own Reversed. Alternate flips every second item so the items zig-zag around the line; combined with Reversed the zig-zag starts from the other side.



Reversed

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3



Reversed (horizontal)

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3


  1. Item 1
  2. Item 2
  3. Item 3



Alternate

  1. 09:00
    Item 1
  2. 10:30
    Item 2
  3. 13:15
    Item 3
  4. 16:45
    Item 4



Alternate & Reversed

  1. 09:00
    Item 1
  2. 10:30
    Item 2
  3. 13:15
    Item 3
  4. 16:45
    Item 4



Alternate (horizontal)

  1. 09:00
    Item 1
  2. 10:30
    Item 2
  3. 13:15
    Item 3
  4. 16:45
    Item 4

Reverse order

ReverseOrder renders the last item first, turning a chronological list into a most-recent-first one without reordering the data. Only the painted order changes: screen readers and the Tab key still follow the order of the data.



Vertical

  1. 09:00
    Item 1
  2. 10:30
    Item 2
  3. 13:15
    Item 3
  4. 16:45
    Item 4



Horizontal

  1. 09:00
    Item 1
  2. 10:30
    Item 2
  3. 13:15
    Item 3
  4. 16:45
    Item 4

Line

TruncateLine ends the line at the first dot (Start), at the last one (End) or at both. LineStyle paints it Solid, Dashed or Dotted, and an item can override it for its own stretch, which is how the part still to come is usually told apart.



TruncateLine: Both

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3



TruncateLine: Start

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3



TruncateLine: End

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3



LineStyle: Dashed

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3



LineStyle: Dotted

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3



Item's LineStyle

  1. Ordered
  2. Shipped
  3. Delivered



Horizontal (Dashed, truncated at both ends)

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3

Dot alignment

DotAlignment pins the dot, and the contents with it, to the Center (default), the Start or the End of each item. Start keeps the dot beside the first line of contents that run over several lines.



Center (default)

  1. 09:00
    Kickoff: the scope, the milestones and an owner for each of them are agreed on.
  2. 11:30
    Design review: the proposal is walked through and the open questions are collected.
  3. 15:00
    Sign-off: the plan is approved and the work is scheduled.



Start

  1. 09:00
    Kickoff: the scope, the milestones and an owner for each of them are agreed on.
  2. 11:30
    Design review: the proposal is walked through and the open questions are collected.
  3. 15:00
    Sign-off: the plan is approved and the work is scheduled.



End

  1. 09:00
    Kickoff: the scope, the milestones and an owner for each of them are agreed on.
  2. 11:30
    Design review: the proposal is walked through and the open questions are collected.
  3. 15:00
    Sign-off: the plan is approved and the work is scheduled.



Horizontal (Start)

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3

Line placement

LinePlacement moves the line from the middle (Center, default) to the Start or the End edge, stacking the contents of each item beside it, as an activity feed does. Reversed and Alternate only apply to a centered line.



Start

  1. 09:00
    Kickoff: the scope, the milestones and an owner for each of them are agreed on.
  2. 11:30
    Design review: the proposal is walked through and the open questions are collected.
  3. 15:00
    Sign-off: the plan is approved and the work is scheduled.



End

  1. 09:00
    Kickoff: the scope, the milestones and an owner for each of them are agreed on.
  2. 11:30
    Design review: the proposal is walked through and the open questions are collected.
  3. 15:00
    Sign-off: the plan is approved and the work is scheduled.



Horizontal (Start)

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3

Item customization

The Color, Size and Variant of an item override the values of the timeline for that item alone, and HideDot removes its dot while keeping its place on the line.

  1. Success
  2. Warning
  3. Error
  4. No dot

Templates

PrimaryContent, SecondaryContent and DotTemplate replace one part of an item; Template replaces all of it, dot and line included. The ItemTemplate and DotTemplate of the timeline serve every item that brings no template of its own.



Vertical

  1. Xafan Salina
    Loading
  2. Saleh Khafan
    Loading
  3. Ted Randall
    Loading



Horizontal

  1. Xafan Salina
    Loading
  2. Saleh Khafan
    Loading
  3. Ted Randall
    Loading



Item's Template & the timeline's DotTemplate

  1. Ordered
  2. Shipped
  3. Delivered

Events

OnItemClick fires for every item, and the OnClick of an item for that item alone; both run on the same click. Only clickable items become buttons: focusable, with a hover plate and a focus ring, and activated by Enter and Space. A disabled item raises neither.

  1. Item 1
  2. Item 2
  3. Item 3

Clicked item:

Accessibility

The timeline is an ordered list named by its AriaLabel, and each item a list item. The dot and its icon are decoration hidden from screen readers, so what an icon or a color means belongs in the text or in the AriaLabel of the item, which replaces the name read from its contents. The Title adds a native tooltip.

  1. Ordered
  2. Shipped
  3. Delivered

Cascading parameters

BitParams hands a BitTimelineParams to every timeline under it. The values are defaults, not overrides: a parameter a timeline sets itself wins. The params carry only what does not depend on the item type, so one object fits all three APIs.

Takes the orientation, color, variant and truncation from the cascade

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3


Its own color, the cascaded rest

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3


Outside the cascade, back to the defaults

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3

Color

Color sets the palette of the dots and of the focus ring; the Color of an item overrides it for that item. Each timeline shows the three dot variants, enabled and disabled.



Primary

  1. Fill
  2. Outline
  3. Text
  4. Fill
    Disabled
  5. Outline
    Disabled
  6. Text
    Disabled


Secondary

  1. Fill
  2. Outline
  3. Text
  4. Fill
    Disabled
  5. Outline
    Disabled
  6. Text
    Disabled


Tertiary

  1. Fill
  2. Outline
  3. Text
  4. Fill
    Disabled
  5. Outline
    Disabled
  6. Text
    Disabled


Info

  1. Fill
  2. Outline
  3. Text
  4. Fill
    Disabled
  5. Outline
    Disabled
  6. Text
    Disabled


Success

  1. Fill
  2. Outline
  3. Text
  4. Fill
    Disabled
  5. Outline
    Disabled
  6. Text
    Disabled


Warning

  1. Fill
  2. Outline
  3. Text
  4. Fill
    Disabled
  5. Outline
    Disabled
  6. Text
    Disabled


SevereWarning

  1. Fill
  2. Outline
  3. Text
  4. Fill
    Disabled
  5. Outline
    Disabled
  6. Text
    Disabled


Error

  1. Fill
  2. Outline
  3. Text
  4. Fill
    Disabled
  5. Outline
    Disabled
  6. Text
    Disabled


PrimaryBackground

  1. Fill
  2. Outline
  3. Text
  4. Fill
    Disabled
  5. Outline
    Disabled
  6. Text
    Disabled


SecondaryBackground

  1. Fill
  2. Outline
  3. Text
  4. Fill
    Disabled
  5. Outline
    Disabled
  6. Text
    Disabled


TertiaryBackground

  1. Fill
  2. Outline
  3. Text
  4. Fill
    Disabled
  5. Outline
    Disabled
  6. Text
    Disabled


PrimaryForeground

  1. Fill
  2. Outline
  3. Text
  4. Fill
    Disabled
  5. Outline
    Disabled
  6. Text
    Disabled


SecondaryForeground

  1. Fill
  2. Outline
  3. Text
  4. Fill
    Disabled
  5. Outline
    Disabled
  6. Text
    Disabled


TertiaryForeground

  1. Fill
  2. Outline
  3. Text
  4. Fill
    Disabled
  5. Outline
    Disabled
  6. Text
    Disabled


PrimaryBorder

  1. Fill
  2. Outline
  3. Text
  4. Fill
    Disabled
  5. Outline
    Disabled
  6. Text
    Disabled


SecondaryBorder

  1. Fill
  2. Outline
  3. Text
  4. Fill
    Disabled
  5. Outline
    Disabled
  6. Text
    Disabled


TertiaryBorder

  1. Fill
  2. Outline
  3. Text
  4. Fill
    Disabled
  5. Outline
    Disabled
  6. Text
    Disabled

External Icons

The Icon takes the CSS classes of any icon library, such as FontAwesome or Bootstrap Icons, and wins over IconName.


FontAwesome Icons:

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3



  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3



  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3




Bootstrap Icons:

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3



  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3



  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3

Size

Size scales the dots and the text: Small, Medium (default) or Large.



Small

  1. Fill
  2. Outline
  3. Text
  4. Fill
    Disabled
  5. Outline
    Disabled
  6. Text
    Disabled


Medium

  1. Fill
  2. Outline
  3. Text
  4. Fill
    Disabled
  5. Outline
    Disabled
  6. Text
    Disabled


Large

  1. Fill
  2. Outline
  3. Text
  4. Fill
    Disabled
  5. Outline
    Disabled
  6. Text
    Disabled

Style & Class

Style and Class reach the root, the Style and Class of an item reach that item, and Styles and Classes reach each part by name: the item, the two contents and their texts, the divider, the dot and the icon. The line is painted by the divider, so its color is the --bit-Timeline-line-color variable, which the Divider class below sets.



Component's Style & Class:

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3


  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3




Item's Style & Class:

  1. Styled
  2. Classed




Styles & Classes:

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3
  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3




CSS variables inherit: set one on :root or an ancestor to re-skin every timeline below it, on the Style of a timeline, or on the Style of a single item. A disabled item keeps its disabled colors. They restyle the default, not a choice: an explicit Color or Size, of the timeline or of a single entry, wins over them for what it sets.

  1. Item 1
  2. Item 2
    Item 2 Secondary
  3. Item 3


  1. Ordered
  2. Shipped
  3. Delivered

RTL

Use the BitTimeline component in right-to-left (RTL).



Vertical

  1. گزینه ۱
  2. گزینه ۲
    گزینه ۲ ثانویه
  3. گزینه ۳



Horizontal

  1. گزینه ۱
  2. گزینه ۲
    گزینه ۲ ثانویه
  3. گزینه ۳

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone, as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component falls back to the theme token beside it.

BitTimeline CSS variables

Name Default value Description
--bit-Timeline-font-size --bit-tpg-fs-sm Text size of the contents. The Size parameter wins over it.
--bit-Timeline-dot-size spacing(3.75) Diameter of the dot, and of the hidden dot's placeholder. The Size parameter wins over it.
--bit-Timeline-dot-background --bit-clr-pri (Fill), transparent (Outline, Text) Fill of the dot. A disabled item keeps its disabled fill. The Color parameter wins over it in Fill; the transparent dot of Outline and Text is its alone. Shared by the three variants: --bit-Timeline-fill-dot-background, --bit-Timeline-outline-dot-background and --bit-Timeline-text-dot-background are read ahead of it.
--bit-Timeline-fill-dot-background --bit-Timeline-dot-background Fill of the dot of a Fill timeline or item alone, read ahead of --bit-Timeline-dot-background so a theme can set this variant apart from the other two. The Color parameter wins over it.
--bit-Timeline-outline-dot-background --bit-Timeline-dot-background Fill of the dot of an Outline timeline or item alone, read ahead of --bit-Timeline-dot-background so a theme can set this variant apart from the other two. The Color parameter leaves it alone.
--bit-Timeline-text-dot-background --bit-Timeline-dot-background Fill of the dot of a Text timeline or item alone, read ahead of --bit-Timeline-dot-background so a theme can set this variant apart from the other two. The Color parameter leaves it alone. It also fills the plate the icon of a Text dot sits on.
--bit-Timeline-dot-border-color --bit-clr-pri, transparent (Text) Border color of the dot. A disabled item keeps its disabled border. The Color parameter wins over it, except over the transparent border of Text. Shared by the three variants: --bit-Timeline-fill-dot-border-color, --bit-Timeline-outline-dot-border-color and --bit-Timeline-text-dot-border-color are read ahead of it.
--bit-Timeline-fill-dot-border-color --bit-Timeline-dot-border-color Border color of the dot of a Fill timeline or item alone, read ahead of --bit-Timeline-dot-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it.
--bit-Timeline-outline-dot-border-color --bit-Timeline-dot-border-color Border color of the dot of an Outline timeline or item alone, read ahead of --bit-Timeline-dot-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it.
--bit-Timeline-text-dot-border-color --bit-Timeline-dot-border-color Border color of the dot of a Text timeline or item alone, read ahead of --bit-Timeline-dot-border-color so a theme can set this variant apart from the other two. The Color parameter leaves it alone.
--bit-Timeline-dot-border-width --bit-shp-border-width Border width of the dot.
--bit-Timeline-dot-radius --bit-shp-radius-full Corner radius of the dot; a smaller one turns it into a rounded square.
--bit-Timeline-dot-shadow none Shadow of the dot, e.g. a halo that sets it off the line.
--bit-Timeline-icon-color --bit-clr-pri-text (Fill), --bit-clr-pri (Outline, Text) Color of the icon inside the dot. A disabled item keeps its disabled color. The Color parameter wins over it. Shared by the three variants: --bit-Timeline-fill-icon-color, --bit-Timeline-outline-icon-color and --bit-Timeline-text-icon-color are read ahead of it.
--bit-Timeline-fill-icon-color --bit-Timeline-icon-color Color of the icon inside the dot of a Fill timeline or item alone, read ahead of --bit-Timeline-icon-color so a theme can set this variant apart from the other two. The Color parameter wins over it.
--bit-Timeline-outline-icon-color --bit-Timeline-icon-color Color of the icon inside the dot of an Outline timeline or item alone, read ahead of --bit-Timeline-icon-color so a theme can set this variant apart from the other two. The Color parameter wins over it.
--bit-Timeline-text-icon-color --bit-Timeline-icon-color Color of the icon inside the dot of a Text timeline or item alone, read ahead of --bit-Timeline-icon-color so a theme can set this variant apart from the other two. The Color parameter wins over it.
--bit-Timeline-icon-size 1em Size of the icon inside the dot.
--bit-Timeline-line-color --bit-clr-brd-sec Color of the connecting line, whatever its LineStyle.
--bit-Timeline-line-width --bit-shp-border-width-thick Thickness of the connecting line.
--bit-Timeline-content-gap Half the dot size Room between the line and the contents on either side of it.
--bit-Timeline-item-spacing Half the dot size Room each item keeps around its contents along the line; two neighbours sit twice this apart.
--bit-Timeline-item-radius --bit-shp-radius-control Corner radius of a clickable item's hover plate and focus ring.
--bit-Timeline-item-hover-background --bit-clr-bg-pri-hover Hover plate of a clickable item.
--bit-Timeline-item-active-background --bit-clr-bg-pri-active Pressed plate of a clickable item.

API

Every parameter, public member, sub-class and enum this component exposes.

BitTimeline parameters

Name Type Default value Description
Alternate bool false Alternates the side of the items, so each item sits on the opposite side of the line of the item before it.
ChildContent RenderFragment? null The content of the BitTimeline, that are BitTimelineOption components.
Classes BitTimelineClassStyles? null Custom CSS classes for different parts of the BitTimeline.
Color BitColor? null The general color of the timeline. An explicit value (or the color of an item) wins over the --bit-Timeline-* dot color variables; left unset, the timeline is primary unless they say otherwise.
DotTemplate RenderFragment<TItem>? null The default custom template for the dot of the items, used by the items that provide no dot template of their own.
DotAlignment BitPlacement? null Where the dot of each item sits along its item, with the contents aligned to it: at its middle (Center, the default), its Start (the top in a vertical timeline) or its End (the bottom in a vertical timeline). Start pins the dot to the first line of multi-line contents. Only Center, Start and End are honoured; every other value renders the default Center.
Horizontal bool false Renders the timeline horizontally.
Items IEnumerable<TItem> [] The list of the items to render in the timeline, each one describing a single event.
ItemTemplate RenderFragment<TItem>? null The default custom template that replaces the whole content of the items, used by the items that provide no template of their own.
LineStyle BitLineStyle? null The way the connecting line of the timeline is painted, which the items can override one by one. Only Solid, Dashed and Dotted are drawn: the connector is a hairline, which leaves Double no room for its two strokes, so it is drawn solid.
LinePlacement BitPlacement? null Where the connecting line runs: through the middle (Center, the default), with the primary contents on one side of it and the secondary ones on the other, or along the Start edge (the top in a horizontal timeline) or the End edge (the bottom in a horizontal timeline), with the contents of each item stacked beside it. Reversed and Alternate only apply to the centered line. Only Center, Start and End are honoured; every other value renders the default Center.
NameSelectors BitTimelineNameSelectors<TItem>? null Names and selectors of the custom input type properties.
OnItemClick EventCallback<TItem> The callback that is called when an item is clicked. A clickable item is a button whose contents are read as its name, so it should hold no links or controls of its own.
Options RenderFragment? null Alias of ChildContent.
ReverseOrder bool false Renders the items in the reverse order, so the last item of the list is painted first. The reading and the focus order keep the order of the list.
Reversed bool false Reverses all of the timeline items direction, so their contents swap sides of the line.
Size BitSize? null The size of the timeline, which sets the size of the dots and of the text. An explicit value (or the size of an item) wins over --bit-Timeline-font-size and --bit-Timeline-dot-size; left unset, the timeline is medium unless they say otherwise.
Styles BitTimelineClassStyles? null Custom CSS styles for different parts of the BitTimeline.
TruncateLine BitTimelineTruncateLine? null Truncates the connecting line of the timeline at the first dot, the last dot, or both of them.
Variant BitVariant? null The visual variant of the timeline.

BitComponentBase parameters

Name Type Default value Description
AriaLabel string? null Gets or sets the accessible label for the component, used by assistive technologies.
Class string? null Gets or sets the CSS class name(s) to apply to the rendered element.
Dir BitDir? null Gets or sets the text directionality for the component's content.
Disabled bool false Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
ForceAnimation bool false Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name.
Id string? null Gets or sets the unique identifier for the component's root element.
Style string? null Gets or sets the CSS style string to apply to the rendered element.
TabIndex string? null Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility BitVisibility BitVisibility.Visible Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name Type Default value Description
UniqueId Guid Guid.NewGuid() Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement ElementReference Gets the reference to the root HTML element associated with this component.

BitTimelineItem properties

Name Type Default value Description
AriaLabel string? null The accessible label of the item, announced by assistive technologies.
Class string? null The custom CSS classes of the item.
Color BitColor? null The general color of the item, overriding the color of the timeline. An explicit value wins over the Color of the timeline and over the --bit-Timeline-* dot color variables, on this item alone; left unset, the item takes the Color of the timeline, or is primary unless the variables say otherwise.
DotTemplate RenderFragment<BitTimelineItem>? null The custom template for the item's dot.
HideDot bool false Hides the item's dot.
Icon BitIconInfo? null The icon to render in the item. Takes precedence over IconName.
IconName string? null Name of an icon to render in the item.
IsDisabled bool false Whether or not the item is disabled.
Key string? null A unique value to use as a Key of the item.
LineStyle BitLineStyle? null The way the connecting line of the item is painted, overriding the line style of the timeline. Only Solid, Dashed and Dotted are drawn; Double is drawn solid.
OnClick Action<BitTimelineItem>? null Click event handler of the item.
PrimaryContent RenderFragment<BitTimelineItem>? null The primary content of the item, rendered before the line.
PrimaryText string? null The primary text of the item, rendered before the line.
Reversed bool false Reverses the item direction, so its contents swap sides of the line.
SecondaryContent RenderFragment<BitTimelineItem>? null The secondary content of the item, rendered after the line.
SecondaryText string? null The secondary text of the item, rendered after the line.
Size BitSize? null The size of the item, overriding the size of the timeline. An explicit value wins over the Size of the timeline and over --bit-Timeline-font-size and --bit-Timeline-dot-size, on this item alone; left unset, the item takes the Size of the timeline, or is medium unless the variables say otherwise.
Style string? null The custom value for the style attribute of the item.
Template RenderFragment<BitTimelineItem>? null The custom template that replaces the whole content of the item, dot and line included.
Title string? null The value of the title attribute of the item, shown as the native tooltip.
Variant BitVariant? null The visual variant of the item's dot, overriding the variant of the timeline.

BitTimelineOption properties

Name Type Default value Description
AriaLabel string? null The accessible label of the option, announced by assistive technologies.
Class string? null The custom CSS classes of the option.
Color BitColor? null The general color of the option, overriding the color of the timeline. An explicit value wins over the Color of the timeline and over the --bit-Timeline-* dot color variables, on this option alone; left unset, the option takes the Color of the timeline, or is primary unless the variables say otherwise.
DotTemplate RenderFragment<BitTimelineOption>? null The custom template for the option's dot.
HideDot bool false Hides the option's dot.
Icon BitIconInfo? null The icon to render in the option. Takes precedence over IconName.
IconName string? null Name of an icon to render in the option.
IsDisabled bool false Whether or not the option is disabled.
Key string? null A unique value to use as a Key of the option.
LineStyle BitLineStyle? null The way the connecting line of the option is painted, overriding the line style of the timeline. Only Solid, Dashed and Dotted are drawn; Double is drawn solid.
OnClick EventCallback<BitTimelineOption> Click event handler of the option.
PrimaryContent RenderFragment<BitTimelineOption>? null The primary content of the option, rendered before the line.
PrimaryText string? null The primary text of the option, rendered before the line.
Reversed bool false Reverses the option direction, so its contents swap sides of the line.
SecondaryContent RenderFragment<BitTimelineOption>? null The secondary content of the option, rendered after the line.
SecondaryText string? null The secondary text of the option, rendered after the line.
Size BitSize? null The size of the option, overriding the size of the timeline. An explicit value wins over the Size of the timeline and over --bit-Timeline-font-size and --bit-Timeline-dot-size, on this option alone; left unset, the option takes the Size of the timeline, or is medium unless the variables say otherwise.
Style string? null The custom value for the style attribute of the option.
Template RenderFragment<BitTimelineOption>? null The custom template that replaces the whole content of the option, dot and line included.
Title string? null The value of the title attribute of the option, shown as the native tooltip.
Variant BitVariant? null The visual variant of the option's dot, overriding the variant of the timeline.

BitTimelineNameSelectors properties

Name Type Default value Description
AriaLabel BitNameSelectorPair<TItem, string?> new(nameof(BitTimelineItem.AriaLabel)) The AriaLabel field name and selector of the custom input class.
Class BitNameSelectorPair<TItem, string?> new(nameof(BitTimelineItem.Class)) The CSS Class field name and selector of the custom input class.
Color BitNameSelectorPair<TItem, BitColor?> new(nameof(BitTimelineItem.Color)) The Color field name and selector of the custom input class. Like the Color of an item, the value it reads wins over the Color of the timeline and over the --bit-Timeline-* dot color variables.
DotTemplate BitNameSelectorPair<TItem, RenderFragment<TItem>?> new(nameof(BitTimelineItem.DotTemplate)) DotTemplate field name and selector of the custom input class.
HideDot BitNameSelectorPair<TItem, bool> new(nameof(BitTimelineItem.HideDot)) HideDot field name and selector of the custom input class.
Icon BitNameSelectorPair<TItem, BitIconInfo?> new(nameof(BitTimelineItem.Icon)) Icon field name and selector of the custom input class.
IconName BitNameSelectorPair<TItem, string?> new(nameof(BitTimelineItem.IconName)) IconName field name and selector of the custom input class.
IsDisabled BitNameSelectorPair<TItem, bool> new(nameof(BitTimelineItem.IsDisabled)) IsDisabled field name and selector of the custom input class.
Key BitNameSelectorPair<TItem, string?> new(nameof(BitTimelineItem.Key)) Key field name and selector of the custom input class.
LineStyle BitNameSelectorPair<TItem, BitLineStyle?> new(nameof(BitTimelineItem.LineStyle)) LineStyle field name and selector of the custom input class.
OnClick BitNameSelectorPair<TItem, Action<TItem>?> new(nameof(BitTimelineItem.OnClick)) OnClick field name and selector of the custom input class.
PrimaryContent BitNameSelectorPair<TItem, RenderFragment<TItem>?> new(nameof(BitTimelineItem.PrimaryContent)) PrimaryContent field name and selector of the custom input class.
PrimaryText BitNameSelectorPair<TItem, string?> new(nameof(BitTimelineItem.PrimaryText)) PrimaryText field name and selector of the custom input class.
Reversed BitNameSelectorPair<TItem, bool> new(nameof(BitTimelineItem.Reversed)) Reversed field name and selector of the custom input class.
SecondaryContent BitNameSelectorPair<TItem, RenderFragment<TItem>?> new(nameof(BitTimelineItem.SecondaryContent)) SecondaryContent field name and selector of the custom input class.
SecondaryText BitNameSelectorPair<TItem, string?> new(nameof(BitTimelineItem.SecondaryText)) SecondaryText field name and selector of the custom input class.
Size BitNameSelectorPair<TItem, BitSize?> new(nameof(BitTimelineItem.Size)) The Size field name and selector of the custom input class. Like the Size of an item, the value it reads wins over the Size of the timeline and over --bit-Timeline-font-size and --bit-Timeline-dot-size.
Style BitNameSelectorPair<TItem, string?> new(nameof(BitTimelineItem.Style)) Style field name and selector of the custom input class.
Template BitNameSelectorPair<TItem, RenderFragment<TItem>?> new(nameof(BitTimelineItem.Template)) Template field name and selector of the custom input class.
Title BitNameSelectorPair<TItem, string?> new(nameof(BitTimelineItem.Title)) The Title field name and selector of the custom input class.
Variant BitNameSelectorPair<TItem, BitVariant?> new(nameof(BitTimelineItem.Variant)) The Variant field name and selector of the custom input class.

BitNameSelectorPair properties

Name Type Default value Description
Name string Custom class property name.
Selector Func<TItem, TProp?>? Custom class property selector.

BitTimelineClassStyles properties

Name Type Default value Description
Root string? null Custom CSS classes/styles for the root element of the BitTimeline.
Item string? null Custom CSS classes/styles for the item of the BitTimeline.
PrimaryContent string? null Custom CSS classes/styles for the primary content of the BitTimeline.
PrimaryText string? null Custom CSS classes/styles for the primary text of the BitTimeline.
SecondaryContent string? null Custom CSS classes/styles for the secondary content of the BitTimeline.
SecondaryText string? null Custom CSS classes/styles for the secondary text of the BitTimeline.
Divider string? null Custom CSS classes/styles for the divider of the BitTimeline.
Dot string? null Custom CSS classes/styles for the dot of the BitTimeline.
Icon string? null Custom CSS classes/styles for the icon of the BitTimeline.

BitIconInfo properties

Name Type Default value Description
Name string? null Gets or sets the name of the icon.
BaseClass string? null Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty.
Prefix string? null Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty.

BitVariant enum

Name Value Description
Fill 0 Fill styled variant.
Outline 1 Outline styled variant.
Text 2 Text styled variant.

BitColor enum

Name Value Description
Primary 0 Primary general color.
Secondary 1 Secondary general color.
Tertiary 2 Tertiary general color.
Info 3 Info general color.
Success 4 Success general color.
Warning 5 Warning general color.
SevereWarning 6 SevereWarning general color.
Error 7 Error general color.
PrimaryBackground 8 Primary background color.
SecondaryBackground 9 Secondary background color.
TertiaryBackground 10 Tertiary background color.
PrimaryForeground 11 Primary foreground color.
SecondaryForeground 12 Secondary foreground color.
TertiaryForeground 13 Tertiary foreground color.
PrimaryBorder 14 Primary border color.
SecondaryBorder 15 Secondary border color.
TertiaryBorder 16 Tertiary border color.

BitSize enum

Name Value Description
Small 0 The small size.
Medium 1 The medium size.
Large 2 The large size.

BitLineStyle enum

Name Value Description
Solid 0 A continuous line, which is what a line is drawn as unless something says otherwise.
Dashed 1 A line of short dashes, which usually marks the stretch it spans as pending or estimated.
Dotted 2 A line of dots, a lighter version of the dashed line.
Double 3 Two parallel lines with a gap between them, which needs a line of at least three pixels to have room to be drawn.

BitPlacement enum

Name Value Description
Top 0 The top edge.
Bottom 1 The bottom edge.
Start 2 The edge the reading direction starts from - the left in LTR, the right in RTL. On the vertical axis, which does not turn around, it is the top.
End 3 The edge the reading direction ends at - the right in LTR, the left in RTL. On the vertical axis, which does not turn around, it is the bottom.
Left 4 The left edge, in both reading directions.
Right 5 The right edge, in both reading directions.
Center 6 The middle of the axis, against neither edge.
TopAndBottom 7 Both edges of the block axis at once.
StartAndEnd 8 Both edges of the inline axis at once, following the reading direction the way Start and End do.

BitTimelineTruncateLine enum

Name Value Description
None 0 The line runs through the whole extent of the timeline, past the first and the last dot.
Start 1 The line starts at the first dot instead of the leading edge of the timeline.
End 2 The line ends at the last dot instead of the trailing edge of the timeline.
Both 3 The line spans from the first dot to the last dot only.

BitVisibility enum

Name Value Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).

BitDir enum

Name Value Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.