A set of layered sections of content—known as tab panels—that are displayed one at a time.
<x-portal::tabs.group open="profile" class="w-[400px]">
<x-portal::tabs>
<x-portal::tabs.item name="profile">Profile</x-portal::tabs.item>
<x-portal::tabs.item name="account">Account</x-portal::tabs.item>
<x-portal::tabs.item name="billing">Billing</x-portal::tabs.item>
</x-portal::tabs>
<x-portal::tabs.content name="profile">
<x-portal::label>
Profile
</x-portal::label>
</x-portal::tabs.content>
<x-portal::tabs.content name="account">
<x-portal::label>
Account
</x-portal::label>
</x-portal::tabs.content>
<x-portal::tabs.content name="billing">
<x-portal::label>
Billing
</x-portal::label>
</x-portal::tabs.content>
</x-portal::tabs.group>
If you want to customize the components, you can publish them by running the following command :
php artisan vendor:publish --tag=portal-ui:tabs --force
<x-portal::tabs.group open="profile" class="w-[400px]">
<x-portal::tabs variant="segmented">
<x-portal::tabs.item name="profile">Profile</x-portal::tabs.item>
<x-portal::tabs.item name="account">Account</x-portal::tabs.item>
<x-portal::tabs.item name="billing">Billing</x-portal::tabs.item>
</x-portal::tabs>
<x-portal::tabs.content name="profile">
<x-portal::label>
Profile
</x-portal::label>
</x-portal::tabs.content>
<x-portal::tabs.content name="account">
<x-portal::label>
Account
</x-portal::label>
</x-portal::tabs.content>
<x-portal::tabs.content name="billing">
<x-portal::label>
Billing
</x-portal::label>
</x-portal::tabs.content>
</x-portal::tabs.group>