List

How it works

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Basic example

The most basic list group is an unordered list with list items and the proper classes.

An item
A second item
A third item
A fourth item
And a fifth one

<x-list-group>
    <x-list-group.item label="An item" />
    <x-list-group.item label="A second item" />
    <x-list-group.item label="A third item" />
    <x-list-group.item label="A fourth item" />
    <x-list-group.item label="And a fifth one" />
</x-list-group>

<ul class="list-group">
  <li class="list-group-item">An item
  </li>

  <li class="list-group-item">A second item
  </li>

  <li class="list-group-item">A third item
  </li>

  <li class="list-group-item">A fourth item
  </li>

  <li class="list-group-item">And a fifth one
  </li>
</ul>

List of links example

It's easy to create a list of links markup by setting prop :list="false".

An item A second item A third item A fourth item And a fifth one

<x-list-group :list="false">
    <x-list-group.item href="#" label="An item" />
    <x-list-group.item href="#" label="A second item" />
    <x-list-group.item href="#" label="A third item" />
    <x-list-group.item href="#" label="A fourth item" />
    <x-list-group.item href="#" label="And a fifth one" />
</x-list-group>

<div class="list-group">
  <a class="list-group-item list-group-item-action"
       href="#">An item</a> <a class="list-group-item list-group-item-action"
       href="#">A second item</a> <a class="list-group-item list-group-item-action"
       href="#">A third item</a> <a class="list-group-item list-group-item-action"
       href="#">A fourth item</a> <a class="list-group-item list-group-item-action"
       href="#">And a fifth one</a>
</div>

Using components example

If you like semantic markup like me, you will appreciate the alternative creation of markup.

A list item using component x-list-group.ul and x-list-group.item.li
A second item

A list item using component x-list-group and x-list-group.item.a

A second item

<x-list-group.ul>
    <x-list-group.item.li>
        A list item using component <code>x-list-group.ul</code> and <code>x-list-group.item.li</code>
    </x-list-group.item.li>
    <x-list-group.item.li label="A second item" />
</x-list-group.ul>

<x-list-group>
    <x-list-group.item.a href="#">
        A list item using component <code>x-list-group</code> and <code>x-list-group.item.a</code>
    </x-list-group.item.a>
    <x-list-group.item.a href="#" label="A second item" />
</x-list-group>

<x-list-group>
    <x-list-group.item.button>
        A list item in a UL list using component <code>x-list-group</code> and <code>x-list-group.item.button</code>
    </x-list-group.item.button>
    <x-list-group.item.button label="A second item" />
</x-list-group>

<ul class="list-group">
  <li class="list-group-item">A list item using component <code>x-list-group.ul</code> and <code>x-list-group.item.li</code>
  </li>

  <li class="list-group-item">A second item
  </li>
</ul>

<hr>

<div style="margin-left: 2em"
     class="list-group">
  <a class="list-group-item list-group-item-action"
       href="#">A list item using component <code>x-list-group</code> and <code>x-list-group.item.a</code></a> <a class="list-group-item list-group-item-action"
       href="#">A second item</a>
</div>

<hr>

<div style="margin-left: 2em"
     class="list-group">
  <button class="list-group-item list-group-item-action">A list item in a UL list using component <code>x-list-group</code> and <code>x-list-group.item.button</code></button> <button class="list-group-item list-group-item-action">A second item</button>
</div>