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

IsEnabled="false" on the timeline disables every item; the IsEnabled 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. LineVariant 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



LineVariant: Dashed

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



LineVariant: Dotted

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



Item's LineVariant

  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 position

LinePosition 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.

  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 that one alone. 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 Per Size Text size of the contents.
--bit-Timeline-dot-size Per Size Diameter of the dot, and of the hidden dot's placeholder.
--bit-Timeline-dot-background Per Color and Variant Fill of the dot. A disabled item keeps its disabled fill.
--bit-Timeline-dot-border-color Per Color and Variant Border color of the dot. A disabled item keeps its disabled border.
--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 Per Color and Variant Color of the icon inside the dot. A disabled item keeps its disabled color.
--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 LineVariant.
--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.
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 BitTimelineDotAlignment? null Where the dot of each item sits along its item, with the contents aligned to it. Start pins the dot to the first line of multi-line contents.
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.
LineVariant BitTimelineLineVariant? null The way the connecting line of the timeline is painted, which the items can override one by one.
LinePosition BitTimelineLinePosition? null Where the connecting line runs: through the middle (Center), or along the Start or End edge with the contents of each item stacked beside it. Reversed and Alternate only apply to the centered line.
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.
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.
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.
Id string? null Gets or sets the unique identifier for the component's root element.
IsEnabled bool true Gets or sets a value indicating whether the component is enabled and can respond to user interaction.
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.
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.
IsEnabled bool true Whether or not the item is enabled.
Key string? null A unique value to use as a Key of the item.
LineVariant BitTimelineLineVariant? null The way the connecting line of the item is painted, overriding the line variant of the timeline.
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.
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.
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.
IsEnabled bool true Whether or not the option is enabled.
Key string? null A unique value to use as a Key of the option.
LineVariant BitTimelineLineVariant? null The way the connecting line of the option is painted, overriding the line variant of the timeline.
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.
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.
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.
IsEnabled BitNameSelectorPair<TItem, bool> new(nameof(BitTimelineItem.IsEnabled)) IsEnabled 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.
LineVariant BitNameSelectorPair<TItem, BitTimelineLineVariant?> new(nameof(BitTimelineItem.LineVariant)) LineVariant 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.
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 Info 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 timeline.
Medium 1 The medium size timeline.
Large 2 The large size timeline.

BitTimelineLineVariant enum

Name Value Description
Solid 0 An uninterrupted line.
Dashed 1 A line drawn as a series of dashes, which usually marks a stretch of the timeline as pending or estimated.
Dotted 2 A line drawn as a series of dots, a lighter version of the dashed line.

BitTimelineLinePosition enum

Name Value Description
Center 0 The line runs through the middle, with the primary contents on one side of it and the secondary ones on the other.
Start 1 The line runs along the start edge (the top in a horizontal timeline), with the contents of each item stacked after it.
End 2 The line runs along the end edge (the bottom in a horizontal timeline), with the contents of each item stacked before it.

BitTimelineDotAlignment enum

Name Value Description
Center 0 The dot sits at the middle of its item.
Start 1 The dot sits at the start of its item (the top in a vertical timeline), next to the first line of the contents.
End 2 The dot sits at the end of its item (the bottom in a vertical timeline).

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.