Компоненты

Компонент Dropdown

Создание

Компонент 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'
)
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: 'Заголовок',
    toggler: 'Нажми меня',
    items: [
        Link::make('#', 'Ссылка 1'),
        Link::make('#', 'Ссылка 2'),
        Link::make('#', 'Ссылка 3'),
    ],
    placement: 'top',
)
use MoonShine\Components\Dropdown;
use MoonShine\Components\Link;
 
Dropdown::make(
    title: 'Заголовок',
    toggler: 'Нажми меня',
    items: [
        Link::make('#', 'Ссылка 1'),
        Link::make('#', 'Ссылка 2'),
        Link::make('#', 'Ссылка 3'),
    ],
    placement: 'top',
)

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

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

toggler(Closure|string $toggler)
toggler(Closure|string $toggler)
use MoonShine\ActionButtons\ActionButton;
use MoonShine\Components\Dropdown;
 
Dropdown::make(
    title: 'Выпадающий список',
    content: fn() => fake()->text()
)
    ->toggler(fn() => ActionButton::make('Нажми меня'))
use MoonShine\ActionButtons\ActionButton;
use MoonShine\Components\Dropdown;
 
Dropdown::make(
    title: 'Выпадающий список',
    content: fn() => fake()->text()
)
    ->toggler(fn() => ActionButton::make('Нажми меня'))

Элементы

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

items(Closure|array $items)
items(Closure|array $items)
use MoonShine\Components\Dropdown;
use MoonShine\Components\Link;
 
Dropdown::make(
    toggler: 'Нажми меня',
)
    ->items([
        Link::make('#', 'Ссылка 1'),
        Link::make('#', 'Ссылка 2'),
        Link::make('#', 'Ссылка 3'),
    ])
use MoonShine\Components\Dropdown;
use MoonShine\Components\Link;
 
Dropdown::make(
    toggler: 'Нажми меня',
)
    ->items([
        Link::make('#', 'Ссылка 1'),
        Link::make('#', 'Ссылка 2'),
        Link::make('#', 'Ссылка 3'),
    ])

Поиск элементов

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

searchable(Closure|bool|null $condition = null)
searchable(Closure|bool|null $condition = null)
use MoonShine\Components\Dropdown;
use MoonShine\Components\Link;
 
Dropdown::make(
    toggler: 'Нажми меня',
)
    ->items([
        Link::make('#', 'Ссылка 1'),
        Link::make('#', 'Ссылка 2'),
        Link::make('#', 'Ссылка 3'),
    ])
    ->searchable()
use MoonShine\Components\Dropdown;
use MoonShine\Components\Link;
 
Dropdown::make(
    toggler: 'Нажми меня',
)
    ->items([
        Link::make('#', 'Ссылка 1'),
        Link::make('#', 'Ссылка 2'),
        Link::make('#', 'Ссылка 3'),
    ])
    ->searchable()

Плейсхолдер

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

searchPlaceholder(Closure|string $placeholder)
searchPlaceholder(Closure|string $placeholder)
use MoonShine\Components\Dropdown;
use MoonShine\Components\Link;
 
Dropdown::make(
    toggler: 'Нажми меня',
)
    ->items([
        Link::make('#', 'Ссылка 1'),
        Link::make('#', 'Ссылка 2'),
        Link::make('#', 'Ссылка 3'),
    ])
    ->searchable()
    ->searchPlaceholder('Поиск элемента')
use MoonShine\Components\Dropdown;
use MoonShine\Components\Link;
 
Dropdown::make(
    toggler: 'Нажми меня',
)
    ->items([
        Link::make('#', 'Ссылка 1'),
        Link::make('#', 'Ссылка 2'),
        Link::make('#', 'Ссылка 3'),
    ])
    ->searchable()
    ->searchPlaceholder('Поиск элемента')

Содержимое

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

content(Closure|View|string $content)
content(Closure|View|string $content)
use MoonShine\Components\Dropdown;
 
Dropdown::make(
    toggler: 'Нажми меня',
)
    ->content(fake()->text())
use MoonShine\Components\Dropdown;
 
Dropdown::make(
    toggler: 'Нажми меня',
)
    ->content(fake()->text())

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

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

placement(string $placement)
placement(string $placement)

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

  • bottom (низ)
  • top (верх)
  • left (лево)
  • right (право)
use MoonShine\Components\Dropdown;
 
Dropdown::make(
    toggler: 'Нажми меня',
    content: fake()->text(),
)
    ->placement('right')
use MoonShine\Components\Dropdown;
 
Dropdown::make(
    toggler: 'Нажми меня',
    content: fake()->text(),
)
    ->placement('right')

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