Skip to content

Commit affb5a8

Browse files
committed
Update 01-overview.md
1 parent f68d9b6 commit affb5a8

File tree

1 file changed

+120
-11
lines changed

1 file changed

+120
-11
lines changed

packages/schemas/docs/04-layouts/01-overview.md

+120-11
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
---
22
title: Overview
33
---
4+
import UtilityInjection from "@components/UtilityInjection.astro"
45
## Overview
56

6-
Filament schemas are not limited to just displaying [form fields](../../forms/fields) and [infolist entries](../../infolists/entries). You can also use "layout components" to organize them into an infinitely nestable structure.
7+
Filament schemas are not limited to just displaying [form fields](../forms) and [infolist entries](../infolists). You can also use "layout components" to organize them into an infinitely nestable structure.
78

89
Layout component classes can be found in the `Filament\Schemas\Components` namespace. They reside within the schema array of components.
910

@@ -28,33 +29,141 @@ Filament ships with some layout components, suitable for arranging your componen
2829
- [Wizard](wizard)
2930
- [Section](section)
3031
- [Split](split)
31-
- [Placeholder](placeholder)
3232

33-
You may also [create your own custom layout components](custom) to organize fields however you wish.
33+
You may also [create your own custom layout components](custom) to organize schemas however you wish.
3434

35-
## Setting an ID
35+
## Adding extra HTML attributes to a layout component
3636

37-
You may define an ID for the component using the `id()` method:
37+
You can pass extra HTML attributes to the component via the `extraAttributes()` method, which will be merged onto its outer HTML element. The attributes should be represented by an array, where the key is the attribute name and the value is the attribute value:
3838

3939
```php
4040
use Filament\Schemas\Components\Section;
4141

4242
Section::make()
43-
->id('main-section')
43+
->extraAttributes(['class' => 'custom-section-style'])
4444
```
4545

46-
## Adding extra HTML attributes
46+
<UtilityInjection set="formFields" version="4.x">As well as allowing a static value, the `extraAttributes()` method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
47+
48+
By default, calling `extraAttributes()` multiple times will overwrite the previous attributes. If you wish to merge the attributes instead, you can pass `merge: true` to the method.
4749

48-
You can pass extra HTML attributes to the component, which will be merged onto the outer DOM element. Pass an array of attributes to the `extraAttributes()` method, where the key is the attribute name and the value is the attribute value:
50+
## Component utility injection
51+
52+
The vast majority of methods used to configure entries accept functions as parameters instead of hardcoded values:
4953

5054
```php
55+
use App\Models\User;
56+
use Filament\Schemas\Components\Grid;
5157
use Filament\Schemas\Components\Section;
5258

59+
Grid::make(fn (): array => [
60+
'lg' => auth()->user()->isAdmin() ? 4 : 6,
61+
])->schema([
62+
// ...
63+
])
64+
5365
Section::make()
54-
->extraAttributes(['class' => 'custom-section-style'])
66+
->heading(fn (): string => auth()->user()->isAdmin() ? 'Admin Dashboard' : 'User Dashboard')
67+
->schema([
68+
// ...
69+
])
5570
```
5671

57-
Classes will be merged with the default classes, and any other attributes will override the default attributes.
72+
This alone unlocks many customization possibilities.
73+
74+
The package is also able to inject many utilities to use inside these functions, as parameters. All customization methods that accept functions as arguments can inject utilities.
75+
76+
These injected utilities require specific parameter names to be used. Otherwise, Filament doesn't know what to inject.
77+
78+
### Injecting the state of another component
79+
80+
You may also retrieve the state (value) of a form field or infolist entry from within a callback, using a `$get` parameter:
81+
82+
```php
83+
use Filament\Schemas\Components\Utilities\Get;
84+
85+
function (Get $get) {
86+
$email = $get('email'); // Store the value of the `email` entry in the `$email` variable.
87+
//...
88+
}
89+
```
90+
91+
### Injecting the current Eloquent record
92+
93+
You may retrieve the Eloquent record for the current schema using a `$record` parameter:
94+
95+
```php
96+
use Illuminate\Database\Eloquent\Model;
97+
98+
function (?Model $record) {
99+
// ...
100+
}
101+
```
102+
103+
### Injecting the current operation
104+
105+
If you're writing a schema for a panel resource or relation manager, and you wish to check if a schema is `create`, `edit` or `view`, use the `$operation` parameter:
106+
107+
```php
108+
function (string $operation) {
109+
// ...
110+
}
111+
```
112+
113+
<Aside variant="info">
114+
You can manually set a schema's operation using the `$schema->operation()` method.
115+
</Aside>
116+
117+
### Injecting the current Livewire component instance
118+
119+
If you wish to access the current Livewire component instance, define a `$livewire` parameter:
120+
121+
```php
122+
use Livewire\Component;
123+
124+
function (Component $livewire) {
125+
// ...
126+
}
127+
```
128+
129+
### Injecting the current component instance
130+
131+
If you wish to access the current component instance, define a `$component` parameter:
132+
133+
```php
134+
use Filament\Schemas\Components\Component;
135+
136+
function (Component $component) {
137+
// ...
138+
}
139+
```
140+
141+
### Injecting multiple utilities
142+
143+
The parameters are injected dynamically using reflection, so you are able to combine multiple parameters in any order:
144+
145+
```php
146+
use Filament\Schemas\Components\Utilities\Get;
147+
use Filament\Schemas\Components\Utilities\Set;
148+
use Livewire\Component as Livewire;
149+
150+
function (Livewire $livewire, Get $get, Set $set) {
151+
// ...
152+
}
153+
```
154+
155+
### Injecting dependencies from Laravel's container
156+
157+
You may inject anything from Laravel's container like normal, alongside utilities:
158+
159+
```php
160+
use Filament\Schemas\Components\Utilities\Set;
161+
use Illuminate\Http\Request;
162+
163+
function (Request $request, Set $set) {
164+
// ...
165+
}
166+
```
58167

59168
## Global settings
60169

@@ -69,7 +178,7 @@ Section::configureUsing(function (Section $section): void {
69178
});
70179
```
71180

72-
Of course, you are still able to overwrite this on each field individually:
181+
Of course, you are still able to overwrite this on each component individually:
73182

74183
```php
75184
use Filament\Schemas\Components\Section;

0 commit comments

Comments
 (0)