Etat Pur Design System

Tabs 

<div class="tab-wrapper tab-wrapper-lg flex items-start flex-row " x-data="{ tab: 1}">
    <a href="#">

        <div class="tab-item " :class="tab === 1 ? 'current-tab' : ''" @click="tab = 1">
            <span class="tab-icon">
                <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg> </span>

            <span>Tab 1</span>

            <span class="tab-counter">
                88
            </span>
        </div>

    </a>

    <div class="tab-item " :class="tab === 2 ? 'current-tab' : ''" @click="tab = 2">
        <span class="tab-icon">
            <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" stroke="currentColor" stroke-width="1.5" fill="none" />

            </svg> </span>

        <span>Tab 2</span>

        <span class="tab-counter">
            88
        </span>
    </div>

    <div class="tab-item " :class="tab === 3 ? 'current-tab' : ''" @click="tab = 3">
        <span class="tab-icon">
            <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" stroke="currentColor" stroke-width="1.5" fill="none" />

            </svg> </span>

        <span>Tab 3</span>

        <span class="tab-counter">
            88
        </span>
    </div>

    <div class="tab-item " :class="tab === 4 ? 'current-tab' : ''" @click="tab = 4">
        <span class="tab-icon">
            <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" stroke="currentColor" stroke-width="1.5" fill="none" />

            </svg> </span>

        <span>Tab 4</span>

        <span class="tab-counter">
            2
        </span>
    </div>

</div>
 
<div class="tab-wrapper tab-wrapper-{{ size }} flex items-start {{ direction == 'vertical' ? 'flex-col tab-vertical' : 'flex-row' }} {{ tabsClass }}"
    x-data="{ tab: {{ defaultTab }}}"
>
    {% for tab in tabs %}
        {% include "@template-tab" %}
    {% endfor %}
</div>
 
{
  "size": "lg",
  "direction": "horizontal",
  "tabsClass": "",
  "defaultTab": 1,
  "tabs": [
    {
      "id": 1,
      "label": "Tab 1",
      "icon": {
        "name": "heroicons--information-circle-outline"
      },
      "counter": "88",
      "href": "#",
      "tabClass": ""
    },
    {
      "id": 2,
      "label": "Tab 2",
      "icon": {
        "name": "heroicons--information-circle-outline"
      },
      "counter": "88"
    },
    {
      "id": 3,
      "label": "Tab 3",
      "icon": {
        "name": "heroicons--information-circle-outline"
      },
      "counter": "88"
    },
    {
      "id": 4,
      "label": "Tab 4",
      "icon": {
        "name": "heroicons--information-circle-outline"
      },
      "counter": "2"
    }
  ]
}

No notes defined.