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-d0941113e04b5bc4cdca00f221f13c11" role="tablist">
  <li class="nav-item" role="presentation">
    <button id="tabpane-241ab7338ffd579d260ecf945c7d1633-7fb55ed0b7a30342ba6da306428cae04" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-241ab7338ffd579d260ecf945c7d1633">First</button>
  </li>
  <li class="nav-item" role="presentation">
    <button id="tabpane-d440b4b0cc9724c0025a0de776b87c90-c22cf8376b1893dcfcef0649fe1a7d87" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-d440b4b0cc9724c0025a0de776b87c90">Second</button>
  </li>
</ul>
<div class="tab-content" id="tabs-d0941113e04b5bc4cdca00f221f13c11_contents">
  <div class="p-3 tab-pane fade show active" id="tabpane-241ab7338ffd579d260ecf945c7d1633" role="tabpanel">
    <p>
      This is the first tab!
    </p>
  </div>
  <div class="p-3 tab-pane fade" id="tabpane-d440b4b0cc9724c0025a0de776b87c90" role="tabpanel">
    <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-d9ac3bb97997cc1e62cd0f3e3b66ffcb" role="tablist">
  <li class="nav-item" role="presentation">
    <button id="tabpane-4e0722750c6cfa30aae2ca5e2cf0e786-7fb55ed0b7a30342ba6da306428cae04" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-4e0722750c6cfa30aae2ca5e2cf0e786">First</button>
  </li>
  <li class="nav-item" role="presentation">
    <button id="tabpane-904deeefc1468e0dd098465adaef6a13-c22cf8376b1893dcfcef0649fe1a7d87" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-904deeefc1468e0dd098465adaef6a13">Second</button>
  </li>
</ul>
<div class="tab-content" id="tabs-d9ac3bb97997cc1e62cd0f3e3b66ffcb_contents">
  <div class="p-3 tab-pane fade" id="tabpane-4e0722750c6cfa30aae2ca5e2cf0e786" role="tabpanel">
    <p>
      This is the first tab!
    </p>
  </div>
  <div class="p-3 tab-pane fade show active" id="tabpane-904deeefc1468e0dd098465adaef6a13" role="tabpanel">
    <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-41ac5389bc70814bea63b4d51c006df3" role="tablist">
  <li class="nav-item" role="presentation">
    <button id="tabpane-13868754e5cd974c66264b24f9c59a98-7fb55ed0b7a30342ba6da306428cae04" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-13868754e5cd974c66264b24f9c59a98">First</button>
  </li>
  <li class="nav-item" role="presentation">
    <button id="tabpane-5ca9a65271b8ba1ccc66cbd86fabffc0-c22cf8376b1893dcfcef0649fe1a7d87" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-5ca9a65271b8ba1ccc66cbd86fabffc0">Second</button>
  </li>
</ul>
<div class="tab-content" id="tabs-41ac5389bc70814bea63b4d51c006df3_contents">
  <div class="p-3 tab-pane fade show active" id="tabpane-13868754e5cd974c66264b24f9c59a98" role="tabpanel">
    <p>
      This is the first tab!
    </p>
  </div>
  <div class="p-3 tab-pane fade" id="tabpane-5ca9a65271b8ba1ccc66cbd86fabffc0" role="tabpanel">
    <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.

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-1a26d37bb574ce72e76ac4b0ba17f4da" role="tablist">
  <li class="nav-item" role="presentation">
    <a id="tabpane-6caf44ce1eeacba0c3fe5a223580e225-7fb55ed0b7a30342ba6da306428cae04" class="nav-link active" href="#" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-6caf44ce1eeacba0c3fe5a223580e225">First</a>
  </li>
  <li class="nav-item" role="presentation">
    <a id="tabpane-5c43835a135b67acac5053c87e3fa97a-c22cf8376b1893dcfcef0649fe1a7d87" class="nav-link" href="#" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-5c43835a135b67acac5053c87e3fa97a">Second</a>
  </li>
