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
Basic
Item 1
Item 2
Item 2 Secondary
Item 3
Horizontal
The Timeline offers two orientation options: Vertical (default) and Horizontal.
Item 1
Item 2
Item 2 Secondary
Item 3
Disabled
The Timeline offers two orientation options: Vertical (default) and Horizontal.
Disabled component
Item 1
Item 2
Item 2 Secondary
Item 3
Disabled item
Item 1
Item 2
Item 2 Secondary
Item 3
Variant
The Timeline has three variants: Fill (default), Outline, and Text.
Fill
Item 1
Item 2
Item 2 Secondary
Item 3
Outline
Item 1
Item 2
Item 2 Secondary
Item 3
Text
Item 1
Item 2
Item 2 Secondary
Item 3
Icon
Each item in the Timeline can have an icon.
Fill
Item 1
Item 2
Item 2 Secondary
Item 3
Outline
Item 1
Item 2
Item 2 Secondary
Item 3
Text
Item 1
Item 2
Item 2 Secondary
Item 3
Reversed
Each item in the Timeline can be reversed and be on the opposite side.
Vertical
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 3
Horizontal
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 3
Templates
Here are some examples of customizing the Timeline content.
Vertical
Annie Lindqvist
SK
Saleh Khafan
Ted Randall
Horizontal
Annie Lindqvist
SK
Saleh Khafan
Ted Randall
Color
Offering a range of specialized colors, providing visual cues for specific states within your application.
Primary
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Secondary
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Tertiary
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Info
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Success
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Warning
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
SevereWarning
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Error
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Size
Different sizes for Timelines to meet design needs, ensuring flexibility within your application.
Small
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Medium
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Large
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Style & Class
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
Component's Style & Class:
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
Item's Style & Class:
Styled
Classed
Styles & Classes:
Item 1
Item 2
Item 2 Secondary
Item 3
Item 1
Item 2
Item 2 Secondary
Item 3
RTL
Use the BitTimeline component in right-to-left (RTL).
Vertical
گزینه ۱
گزینه ۲
گزینه ۲ ثانویه
گزینه ۳
Horizontal
گزینه ۱
گزینه ۲
گزینه ۲ ثانویه
گزینه ۳
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