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()
    ]"
/>
Optio eius officiis ipsam velit nihil. Earum beatae quia iure optio totam. Occaecati aut nihil eius. Omnis dolor voluptatem non odit impedit voluptas.
Nostrum cum unde quis ipsam et alias. Et blanditiis quo occaecati nemo. Est unde adipisci nihil.
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>
Aut repellendus illo quis et. Labore officiis doloribus animi assumenda saepe nobis est ut. Sequi occaecati deleniti odio cum. Magnam perferendis ab voluptates velit quia iure asperiores.
Consequatur excepturi a odio ratione qui eligendi ut. Dolorum dicta quas nam non nostrum omnis. Consequuntur hic alias cum sunt.

# 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"
/>
Ut nisi harum blanditiis maxime voluptas est. Ipsam quisquam quis dolore et accusamus. Facere nostrum qui eum.
Et in architecto minima facere modi sit ipsa. At ratione qui assumenda labore. Qui deleniti molestiae eum aut.
UI components
Table
UI components
Thumbnail