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
Show code
Item 1
Item 2
Item 2 Secondary
Item 3
Horizontal
Show code
The Timeline offers two orientation options: Vertical (default) and Horizontal.
Item 1
Item 2
Item 2 Secondary
Item 3
Disabled
Show code
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
Show code
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
Show code
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
Show code
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
Show code
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
Show code
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
Show code
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
Show code
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
Show code
Use the BitTimeline component in right-to-left (RTL).
Vertical
گزینه ۱
گزینه ۲
گزینه ۲ ثانویه
گزینه ۳
Horizontal
گزینه ۱
گزینه ۲
گزینه ۲ ثانویه
گزینه ۳
API
BitTimeline parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
BitComponentBase parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
BitComponentBase public members
Name |
Type |
Default value |
Description |
---|---|---|---|
BitTimelineItem properties
Name |
Type |
Default value |
Description |
---|---|---|---|
BitTimelineOption properties
Name |
Type |
Default value |
Description |
---|---|---|---|
BitNameSelectorPair properties
Name |
Type |
Default value |
Description |
---|---|---|---|
BitTimelineClassStyles properties
Name |
Type |
Default value |
Description |
---|---|---|---|
BitVariant enum
Name |
Value |
Description |
---|---|---|
BitColor enum
Name |
Value |
Description |
---|---|---|
BitSize enum
Name |
Value |
Description |
---|---|---|
BitVisibility enum
Name |
Value |
Description |
---|---|---|
BitDir enum
Name |
Value |
Description |
---|---|---|
- On this page