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>
Quia quis rerum dolor minima id atque. Suscipit ex aut deleniti harum. Ipsam autem illo eos dolor et. Exercitationem quia ut aut est. Pariatur ut saepe velit quibusdam vero quam.

# Заголовок 

<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
Quod repellendus in dolorum dolores. Esse maxime et explicabo. Deleniti vel repudiandae eligendi. Minus reprehenderit vel ut voluptatem expedita aliquid.

# 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>
Eaque distinctio omnis sit qui magnam et culpa. Ad vel incidunt blanditiis assumenda consequuntur expedita. Esse inventore sunt corporis et voluptas. Laudantium vitae rerum aperiam.
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>
Omnis ullam cumque provident odit dolor laborum. Cum est est dignissimos itaque. Et provident placeat eius et laboriosam voluptatem. Repellat laborum modi eum.

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

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