## Timeline  
Use the Timeline and TimelineItem components to display a list of events in chronological order.  
Category: Data Display  

### Introduction

### Usage

Control timeline appearance with the following props:

- `active` - index of current active element, all elements before this index will be highlighted with color
- `color` - color from theme that should be used to highlight active items, defaults to theme.primaryColor
- `lineWidth` - controls line width and bullet border
- `bulletSize` - bullet width, height and border-radius
- `align` - defines line and bullets position relative to content, also sets textAlign

```python
import dash_mantine_components as dmc


component = dmc.Timeline(
    active=1,
    bulletSize=15,
    lineWidth=2,
    children=[
        dmc.TimelineItem(
            title="New Branch",
            children=[
                dmc.Text(
                    [
                        "You've created new branch ",
                        dmc.Anchor("fix-notification", href="#", size="sm"),
                        " from master",
                    ],
                    c="dimmed",
                    size="sm",
                ),
            ],
        ),
        dmc.TimelineItem(
            title="Commits",
            children=[
                dmc.Text(
                    [
                        "You've pushed 23 commits to ",
                        dmc.Anchor("fix-notification", href="#", size="sm"),
                    ],
                    c="dimmed",
                    size="sm",
                ),
            ],
        ),
        dmc.TimelineItem(
            title="Pull Request",
            lineVariant="dashed",
            children=[
                dmc.Text(
                    [
                        "You've submitted a pull request ",
                        dmc.Anchor(
                            "Fix incorrect notification message (#178)",
                            href="#",
                            size="sm",
                        ),
                    ],
                    c="dimmed",
                    size="sm",
                ),
            ],
        ),
        dmc.TimelineItem(
            [
                dmc.Text(
                    [
                        dmc.Anchor(
                            "AnnMarieW",
                            href="https://github.com/AnnMarieW",
                            size="sm",
                        ),
                        " left a comment on your pull request",
                    ],
                    c="dimmed",
                    size="sm",
                ),
            ],
            title="Code Review",
        ),
    ],
)
```
### Components in Bullets

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Timeline(
    children=[
        dmc.TimelineItem(
            title="Default bullet",
            children=dmc.Text("Default bullet without anything", c="dimmed", size="sm")
        ),
        dmc.TimelineItem(
            title="Avatar",
            bullet=dmc.Avatar(
                size=22,
                radius="xl",
                src="https://avatars.githubusercontent.com/u/91216500?v=4"
            ),
            children=dmc.Text("Timeline bullet as avatar image", c="dimmed", size="sm")
        ),
        dmc.TimelineItem(
            title="Icon",
            bullet=DashIconify(icon="tabler:sun", width=13),
            children=dmc.Text("Timeline bullet as icon", c="dimmed", size="sm")
        ),
        dmc.TimelineItem(
            title="ThemeIcon",
            bullet=dmc.ThemeIcon(
                size=22,
                variant="gradient",
                gradient={"from": "lime", "to": "cyan"},
                radius="xl",
                children=DashIconify(icon="tabler:video", width=13)
            ),
            children=dmc.Text("Timeline bullet as ThemeIcon component", c="dimmed", size="sm")
        )
    ],
    bulletSize=24
)
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


#### Timeline Selectors

| Selector     | Static selector               | Description                               |
|-------------|-------------------------------|-------------------------------------------|
| root        | .mantine-Timeline-root        | Root element                             |
| item        | .mantine-Timeline-item        | Item root element                        |
| itemBody    | .mantine-Timeline-itemBody    | Item body, wraps title and content       |
| itemTitle   | .mantine-Timeline-itemTitle   | Item title, controlled by `title` prop   |
| itemContent | .mantine-Timeline-itemContent | Item content, controlled by `children` prop |
| itemBullet  | .mantine-Timeline-itemBullet  | Item bullet                              |

#### Timeline CSS Variables

| Selector | Variable          | Description                                 |
|----------|------------------|---------------------------------------------|
| root     | --tl-bullet-size | Controls bullet width and height           |
|          | --tl-color       | Controls active bullet and line colors     |
|          | --tl-icon-color  | Controls icon color                        |
|          | --tl-line-width  | Controls width of the line between bullets |
|          | --tl-radius      | Controls bullet border-radius              |

#### Timeline Data Attributes

| Selector        | Attribute       | Condition                                    |
|----------------|----------------|----------------------------------------------|
| item, itemBullet | data-active    | Item index is `<=` Timeline `active` prop   |
| item           | data-line-active | Item index is `<` Timeline `active` prop    |


### Keyword Arguments
#### Timeline

- children (a list of or a singular dash component, string or number; optional):
    `Timeline.Item` components.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- active (number; optional):
    Index of active element.

- align (a value equal to: 'left', 'right'; optional):
    Controls how the content is positioned relative to the bullet,
    `'left'` by default.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- autoContrast (boolean; optional):
    Determines whether icon color should depend on `background-color`.
    If luminosity of the `color` prop is less than
    `theme.luminosityThreshold`, then `theme.white` will be used for
    text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- bulletSize (string | number; optional):
    Controls size of the bullet, `20` by default.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- color (optional):
    Key of `theme.colors` or any valid CSS color to control active
    item colors, `theme.primaryColor` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- lineWidth (string | number; optional):
    Control width of the line.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, numbers are converted to rem, `'xl'` by default.

- reverseActive (boolean; optional):
    Determines whether the active items direction should be reversed
    without reversing items order, `False` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.
#### TimelineItem

- children (a list of or a singular dash component, string or number; optional):
    Content displayed below the title.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- bullet (a list of or a singular dash component, string or number; optional):
    React node that should be rendered inside the bullet – icon,
    image, avatar, etc. By default, large white dot is displayed.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- lineVariant (a value equal to: 'dashed', 'dotted', 'solid'; optional):
    Controls line border style, `'solid'` by default.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, numbers are converted to rem, `'xl'` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- title (a list of or a singular dash component, string or number; optional):
    Item title, displayed next to the bullet.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.