CardsBuilder

Наследует MoonShineComponent * имеет те же возможности

# Основы

Благодаря 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')
ID: 1
title: Title 1
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()
new

Title 1

Subtitle
Title 1
ID: 1
title: Title 1
new

Title 2

Subtitle
Title 2
ID: 2
title: Title 2

# Пагинация

Метод 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');
    })
1. Title 1
2. Title 2
3. Title 3
Дополнительно
TableBuilder
Дополнительно
TypeCasts