Dropdown

Вы просматриваете документацию старой версии MoonShine. Рассмотрите возможность обновления вашего проекта до MoonShine 2.x.

# Основы

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

<x-moonshine::dropdown>
    <div class="m-4">
        {{ fake()->text() }}
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
</x-moonshine::dropdown>
Ab blanditiis atque autem nulla nostrum. In voluptatem et officia quo. Doloremque at inventore quis quia sunt illum illo. Necessitatibus voluptatem distinctio quod error.

# Заголовок 

<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
Natus vel incidunt dignissimos et consequatur voluptatem. Est quia eligendi incidunt beatae ad repellat. Voluptatem sit dolores labore ut rerum.

# 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>
Sunt quidem atque ullam fugit quia perferendis. Odit unde culpa aut totam. Nesciunt qui ab reiciendis sapiente sed eos. Blanditiis totam deleniti eveniet natus ipsa qui.
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>
Qui dignissimos consectetur et dignissimos. Omnis ab voluptatem labore dolorem aut. Omnis corporis natus est repellendus mollitia. Autem unde molestiae explicabo sequi.

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

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