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
Basic
Item 1
Item 2
Item 2 Secondary
Item 3
<BitTimeline Items="basicItems" />@code { private List<BitTimelineItem> basicItems = [ new() { PrimaryText = "Item 1" }, new() { PrimaryText = "Item 2", SecondaryText = "Item 2 Secondary" }, new() { PrimaryText = "Item 3" } ]; }
Horizontal
The Timeline offers two orientation options: Vertical (default) and Horizontal.
Item 1
Item 2
Item 2 Secondary
Item 3
<BitTimeline Horizontal Items="basicItems" />@code { private List<BitTimelineItem> basicItems = [ new() { PrimaryText = "Item 1" }, new() { PrimaryText = "Item 2", SecondaryText = "Item 2 Secondary" }, new() { PrimaryText = "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
<BitTimeline Horizontal Items="basicItems" IsEnabled="false" /> <BitTimeline Horizontal Items="disabledItems" />@code { private List<BitTimelineItem> basicItems = [ new() { PrimaryText = "Item 1" }, new() { PrimaryText = "Item 2", SecondaryText = "Item 2 Secondary" }, new() { PrimaryText = "Item 3" } ]; private List<BitTimelineItem> disabledItems = [ new() { PrimaryText = "Item 1" }, new() { PrimaryText = "Item 2", SecondaryText = "Item 2 Secondary", IsEnabled = false }, new() { PrimaryText = "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
<BitTimeline Horizontal Variant="BitVariant.Fill" Items="disabledItems" /> <BitTimeline Horizontal Variant="BitVariant.Outline" Items="disabledItems" /> <BitTimeline Horizontal Variant="BitVariant.Text" Items="disabledItems" />@code { private List<BitTimelineItem> disabledItems = [ new() { PrimaryText = "Item 1" }, new() { PrimaryText = "Item 2", SecondaryText = "Item 2 Secondary", IsEnabled = false }, new() { PrimaryText = "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
<BitTimeline Horizontal Items="iconItems" Variant="BitVariant.Fill" /> <BitTimeline Horizontal Items="iconItems" Variant="BitVariant.Outline" /> <BitTimeline Horizontal Items="iconItems" Variant="BitVariant.Text" />@code { private List<BitTimelineItem> 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 } ]; }
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
<BitTimeline Items="basicItems" Reversed /> <BitTimeline Items="reversedItems" /> <BitTimeline Horizontal Items="basicItems" Reversed /> <BitTimeline Horizontal Items="reversedItems" />@code { private List<BitTimelineItem> basicItems = [ new() { PrimaryText = "Item 1" }, new() { PrimaryText = "Item 2", SecondaryText = "Item 2 Secondary" }, new() { PrimaryText = "Item 3" } ]; private List<BitTimelineItem> reversedItems = [ new() { PrimaryText = "Item 1" }, new() { PrimaryText = "Item 2", Reversed = true }, new() { PrimaryText = "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
<style> .dot-template { z-index: 1; border-radius: 50%; background-color: tomato; } </style> <BitTimeline Items="templateItems" /> <BitTimeline Horizontal Items="templateItems" />@code { private List<BitTimelineItem> templateItems = [ new() { PrimaryContent = (item => @<BitPersona PrimaryText="Annie Lindqvist" Size="@BitPersonaSize.Size32" Presence="@BitPersonaPresence.Online" ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png" />), DotTemplate = (item => @<div class="dot-template"><BitRingLoading CustomSize="30" Color="BitColor.Tertiary" /></div>), SecondaryContent = (item => @<div style="display: flex; align-items: center; gap: 1rem;"> <BitIcon IconName="Accept" Style="color: limegreen;" /> <BitLabel>Software Engineer</BitLabel> </div>) }, new() { PrimaryContent = (item => @<BitPersona PrimaryText="Saleh Khafan" Size="@BitPersonaSize.Size32" Presence="@BitPersonaPresence.Online" />), DotTemplate = (item => @<div class="dot-template"><BitSpinnerLoading CustomSize="30" Color="BitColor.Tertiary" /></div>), SecondaryContent = (item => @<div style="display: flex; align-items: center; gap: 1rem;"> <BitIcon IconName="Accept" Style="color: limegreen;" /> <BitLabel>Co-Founder & CTO</BitLabel> </div>), Reversed = true }, new() { PrimaryContent = (item => @<BitPersona PrimaryText="Ted Randall" Size="@BitPersonaSize.Size32" Presence="@BitPersonaPresence.Online" ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-male.png" />), DotTemplate = (item => @<div class="dot-template"><BitRollerLoading CustomSize="30" Color="BitColor.Tertiary" /></div>), SecondaryContent = (item => @<div style="display: flex; align-items: center; gap: 1rem;"> <BitIcon IconName="Accept" Style="color: limegreen;" /> <BitLabel>Project Manager</BitLabel> </div>) }, ]; }
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
<BitTimeline Horizontal Color="BitColor.Primary" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.Primary" Variant="BitVariant.Outline" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.Primary" Variant="BitVariant.Text" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.Secondary" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.Secondary" Variant="BitVariant.Outline" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.Secondary" Variant="BitVariant.Text" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.Tertiary" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.Tertiary" Variant="BitVariant.Outline" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.Tertiary" Variant="BitVariant.Text" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.Info" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.Info" Variant="BitVariant.Outline" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.Info" Variant="BitVariant.Text" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.Success" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.Success" Variant="BitVariant.Outline" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.Success" Variant="BitVariant.Text" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.Warning" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.Warning" Variant="BitVariant.Outline" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.Warning" Variant="BitVariant.Text" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.SevereWarning" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.SevereWarning" Variant="BitVariant.Outline" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.SevereWarning" Variant="BitVariant.Text" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.Error" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.Error" Variant="BitVariant.Outline" Items="iconItems" /> <BitTimeline Horizontal Color="BitColor.Error" Variant="BitVariant.Text" Items="iconItems" />@code { private List<BitTimelineItem> 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 } ]; }
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
<BitTimeline Horizontal Size="BitSize.Small" Items="iconItems" /> <BitTimeline Horizontal Size="BitSize.Small" Variant="BitVariant.Outline" Items="iconItems" /> <BitTimeline Horizontal Size="BitSize.Small" Variant="BitVariant.Text" Items="iconItems" /> <BitTimeline Horizontal Size="BitSize.Medium" Items="iconItems" /> <BitTimeline Horizontal Size="BitSize.Medium" Variant="BitVariant.Outline" Items="iconItems" /> <BitTimeline Horizontal Size="BitSize.Medium" Variant="BitVariant.Text" Items="iconItems" /> <BitTimeline Horizontal Size="BitSize.Large" Items="iconItems" /> <BitTimeline Horizontal Size="BitSize.Large" Variant="BitVariant.Outline" Items="iconItems" /> <BitTimeline Horizontal Size="BitSize.Large" Variant="BitVariant.Text" Items="iconItems" />@code { private List<BitTimelineItem> 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 } ]; }
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
<style> .custom-class { color: dodgerblue; font-weight: bold; margin-inline: 1rem; padding-block: 1rem; text-shadow: dodgerblue 0 0 1rem; } .custom-item { color: dodgerblue; font-weight: bold; text-shadow: dodgerblue 0 0 1rem; } .custom-dot { border-color: blueviolet; box-shadow: blueviolet 0 0 1rem; } .custom-icon { color: blueviolet; } .custom-divider::before { background: blueviolet; } .custom-item-text { color: blueviolet; } </style> <BitTimeline Style="max-width: max-content; color: dodgerblue;" Items="basicItems" /> <BitTimeline Horizontal Class="custom-class" Items="basicItems" /> <BitTimeline Items="styleClassItems" /> <BitTimeline Items="iconItems" Styles="@(new() { Icon = "color: whitesmoke;", Dot = "background-color: lightseagreen; border-color: mediumseagreen;", PrimaryText = "color: lightseagreen; font-weight: bold;" })" /> <BitTimeline Items="iconItems" Variant="BitVariant.Outline" Classes="@(new() { Dot = "custom-dot", Icon = "custom-icon", Item = "custom-item-text", Divider = "custom-divider" })" />@code { private List<BitTimelineItem> basicItems = [ new() { PrimaryText = "Item 1" }, new() { PrimaryText = "Item 2", SecondaryText = "Item 2 Secondary" }, new() { PrimaryText = "Item 3" } ]; private List<BitTimelineItem> styleClassItems = [ new() { PrimaryText = "Styled", Style = "color: dodgerblue;", IconName = BitIconName.Brush }, new() { PrimaryText = "Classed", Class = "custom-item", IconName = BitIconName.FormatPainter } ]; private List<BitTimelineItem> 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 } ]; }
RTL
Use the BitTimeline component in right-to-left (RTL).
Vertical
گزینه ۱
گزینه ۲
گزینه ۲ ثانویه
گزینه ۳
Horizontal
گزینه ۱
گزینه ۲
گزینه ۲ ثانویه
گزینه ۳
<BitTimeline Dir="BitDir.Rtl" Items="basicRtlItems" /> <BitTimeline Horizontal Dir="BitDir.Rtl" Items="basicRtlItems" />@code { private List<BitTimelineItem> basicRtlItems = [ new() { PrimaryText = "گزینه ۱" }, new() { PrimaryText = "گزینه ۲", SecondaryText = "گزینه ۲ ثانویه" }, new() { PrimaryText = "گزینه ۳" } ]; }
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