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>
Cupiditate omnis omnis eligendi beatae. Eius quis aliquid nobis aut. Hic voluptatum voluptas asperiores rem.

# Заголовок 

<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
Dolor dignissimos eos nobis. Enim autem maxime enim qui. Ut maxime odio quidem tenetur. Libero esse excepturi nemo nobis dicta aperiam.

# 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>
Voluptas laboriosam voluptatem omnis eius ducimus inventore autem. Rerum nobis nemo consectetur. Pariatur quisquam autem quo ut temporibus animi quaerat.
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>
Aliquid sed veniam deserunt aliquam. Accusamus quam ipsum labore hic. Ut ipsum eius provident sunt quisquam modi. Expedita quo aut quia at harum molestias aut.

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

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