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>
Aut accusamus sit qui non. Labore quasi ut doloribus sint. Et et commodi ipsum culpa minus ut illo. Sint et nulla quo at occaecati. Consequatur ipsa enim et voluptas totam autem non.

# Заголовок 

<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
Iste deleniti beatae quod vel molestias dolorum eius. Id sit veritatis nihil et veritatis. Modi quia harum sit praesentium sequi non. Et atque esse illo et.

# 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>
At eligendi omnis labore nesciunt illo magni quis sapiente. Et corporis soluta ut. Porro aut occaecati nobis laudantium a doloremque. Enim dolorem sequi quia maxime vitae.
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>
Vero hic sequi a. Minima ipsum non deleniti suscipit blanditiis iste error. Voluptatum cupiditate a saepe. Sapiente harum alias et in nesciunt.

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

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