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>
Aliquid velit voluptas quisquam impedit facilis. Animi dolores nulla iste ut. Rerum consequatur et asperiores voluptas omnis.

# Заголовок 

<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
Dolores ab tenetur adipisci neque. Deleniti velit animi qui quia sunt impedit eveniet vel. Aut asperiores tenetur molestiae ut pariatur aliquam aut. Hic debitis rem sunt esse dolorem sint quo.

# 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>
Quia officiis aut et ut assumenda voluptatem doloremque. Accusamus unde praesentium tempore consequatur voluptatem quidem aut.
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>
Voluptas ut porro quam dolores cupiditate voluptates quis. Repellat quam nesciunt voluptatibus omnis quia. Dolores iusto nam qui repellat vitae asperiores quia. Et totam id rerum ullam aut enim.

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

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