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>
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>
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>
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.
<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="l8KD8aEG13QFD3Qr46y0S7ZVdknn7oZvrGunGyEO">
<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>
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>
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>