Display elements
Cards
Cards are used to pack a small amount of content. Usually they contain a title, a short paragraph and control buttons.
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('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)->presenter(),
];
}
/**
* Views.
*
* @return array
* @throws \Throwable
*
*/
public function layout(): array
{
return [
new Card('product'),
];
}
Persona
A person is used to visualize an avatar and describe a person.
Persona
accepts a set of objects that implement the Personable
interface.
This example uses presenters, 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 App\Presenters\EmployeePresenter;
use Illuminate\Database\Eloquent\Client;
class Employee extends Model
{
protected $fillable = [
'name',
'avatar',
'position',
];
public function presenter(): EmployeePresenter
{
return new EmployeePresenter($this);
}
}
You can record a representative:
namespace App\Presenters;
use Orchid\Screen\Contracts\Personable;
use Orchid\Support\Presenter;
class EmployeePresenter extends Presenter implements Personable
{
public function title(): string
{
return $this->entity->name;
}
public function subTitle(): string
{
return $this->entity->position;
}
public function url(): string
{
return route('platform.systems.users.edit', $this->entity);
}
public function image(): ?string
{
return $this->entity->avatar;
}
}
Use on the screen will be as follows:
use Orchid\Screen\Layouts\Persona;
/**
* Query data.
*
* @return array
*/
public function query(): array
{
return [
'employee' => Employee::find(1)->presenter(),
];
}
/**
* Views.
*
* @return array
* @throws \Throwable
*
*/
public function layout(): array
{
return [
new Persona('employee'),
];
}
Facepile
Shows a list of avatars in horizontal view. Each circle represents a person. Use this layout
when displaying shared access to a specific view, file or task.
Facepile
accepts a set of objects that implement the Personable
interface.
This example uses presenters, it is recommended 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 App\Presenters\EmployeePresenter;
use Illuminate\Database\Eloquent\Client;
class Employee extends Model
{
protected $fillable = [
'name',
'avatar',
'position',
];
public function presenter(): EmployeePresenter
{
return new EmployeePresenter($this);
}
}
You can record a presenter:
namespace App\Presenters;
use Orchid\Screen\Contracts\Personable;
use Orchid\Support\Presenter;
class EmployeePresenter extends Presenter implements Personable
{
public function title(): string
{
return $this->entity->name;
}
public function subTitle(): string
{
return $this->entity->position;
}
public function url(): string
{
return route('platform.systems.users.edit', $this->entity);
}
public function image(): ?string
{
return $this->entity->avatar;
}
}
Use on the screen will be as follows:
use Orchid\Screen\Layouts\Facepile;
/**
* Query data.
*
* @return array
*/
public function query(): array
{
return [
'avatars' => Employee::limit(8)->get()->map->presenter(),
];
}
/**
* Views.
*
* @return array
* @throws \Throwable
*
*/
public function layout(): array
{
return [
new Facepile('avatars'),
];
}