</ul>
<div class="tab-content" id="tabs-1a26d37bb574ce72e76ac4b0ba17f4da_contents">
  <div class="p-3 tab-pane fade show active" id="tabpane-6caf44ce1eeacba0c3fe5a223580e225" role="tabpanel">
    <p>
      This is the first tab!
    </p>
  </div>
  <div class="p-3 tab-pane fade" id="tabpane-5c43835a135b67acac5053c87e3fa97a" role="tabpanel">
    <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.

This is the first tab!

This is the second 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-44f683a84163b3523afe57c2e008bc8c" class="" method="post" name="form-44f683a84163b3523afe57c2e008bc8c">
  <input type="hidden" name="_token" value="v5jPay8AjHGYTi5EnNPF9eIvQPZLRH6mapA81Gh9">
  <ul class="nav nav-tabs" id="tabs-9a18ce97b7982228fbf2990f0b923ac4" role="tablist">
    <li class="nav-item" role="presentation">
      <a id="tabpane-4f07b47af6029e258e14fd3bd9dd10fa-7fb55ed0b7a30342ba6da306428cae04" class="nav-link active" href="#" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-4f07b47af6029e258e14fd3bd9dd10fa">First</a>
    </li>
    <li class="nav-item" role="presentation">
      <a id="tabpane-62ece60491de5106a2644ebafe8e49d2-c22cf8376b1893dcfcef0649fe1a7d87" class="nav-link" href="#" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-62ece60491de5106a2644ebafe8e49d2">Second</a>
    </li>
  </ul>
  <div class="tab-content" id="tabs-9a18ce97b7982228fbf2990f0b923ac4_contents">
    <div class="p-3 tab-pane fade show active" id="tabpane-4f07b47af6029e258e14fd3bd9dd10fa" role="tabpanel">
      <p>
        This is the first tab!
      </p>
    </div>
    <div class="p-3 tab-pane fade" id="tabpane-62ece60491de5106a2644ebafe8e49d2" role="tabpanel">
      <p>
        This is the second tab!
      </p>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-4f275dcbf5d6014c3d37fc75cc38c8ab" 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-7cf99b5b33f53fe96102bfeecb582b29" role="tablist">
  <li class="nav-item" role="presentation">
    <button id="tabpane-5352dd4eb1f0d1c51a053cfd9b70aba6-7fb55ed0b7a30342ba6da306428cae04" class="bg-danger text-white nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-5352dd4eb1f0d1c51a053cfd9b70aba6">First</button>
  </li>
  <li class="nav-item" role="presentation">
    <button id="tabpane-b7f442c1f2e4a41a3dbcb4203bc59c75-c22cf8376b1893dcfcef0649fe1a7d87" class="text-info nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-b7f442c1f2e4a41a3dbcb4203bc59c75">Second</button>
  </li>
</ul>
<div class="tab-content" id="tabs-7cf99b5b33f53fe96102bfeecb582b29_contents">
  <div class="p-3 tab-pane fade show active" id="tabpane-5352dd4eb1f0d1c51a053cfd9b70aba6" role="tabpanel">
    <p>
      This is the first tab!
    </p>
  </div>
  <div class="p-3 tab-pane fade" id="tabpane-b7f442c1f2e4a41a3dbcb4203bc59c75" role="tabpanel">
    <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-5fbd2d1d636e05f961dce322cd00a264" 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" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-45393c213773c3009275dbe359b839b3">First</button>
  </li>
  <li class="nav-item" role="presentation">
    <button id="tabpane-0e3eac875c2e847303ee6243191e3f07-c22cf8376b1893dcfcef0649fe1a7d87" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-0e3eac875c2e847303ee6243191e3f07">Second</button>
  </li>
</ul>
<div class="tab-content" id="tabs-5fbd2d1d636e05f961dce322cd00a264_contents">
  <div class="p-3 tab-pane fade show active" id="tabpane-45393c213773c3009275dbe359b839b3" role="tabpanel">
    <p>
      This is the first tab!
    </p>
  </div>
  <div class="p-3 tab-pane fade" id="tabpane-0e3eac875c2e847303ee6243191e3f07" role="tabpanel">
    <p>
      This is the second tab!
    </p>
  </div>
</div>

Larastrap

info@madbob.org

gitlab.com/madbob/larastrap

powered by MAD

PayPal Donation