61 lines
1.6 KiB
Markdown
61 lines
1.6 KiB
Markdown
# FILAMENT LAYOUT NOTES - BÀI HỌC KHÔNG QUÊN
|
|
|
|
> Ghi chú nhanh để tránh lặp lại lỗi layout
|
|
> **Ngày:** 24/04/2026
|
|
|
|
---
|
|
|
|
## ⚠️ VẤN ĐỀ ĐÃ GẶP
|
|
Form tạo biểu mẫu (FormTemplate) bị chia cột: Section 1 và Section 2 nằm cùng hàng ngang thay vì xếp dọc full width.
|
|
|
|
## ✅ GIẢI PHÁP
|
|
|
|
### 1. Section xếp dọc full width
|
|
```php
|
|
Section::make('Tên section')
|
|
->columnSpanFull() // <-- BẮT BUỘC nếu muốn full width
|
|
->schema([...])
|
|
```
|
|
|
|
### 2. Field chia cột BÊN TRONG Section
|
|
```php
|
|
Section::make('Thông tin')
|
|
->columnSpanFull()
|
|
->schema([
|
|
Grid::make(3) // Grid chỉ dùng BÊN TRONG Section
|
|
->schema([
|
|
TextInput::make('name'),
|
|
TextInput::make('code'),
|
|
Select::make('type'),
|
|
]),
|
|
])
|
|
```
|
|
|
|
### 3. KHÔNG dùng Grid bọc ngoài nhiều Section
|
|
```php
|
|
// ❌ SAI - Grid bọc ngoài sẽ ép Section vào cột
|
|
Grid::make(2)->schema([
|
|
Section::make('A')->schema([...]),
|
|
Section::make('B')->schema([...]),
|
|
])
|
|
|
|
// ✅ ĐÚNG - Section xếp dọc, Grid bên trong
|
|
Section::make('A')->columnSpanFull()->schema([
|
|
Grid::make(3)->schema([...])
|
|
]),
|
|
Section::make('B')->columnSpanFull()->schema([
|
|
Grid::make(3)->schema([...])
|
|
]),
|
|
```
|
|
|
|
### 4. RichEditor tăng chiều cao
|
|
```php
|
|
RichEditor::make('content')
|
|
->extraInputAttributes(['style' => 'min-height: 500px;'])
|
|
```
|
|
|
|
---
|
|
|
|
## 📌 TÓM TẮT 1 DÒNG
|
|
> `Section` cần `->columnSpanFull()` để full width. `Grid::make(3)` chỉ dùng bên trong Section để chia field.
|