Timeline - bit BlazorUI

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:
1. The
BitTimelineItem
class
2. A
Custom Generic
class
3. The
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.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.

On this page