Accent color
# Timeline
## Description
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.
## 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. |
| 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. |
### 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 |
| :--- | :--- | :------------ | :---------- |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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 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
\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**Templates**:
```razor
templateItems =
[
new()
{
PrimaryContent = (item => @Software Engineer
)
},
new()
{
PrimaryContent = (item => @Co-Founder & CTO
),
Reversed = true
},
new()
{
PrimaryContent = (item => @Project Manager
)
},
];
```
\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 styleClassItems =
[
new() { PrimaryText = "Styled", Style = "color: dodgerblue;", IconName = BitIconName.Brush },
new() { PrimaryText = "Classed", Class = "custom-item", IconName = BitIconName.FormatPainter }
];
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 }
];
```