View on GitLab

Tabs

Tabs are composed by two essential elements: x-larastrap::tabs is the container wrapping all panels involved in the same block and providing actual clickable tabs, and x-larastrap::tabpane is a single activatable tab.

This is the first tab!

This is the second tab!

<x-larastrap::tabs active="0">
    <x-larastrap::tabpane label="First">
        <p>This is the first tab!</p>
    </x-larastrap::tabpane>

    <x-larastrap::tabpane label="Second">
        <p>This is the second tab!</p>
    </x-larastrap::tabpane>
</x-larastrap::tabs>

<ul class="nav nav-tabs" id="tabs-666f5bd91575efa88462954957e4518d" role="tablist">
  <li class="nav-item" role="presentation">
    <button id="tabpane-413fc65aa4c5527afc8bfc2070b10ae2-7fb55ed0b7a30342ba6da306428cae04" class="nav-link active" aria-current="true" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-413fc65aa4c5527afc8bfc2070b10ae2">First</button>
  </li>
  <li class="nav-item" role="presentation">
    <button id="tabpane-0d9f863fab08881026e254d82f150c60-c22cf8376b1893dcfcef0649fe1a7d87" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-0d9f863fab08881026e254d82f150c60">Second</button>
  </li>
</ul>
<div class="tab-content" id="tabs-666f5bd91575efa88462954957e4518d_contents">
  <div class="p-3 tab-pane fade show active" id="tabpane-413fc65aa4c5527afc8bfc2070b10ae2" role="tabpanel" aria-labelledby="tabpane-413fc65aa4c5527afc8bfc2070b10ae2-7fb55ed0b7a30342ba6da306428cae04">
    <p>
      This is the first tab!
    </p>
  </div>
  <div class="p-3 tab-pane fade" id="tabpane-0d9f863fab08881026e254d82f150c60" role="tabpanel" aria-labelledby="tabpane-0d9f863fab08881026e254d82f150c60-c22cf8376b1893dcfcef0649fe1a7d87">
    <p>
      This is the second tab!
    </p>
  </div>
</div>

active

You eventually want to specify an initially active tab (or no tab at all will be displayed by default). You can do this with the active parameter, applied to x-larastrap::tabs (must contain the index of the preferred tab) or to one of the contained x-larastrap::tabpane (boolean value).

This is the first tab!

This is the second tab!

<x-larastrap::tabs>
    <x-larastrap::tabpane label="First">
        <p>This is the first tab!</p>
    </x-larastrap::tabpane>

    <x-larastrap::tabpane label="Second" active="true">
        <p>This is the second tab!</p>
    </x-larastrap::tabpane>
</x-larastrap::tabs>

<ul class="nav nav-tabs" id="tabs-17b8e16e0391871c1f3f96440cadeb08" role="tablist">
  <li class="nav-item" role="presentation">
    <button id="tabpane-7e4c4185552199ab499895af97ce8854-7fb55ed0b7a30342ba6da306428cae04" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-7e4c4185552199ab499895af97ce8854">First</button>
  </li>
  <li class="nav-item" role="presentation">
    <button id="tabpane-848d958d9cbc160ca945d457ee62e17a-c22cf8376b1893dcfcef0649fe1a7d87" class="nav-link active" aria-current="true" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-848d958d9cbc160ca945d457ee62e17a">Second</button>
  </li>
</ul>
<div class="tab-content" id="tabs-17b8e16e0391871c1f3f96440cadeb08_contents">
  <div class="p-3 tab-pane fade" id="tabpane-7e4c4185552199ab499895af97ce8854" role="tabpanel" aria-labelledby="tabpane-7e4c4185552199ab499895af97ce8854-7fb55ed0b7a30342ba6da306428cae04">
    <p>
      This is the first tab!
    </p>
  </div>
  <div class="p-3 tab-pane fade show active" id="tabpane-848d958d9cbc160ca945d457ee62e17a" role="tabpanel" aria-labelledby="tabpane-848d958d9cbc160ca945d457ee62e17a-c22cf8376b1893dcfcef0649fe1a7d87">
    <p>
      This is the second tab!
    </p>
  </div>
</div>

tabview

This is the first tab!

This is the second tab!

<x-larastrap::tabs tabview="pills" active="0">
    <x-larastrap::tabpane label="First">
        <p>This is the first tab!</p>
    </x-larastrap::tabpane>

    <x-larastrap::tabpane label="Second">
        <p>This is the second tab!</p>
    </x-larastrap::tabpane>
</x-larastrap::tabs>

<ul class="nav nav-pills" id="tabs-e0f0a979d51c64436d14d8258d57036d" role="tablist">
  <li class="nav-item" role="presentation">
    <button id="tabpane-0f91d8c62595c2ccc03a5d2e1acb04c2-7fb55ed0b7a30342ba6da306428cae04" class="nav-link active" aria-current="true" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-0f91d8c62595c2ccc03a5d2e1acb04c2">First</button>
  </li>
  <li class="nav-item" role="presentation">
    <button id="tabpane-e672146d8c45fd8e39b2d38aca16ce45-c22cf8376b1893dcfcef0649fe1a7d87" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-e672146d8c45fd8e39b2d38aca16ce45">Second</button>
  </li>
