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