Компоненты

Компонент Card

Создание

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

Вы можете создать Card, используя статический метод make() класса Card.

make(
    Closure|string $title = '',
    Closure|string|array $thumbnail = '',
    Closure|string $url = '#',
    Closure|array $values = [],
    Closure|string|null $subtitle = null
)
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')
        )
    ];
}
 
//...
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')
        )
    ];
}
 
//...

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

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

Кнопки

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

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

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

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

Ссылка

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

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

Миниатюры

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

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

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

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

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

Режим наложения

Режим 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()
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()