Lists
Timeline
Bit.BlazorUI
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.
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
Every example is live. Open its code to see exactly what produced the component running underneath.
Item
Custom
Option
Basic
Each item of the timeline renders a dot on the line, its PrimaryText before the line and its
SecondaryText after it, so a single item can describe an event from both sides of the axis.
Item 1
Item 2
Item 2 Secondary
Item 3
Horizontal
The Timeline offers two orientations: vertical (default) and horizontal. In the horizontal one the
line runs from the start to the end of the timeline and the contents of each item stack above and
below their dot.
Item 1
Item 2
Item 2 Secondary
Item 3
Disabled
Disabling the whole timeline with IsEnabled dims every item and stops all of them from responding,
while the IsEnabled of a single item only takes that one out of the interaction.
Disabled component
Item 1
Item 2
Item 2 Secondary
Item 3
Disabled item
Item 1
Item 2
Item 2 Secondary
Item 3
Variant
The variant determines how the dots are painted: Fill (default) is a solid dot, Outline is a hollow
dot with a colored border, and Text drops the dot's shape and keeps only its 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
Icon
Each item can render an icon inside its dot through IconName, which turns the dot into a marker of
what the event actually was.
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
Reversed swaps the two sides of the line: on the timeline it flips every item at once, and on a
single item it moves only that one to 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
Alternate
Alternate puts every second item on the opposite side of the line, so the items zig-zag around it.
Combined with Reversed the zig-zag starts from the other side.
Vertical
09:00
Item 1
10:30
Item 2
13:15
Item 3
16:45
Item 4
Vertical & Reversed
09:00
Item 1
10:30
Item 2
13:15
Item 3
16:45
Item 4
Horizontal
09:00
Item 1
10:30
Item 2
13:15
Item 3
16:45
Item 4
Reverse order
ReverseOrder renders the list from its last item to its first one, which turns a chronological list
into a most-recent-first one without touching the data itself.
Vertical
09:00
Item 1
10:30
Item 2
13:15
Item 3
16:45
Item 4
Horizontal
09:00
Item 1
10:30
Item 2
13:15
Item 3
16:45
Item 4
Truncate line
By default the connecting line runs through the whole extent of the timeline, past the first and the
last dot. TruncateLine cuts it back to the first dot (Start), to the last one (End), or to both (Both),
which is what a self-contained timeline usually wants.
Both
Item 1
Item 2
Item 2 Secondary
Item 3
Start
Item 1
Item 2
Item 2 Secondary
Item 3
End
Item 1
Item 2
Item 2 Secondary
Item 3
Horizontal (Both)
Item 1
Item 2
Item 2 Secondary
Item 3
Line variant
LineVariant paints the connecting line solid (default), dashed or dotted, and an item can override it
for its own stretch of the line. That is the usual way to separate the part of a timeline that has
already happened from the part that is still expected.
Dashed
Item 1
Item 2
Item 2 Secondary
Item 3
Dotted
Item 1
Item 2
Item 2 Secondary
Item 3
Item's LineVariant
Ordered
Shipped
Delivered
Horizontal (Dashed)
Item 1
Item 2
Item 2 Secondary
Item 3
Item customization
Color, Size and Variant are also available on the item itself, where they override the values of the
timeline for that item alone, and HideDot drops the dot of an item while keeping its contents in place.
Success
Warning
Error
No dot
Templates
PrimaryContent, SecondaryContent and DotTemplate replace the corresponding part of an item, while
Template replaces the whole item, dot and line included. The timeline also accepts an ItemTemplate
and a DotTemplate of its own, which are used by every item that brings no template of its own.
Vertical
Xafan Salina
Loading
Saleh Khafan
Loading
Ted Randall
Loading
Horizontal
Xafan Salina
Loading
Saleh Khafan
Loading
Ted Randall
Loading
Item's Template & the timeline's DotTemplate
Ordered
Shipped
Delivered
Events
The OnItemClick of the timeline is raised for every item, and each item can carry an OnClick of its
own; both of them run for the same click. An enabled item becomes a focusable button as soon as either
the timeline provides an OnItemClick or the item provides its own OnClick, and a disabled item raises
neither of them. A clickable item picks up a hover plate and a focus ring, and answers to Enter and
Space as well as to a click.
Item 1
Item 2
Item 3
Clicked item:
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
Disabled:
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
External Icons
Besides the built-in icons of IconName, the Icon parameter of an item accepts the CSS classes of any
external icon library, such as FontAwesome or Bootstrap Icons, and takes precedence over IconName.
FontAwesome Icons:
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
Bootstrap Icons:
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
Style and Class reach the root element, the Style and Class of an item reach that item, and the
Styles and Classes objects reach every part of the timeline separately: the item, the two contents,
the two texts, the divider, the dot and the icon. The connecting line is painted by a pseudo-element
of the divider, so its color is set through the --bit-tln-dvd-clr variable on the divider's style.
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
Every parameter, public member, sub-class and enum this component exposes.
BitTimeline 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. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| 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. |
BitComponentBase 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. |
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. |
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. |
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.