Dropdown Component

# Make

Компонент Dropdown позволяет создавать выпадающие блоки.

Создать Dropdown можно воспользовавшись статическим методом make() класса Dropdown. 

make(
    ?string $title = null,
    Closure|string $toggler = '',
    Closure|View|string $content = '',
    bool $isSearchable = false,
    Closure|array $items = [],
    string $placement = 'bottom-start'
)
  • $title - заголовок выпадающего блока,
  • $toggler - переключатель,
  • $content - контент,
  • $isSearchable - поиск по элементам,
  • $items - элементы блока,
  • $placement - расположение выпадающего блока.
use MoonShine\Components\Dropdown;
use MoonShine\Components\Link;
 
Dropdown::make(
    title: 'Title',
    toggler: 'Click me',
    items: [
        Link::make('#', 'Link 1'),
        Link::make('#', 'Link 2'),
        Link::make('#', 'Link 3'),
    ],
    placement: 'top',
)
Title

# Переключатель

Метод toggler() позволяет указать элемент, по клику на который будет раскрываться Dropdown. 

toggler(Closure|string $toggler)
use MoonShine\ActionButtons\ActionButton;
use MoonShine\Components\Dropdown;
 
Dropdown::make(
    title: 'Dropdown',
    content: fn() => fake()->text()
)
    ->toggler(fn() => ActionButton::make('Click me'))
Dropdown
Debitis fugit praesentium incidunt. Occaecati et eaque nesciunt quae ut. Aut vel non debitis vel sed veniam. Commodi nam enim quas eum. Ut et temporibus optio ab.

# Элементы

Метод items() позволяет добавить элементы в раскрывающийся список. 

items(Closure|array $items)
use MoonShine\Components\Dropdown;
use MoonShine\Components\Link;
 
Dropdown::make(
    toggler: 'Click me',
)
    ->items([
        Link::make('#', 'Link 1'),
        Link::make('#', 'Link 2'),
        Link::make('#', 'Link 3'),
    ])

# Поиск по элементам

Метод searchable() позволяет добавить поиск по элементам в раскрывающем блоке. 

searchable(Closure|bool|null $condition = null)
use MoonShine\Components\Dropdown;
use MoonShine\Components\Link;
 
Dropdown::make(
    toggler: 'Click me',
)
    ->items([
        Link::make('#', 'Link 1'),
        Link::make('#', 'Link 2'),
        Link::make('#', 'Link 3'),
    ])
    ->searchable()
Placeholder

Метод searchPlaceholder() позволяет изменить placeholder в поле поиска. 

searchPlaceholder(Closure|string $placeholder)
use MoonShine\Components\Dropdown;
use MoonShine\Components\Link;
 
Dropdown::make(
    toggler: 'Click me',
)
    ->items([
        Link::make('#', 'Link 1'),
        Link::make('#', 'Link 2'),
        Link::make('#', 'Link 3'),
    ])
    ->searchable()
    ->searchPlaceholder('Search item')

# Контент

Метод content() позволяет позволяет отобразить в раскрывающем блоке произвольный контент. 

content(Closure|View|string $content)
use MoonShine\Components\Dropdown;
 
Dropdown::make(
    toggler: 'Click me',
)
    ->content(fake()->text())
Qui a eos delectus aliquid consectetur sit dolorem. Saepe rerum et fugit. Blanditiis incidunt at nihil.

# Расположение

Метод placement() позволяет изменить расположение выпадающего блока. 

placement(string $placement)

Доступные расположения:

bottom top left right 

use MoonShine\Components\Dropdown;
 
Dropdown::make(
    toggler: 'Click me',
    content: fake()->text(),
)
    ->placement('right')
Accusantium sit ratione sint et sed autem. Et pariatur est dolorum ut culpa cupiditate. Non est aliquam sint voluptates sit non. Iste quo exercitationem omnis dolores autem animi doloribus.

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

Компоненты
Badge
Компоненты
Card