Card Component

# Make

Компонент 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')
        )
    ];
}

//...

Doloremque et reprehenderit.

21.11.2024

ID:	1
Author:	Leone Daniel

# Header

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

header(Closure|string $value)

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')) 

Cards::make(
    title: fake()->sentence(3),
    thumbnail: '/images/image_2.jpg',
)
    ->header(static fn() => Badge::make('new', 'success'))

new

Exercitationem sit officiis.

# Кнопки

Для добавления кнопок в карточку можно воспользоваться методом 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'))
    )

Pariatur libero maiores aut.

Edit

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

subtitle(Closure|string $value)

subtitle(Closure|string $value)

$value - column или замыкание возвращающее подзаголовок.

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')

Dicta ipsa eaque.

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')

Occaecati est vitae expedita.

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

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

thumbnail(Closure|string|array $value)

thumbnail(Closure|string|array $value)

$value - url изображения, или массив url-ов изображений, или замыкание.

Cards::make(
    title: fake()->sentence(3),
)
    ->thumbnails(['/images/image_2.jpg','/images/image_1.jpg']) 

Cards::make(
    title: fake()->sentence(3),
)
    ->thumbnails(['/images/image_2.jpg','/images/image_1.jpg'])

/ 2

Commodi aut eos repellendus.

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

Для добавления к карточке списка значений можно воспользоваться методом 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()
    ])

Voluptatem rerum asperiores.

ID:	1
Author:	Madge Deckow

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

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()

new

Dolorem suscipit nam.

21.11.2024

ID:	1
Author:	Erna Berge