Tabs

# Основы

Для создания вкладок можно воспользоваться компонентом moonshine::tabs.

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

Similique deleniti laudantium corrupti eos quia modi. Dicta nam ut ea. Ipsa dolorem explicabo consequuntur vel et dolorem et quidem.

Modi hic est ipsam. Recusandae est animi odit autem minus veritatis aut. Explicabo sit consequuntur consequatur recusandae quidem quibusdam voluptas. Ipsum fugit sint in nihil vero quia incidunt.

Через 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>

Tempora in quisquam eaque eligendi officia et quisquam. Dignissimos vero inventore id ratione ut. Debitis quo facere minima et ipsa qui.

Suscipit aut aliquam possimus assumenda et sapiente. Rerum laudantium aut architecto aut recusandae reiciendis recusandae. Eum eveniet dolor enim incidunt.

# Активная вкладка

Указать активную вкладку по умолчанию, можно задав 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"
/>

Maxime aut modi totam non cumque. Alias consequatur eligendi ullam totam sit earum laborum eum. Nulla voluptates ullam quis similique. Corrupti nobis aut reiciendis sapiente.

Nihil earum fuga et quae dignissimos asperiores. Maiores dolor reiciendis quia amet eligendi. Mollitia officia dolor quis eveniet exercitationem adipisci. Ut perferendis et ut consequatur.