</ul>
<div class="tab-content" id="tabs-e0f0a979d51c64436d14d8258d57036d_contents">
  <div class="p-3 tab-pane fade show active" id="tabpane-0f91d8c62595c2ccc03a5d2e1acb04c2" role="tabpanel" aria-labelledby="tabpane-0f91d8c62595c2ccc03a5d2e1acb04c2-7fb55ed0b7a30342ba6da306428cae04">
    <p>
      This is the first tab!
    </p>
  </div>
  <div class="p-3 tab-pane fade" id="tabpane-e672146d8c45fd8e39b2d38aca16ce45" role="tabpanel" aria-labelledby="tabpane-e672146d8c45fd8e39b2d38aca16ce45-c22cf8376b1893dcfcef0649fe1a7d87">
    <p>
      This is the second tab!
    </p>
  </div>
</div>

use_anchors

By default, clickable tabs are rendered as HTML button. But you can choose to render them as HTML anchors, with the use_anchors parameter.

First
Second

This is the first tab!

This is the second tab!

<x-larastrap::tabs active="0" use_anchors="true">
    <x-larastrap::tabpane label="First">
        <p>This is the first tab!</p>
    </x-larastrap::tabpane>

    <x-larastrap::tabpane label="Second">
        <p>This is the second tab!</p>
    </x-larastrap::tabpane>
</x-larastrap::tabs>

<ul class="nav nav-tabs" id="tabs-8a290dfc4cfa4b6230b5fa1182a5bb06" role="tablist">
  <li class="nav-item" role="presentation">
    <a id="tabpane-d3d6d8f5663655c7cd53c05ab687a9c9-7fb55ed0b7a30342ba6da306428cae04" class="nav-link active" href="#" aria-current="true" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-d3d6d8f5663655c7cd53c05ab687a9c9">First</a>
  </li>
  <li class="nav-item" role="presentation">
    <a id="tabpane-4f3ce948b0aadc93f1b5d5b8913eddc0-c22cf8376b1893dcfcef0649fe1a7d87" class="nav-link" href="#" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-4f3ce948b0aadc93f1b5d5b8913eddc0">Second</a>
  </li>
</ul>
<div class="tab-content" id="tabs-8a290dfc4cfa4b6230b5fa1182a5bb06_contents">
  <div class="p-3 tab-pane fade show active" id="tabpane-d3d6d8f5663655c7cd53c05ab687a9c9" role="tabpanel" aria-labelledby="tabpane-d3d6d8f5663655c7cd53c05ab687a9c9-7fb55ed0b7a30342ba6da306428cae04">
    <p>
      This is the first tab!
    </p>
  </div>
  <div class="p-3 tab-pane fade" id="tabpane-4f3ce948b0aadc93f1b5d5b8913eddc0" role="tabpanel" aria-labelledby="tabpane-4f3ce948b0aadc93f1b5d5b8913eddc0-c22cf8376b1893dcfcef0649fe1a7d87">
    <p>
      This is the second tab!
    </p>
  </div>
</div>

Notably, the use_anchors parameter is automatically set to true when tabs are within a Form. This is to avoid unintended behaviors, such as submitting the parent form when clicking on a child tab.

<x-larastrap::form>
    <x-larastrap::tabs active="0">
        <x-larastrap::tabpane label="First">
            <p>This is the first tab!</p>
        </x-larastrap::tabpane>

        <x-larastrap::tabpane label="Second">
            <p>This is the second tab!</p>
        </x-larastrap::tabpane>
    </x-larastrap::tabs>
</x-larastrap::form>

<form id="form-1c383cd30b7c298ab50293adfecb7b18" class="" method="post" name="form-1c383cd30b7c298ab50293adfecb7b18">
  <input type="hidden" name="_token" value="H3LJ5c9pmnuW7cvFiuMvwL1hcqCoJW3iBGqmWuGY" autocomplete="off">
  <ul class="nav nav-tabs" id="tabs-2054f3c08415517a446dc8f8c47b0896" role="tablist">
    <li class="nav-item" role="presentation">
      <a id="tabpane-784daad6eb40db2931b33380120ac110-7fb55ed0b7a30342ba6da306428cae04" class="nav-link active" href="#" aria-current="true" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-784daad6eb40db2931b33380120ac110">First</a>
    </li>
    <li class="nav-item" role="presentation">
      <a id="tabpane-906b1f61e0f0215618d983757564dbbb-c22cf8376b1893dcfcef0649fe1a7d87" class="nav-link" href="#" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-906b1f61e0f0215618d983757564dbbb">Second</a>
    </li>
  </ul>
  <div class="tab-content" id="tabs-2054f3c08415517a446dc8f8c47b0896_contents">
    <div class="p-3 tab-pane fade show active" id="tabpane-784daad6eb40db2931b33380120ac110" role="tabpanel" aria-labelledby="tabpane-784daad6eb40db2931b33380120ac110-7fb55ed0b7a30342ba6da306428cae04">
      <p>
        This is the first tab!
      </p>
    </div>
    <div class="p-3 tab-pane fade" id="tabpane-906b1f61e0f0215618d983757564dbbb" role="tabpanel" aria-labelledby="tabpane-906b1f61e0f0215618d983757564dbbb-c22cf8376b1893dcfcef0649fe1a7d87">
      <p>
        This is the second tab!
      </p>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-3bf4cfd09d2b48e28bb9d91a2cfc9dcc" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

