# Основы
Благодаря CardsBuilder можно отобразить список элементов в виде карточек.
Вы также можете использовать CardsBuilder на собственных страницах или даже вне MoonShine.
CardsBuilder::make( Fields|array $fields = [], protected iterable $items = [])
$fields
- поля,$items
- значения полей.
CardsBuilder::make( [ ['id' => 1, 'title' => 'Title 1'], ['id' => 2, 'title' => 'Title 2'], ], [ ID::make(), Text::make('title') ])
Элементы и поля для CardsBuilder можно указать используя соответствующие методы.
ID: | 1 |
---|---|
title: | Title 1 |
ID: | 2 |
---|---|
title: | Title 2 |
# Элементы и поля
Метод items()
позволяет передать CardsBuilder данные для наполнения карточек.
items(iterable $items = [])
Метод fields()
позволяет передать CardsBuilder перечень полей для построения карточки.
fields(Fields|Closure|array $fields)
CardsBuilder::make() ->fields([Text::make('Text')]) ->items([['text' => 'Value']])
Соответствие данных с полями осуществляется через значение column поля!
# Приведение к типу
Метод cast()
служит для приведения значений таблицы к определенному типу.
Так как по умолчанию поля работают с примитивными типами:
use MoonShine\TypeCasts\ModelCast; CardsBuilder::make(items: User::paginate()) ->fields([Text::make('Email')]) ->cast(ModelCast::make(User::class))
В этом примере мы привели данные к формату модели User
с использованием ModelCast
.
За более подробной информацией обратитесь к разделу TypeCasts
# Header
Метод header()
позволяет задать шапку у карточек.
header(Closure|string $value)
$value
- column или замыкание возвращающее html код.
CardsBuilder::make( items: Article::paginate()) ->fields([Text::make('Text')]) ->header(static fn() => Badge::make('new', 'success'))
# Content
Методы content()
служит для добавления произвольного контента в карточку.
content(Closure|string $value)
CardsBuilder::make( fields: [Text::make('Text')], items: Article::paginate()) ->content('Custom content')
# Заголовок
Метод title()
позволяет задать заголовок карточки.
title(Closure|string $value)
$value
- column или замыкание возвращающее заголовок.
CardsBuilder::make( fields: [Text::make('Text')], items: Article::paginate()) ->title('title')
Воспользовавшись методом url()
, можно задать у заголовка ссылку.
url(Closure|string $value)
CardsBuilder::make( fields: [Text::make('Text')], items: Article::paginate()) ->title('title') ->url(fn($data) => (new ArticleResource())->formPageUrl($data))
# Подзаголовок
subtitle(Closure|string $value)
$value
- column или замыкание возвращающее подзаголовок.
CardsBuilder::make( items: Article::paginate()) ->fields([Text::make('Text')]) ->title('title') ->subtitle(static fn() => 'Subtitle')
# Изображение
Для добавления к карточке изображение можно воспользоваться методом thumbnail()
.
В качестве аргумента методы принимают значение column поля или замыкание возвращающее url изображения.
thumbnail(Closure|string $value)
CardsBuilder::make( items: Article::paginate()) ->fields([Text::make('Text')]) ->thumbnail('thumbnail')
![](/images/image_1.jpg)
ID: | 1 |
---|---|
title: | Title 1 |
![](/images/image_2.jpg)
ID: | 2 |
---|---|
title: | Title 2 |
# Кнопки
Для добавления кнопок на основе ActionButton, воспользуйтесь методом buttons()
.
CardsBuilder::make() ->items(Article::paginate()) ->fields([ID::make(), Switcher::make('Active')]) ->cast(ModelCast::make(Article::class)) ->buttons([ ActionButton::make('Delete', route('name.delete')), ActionButton::make('Edit', route('name.edit'))->showInDropdown(), ActionButton::make('Go to home', route('home'))->blank()->canSee(fn($data) => $data->active) ])
# Режим overlay
Режим overlay позволяет разместить шапку и заголовки поверх изображения карточки.
Данный режим активируется одноименным методом overlay()
.
CardsBuilder::make() ->items(Article::paginate()) ->fields([ID::make(), Text::make('Text')]) ->cast(ModelCast::make(Article::class)) ->thumbnail('thumbnail') ->header(static fn() => Badge::make('new', 'success')) ->title('title') ->subtitle(static fn() => 'Subtitle') ->overlay()
# Пагинация
Метод paginator()
для того чтобы таблица работала с пагинацией.
$paginator = Article::paginate(); CardsBuilder::make() ->fields([Text::make('Text')]) ->items($paginator->items()) ->paginator($paginator)
CardsBuilder::make( items: Article::paginate() ) ->fields([Text::make('Text')])
# Асинхронный режим
Если необходимо получать данные асинхронно (например при пагинации),
то воспользуйтесь методом async()
.
async( ?string $asyncUrl = null, string|array|null $asyncEvents = null, ?string $asyncCallback = null)
asyncUrl
- url запроса (по умолчанию запрос отправляется по текущему url),asyncEvents
- вызываемые события после успешного запроса,asyncCallback
- js callback функция после получения ответа.
CardsBuilder::make() ->items(Article::paginate()) ->fields([ID::make(), Switcher::make('Active')]) ->async()
После успешного запроса, можно вызвать события, добавив параметр asyncEvents
.
CardsBuilder::make() ->items(Article::paginate()) ->fields([ID::make(), Switcher::make('Active')]) ->name('crud') ->async(asyncEvents: ['cards-updated-crud'])
В MoonShine уже есть набор готовых событий:
table-updated-{name}
- асинхронное обновление таблицы по имени,cards-updated-{name}
- асинхронное обновление группы карточек по имени,form-reset-{name}
- сброс значений формы по имени,fragment-updated-{name}
- обновление blade fragment по имени.
Для вызова события обязательно необходимо задать уникальное имя компонента !
# Атрибуты
Вы можете задать любые html атрибуты для таблицы через метод customAttributes()
:
CardsBuilder::make() ->items(Article::paginate()) ->fields([ID::make(), Switcher::make('Active')]) ->customAttributes(['class' => 'custom-cards'])
# Колонки
Метод columnSpan()
позволяет задать ширину карточек в Grid сетке.
columnSpan( int $columnSpan, int $adaptiveColumnSpan = 12)
$columnSpan
- значение для десктопной версии,$adaptiveColumnSpan
- значение для мобильной версии.
CardsBuilder::make( fields: [Text::make('Text')], items: Article::paginate()) ->columnSpan(3)
В админ-панели MoonShine используется 12 колоночная сетка.
# Кастомный компонент
Компонент CardsBuilder позволяет переопределить компонент для построения списка элемента,
для этого необходимо воспользоваться методом customComponent()
.
CardsBuilder::make( fields: [Text::make('Text')], items: Article::paginate()) ->customComponent(function (Article $article, int $index, CardsBuilder $builder) { return Badge::make($index + 1 . "." . $article->title, 'green'); })