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

Maxime dignissimos aut nemo.

23.11.2024

ID:	1
Author:	Emmalee Schroeder

In laudantium error architecto facilis. Quos et reiciendis qui explicabo aperiam qui. Voluptates est voluptatum provident.

# 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

Aut laboriosam commodi iste.

23.11.2024

ID:	1
Author:	Dr. Zackary Cartwright DVM

Quia asperiores sint molestias sed. Vel dolores illum asperiores qui sint libero fugiat. Est inventore ab voluptatem.

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

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

Corporis non neque.

23.11.2024

/ 2

ID:	1
Author:	Kennith Runolfsson

Corrupti ad possimus sed minus accusamus sapiente. Maxime quo earum enim. Dolor ab quod quos.