Компоненты

Card

Основы

Компонент Card позволяет создавать карточки элементов.

make(
    Closure|string $title = '',
    Closure|array|string $thumbnail = '',
    Closure|string $url = '#',
    Closure|array $values = [],
    Closure|string|null $subtitle = null,
    bool $overlay = false,
    array $escapeValueLabels = [],
    ?bool $escapeLabel = null,
)
make(
    Closure|string $title = '',
    Closure|array|string $thumbnail = '',
    Closure|string $url = '#',
    Closure|array $values = [],
    Closure|string|null $subtitle = null,
    bool $overlay = false,
    array $escapeValueLabels = [],
    ?bool $escapeLabel = null,
)
  • $title - заголовок,
  • $thumbnail - изображения,
  • $url - ссылка,
  • $values - список значений,
  • $subtitle - подзаголовок,
  • $overlay - режим overlay позволяет разместить шапку и заголовки поверх изображения карточки,
  • $escapeValueLabels - настройки экранирования подписей отдельных ключей списка значений,
  • $escapeLabel - экранирование подписей значений по умолчанию для этой карточки; null использует глобальную настройку.
 namespaces
use MoonShine\UI\Components\Card;
 
Card::make(
    title: fake()->sentence(3),
    thumbnail: 'https://moonshine-laravel.com/images/image_1.jpg',
    url: fn() => 'https://cutcode.dev',
    values: ['ID' => 1, 'Author' => fake()->name()],
    subtitle: date('d.m.Y'),
)
 namespaces
use MoonShine\UI\Components\Card;
 
Card::make(
    title: fake()->sentence(3),
    thumbnail: 'https://moonshine-laravel.com/images/image_1.jpg',
    url: fn() => 'https://cutcode.dev',
    values: ['ID' => 1, 'Author' => fake()->name()],
    subtitle: date('d.m.Y'),
)
<x-moonshine::card
        :title="fake()->sentence(3)"
        :thumbnail="'https://moonshine-laravel.com/images/image_1.jpg'"
        :url="'https://cutcode.dev'"
        :subtitle="'test'"
        :values="['ID' => 1, 'Author' => fake()->name()]"
>
    {{ fake()->text(100) }}
</x-moonshine::card>
<x-moonshine::card
        :title="fake()->sentence(3)"
        :thumbnail="'https://moonshine-laravel.com/images/image_1.jpg'"
        :url="'https://cutcode.dev'"
        :subtitle="'test'"
        :values="['ID' => 1, 'Author' => fake()->name()]"
>
    {{ fake()->text(100) }}
</x-moonshine::card>

Метод header() позволяет установить заголовок для карточек.

header(Closure|string $value)
header(Closure|string $value)
  • $value - столбец или замыкание, возвращающее html-код.
Card::make(
    title: fake()->sentence(3),
)
    ->header(static fn() => Badge::make('new', 'success'))
Card::make(
    title: fake()->sentence(3),
)
    ->header(static fn() => Badge::make('new', 'success'))

Кнопки

Чтобы добавить кнопки на карточку, вы можете использовать метод actions().

actions(Closure|string $value)
actions(Closure|string $value)
Card::make(
    title: fake()->sentence(3),
)
    ->actions(
        static fn() => ActionButton::make('Edit', route('name.edit'))
    )
Card::make(
    title: fake()->sentence(3),
)
    ->actions(
        static fn() => ActionButton::make('Edit', route('name.edit'))
    )

Подзаголовок

subtitle(Closure|string $value)
subtitle(Closure|string $value)
  • $value - столбец или замыкание, возвращающее подзаголовок.
Card::make(
    title: fake()->sentence(3),
)
    ->subtitle(static fn() => 'Subtitle')
Card::make(
    title: fake()->sentence(3),
)
    ->subtitle(static fn() => 'Subtitle')

Ссылка

Метод url() позволяет установить ссылку для заголовка карточки.

url(Closure|string $value)
url(Closure|string $value)
  • $value - url или замыкание.
Card::make(
    title: fake()->sentence(3),
    thumbnail: '/images/image_1.jpg',
)
    ->url(static fn() => 'https://cutcode.dev')
Card::make(
    title: fake()->sentence(3),
    thumbnail: '/images/image_1.jpg',
)
    ->url(static fn() => 'https://cutcode.dev')

Миниатюры

Чтобы добавить карусель изображений на карточку, вы можете использовать метод thumbnail().

thumbnail(Closure|string|array $value)
thumbnail(Closure|string|array $value)
Card::make(
    title: fake()->sentence(3),
)
    ->thumbnail([
        '/images/image_2.jpg',
        '/images/image_1.jpg',
    ])
Card::make(
    title: fake()->sentence(3),
)
    ->thumbnail([
        '/images/image_2.jpg',
        '/images/image_1.jpg',
    ])

Список значений

Чтобы добавить список значений на карточку, вы можете использовать метод values().

values(Closure|array $value)
values(Closure|array $value)
  • $value - ассоциативный массив значений или замыкание.
Card::make(
    title: fake()->sentence(3),
)
    ->values([
        'ID' => 1,
        'Author' => fake()->name(),
    ])
Card::make(
    title: fake()->sentence(3),
)
    ->values([
        'ID' => 1,
        'Author' => fake()->name(),
    ])

Подписи значений

Ключи списка значений экранируются согласно глобальной настройке escapes.label, включённой по умолчанию. Используйте escapeValueLabels(), чтобы переопределить экранирование для отдельных ключей. false разрешает HTML, а true включает экранирование даже при отключённом глобальном значении.

 namespaces
use MoonShine\UI\Components\Card;
 
Card::make(values: ['<strong>Author</strong>' => 'Alice'])
    ->escapeValueLabels(['<strong>Author</strong>' => false]);
 namespaces
use MoonShine\UI\Components\Card;
 
Card::make(values: ['<strong>Author</strong>' => 'Alice'])
    ->escapeValueLabels(['<strong>Author</strong>' => false]);

Ключи в данных остаются неизменными. Настройка управляет подписями, а не значениями, отображаемыми рядом с ними.

Также можно передать escapeLabel: false в Card::make(), чтобы разрешить HTML во всех подписях значений этой карточки. Настройки отдельных ключей из escapeValueLabels() имеют приоритет. В Blade используйте :escape-label и :escape-value-labels. Переопределения values, escapeLabel и escapeValueLabels, переданные через customView(), также учитываются.