maryUI v2 released! Upgrade guide

Collapse

This component can be used for showing and hiding content. It can be used standalone or wrapped into the "Accordion" component.

Basic

Hello

You!
<x-collapse separator>
<x-slot:heading>
Hello
</x-slot:heading>
<x-slot:content>
You!
</x-slot:content>
</x-collapse>

Livewire

Hey

There!
<x-collapse wire:model="show" separator class="bg-base-200">
<x-slot:heading>Hey</x-slot:heading>
<x-slot:content>There!</x-slot:content>
</x-collapse>

Style and alternative icon

How ...
Are you?
<x-collapse collapse-plus-minus>
<x-slot:heading class="bg-warning/20">
How ...
</x-slot:heading>
<x-slot:content class="bg-primary/10">
<div class="mt-5">Are you?</div>
</x-slot:content>
</x-collapse>

No icon

How ...
Are you ?
<x-collapse no-icon>
<x-slot:heading>
How ...
</x-slot:heading>
<x-slot:content>
Are you ?
</x-slot:content>
</x-collapse>

Accordion

You can group multiple x-collapse by wrapping it on a x-accordion component.

Group 1
Hello 1
Group 2
Hello 2
Group 3
Hello 3
<x-accordion wire:model="group">
<x-collapse name="group1">
<x-slot:heading>Group 1</x-slot:heading>
<x-slot:content>Hello 1</x-slot:content>
</x-collapse>
<x-collapse name="group2">
<x-slot:heading>Group 2</x-slot:heading>
<x-slot:content>Hello 2</x-slot:content>
</x-collapse>
<x-collapse name="group3">
<x-slot:heading>Group 3</x-slot:heading>
<x-slot:content>Hello 3</x-slot:content>
</x-collapse>
</x-accordion>
public string $group = 'group1';

Made with by Robson TenĂ³rio and contributors.