Card Component

# Make

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

Создать Card можно воспользовавшись статическим методом make() класса Card.

make(
Closure|string $title = '',
Closure|string $thumbnail = '',
Closure|string $url = '#',
Closure|array $values = [],
Closure|string|null $subtitle = null
)
  • $title - заголовок карточки,
  • $thumbnail - изображение,
  • $url - ссылка,
  • $values - список значений,
  • $subtitle - подзаголовок.
use MoonShine\Components\Card;
 
//...
 
public function components(): array
{
return [
Card::make(
title: fake()->sentence(3),
thumbnail: '/images/image_1.jpg',
url: fn() => 'https://cutcode.dev',
values: ['ID' => 1, 'Author' => fake()->name()],
subtitle: date('d.m.Y')
)
];
}
 
//...
Corporis maiores qui dolor in.

Corporis maiores qui dolor in.

13.04.2024
ID: 1
Author: Ida Padberg

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

header(Closure|string $value)
  • $value - column или замыкание возвращающее html код.
Cards::make(
title: fake()->sentence(3),
thumbnail: '/images/image_2.jpg',
)
->header(static fn() => Badge::make('new', 'success'))

# Кнопки

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

actions(Closure|string $value)
Cards::make(
title: fake()->sentence(3),
thumbnail: '/images/image_1.jpg',
)
->actions(
static fn() => ActionButton::make('Edit', route('name.edit'))
)

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

subtitle(Closure|string $value)
  • $value - column или замыкание возвращающее подзаголовок.
Cards::make(
title: fake()->sentence(3),
thumbnail: '/images/image_2.jpg',
)
->subtitle(static fn() => 'Subtitle')

# Ссылка

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

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

# Изображение

Для добавления к карточке изображение можно воспользоваться методом thumbnail().

thumbnail(Closure|string $value)
  • $value - url изображения или замыкание.
Cards::make(
title: fake()->sentence(3),
)
->thumbnail('/images/image_2.jpg')

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

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

values(Closure|array $value)
  • $value - ассоциативный массив значений или замыкание.
Cards::make(
title: fake()->sentence(3),
thumbnail: '/images/image_1.jpg',
)
->values([
'ID' => 1,
'Author' => fake()->name()
])
Ab accusantium ratione illo.

Ab accusantium ratione illo.

ID: 1
Author: Rossie Block

# Режим overlay

Режим overlay позволяет разместить шапку и заголовки поверх изображения карточки.
Данный режим активируется одноименным методом overlay().

Cards::make(
title: fake()->sentence(3),
thumbnail: '/images/image_2.jpg',
url: fn() => 'https://cutcode.dev',
values: ['ID' => 1, 'Author' => fake()->name()],
subtitle: date('d.m.Y')
)
->header(static fn() => Badge::make('new', 'success'))
->overlay()
ID: 1
Author: Dr. Camilla Schulist