Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Account

Make changes to your account here. Click save when you're done.

Password

Change your password here. After saving, you'll be logged out.

Component Code 
<april:tabs defaultValue="account" class="w-[400px]">
    <slot:list class="w-full">
        <april:tabs-trigger value="account" class="w-full">Account</april:tabs-trigger>
        <april:tabs-trigger value="password" class="w-full">Password</april:tabs-trigger>
    </slot:list>
    <april:tabs-content value="account">
        <april:card>
            <slot:title>Account</slot:title>
            <slot:description>
                Make changes to your account here. Click save when you're done.
            </slot:description>
            <slot:content class="space-y-2">
                <div class="space-y-1">
                    <april:label for="name">Name</april:label>
                    <april:input id="name" value="Pedro Duarte" class="w-full" />
                </div>
                <div class="space-y-1">
            <april:label for="username">Username</april:label>
                    <april:input id="username" value="@peduarte" class="w-full" />
                </div>
            </slot:content>
            <slot:footer>
                <april:button>Save changes</april:button>
            </slot:footer>
        </april:card>
    </april:tabs-content>
    <april:tabs-content value="password">
        <april:card>
            <slot:title>Password</slot:title>
            <slot:description>
                Change your password here. After saving, you'll be logged out.
            </slot:description>
            <slot:content class="space-y-2">
                <div class="space-y-1">
                    <april:label for="current">Current password</april:label>
                    <april:input id="current" type="password" class="w-full" />
                </div>
                <div class="space-y-1">
                    <april:label for="new">New password</april:label>
                    <april:input id="new" type="password" class="w-full" />
                </div>
            </slot:content>
            <slot:footer>
                <april:button>Save password</april:button>
            </slot:footer>
        </april:card>
    </april:tabs-content>
</april:tabs>

Use the named list slot for the tab triggers. The older tabs-list name remains supported.

Activation mode

When the activationMode is set to manual, the tab must be clicked to be activated, and is not activated on focus.

Account

Make changes to your account here. Click save when you're done.

Password

Change your password here. After saving, you'll be logged out.

Component Code 
<april:tabs defaultValue="account" activationMode="manual" class="w-[400px]">
    <slot:list class="w-full">
        <april:tabs-trigger value="account" class="w-full">Account</april:tabs-trigger>
        <april:tabs-trigger value="password" class="w-full">Password</april:tabs-trigger>
    </slot:list>
    <april:tabs-content value="account">
        <april:card>
            <slot:title>Account</slot:title>
            <slot:description>
                Make changes to your account here. Click save when you're done.
            </slot:description>
            <slot:content class="space-y-2">
                <div class="space-y-1">
                    <april:label for="name">Name</april:label>
                    <april:input id="name" value="Pedro Duarte" class="w-full" />
                </div>
                <div class="space-y-1">
            <april:label for="username">Username</april:label>
                    <april:input id="username" value="@peduarte" class="w-full" />
                </div>
            </slot:content>
            <slot:footer>
                <april:button>Save changes</april:button>
            </slot:footer>
        </april:card>
    </april:tabs-content>
    <april:tabs-content value="password">
        <april:card>
            <slot:title>Password</slot:title>
            <slot:description>
                Change your password here. After saving, you'll be logged out.
            </slot:description>
            <slot:content class="space-y-2">
                <div class="space-y-1">
                    <april:label for="current">Current password</april:label>
                    <april:input id="current" type="password" class="w-full" />
                </div>
                <div class="space-y-1">
                    <april:label for="new">New password</april:label>
                    <april:input id="new" type="password" class="w-full" />
                </div>
            </slot:content>
            <slot:footer>
                <april:button>Save password</april:button>
            </slot:footer>
        </april:card>
    </april:tabs-content>
</april:tabs>

Publishing Views

Use the following commands to publish these views:

php artisan april:publish tabs
php artisan april:publish tabs-content
php artisan april:publish tabs-trigger
April UI keeps package views in `vendor/` by default. The command uses Laravel's vendor publishing system and copies overrides to `resources/views/vendor/april/components`. To publish all components, run: 
php artisan april:publish --all
Review local overrides after an upgrade with `php artisan april:update --diff`.