# Timeline
## Description
The Timeline component displays events in chronological order along a line, either vertical or horizontal, marking each event with a dot that can carry an icon or a template of its own and placing the content of the event before the line, after it, or on both sides. The line itself can be solid, dashed or dotted and truncated at its first and last dot, while the items can be alternated around it, rendered in reverse order, colored, sized and styled one by one, and made clickable, in which case they also become reachable with the keyboard.
## 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. |
| Horizontal | `bool` | false | Defines whether to render the timeline items 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. |
| NameSelectors | `BitTimelineNameSelectors<TItem>?` | null | Names and selectors of the custom input type properties. |
| OnItemClick | `EventCallback<TItem>` | | The callback that is called when an item of the timeline is clicked. |
| Options | `RenderFragment?` | null | Alias of ChildContent. |
| ReverseOrder | `bool` | false | Renders the items in the reverse order, so the last item of the list is rendered first. |
| Reversed | `bool` | false | Reverses all of the timeline items direction, so their contents swap sides of the line. |
| Size | `BitSize?` | null | The size of timeline, Possible values: Small | Medium | Large |
| 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. |
| 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. |
## 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. |
## Enums
### 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. |
### 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. |
### 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. |
## Sub Classes
### 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. |
## Examples
Item
Custom
Option
\n**Basic**:
```razor
basicItems =
[
new() { PrimaryText = "Item 1" },
new() { PrimaryText = "Item 2", SecondaryText = "Item 2 Secondary" },
new() { PrimaryText = "Item 3" }
];
```
\n**Horizontal**:
```razor
basicItems =
[
new() { PrimaryText = "Item 1" },
new() { PrimaryText = "Item 2", SecondaryText = "Item 2 Secondary" },
new() { PrimaryText = "Item 3" }
];
```
\n**Icon**:
```razor
iconItems =
[
new() { PrimaryText = "Item 1", IconName = BitIconName.Add },
new() { PrimaryText = "Item 2", IconName = BitIconName.Edit, SecondaryText = "Item 2 Secondary", IsEnabled = false },
new() { PrimaryText = "Item 3", IconName = BitIconName.Delete }
];
```
\n**Reversed**:
```razor
basicItems =
[
new() { PrimaryText = "Item 1" },
new() { PrimaryText = "Item 2", SecondaryText = "Item 2 Secondary" },
new() { PrimaryText = "Item 3" }
];
private List reversedItems =
[
new() { PrimaryText = "Item 1" },
new() { PrimaryText = "Item 2", Reversed = true },
new() { PrimaryText = "Item 3" }
];
```
\n**Alternate**:
```razor
twoSidedItems =
[
new() { PrimaryText = "09:00", SecondaryText = "Item 1", IconName = BitIconName.Add },
new() { PrimaryText = "10:30", SecondaryText = "Item 2", IconName = BitIconName.Edit },
new() { PrimaryText = "13:15", SecondaryText = "Item 3", IconName = BitIconName.Delete },
new() { PrimaryText = "16:45", SecondaryText = "Item 4", IconName = BitIconName.Accept }
];
```
\n**Reverse order**:
```razor
twoSidedItems =
[
new() { PrimaryText = "09:00", SecondaryText = "Item 1", IconName = BitIconName.Add },
new() { PrimaryText = "10:30", SecondaryText = "Item 2", IconName = BitIconName.Edit },
new() { PrimaryText = "13:15", SecondaryText = "Item 3", IconName = BitIconName.Delete },
new() { PrimaryText = "16:45", SecondaryText = "Item 4", IconName = BitIconName.Accept }
];
```
\n**Truncate line**:
```razor
basicItems =
[
new() { PrimaryText = "Item 1" },
new() { PrimaryText = "Item 2", SecondaryText = "Item 2 Secondary" },
new() { PrimaryText = "Item 3" }
];
```
\n**Line variant**:
```razor
basicItems =
[
new() { PrimaryText = "Item 1" },
new() { PrimaryText = "Item 2", SecondaryText = "Item 2 Secondary" },
new() { PrimaryText = "Item 3" }
];
private List lineVariantItems =
[
new() { PrimaryText = "Ordered", IconName = BitIconName.Accept, Color = BitColor.Success },
new() { PrimaryText = "Shipped", IconName = BitIconName.Accept, Color = BitColor.Success, LineVariant = BitTimelineLineVariant.Dashed },
new() { PrimaryText = "Delivered", Variant = BitVariant.Outline, LineVariant = BitTimelineLineVariant.Dashed }
];
```
\n**Item customization**:
```razor
customizedItems =
[
new() { PrimaryText = "Success", IconName = BitIconName.Accept, Color = BitColor.Success },
new() { PrimaryText = "Warning", IconName = BitIconName.Warning, Color = BitColor.Warning, Variant = BitVariant.Outline },
new() { PrimaryText = "Error", IconName = BitIconName.ErrorBadge, Color = BitColor.Error, Size = BitSize.Large },
new() { PrimaryText = "No dot", HideDot = true }
];
```
\n**Templates**:
```razor
```
```csharp
private List templateItems =
[
new()
{
PrimaryContent = (item => @Software Engineer
)
},
new()
{
PrimaryContent = (item => @Co-Founder & CTO
),
Reversed = true
},
new()
{
PrimaryContent = (item => @Project Manager
)
},
];
private List fullTemplateItems =
[
new() { PrimaryText = "Ordered", Template = (item => @ clickItems = [];
protected override void OnInitialized()
{
clickItems =
[
new() { PrimaryText = "Item 1", IconName = BitIconName.Add },
new() { PrimaryText = "Item 2", IconName = BitIconName.Edit, OnClick = HandleOnItemClick },
new() { PrimaryText = "Item 3", IconName = BitIconName.Delete, IsEnabled = false }
];
base.OnInitialized();
}
private void HandleOnItemClick(BitTimelineItem item)
{
clickedItem = $"{item.PrimaryText} (item's own OnClick)";
StateHasChanged();
}
```
\n**External Icons**:
```razor
externalIconItems1 =
[
new() { PrimaryText = "Item 1", Icon = "fa-solid fa-plus" },
new() { PrimaryText = "Item 2", Icon = "fa-solid fa-pen", SecondaryText = "Item 2 Secondary" },
new() { PrimaryText = "Item 3", Icon = "fa-solid fa-trash" }
];
private List externalIconItems2 =
[
new() { PrimaryText = "Item 1", Icon = BitIconInfo.Css("fa-solid fa-plus") },
new() { PrimaryText = "Item 2", Icon = BitIconInfo.Css("fa-solid fa-pen"), SecondaryText = "Item 2 Secondary" },
new() { PrimaryText = "Item 3", Icon = BitIconInfo.Css("fa-solid fa-trash") }
];
private List externalIconItems3 =
[
new() { PrimaryText = "Item 1", Icon = BitIconInfo.Fa("solid plus") },
new() { PrimaryText = "Item 2", Icon = BitIconInfo.Fa("solid pen"), SecondaryText = "Item 2 Secondary" },
new() { PrimaryText = "Item 3", Icon = BitIconInfo.Fa("solid trash") }
];
private List bootstrapIconItems1 =
[
new() { PrimaryText = "Item 1", Icon = "bi bi-plus-lg" },
new() { PrimaryText = "Item 2", Icon = "bi bi-pencil", SecondaryText = "Item 2 Secondary" },
new() { PrimaryText = "Item 3", Icon = "bi bi-trash" }
];
private List bootstrapIconItems2 =
[
new() { PrimaryText = "Item 1", Icon = BitIconInfo.Css("bi bi-plus-lg") },
new() { PrimaryText = "Item 2", Icon = BitIconInfo.Css("bi bi-pencil"), SecondaryText = "Item 2 Secondary" },
new() { PrimaryText = "Item 3", Icon = BitIconInfo.Css("bi bi-trash") }
];
private List bootstrapIconItems3 =
[
new() { PrimaryText = "Item 1", Icon = BitIconInfo.Bi("plus-lg") },
new() { PrimaryText = "Item 2", Icon = BitIconInfo.Bi("pencil"), SecondaryText = "Item 2 Secondary" },
new() { PrimaryText = "Item 3", Icon = BitIconInfo.Bi("trash") }
];
```
\n**Style & Class**:
```razor
basicItems =
[
new() { PrimaryText = "Item 1" },
new() { PrimaryText = "Item 2", SecondaryText = "Item 2 Secondary" },
new() { PrimaryText = "Item 3" }
];
private List iconItems =
[
new() { PrimaryText = "Item 1", IconName = BitIconName.Add },
new() { PrimaryText = "Item 2", IconName = BitIconName.Edit, SecondaryText = "Item 2 Secondary", IsEnabled = false },
new() { PrimaryText = "Item 3", IconName = BitIconName.Delete }
];
private List styleClassItems =
[
new() { PrimaryText = "Styled", Style = "color: dodgerblue;", IconName = BitIconName.Brush },
new() { PrimaryText = "Classed", Class = "custom-item", IconName = BitIconName.FormatPainter }
];
```
@item.PrimaryText
) },
new() { PrimaryText = "Shipped" },
new() { PrimaryText = "Delivered" }
];
```
\n**Events**:
```razor
Clicked item: @clickedItem
```
```csharp
private string? clickedItem;
private List