## List  
Use List component to show ordered and unordered lists with icon support.  
Category: Typography  

### Simple Example

```python
import dash_mantine_components as dmc

component = dmc.List(
    [
        dmc.ListItem(
            dmc.Text(
                [
                    "Join our ",
                    dmc.Anchor(
                        "Discord", href="https://discord.gg/KuJkh4Pyq5", underline=False
                    ),
                    " Community.",
                ]
            )
        ),
        dmc.ListItem("Install python virtual environment."),
    ]
)
```
### Interactive Demo

### With Icons

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

component = dmc.List(
    icon=dmc.ThemeIcon(
        DashIconify(icon="radix-icons:check-circled", width=16),
        radius="xl",
        color="teal",
        size=24,
    ),
    size="sm",
    spacing="sm",
    children=[
        dmc.ListItem("Join our Discord Community."),
        dmc.ListItem("Install python virtual environment."),
        dmc.ListItem(
            dmc.Text(["Install npm dependencies with ", dmc.Code("npm install")])
        ),
        dmc.ListItem(
            dmc.Text(["Add your new component in ", dmc.Code("src/lib/components.")])
        ),
        dmc.ListItem(
            "Raise a PR, including an example to reproduce the changes contributed by the PR.",
            icon=dmc.ThemeIcon(
                DashIconify(icon="radix-icons:pie-chart", width=16),
                radius="xl",
                color="blue",
                size=24,
            ),
        ),
    ],
)
```
### Nested Lists

```python
import dash_mantine_components as dmc

component = dmc.List(
    [
        dmc.ListItem("First order item"),
        dmc.ListItem("First order item"),
        dmc.ListItem(
            [
                "First order item with list",
                dmc.List(
                    withPadding=True,
                    listStyleType="disc",
                    children=[
                        dmc.ListItem("Nested Item"),
                        dmc.ListItem("Nested Item"),
                        dmc.ListItem(
                            [
                                "Nested item with list",
                                dmc.List(
                                    withPadding=True,
                                    listStyleType="disc",
                                    children=[
                                        dmc.ListItem("Even more nested"),
                                        dmc.ListItem("Even more nested"),
                                    ],
                                ),
                            ]
                        ),
                        dmc.ListItem("Nested Item"),
                    ],
                ),
            ]
        ),
        dmc.ListItem("First order item"),
    ]
)
```
### 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.


| Name        | Static selector           | Description                                           |
|:------------|:--------------------------|:------------------------------------------------------|
| root        | .mantine-List-root        | Root element                                          |
| item        | .mantine-List-item        | ListItem root element                                 |
| itemIcon    | .mantine-List-itemIcon    | ListItem icon                                         |
| itemLabel   | .mantine-List-itemLabel   | ListItem content                                      |
| itemWrapper | .mantine-List-itemWrapper | ListItem wrapper element, container, icon and content |


### Keyword Arguments
#### List

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

- 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.

- center (boolean; optional):
    Determines whether items must be centered with their icon, `False`
    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.

- 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`.

- icon (a list of or a singular dash component, string or number; optional):
    Icon that replaces list item dot.

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

- listStyleType (optional):
    Controls `list-style-type`, by default inferred from `type`.

- 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.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Controls `font-size` and `line-height`, `'md'` by default.

- spacing (number; optional):
    Key of `theme.spacing` or any valid CSS value to set spacing
    between items, `0` 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.

- type (a value equal to: 'ordered', 'unordered'; optional):
    List type: `ol` or `ul`, `'unordered'` by default.

- variant (string; optional):
    variant.

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

- withPadding (boolean; optional):
    Determines whether list items should be offset with padding,
    `False` by default.
#### ListItem

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

- 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.

- 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`.

- icon (a list of or a singular dash component, string or number; optional):
    Icon to replace item bullet.

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

- 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.

- 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`.