button_classes

It is possible to customize the CSS classes applied to each tab, handling the button_classes parameter of each individual x-larastrap::tabpane .

This is the first tab!

This is the second tab!

<x-larastrap::tabs active="0">
    <x-larastrap::tabpane label="First" button_classes="bg-danger text-white">
        <p>This is the first tab!</p>
    </x-larastrap::tabpane>

    <x-larastrap::tabpane label="Second" button_classes="text-info">
        <p>This is the second tab!</p>
    </x-larastrap::tabpane>
</x-larastrap::tabs>

<ul class="nav nav-tabs" id="tabs-306d54fb3b84bbdddb97eb079ae0801c" role="tablist">
  <li class="nav-item" role="presentation">
    <button id="tabpane-2c5dc6dd2944a76fc6fbf03327253eba-7fb55ed0b7a30342ba6da306428cae04" class="bg-danger text-white nav-link active" aria-current="true" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-2c5dc6dd2944a76fc6fbf03327253eba">First</button>
  </li>
  <li class="nav-item" role="presentation">
    <button id="tabpane-1afa288949d2cc1de7687ccbdff36369-c22cf8376b1893dcfcef0649fe1a7d87" class="text-info nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-1afa288949d2cc1de7687ccbdff36369">Second</button>
  </li>
</ul>
<div class="tab-content" id="tabs-306d54fb3b84bbdddb97eb079ae0801c_contents">
  <div class="p-3 tab-pane fade show active" id="tabpane-2c5dc6dd2944a76fc6fbf03327253eba" role="tabpanel" aria-labelledby="tabpane-2c5dc6dd2944a76fc6fbf03327253eba-7fb55ed0b7a30342ba6da306428cae04">
    <p>
      This is the first tab!
    </p>
  </div>
  <div class="p-3 tab-pane fade" id="tabpane-1afa288949d2cc1de7687ccbdff36369" role="tabpanel" aria-labelledby="tabpane-1afa288949d2cc1de7687ccbdff36369-c22cf8376b1893dcfcef0649fe1a7d87">
    <p>
      This is the second tab!
    </p>
  </div>
</div>

button_attributes

In the same way, it is possible to customize the HTML attributes of each tab, handling the button_attributes parameter of each individual x-larastrap::tabpane . This must be an associative array, with names and values of each attribute as keys/values.

This is the first tab!

This is the second tab!

<x-larastrap::tabs active="0">
    <x-larastrap::tabpane label="First" :button_attributes="['id' => 'an-id-for-tab-button', 'data-custom' => 'this-is-a-test']">
        <p>This is the first tab!</p>
    </x-larastrap::tabpane>

    <x-larastrap::tabpane label="Second">
        <p>This is the second tab!</p>
    </x-larastrap::tabpane>
</x-larastrap::tabs>

<ul class="nav nav-tabs" id="tabs-84d8955dfba6fb9280bfd852b31011db" role="tablist">
  <li class="nav-item" role="presentation">
    <button id="an-id-for-tab-button" class="nav-link active" data-custom="this-is-a-test" aria-current="true" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-ea2bff3cd019a38bd1f0435035d5b074">First</button>
  </li>
  <li class="nav-item" role="presentation">
    <button id="tabpane-70363bde14a9c0af12a0d0830d0d1b5d-c22cf8376b1893dcfcef0649fe1a7d87" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-70363bde14a9c0af12a0d0830d0d1b5d">Second</button>
  </li>
</ul>
<div class="tab-content" id="tabs-84d8955dfba6fb9280bfd852b31011db_contents">
  <div class="p-3 tab-pane fade show active" id="tabpane-ea2bff3cd019a38bd1f0435035d5b074" role="tabpanel" aria-labelledby="an-id-for-tab-button">
    <p>
      This is the first tab!
    </p>
  </div>
  <div class="p-3 tab-pane fade" id="tabpane-70363bde14a9c0af12a0d0830d0d1b5d" role="tabpanel" aria-labelledby="tabpane-70363bde14a9c0af12a0d0830d0d1b5d-c22cf8376b1893dcfcef0649fe1a7d87">
    <p>
      This is the second tab!
    </p>
  </div>
</div>

Intro

Components

Forms

Containers

Custom Elements

More

About

Tabs

active

tabview

use_anchors

button_classes

button_attributes