Portal UI

Tabs

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>

Publishing Component

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


Sedmented Variant 

<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>