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-56014094" role="tablist">
<li class="nav-item" role="presentation">
<button id="tabpane-fc624930-7fb55ed0b7a30342ba6da306428cae04" class="nav-link active" aria-current="true" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-fc624930">First</button>
</li>
<li class="nav-item" role="presentation">
<button id="tabpane-5796032c-c22cf8376b1893dcfcef0649fe1a7d87" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-5796032c">Second</button>
</li>
</ul>
<div class="tab-content" id="tabs-56014094_contents">
<div class="p-3 tab-pane fade show active" id="tabpane-fc624930" role="tabpanel" aria-labelledby="tabpane-fc624930-7fb55ed0b7a30342ba6da306428cae04">
<p>
This is the first tab!
</p>
</div>
<div class="p-3 tab-pane fade" id="tabpane-5796032c" role="tabpanel" aria-labelledby="tabpane-5796032c-c22cf8376b1893dcfcef0649fe1a7d87">
<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-beea866b" role="tablist">
<li class="nav-item" role="presentation">
<button id="tabpane-762bd34f-7fb55ed0b7a30342ba6da306428cae04" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-762bd34f">First</button>
</li>
<li class="nav-item" role="presentation">
<button id="tabpane-ed110420-c22cf8376b1893dcfcef0649fe1a7d87" class="nav-link active" aria-current="true" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-ed110420">Second</button>
</li>
</ul>
<div class="tab-content" id="tabs-beea866b_contents">
<div class="p-3 tab-pane fade" id="tabpane-762bd34f" role="tabpanel" aria-labelledby="tabpane-762bd34f-7fb55ed0b7a30342ba6da306428cae04">
<p>
This is the first tab!
</p>
</div>
<div class="p-3 tab-pane fade show active" id="tabpane-ed110420" role="tabpanel" aria-labelledby="tabpane-ed110420-c22cf8376b1893dcfcef0649fe1a7d87">
<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-4d97b9ed" role="tablist">
<li class="nav-item" role="presentation">
<button id="tabpane-f667cfb7-7fb55ed0b7a30342ba6da306428cae04" class="nav-link active" aria-current="true" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-f667cfb7">First</button>
</li>
<li class="nav-item" role="presentation">
<button id="tabpane-6d5d18d8-c22cf8376b1893dcfcef0649fe1a7d87" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-6d5d18d8">Second</button>
</li>
</ul>
<div class="tab-content" id="tabs-4d97b9ed_contents">
<div class="p-3 tab-pane fade show active" id="tabpane-f667cfb7" role="tabpanel" aria-labelledby="tabpane-f667cfb7-7fb55ed0b7a30342ba6da306428cae04">
<p>
This is the first tab!
</p>
</div>
<div class="p-3 tab-pane fade" id="tabpane-6d5d18d8" role="tabpanel" aria-labelledby="tabpane-6d5d18d8-c22cf8376b1893dcfcef0649fe1a7d87">
<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-995ddd06" role="tablist">
<li class="nav-item" role="presentation">
<a id="tabpane-57fc9076-7fb55ed0b7a30342ba6da306428cae04" class="nav-link active" href="#" aria-current="true" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-57fc9076">First</a>
</li>
<li class="nav-item" role="presentation">
<a id="tabpane-60bef83e-c22cf8376b1893dcfcef0649fe1a7d87" class="nav-link" href="#" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-60bef83e">Second</a>
</li>
</ul>
<div class="tab-content" id="tabs-995ddd06_contents">
<div class="p-3 tab-pane fade show active" id="tabpane-57fc9076" role="tabpanel" aria-labelledby="tabpane-57fc9076-7fb55ed0b7a30342ba6da306428cae04">
<p>
This is the first tab!
</p>
</div>
<div class="p-3 tab-pane fade" id="tabpane-60bef83e" role="tabpanel" aria-labelledby="tabpane-60bef83e-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-80da9065" class="" method="post" name="form-80da9065">
<input type="hidden" name="_token" value="cESvXeJ4R3YjaHaMc6rWD0MlMYVFSm54ccOtMDyn" autocomplete="off">
<ul class="nav nav-tabs" id="tabs-34b69303" role="tablist">
<li class="nav-item" role="presentation">
<a id="tabpane-68e98b98-7fb55ed0b7a30342ba6da306428cae04" class="nav-link active" href="#" aria-current="true" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-68e98b98">First</a>
</li>
<li class="nav-item" role="presentation">
<a id="tabpane-12e82c00-c22cf8376b1893dcfcef0649fe1a7d87" class="nav-link" href="#" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-12e82c00">Second</a>
</li>
</ul>
<div class="tab-content" id="tabs-34b69303_contents">
<div class="p-3 tab-pane fade show active" id="tabpane-68e98b98" role="tabpanel" aria-labelledby="tabpane-68e98b98-7fb55ed0b7a30342ba6da306428cae04">
<p>
This is the first tab!
</p>
</div>
<div class="p-3 tab-pane fade" id="tabpane-12e82c00" role="tabpanel" aria-labelledby="tabpane-12e82c00-c22cf8376b1893dcfcef0649fe1a7d87">
<p>
This is the second tab!
</p>
</div>
</div>
<div class="col-12 text-end">
<button id="button-f189ebae" 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-e3c27fc0" role="tablist">
<li class="nav-item" role="presentation">
<button id="tabpane-6852d2da-7fb55ed0b7a30342ba6da306428cae04" class="bg-danger text-white nav-link active" aria-current="true" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-6852d2da">First</button>
</li>
<li class="nav-item" role="presentation">
<button id="tabpane-f36805b5-c22cf8376b1893dcfcef0649fe1a7d87" class="text-info nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-f36805b5">Second</button>
</li>
</ul>
<div class="tab-content" id="tabs-e3c27fc0_contents">
<div class="p-3 tab-pane fade show active" id="tabpane-6852d2da" role="tabpanel" aria-labelledby="tabpane-6852d2da-7fb55ed0b7a30342ba6da306428cae04">
<p>
This is the first tab!
</p>
</div>
<div class="p-3 tab-pane fade" id="tabpane-f36805b5" role="tabpanel" aria-labelledby="tabpane-f36805b5-c22cf8376b1893dcfcef0649fe1a7d87">
<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-d6c1005f" 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-4a5fd617">First</button>
</li>
<li class="nav-item" role="presentation">
<button id="tabpane-d1650178-c22cf8376b1893dcfcef0649fe1a7d87" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-d1650178">Second</button>
</li>
</ul>
<div class="tab-content" id="tabs-d6c1005f_contents">
<div class="p-3 tab-pane fade show active" id="tabpane-4a5fd617" 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-d1650178" role="tabpanel" aria-labelledby="tabpane-d1650178-c22cf8376b1893dcfcef0649fe1a7d87">
<p>
This is the second tab!
</p>
</div>
</div>