Saltar al contenido principal

Entrada de icono

Introducción

Las entradas de icono renderizan un icono que representa el estado de la entrada:

use Filament\Infolists\Components\IconEntry;
use Filament\Support\Icons\Heroicon;

IconEntry::make('status')
->icon(fn (string $state): Heroicon => match ($state) {
'draft' => Heroicon::OutlinedPencil,
'reviewing' => Heroicon::OutlinedClock,
'published' => Heroicon::OutlinedCheckCircle,
})
Inyección de utilidades

El método icon() puede inyectar varias utilidades en la función como parámetros.

Personalizando el color

Puedes cambiar el color del icono, usando el método color():

use Filament\Infolists\Components\IconEntry;

IconEntry::make('status')
->color('success')

Al pasar una función a color(), puedes personalizar el color basándote en el estado de la entrada:

use Filament\Infolists\Components\IconEntry;

IconEntry::make('status')
->color(fn (string $state): string => match ($state) {
'draft' => 'info',
'reviewing' => 'warning',
'published' => 'success',
default => 'gray',
})
Inyección de utilidades

El método color() puede inyectar varias utilidades en la función como parámetros.

Personalizando el tamaño

El tamaño predeterminado del icono es IconSize::Large, pero puedes personalizar el tamaño para que sea IconSize::ExtraSmall, IconSize::Small, IconSize::Medium, IconSize::ExtraLarge o IconSize::TwoExtraLarge:

use Filament\Infolists\Components\IconEntry;
use Filament\Support\Enums\IconSize;

IconEntry::make('status')
->size(IconSize::Medium)
Inyección de utilidades

Además de permitir un valor estático, el método size() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Manejando booleanos

Las entradas de icono pueden mostrar un icono de check o "X" basándose en el estado de la entrada, ya sea verdadero o falso, usando el método boolean():

use Filament\Infolists\Components\IconEntry;

IconEntry::make('is_featured')
->boolean()

Si este atributo en la clase del modelo ya está convertido como bool o boolean, Filament puede detectar esto, y no necesitas usar boolean() manualmente.

Opcionalmente, puedes pasar un valor booleano para controlar si el icono debe ser booleano o no:

use Filament\Infolists\Components\IconEntry;

IconEntry::make('is_featured')
->boolean(FeatureFlag::active())
Inyección de utilidades

Además de permitir un valor estático, el método boolean() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Personalizando los iconos booleanos

Puedes personalizar el icono que representa cada estado:

use Filament\Infolists\Components\IconEntry;
use Filament\Support\Icons\Heroicon;

IconEntry::make('is_featured')
->boolean()
->trueIcon(Heroicon::OutlinedCheckBadge)
->falseIcon(Heroicon::OutlinedXMark)
Inyección de utilidades

Además de permitir valores estáticos, los métodos trueIcon() y falseIcon() también aceptan funciones para calcularlos dinámicamente. Puedes inyectar varias utilidades en las funciones como parámetros.

Personalizando los colores booleanos

Puedes personalizar el color del icono que representa cada estado:

use Filament\Infolists\Components\IconEntry;

IconEntry::make('is_featured')
->boolean()
->trueColor('info')
->falseColor('warning')
Inyección de utilidades

Además de permitir valores estáticos, los métodos trueColor() y falseColor() también aceptan funciones para calcularlos dinámicamente. Puedes inyectar varias utilidades en las funciones como parámetros.