- bit BlazorUI
Home Docs

Timeline

The Timeline component organizes and displays events or data chronologically in a linear fashion, often featuring points or segments representing individual items with associated details or actions.

Notes

The BitTimeline is a Multi-API component which can accept the list of Items in 3 different ways: BitTimelineItem class, a custom Generic class, and BitTimelineOption component.

Usage

API

BitTimeline parameters
Name
Type
Default value
Description
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.
Horizontal bool false Defines whether to render timeline children horizontaly.
Items IEnumerable<TItem> new List<TItem>() List of Item, each of which can be a timeline with different action in the timeline.
NameSelectors BitTimelineNameSelectors<TItem>? null Names and selectors of the custom input type properties.
OnItemClick EventCallback<TItem> The callback that is called when a timeline is clicked.
Options RenderFragment? null Alias of ChildContent.
Reversed bool false Reverses all of the timeline items direction.
Size BitSize? null The size of timeline, Possible values: Small | Medium | Large
Styles BitTimelineClassStyles? null Custom CSS styles for different parts of the BitTimeline.
Variant BitVariant null The visual variant of the timeline.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
BitTimelineItem properties
Name
Type
Default value
Description
Class string? null The custom CSS classes of the item.
Color BitColor? null The general color of the item.
DotTemplate RenderFragment<BitTimelineItem>? null The custom template for the item's dot.
HideDot bool false Hides the item's dot.
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.
OnClick EventCallback Click event handler of the item.
PrimaryContent RenderFragment<BitTimelineItem>? null The primary content of the item.
PrimaryText string? null The primary text of the item.
Reversed bool false Reverses the item direction.
SecondaryContent RenderFragment<BitTimelineItem>? null The secondary content of the item.
SecondaryText string? null The secondary text of the item.
Size BitSize? null The size of the item.
Style string? null The custom value for the style attribute of the item.
Template RenderFragment<BitTimelineItem>? null The custom template for the item.
BitTimelineOption properties
Name
Type
Default value
Description
Class string? null The custom CSS classes of the option.
Color BitColor? null The general color of the option.
DotTemplate RenderFragment<BitTimelineOption>? null The custom template for the option's dot.
HideDot bool false Hides the option's dot.
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.
OnClick EventCallback Click event handler of the option.
PrimaryContent RenderFragment<BitTimelineOption>? null The primary content of the option.
PrimaryText string? null The primary text of the option.
Reversed bool false Reverses the option direction.
SecondaryContent RenderFragment<BitTimelineOption>? null The secondary content of the option.
SecondaryText string? null The secondary text of the option.
Size BitSize? null The size of the option.
Style string? null The custom value for the style attribute of the option.
Template RenderFragment<BitTimelineOption>? null The custom template for the option.
BitTimelineNameSelectors properties
Name
Type
Default value
Description
Class BitNameSelectorPair<TItem, string?> new(nameof(BitTimelineItem.Class)) The CSS Class field name and selector of the custom input class.
DotTemplate BitNameSelectorPair<TItem, RenderFragment?> 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.
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.
OnClick BitNameSelectorPair<TItem, Action<TItem>?> new(nameof(BitTimelineItem.OnClick)) OnClick field name and selector of the custom input class.
PrimaryContent BitNameSelectorPair<TItem, RenderFragment?> new(nameof(BitTimelineItem.PrimaryContent)) PrimaryContent field name and selector of the custom input class.
Reversed BitNameSelectorPair<TItem, string?> new(nameof(BitTimelineItem.Reversed)) Reversed 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.
SecondaryContent BitNameSelectorPair<TItem, RenderFragment?> 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.
Style BitNameSelectorPair<TItem, string?> new(nameof(BitTimelineItem.Style)) Style field name and selector of the custom input class.
Template BitNameSelectorPair<TItem, RenderFragment?> new(nameof(BitTimelineItem.Template)) Template 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 BitButton.
Item string? null Custom CSS classes/styles for the item of the BitButton.
PrimaryContent string? null Custom CSS classes/styles for the primary content of the BitButton.
PrimaryText string? null Custom CSS classes/styles for the primary text of the BitButton.
SecondaryContent string? null Custom CSS classes/styles for the secondary content of the BitButton.
SecondaryText string? null Custom CSS classes/styles for the secondary text of the BitButton.
Divider string? null Custom CSS classes/styles for the divider of the BitButton.
Dot string? null Custom CSS classes/styles for the dot of the BitButton.
Icon string? null Custom CSS classes/styles for the icon of the BitButton.
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.
BitSize enum
Name
Value
Description
Small 0 The small size timeline.
Medium 1 The medium size timeline.
Large 2 The large size timeline.
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.
  • On this page