List

A <ul> with Tabler’s list helpers, for a list that needs no borders: people, links in a footer, the steps of a procedure. For bordered rows, use List group.

<twig:Tabler:List separated="{{ true }}" unstyled="{{ true }}" class="mb-0">
    {% for person in [
        {name: 'Jane Cooper', role: 'Account manager', avatar: '/examples/avatar-1.jpg'},
        {name: 'Wade Warren', role: 'Accountant', avatar: '/examples/avatar-2.jpg'},
        {name: 'Esther Howard', role: 'Sales', avatar: '/examples/avatar-3.jpg'},
    ] %}
        <twig:Tabler:List:Item class="d-flex align-items-center gap-2">
            <twig:Tabler:Avatar size="sm" image="{{ person.avatar }}" />
            <div>
                <div class="fw-medium">{{ person.name }}</div>
                <div class="text-secondary small">{{ person.role }}</div>
            </div>
        </twig:Tabler:List:Item>
    {% endfor %}
</twig:Tabler:List>

<ul class="list-separated list-unstyled mb-0">
    <li class="d-flex align-items-center gap-2">
        <span class="avatar avatar-sm" style="background-image: url(/examples/avatar-1.jpg)"></span>
        <div>
            <div class="fw-medium">Jane Cooper</div>
            <div class="text-secondary small">Account manager</div>
        </div>
    </li>
    <li class="d-flex align-items-center gap-2">
        <span class="avatar avatar-sm" style="background-image: url(/examples/avatar-2.jpg)"></span>
        <div>
            <div class="fw-medium">Wade Warren</div>
            <div class="text-secondary small">Accountant</div>
        </div>
    </li>
    <li class="d-flex align-items-center gap-2">
        <span class="avatar avatar-sm" style="background-image: url(/examples/avatar-3.jpg)"></span>
        <div>
            <div class="fw-medium">Esther Howard</div>
            <div class="text-secondary small">Sales</div>
        </div>
    </li>
</ul>

separated stacks the items with a gap (list-separated), for items that are blocks, such as a picture next to two lines of text. unstyled removes the bullets and the indent (list-unstyled).

Inline

inline lays the items out in a row (list-inline), and its List:Items follow it (list-inline-item). dots adds a dot between the items (list-inline-dots), and has no effect without inline:

<twig:Tabler:List inline="{{ true }}" dots="{{ true }}" class="mb-0">
    <twig:Tabler:List:Item><a href="/docs" class="link-secondary">Documentation</a></twig:Tabler:List:Item>
    <twig:Tabler:List:Item><a href="/license" class="link-secondary">License</a></twig:Tabler:List:Item>
    <twig:Tabler:List:Item><a href="/changelog" class="link-secondary">Changelog</a></twig:Tabler:List:Item>
</twig:Tabler:List>

<ul class="list-inline list-inline-dots mb-0">
    <li class="list-inline-item"><a href="/docs" class="link-secondary">Documentation</a></li>
    <li class="list-inline-item"><a href="/license" class="link-secondary">License</a></li>
    <li class="list-inline-item"><a href="/changelog" class="link-secondary">Changelog</a></li>
</ul>

Ordered

ordered renders an <ol>, for items whose order matters:

<twig:Tabler:List ordered="{{ true }}" class="mb-0">
    <twig:Tabler:List:Item>Install the bundle with Composer.</twig:Tabler:List:Item>
    <twig:Tabler:List:Item>Load the Tabler stylesheet and script.</twig:Tabler:List:Item>
    <twig:Tabler:List:Item>Render your first component.</twig:Tabler:List:Item>
</twig:Tabler:List>

<ol class="mb-0">
    <li>Install the bundle with Composer.</li>
    <li>Load the Tabler stylesheet and script.</li>
    <li>Render your first component.</li>
</ol>

Props

Prop	Type	Default	Description
`separated`	bool	`false`	Stacks the items with a gap (`list-separated`)
`inline`	bool	`false`	Items in a row (`list-inline`); its `List:Item`s follow it
`dots`	bool	`false`	With `inline`: a dot between the items (`list-inline-dots`)
`unstyled`	bool	`false`	No bullets and no indent (`list-unstyled`)
`ordered`	bool	`false`	Renders an `<ol>` instead of a `<ul>`

Other attributes go to the root <ul> (or <ol>).

List:Item:

Prop	Type	Default	Description
`inline`	bool?	`null`	Item of an inline list (`list-inline-item`); `null` follows the parent `List`

Other attributes go to the <li>. An item placed outside a List, e.g. in a list of your own markup, needs inline set by hand; inline="{{ false }}" keeps an item of an inline list out of the row.

Sub-components

Component	Renders
`List:Item`	`<li>`: one list item

Blocks

Block	Default
`content`	Empty: the children, the `List:Item`s

List:Item has an empty content block too, for the item content.