UI components

Tabs

-Basics -Active tab

Basics

To create tabs, you can use the moonshine::tabs component.

<x-moonshine::tabs
    :tabs="[
        'tab_1' => 'Tab 1',
        'tab_2' => 'Tab 2'
    ]"
    :contents="[
        'tab_1' => fake()->text(),
        'tab_2' => fake()->text()
    ]"
/>

Via slots

<x-moonshine::tabs
    :tabs="[
        'tab_1' => 'Tab 1',
        'tab_2' => 'Tab 2'
    ]"
>
    <x-slot:tab_1>
        {{ fake()->text() }}
    </x-slot:tab_1>
    <x-slot:tab_2>
        {{ fake()->text() }}
    </x-slot:tab_2>
</x-moonshine::tabs>

Active tab

You can specify the default active tab by specifying active.

<x-moonshine::tabs
    :tabs="[
        'tab_1' => 'Tab 1',
        'tab_2' => 'Tab 2'
    ]"
    :contents="[
        'tab_1' => fake()->text(),
        'tab_2' => fake()->text()
    ]"
    active="tab_2"
/>