bar-list

A ranked list with a bar per row, such as redemptions per perk. The figures stay as text.

Example

Laravel

<x-admin::bar-list id="g-bars" :items="[
    ['label' => 'Early entry discount', 'value' => 812, 'href' => '#', 'meta' => 'Njuko'],
    ['label' => 'Race kit bundle', 'value' => 240, 'meta' => 'Webhook site'],
    ['label' => 'Recovery session', 'value' => 96],
]" />

Props

PropRequiredDefaultOptions
items[]
maxnull
suffixnull

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { BarList } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<ul class="adm-bar-list" id="g-bars">
                    <li class="adm-bar-list__item">
            <span class="adm-bar-list__row">
                <a class="adm-bar-list__label" href="#">Early entry discount</a>                <span class="adm-bar-list__value">812</span>
            </span>
            <span class="adm-bar-list__meta">Njuko</span>            <span class="adm-bar-list__bar" aria-hidden="true"><span style="width:100%"></span></span>
        </li>
                    <li class="adm-bar-list__item">
            <span class="adm-bar-list__row">
                <span class="adm-bar-list__label">Race kit bundle</span>                <span class="adm-bar-list__value">240</span>
            </span>
            <span class="adm-bar-list__meta">Webhook site</span>            <span class="adm-bar-list__bar" aria-hidden="true"><span style="width:29.6%"></span></span>
        </li>
                    <li class="adm-bar-list__item">
            <span class="adm-bar-list__row">
                <span class="adm-bar-list__label">Recovery session</span>                <span class="adm-bar-list__value">96</span>
            </span>
                        <span class="adm-bar-list__bar" aria-hidden="true"><span style="width:11.8%"></span></span>
        </li>
    </ul>