Компоненты

Card

Основы

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

make(
    Closure|string $title = '',
    Closure|array|string $thumbnail = '',
    Closure|string $url = '#',
    Closure|array $values = [],
    Closure|string|null $subtitle = null,
    bool $overlay = false,
)
  • $title - заголовок,
  • $thumbnail - изображения,
  • $url - ссылка,
  • $values - список значений,
  • $subtitle - подзаголовок,
  • $overlay - режим overlay позволяет разместить шапку и заголовки поверх изображения карточки.
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>

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

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

Кнопки

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

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

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

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

Ссылка

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

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

Миниатюры

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

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

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

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

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