Maskow Labs Logo Livewire Components

Lists

Lists are used to display a collection of items. This package offers a simple way to create lists with different styles.

  • Origin Response
    200
  • Request Body Size
    1.2 KB
  • Response Content Length
    2.6 KB 
 1<x-list>
 2    <x-list.item>
 3        <x-list.label>Origin Response</x-list.label>
 4        <x-list.value>
 5            <x-badge type="green">200</x-badge>
 6        </x-list.value>
 7    </x-list.item>
 8    <x-list.item>
 9        <x-list.label>Request Body Size</x-list.label>
10        <x-list.value icon="arrow-down--micro">
11            1.2 KB
12        </x-list.value>
13    </x-list.item>
14    <x-list.item>
15        <x-list.label>Response Content Length</x-list.label>
16        <x-list.value icon="arrow-up--micro">
17            2.6 KB
18        </x-list.value>
19    </x-list.item>
20</x-list>

Position

You can change the position of the label and value with the position attribute.
Values: start, center, end

  • Origin Response
    200
  • Request Body Size
    1.2 KB
  • Response Content Length
    2.6 KB 
 1<x-list>
 2    <x-list.item>
 3        <x-list.label position="end">Origin Response</x-list.label>
 4        <x-list.value position="start">
 5            <x-badge type="green">200</x-badge>
 6        </x-list.value>
 7    </x-list.item>
 8    <x-list.item>
 9        <x-list.label position="end">Request Body Size</x-list.label>
10        <x-list.value icon="arrow-down--micro" position="start">
11            1.2 KB
12        </x-list.value>
13    </x-list.item>
14    <x-list.item>
15        <x-list.label position="end">Response Content Length</x-list.label>
16        <x-list.value icon="arrow-up--micro" position="start">
17            2.6 KB
18        </x-list.value>
19    </x-list.item>
20</x-list>

Bordered

You can add a border to the list with the border attribute. You can add it to the x-list, x-list.item, x-list.label components.

  • Origin Response
    200
  • Request Body Size
    1.2 KB
  • Response Content Length
    2.6 KB 
 1<x-list padding border>
 2    <x-list.item border>
 3        <x-list.label border>Origin Response</x-list.label>
 4        <x-list.value>
 5            <x-badge type="green">200</x-badge>
 6        </x-list.value>
 7    </x-list.item>
 8    <x-list.item border>
 9        <x-list.label border>Request Body Size</x-list.label>
10        <x-list.value icon="arrow-down--micro">
11            1.2 KB
12        </x-list.value>
13    </x-list.item>
14    <x-list.item border>
15        <x-list.label border>Response Content Length</x-list.label>
16        <x-list.value icon="arrow-up--micro">
17            2.6 KB
18        </x-list.value>
19    </x-list.item>
20</x-list>

Use padding instead of gap

Sometimes you need to have the label and values spaced with padding instead of the gap-property. You can achieve this by adding the padding attribute to the x-list component.

  • Origin Response
    200
  • Request Body Size
    1.2 KB
  • Response Content Length
    2.6 KB 
 1<x-list padding>
 2    <x-list.item border>
 3        <x-list.label border>Origin Response</x-list.label>
 4        <x-list.value>
 5            <x-badge type="green">200</x-badge>
 6        </x-list.value>
 7    </x-list.item>
 8    <x-list.item border>
 9        <x-list.label border>Request Body Size</x-list.label>
10        <x-list.value icon="arrow-down--micro">
11            1.2 KB
12        </x-list.value>
13    </x-list.item>
14    <x-list.item border>
15        <x-list.label border>Response Content Length</x-list.label>
16        <x-list.value icon="arrow-up--micro">
17            2.6 KB
18        </x-list.value>
19    </x-list.item>
20</x-list>

Regular styling

Of course you can also display a regular HTML-List. Just add the regular attribute to the x-list component.

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 4
  5. List Item 5 
 1<div class="row w-100">
 2    <div class="col-12 col-md-6">
 3        <x-list regular>
 4            <x-li>List Item 1</x-li>
 5            <x-li>List Item 2</x-li>
 6            <x-li>List Item 3</x-li>
 7            <x-li>List Item 4</x-li>
 8            <x-li>List Item 5</x-li>
 9        </x-list>
10    </div>
11    <div class="col-12 col-md-6">
12        <x-list regular type="ol">
13            <x-li>List Item 1</x-li>
14            <x-li>List Item 2</x-li>
15            <x-li>List Item 3</x-li>
16            <x-li>List Item 4</x-li>
17            <x-li>List Item 5</x-li>
18        </x-list>
19    </div>
20</div>