Tabs

# 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()
    ]"
/>

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

Minima sed ipsum aliquam quidem nihil. Qui explicabo vero laboriosam laborum assumenda et in nihil.

Nisi amet sint dolorem minima delectus. Veritatis ipsam quia vel in cupiditate. Suscipit veritatis quam dolorem praesentium. Expedita possimus commodi consequatur delectus corporis cumque sed.

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>

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

Sequi magnam nihil dolorem in nostrum earum ut. Aliquid rem est officiis dolorum culpa.

Nulla ut sed harum. Occaecati provident aut expedita. Dolorem suscipit nulla repudiandae vel ut.

# 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"
/>

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

Modi labore necessitatibus sed sint laboriosam sit. Odit neque rem dolor voluptatem praesentium. Velit quis temporibus facere et enim. Sit et fuga commodi dolorem autem rerum ducimus.

Sed vel delectus molestias quasi ut. Distinctio expedita et et nihil inventore. Excepturi nemo fugit esse quos rerum labore sapiente.