Secciones

Introducción

Puedes separar tus campos en secciones, cada una con un encabezado y descripción. Para esto, usa el componente section:

use Filament\Schemas\Components\Section;

Section::make('Limitación de velocidad')
    ->description('Previene abuso limitando el número de peticiones por período')
    ->schema([
        // ...
    ])

Details

💡 Nota sobre valores dinámicos

Los métodos make() y description() también aceptan funciones para calcular valores dinámicamente. Puedes inyectar varias utilidades como parámetros en la función.

También puedes usar una sección sin encabezado, que simplemente envuelve los componentes en una tarjeta simple:

use Filament\Schemas\Components\Section;

Section::make()
    ->schema([
        // ...
    ])

Agregar un ícono al encabezado de la sección

Puedes agregar un ícono al encabezado de la sección usando el método icon():

use Filament\Schemas\Components\Section;
use Filament\Support\Icons\Heroicon;

Section::make('Carrito')
    ->description('Los artículos que has seleccionado para comprar')
    ->icon(Heroicon::ShoppingBag)
    ->schema([
        // ...
    ])

Details

💡 Nota sobre íconos dinámicos

El método icon() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades como parámetros en la función.

Posicionar el encabezado y descripción a un lado

Puedes usar aside() para alinear el encabezado y descripción a la izquierda, y los componentes dentro de una tarjeta a la derecha:

use Filament\Schemas\Components\Section;

Section::make('Limitación de velocidad')
    ->description('Previene abuso limitando el número de peticiones por período')
    ->aside()
    ->schema([
        // ...
    ])

Opcionalmente, puedes pasar un valor booleano para controlar si la sección debe estar a un lado o no:

use Filament\Schemas\Components\Section;

Section::make('Limitación de velocidad')
    ->description('Previene abuso limitando el número de peticiones por período')
    ->aside(FeatureFlag::active())
    ->schema([
        // ...
    ])

Details

💡 Nota sobre aside dinámico

El método aside() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades como parámetros en la función.

Secciones colapsables

Las secciones pueden ser collapsible() para ocultar opcionalmente contenido largo:

use Filament\Schemas\Components\Section;

Section::make('Carrito')
    ->description('Los artículos que has seleccionado para comprar')
    ->schema([
        // ...
    ])
    ->collapsible()

Tus secciones pueden estar collapsed() por defecto:

use Filament\Schemas\Components\Section;

Section::make('Carrito')
    ->description('Los artículos que has seleccionado para comprar')
    ->schema([
        // ...
    ])
    ->collapsed()

Opcionalmente, los métodos collapsible() y collapsed() aceptan un valor booleano para controlar si la sección debe ser colapsable y colapsada o no:

use Filament\Schemas\Components\Section;

Section::make('Carrito')
    ->description('Los artículos que has seleccionado para comprar')
    ->schema([
        // ...
    ])
    ->collapsible(FeatureFlag::active())
    ->collapsed(FeatureFlag::active())

Details

💡 Nota sobre colapsado dinámico

Los métodos collapsible() y collapsed() también aceptan funciones para calcularlo dinámicamente. Puedes inyectar varias utilidades como parámetros en la función.

Persistir secciones colapsadas en la sesión del usuario

Puedes persistir si una sección está colapsada en el almacenamiento local usando el método persistCollapsed(), para que permanezca colapsada cuando el usuario actualice la página:

use Filament\Schemas\Components\Section;

Section::make('Carrito')
    ->description('Los artículos que has seleccionado para comprar')
    ->schema([
        // ...
    ])
    ->collapsible()
    ->persistCollapsed()

Para persistir el estado de colapso, el almacenamiento local necesita un ID único para almacenar el estado. Este ID se genera basado en el encabezado de la sección. Si tu sección no tiene encabezado, o si tienes múltiples secciones con el mismo encabezado que no quieres que colapsen juntas, puedes especificar manualmente el id() de esa sección para prevenir un conflicto de ID:

