Як у Filament 5 будується форма ресурсу і чому Section займає лише половину ширини?

Question

Accepted Answer

У Filament 5 форми, infolists і макети - це схеми (Filament\Schemas\Schema). Поля форми живуть у Filament\Forms\Components, а макетні компоненти (Section, Grid, Tabs, Fieldset, Wizard) - у Filament\Schemas\Components.
use Filament\Forms\Components\RichEditor;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use Filament\Schemas\Components\Section;
use Filament\Schemas\Schema;

public static function configure(Schema $schema): Schema
{
    return $schema
        ->components([
            Section::make('Основне')
                ->schema([
                    TextInput::make('title')->required()->maxLength(255),
                    TextInput::make('slug')->required(),
                    RichEditor::make('body')->columnSpanFull(),
                ])
                ->columns(2)
                ->columnSpanFull(),

Section::make('Публікація')
                ->schema([
                    Select::make('status')->options(PostStatus::class)->required(),
                ]),
        ]);
}

Сітка - головне, що треба розуміти:

сторінки створення й редагування ресурсу за замовчуванням розкладають компоненти у дві колонки;
Section, Grid, Fieldset - теж звичайні елементи цієї сітки й займають одну колонку. Тому секція раптом виявляється на половину ширини;
columnSpanFull() - розтягнути компонент на всю ширину;
columns(2) на секції - внутрішня сітка для її полів;
columnSpan(['md' => 2, 'xl' => 1]) - різна ширина на різних екранах (брейкпоінти Tailwind).

Інші макетні компоненти:

Tabs - вкладки для довгих форм (стан можна зберігати в URL);
Fieldset - рамка з підписом для невеликої групи полів;
Grid - сітка без візуального оформлення;
Wizard - покрокова форма.

Пастки при оновленні з v3: старі простори імен Filament\Forms\Components\Section чи Filament\Forms\Form у v5 не працюють - макети переїхали в Filament\Schemas\Components, а метод форми приймає Schema $schema і повертає $schema->components([...]).
Докладніше в документації: Макети схем

Як у Filament 5 будується форма ресурсу і чому Section займає лише половину ширини?

Схожі питання