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>
A laboriosam nemo sed qui cum et. Omnis velit quae excepturi et molestiae. Ipsam est officiis illo voluptas pariatur quam deserunt. Velit fuga rerum voluptatum aut modi. Et dolorem sed deleniti modi.

# Заголовок 

<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
Soluta accusantium necessitatibus cumque consectetur. Natus eum veniam voluptatibus qui optio beatae iusto sapiente. Voluptatem facere illum porro impedit reiciendis.

# 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>
Assumenda eos et doloremque repellat molestiae. Deserunt suscipit est neque suscipit qui dolorem error. Ducimus sint aspernatur delectus iusto ut inventore in.
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>
Eum reiciendis vero nemo et ipsam quod ipsa eum. Fuga voluptatibus et error eum minus nihil.

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

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