use Filament\Schemas\Components\Section;

Section::make('Carrito')
    ->description('Los artículos que has seleccionado para comprar')
    ->schema([
        // ...
    ])
    ->collapsible()
    ->persistCollapsed()
    ->id('order-cart')

Opcionalmente, el método persistCollapsed() acepta un valor booleano para controlar si la sección debe persistir su estado colapsado o no:

use Filament\Schemas\Components\Section;

Section::make('Carrito')
    ->description('Los artículos que has seleccionado para comprar')
    ->schema([
        // ...
    ])
    ->collapsible()
    ->persistCollapsed(FeatureFlag::active())

Details

💡 Nota sobre persistencia dinámica

Los métodos persistCollapsed() e id() también aceptan funciones para calcularlos dinámicamente. Puedes inyectar varias utilidades como parámetros en la función.

Estilo de sección compacta

Al anidar secciones, puedes usar un estilo más compacto:

use Filament\Schemas\Components\Section;

Section::make('Limitación de velocidad')
    ->description('Previene abuso limitando el número de peticiones por período')
    ->schema([
        // ...
    ])
    ->compact()

Opcionalmente, el método compact() acepta un valor booleano para controlar si la sección debe ser compacta o no:

use Filament\Schemas\Components\Section;

Section::make('Limitación de velocidad')
    ->description('Previene abuso limitando el número de peticiones por período')
    ->schema([
        // ...
    ])
    ->compact(FeatureFlag::active())

Details

💡 Nota sobre compacto dinámico

El método compact() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades como parámetros en la función.

Estilo de sección secundaria

Por defecto, las secciones tienen un color de fondo contrastante, que las hace destacar contra un fondo gris. El estilo secundario le da a la sección un fondo menos contrastante, por lo que usualmente es ligeramente más oscuro. Este es un mejor estilo cuando el color de fondo detrás de la sección es el mismo color que el color de fondo de la sección por defecto, por ejemplo cuando una sección está anidada dentro de otra sección. Las secciones secundarias se pueden crear usando el método secondary():

use Filament\Schemas\Components\Section;

Section::make('Notas')
    ->schema([
        // ...
    ])
    ->secondary()
    ->compact()

Opcionalmente, el método secondary() acepta un valor booleano para controlar si la sección debe ser secundaria o no:

use Filament\Schemas\Components\Section;

Section::make('Notas')
    ->schema([
        // ...
    ])
    ->secondary(FeatureFlag::active())

Insertar acciones y otros componentes en el encabezado de una sección

Puedes insertar acciones y cualquier otro componente de schema (usualmente componentes prime) en el encabezado de una sección pasando un array de componentes al método afterHeader():

use Filament\Schemas\Components\Section;

Section::make('Limitación de velocidad')
    ->description('Previene abuso limitando el número de peticiones por período')
    ->afterHeader([
        Action::make('test'),
    ])
    ->schema([
        // ...
    ])

Details

💡 Nota sobre afterHeader dinámico

El método afterHeader() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades como parámetros en la función.

Insertar acciones y otros componentes en el pie de una sección

Puedes insertar acciones y cualquier otro componente de schema (usualmente componentes prime) en el pie de una sección pasando un array de componentes al método footer():

use Filament\Schemas\Components\Section;

Section::make('Limitación de velocidad')
    ->description('Previene abuso limitando el número de peticiones por período')
    ->schema([
        // ...
    ])
    ->footer([
        Action::make('test'),
    ])

Details

💡 Nota sobre footer dinámico

El método footer() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades como parámetros en la función.

Usar columnas de grid dentro de una sección

Puedes usar el método columns() para crear fácilmente un grid dentro de la sección:

use Filament\Schemas\Components\Section;

Section::make('Encabezado')
    ->schema([
        // ...
    ])
    ->columns(2)

Details

💡 Nota sobre columnas dinámicas

El método columns() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades como parámetros en la función.