Cards



Cards are used to pack a small amount of content. Usually they contain a title, a short paragraph and control buttons.

Cards

Cards accept only objects that implement the interface Cardable.

use Orchid\Screen\Contracts\Cardable;
use Orchid\Screen\Layouts\Card;

/**
 * Query data.
 *
 * @return array
 */
public function query(): array
{
    return [
        'card'        => new class implements Cardable {

            public function title(): string
            {
                return 'Title of a longer featured blog post';
            }

            public function description(): string
            {
                return 'This is a wider card with supporting text below as a natural lead-in to additional content. 
                        This content is a little bit longer. This is a wider card with supporting text below as 
                        a natural lead-in to additional content. This content is a little bit longer. 
                        This is a wider card with supporting text below as a natural lead-in to additional content.
                        This content is a little bit longer.';
            }

            public function image(): ?string
            {
                return 'https://picsum.photos/600/300';
            }

            public function color(): ?Color
            {
                return Color::INFO();
            }
        },
    ];
}

/**
 * Views.
 *
 * @return array
 * @throws \Throwable
 *
 */
public function layout(): array
{
    return [
        new Card('card'),
    ];
}

Using custom templates

The card allows you to combine any display in the description method,

public function description(): string
{
    return view('template')->render();
}

Note. Any value returned in it will be displayed as is.

Action

Cards support the indication of actions, as well as the commandBar, for this you need to add the second argument:

public function layout(): array
{
    return [
        new Card('card', [
            Button::make('Example Button')
                ->method('example')
                ->icon('icon-bag'),
        ]),
    ];
}

Use with presenter

In this example, presenters are used, we strongly recommend that you familiarize yourself with them.

Instead of creating a separate class, it is recommended to use representatives for Eloquent models, for example:

namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $fillable = [
        'title',
        'descriptions',
        'image',
        'amount',
    ];

    public function presenter(): ProductPresenter
    {
        return new ProductPresenter($this);
    }
}

You can record a presenter:

namespace App\Presenters;

use Orchid\Screen\Contracts\Cardable;
use Orchid\Support\Presenter;

class ProductPresenter extends Presenter implements Cardable
{
    public function title(): string
    {
        return $this->entity->title;
    }

    public function description(): string
    {
        return $this->entity->description;
    }

    public function image(): ?string
    {
        return $this->entity->image;
    }

    public function color(): ?Color
    {
        return $this->entity->amount > 0
            ? Color::SUCCESS()
            : Color::DANGER();
    }
}

Then the usage record in the screen will be short:

use Orchid\Screen\Layouts\Card;

/**
 * Query data.
 *
 * @return array
 */
public function query(): array
{
    return [
        'product' => Product::findOrFail(1),
    ];
}

/**
 * Views.
 *
 * @return array
 * @throws \Throwable
 *
 */
public function layout(): array
{
    return [
        new Card('product.presenter'),
    ];
}