Tabs

To create tabs first set a container using <x-tab name="item"> provide the name. The name should match a tab.

Next set the tabs headers using <x-tabs.header>

Inside the header create a tab using <x-tabs.link name="details">Details</x-tabs.link>

create the tab content using <x-tabs.div name="details">The tab content</x-tabs.div>

Notice, this page uses the tabs blade components for all the examples in these docs.

To change the classes edit the blade component at:
resources/views/components/tab.blade.php
resources/views/components/tabs/div.blade.php
resources/views/components/tabs/header.blade.php
resources/views/components/tabs/link.blade.php

Example:

Details

Company

Team


                
                    <x-tab name="company">

                        <x-tabs.header>
                            <x-tabs.link name="details">Details</x-tabs.link>
                            <x-tabs.link name="company">Company</x-tabs.link>
                            <x-tabs.link name="team">Team</x-tabs.link>
                        </x-tabs.header>

                        <x-tabs.div name="details">
                            <p>Details</p>
                        </x-tabs.div>

                        <x-tabs.div name="company">
                            <p>Company</p>
                        </x-tabs.div>

                        <x-tabs.div name="team">
                            <p>Team</p>
                        </x-tabs.div>

                    </x-tab>