Dropdown

# Основы

C помощью компонента moonshine::dropdown можно создавать выпадающие блоки. 

<x-moonshine::dropdown>
    <div class="m-4">
        {{ fake()->text() }}
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
</x-moonshine::dropdown>
Ut est aliquam et omnis. Quae laboriosam alias iusto facilis libero labore nobis nihil. Nisi eius temporibus sapiente quia dolor. Distinctio omnis a id rerum iste.

# Заголовок 

<x-moonshine::dropdown title="Dropdown title">
    <div class="m-4">
        {{ fake()->text() }}
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
</x-moonshine::dropdown>
Dropdown title
Asperiores iusto architecto iusto provident sit maiores. Laborum error dolorum at veritatis. Nihil expedita quia voluptas est. Animi ut est et quo ut.

# Footer 

<x-moonshine::dropdown>
    <div class="m-4">
        {{ fake()->text() }}
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
    <x-slot:footer>Dropdown footer</x-slot:footer>
</x-moonshine::dropdown>
Optio magnam non autem dolor. Quis at sit sit ut perspiciatis quo. Atque sint molestiae autem dignissimos. Aut eligendi reiciendis provident. Corrupti et provident corporis aut modi.
Dropdown footer

# Расположение

Доступные расположения:

bottom top left right 

<x-moonshine::dropdown placement="left">
    <div class="m-4">
        {{ fake()->text() }}
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
</x-moonshine::dropdown>
Praesentium voluptas quia ut aut eligendi nam repellendus. Id pariatur ut minus ut est et. Voluptatum laborum tenetur consequuntur.

О дополнительных вариантах расположения можно узнать из официальной документации tippy.js .

UI компоненты
Divider
UI компоненты
Icon