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>
Non vel quo incidunt qui. Exercitationem corporis accusantium labore aperiam provident. Et quis quas vero cum et aut accusantium. Quis est saepe quis earum voluptate autem.

# Заголовок 

<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
Odit est dolor tenetur enim recusandae. Consectetur nemo doloremque sed quia quibusdam. Eaque illo modi laborum inventore omnis voluptas earum.

# 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>
Sit earum eius sit ullam at dolorem nihil. Doloribus non qui error maiores exercitationem omnis quasi quae. Repellat et qui voluptas sit. Dolorem dolorem voluptatibus qui repudiandae.
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>
Sint iste quaerat inventore voluptatem id. Sapiente odio omnis dolores illo sit possimus aperiam. Illum temporibus eos voluptatem ipsam dolores commodi velit. Et occaecati quos quo ut.

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

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