Card

# Основы

Для создания карточек в админ-панели используется компонент moonshine::card.

<x-moonshine::card
    url="#"
    thumbnail="/images/image_1.jpg"
    :title="fake()->sentence(3)"
    :subtitle="date('d.m.Y')"
    :values="['ID' => 1, 'Author' => fake()->name()]"
>
    <x-slot:header>
        <x-moonshine::badge color="green">new</x-moonshine::badge>
    </x-slot:header>
 
    {{ fake()->text() }}
 
    <x-slot:actions>
        <x-moonshine::link-button href="#">Read more</x-moonshine::link-button>
    </x-slot:actions>
</x-moonshine::card>

<x-moonshine::card
    url="#"
    thumbnail="/images/image_1.jpg"
    :title="fake()->sentence(3)"
    :subtitle="date('d.m.Y')"
    :values="['ID' => 1, 'Author' => fake()->name()]"
>
    <x-slot:header>
        <x-moonshine::badge color="green">new</x-moonshine::badge>
    </x-slot:header>

    {{ fake()->text() }}

    <x-slot:actions>
        <x-moonshine::link-button href="#">Read more</x-moonshine::link-button>
    </x-slot:actions>
</x-moonshine::card>

new

Quas ut non laboriosam.

08.09.2024

ID:	1
Author:	Barton Turner PhD

Nobis vel modi cum aperiam blanditiis. Doloremque consequatur natus adipisci quis facilis velit. Fuga blanditiis ea officiis nobis sed. Qui veniam tempore quam molestias.

# Overlay режим

Для карточки доступен режим overlay.

<x-moonshine::card
    url="#"
    :overlay="true"
    thumbnail="/images/image_1.jpg"
    :title="fake()->sentence(3)"
    :subtitle="date('d.m.Y')"
    :values="['ID' => 1, 'Author' => fake()->name()]"
>
    <x-slot:header>
        <x-moonshine::badge color="green">new</x-moonshine::badge>
    </x-slot:header>
 
    {{ fake()->text() }}
 
    <x-slot:actions>
        <x-moonshine::link-button href="#">Read more</x-moonshine::link-button>
    </x-slot:actions>
</x-moonshine::card>

<x-moonshine::card
    url="#"
    :overlay="true"
    thumbnail="/images/image_1.jpg"
    :title="fake()->sentence(3)"
    :subtitle="date('d.m.Y')"
    :values="['ID' => 1, 'Author' => fake()->name()]"
>
    <x-slot:header>
        <x-moonshine::badge color="green">new</x-moonshine::badge>
    </x-slot:header>

    {{ fake()->text() }}

    <x-slot:actions>
        <x-moonshine::link-button href="#">Read more</x-moonshine::link-button>
    </x-slot:actions>
</x-moonshine::card>

new

Dolorum alias ducimus.

08.09.2024

ID:	1
Author:	Emerson Conn MD

Consectetur accusantium vero quia laudantium sint quod. Ipsam saepe tenetur eaque omnis occaecati sed. Asperiores soluta consequatur ratione necessitatibus quia.

# Карусель изображений

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

<x-moonshine::card
    url="#"
    :overlay="true"
    :thumbnail="['/images/image_1.jpg', '/images/image_2.jpg']"
    :title="fake()->sentence(3)"
    :subtitle="date('d.m.Y')"
    :values="['ID' => 1, 'Author' => fake()->name()]"
>
    <x-slot:header>
        <x-moonshine::badge color="green">new</x-moonshine::badge>
    </x-slot:header>
 
    {{ fake()->text() }}
 
    <x-slot:actions>
        <x-moonshine::link-button href="#">Read more</x-moonshine::link-button>
    </x-slot:actions>
</x-moonshine::card>

<x-moonshine::card
    url="#"
    :overlay="true"
    :thumbnail="['/images/image_1.jpg', '/images/image_2.jpg']"
    :title="fake()->sentence(3)"
    :subtitle="date('d.m.Y')"
    :values="['ID' => 1, 'Author' => fake()->name()]"
>
    <x-slot:header>
        <x-moonshine::badge color="green">new</x-moonshine::badge>
    </x-slot:header>

    {{ fake()->text() }}

    <x-slot:actions>
        <x-moonshine::link-button href="#">Read more</x-moonshine::link-button>
    </x-slot:actions>
</x-moonshine::card>

new

Numquam laboriosam impedit dolores.

08.09.2024

/ 2

ID:	1
Author:	Rosemary Crooks

Impedit consequuntur porro facilis distinctio numquam. Placeat rerum deserunt et ea ut. Non voluptate et veritatis eius ullam. Quo et odio laudantium id et cumque.