# Make
Компонент Card позволяет создавать карточки элементов.
Создать Card можно воспользовавшись статическим методом make()
класса Card
.
make( Closure|string $title = '', Closure|string|array $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') ) ];} //...
![Corrupti sequi temporibus ab.](/images/image_1.jpg)
# Header
Метод 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')
![Quasi id asperiores.](/images/image_2.jpg)
Quasi id asperiores.
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|array $value)
$value
- url изображения, или массив url-ов изображений, или замыкание.
Cards::make( title: fake()->sentence(3),) ->thumbnails(['/images/image_2.jpg','/images/image_1.jpg'])
# Список значений
Для добавления к карточке списка значений можно воспользоваться методом values()
.
values(Closure|array $value)
$value
- ассоциативный массив значений или замыкание.
Cards::make( title: fake()->sentence(3), thumbnail: '/images/image_1.jpg',) ->values([ 'ID' => 1, 'Author' => fake()->name() ])
![Explicabo modi architecto voluptatibus.](/images/image_1.jpg)
Explicabo modi architecto voluptatibus.
ID: | 1 |
---|---|
Author: | Deanna Mante Jr. |
# Режим 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: | Augusta Schmeler I |