Layers for grouping
Edit pageAccordion
Accordions are useful when you want to switch between hiding and displaying a lot of content:
Accordions support short syntax by calling a static method, which does not require creating a separate class:
use Orchid\Support\Facades\Layout;
public function layout(): array
{
return [
Layout::accordion([
'Personal Information' => [
Layout::rows([
Input::make('user.name')
->type('text')
->required()
->title('Name')
->placeholder('Name'),
Input::make('user.email')
->type('email')
->required()
->title('Email')
->placeholder('Email'),
]),
],
'Billing Address' => [
Layout::rows([
Input::make('address')
->type('text')
->required(),
]),
],
]),
];
}
Keys will be used as headers.
Please note that you can specify the lowercase name of the class as values:
public function layout(): array
{
return [
Layout::accordion([
'Personal Information' => PersonalInformationRow::class,
'Billing Address' => BillingAddressRow::class,
]),
];
}
Columns
Columns are useful when you need to group content.
Columns support short syntax by calling a static method, which does not require creating a separate class:
use Orchid\Support\Facades\Layout;
public function layout(): array
{
return [
Layout::columns([
TableExample::class,
RowExample::class,
]),
];
}
Tabs
Tabs group content and help with navigation. Useful when you want to switch between hiding and displaying a lot of content:
Tabs support short syntax by calling a static method, which does not require creating a separate class:
use Orchid\Support\Facades\Layout;
public function layout(): array
{
return [
Layout::tabs([
'Personal Information' => [
Layout::rows([
Input::make('user.name')
->type('text')
->required()
->title('Name')
->placeholder('Name'),
Input::make('user.email')
->type('email')
->required()
->title('Email')
->placeholder('Email'),
]),
],
'Billing Address' => [
Layout::rows([
Input::make('address')
->type('text')
->required(),
]),
],
]),
];
}
Keys will be used as headers.
Please note that you can specify the lowercase name of the class as values:
public function layout(): array
{
return [
Layout::tabs([
'Personal Information' => PersonalInformationRow::class,
'Billing Address' => BillingAddressRow::class,
]),
];
}
By default, the active tab will be either the first or the last active one.
If you need to define the active tab explicitly, you can do this using the ->activeTab($key)
method
public function layout(): array
{
return [
Layout::tabs([
'Personal Information' => PersonalInformationRow::class,
'Billing Address' => BillingAddressRow::class,
])->activeTab('Billing Address'),
];
}