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>
Dignissimos qui nulla voluptatem aut quaerat. Nihil quidem tempora quam quaerat nesciunt. Qui est sed asperiores et minus vel aliquam.

# Заголовок 

<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
Autem et et itaque ut. Maiores dolore autem provident consectetur et repudiandae iure. Odio sunt occaecati molestias suscipit quasi pariatur. Impedit ratione minus doloremque et quia rem eaque 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>
Sit qui labore molestiae occaecati consequatur labore. Eum quis animi aperiam ipsum quasi nam. Sit et ad dolor non numquam. Nihil beatae repellat illo id autem accusantium.
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>
Molestias eum dolore non minima enim. Quos non excepturi aut perspiciatis. Iste explicabo deleniti beatae debitis odit. Magni quos placeat ut non ratione provident.

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

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