Cómo personalizar File Upload Grid en Filament 4 para más columnas

La personalización de las interfaces de usuario es un aspecto esencial para mejorar la experiencia del usuario en aplicaciones web. En particular, Filament 4 permite a los desarrolladores personalizar los componentes de subida de archivos, como el File Upload Grid, para que se ajusten mejor a las necesidades del proyecto. A continuación, se detalla cómo se puede ampliar el número de columnas en este componente.

Creación de un tema personalizado

Para comenzar, es fundamental establecer un tema personalizado. Filament permite modificar el CSS que se utiliza para renderear la interfaz de usuario mediante la creación de una hoja de estilo personalizada, conocida como "tema". Estos temas utilizan Tailwind CSS como base.

Para crear un tema personalizado para un panel, se puede ejecutar el siguiente comando en la terminal:

php artisan make:filament-theme

En caso de tener múltiples paneles y desear especificar un tema para uno en particular, se utiliza:

Lee también

Configurar Filament PHP para Producción

Solución al error 404 de Laravel Filament 4: livewire.js en producción

php artisan make:filament-theme admin

Por defecto, este comando utiliza NPM para instalar las dependencias necesarias. Si se prefiere usar otro gestor de paquetes, existe la opción --pm:

php artisan make:filament-theme --pm=bun

Este comando realizará las siguientes acciones:

1. Instalará las dependencias de Tailwind CSS necesarias.
2. Generará un archivo CSS en resources/css/filament/{panel}/theme.css.
3. Intentará agregar automáticamente el tema al array de entrada en vite.config.js.
4. Intentará registrar ->viteTheme() en el proveedor del panel.
5. Ofrecerá la opción de compilar el tema utilizando Vite.

Si el comando no puede configurar automáticamente los archivos (debido a un formato no estándar), mostrará instrucciones manuales. Para esto, deben seguirse los siguientes pasos:

Lee también

Cómo Implementar Gravatar en Filament: Guía Paso a Paso

Cómo activar la visualización de perfil para usuario en Filament

Configuración manual

1. Agregar el archivo CSS del tema al array de entrada del plugin de Laravel en vite.config.js:

input: [
    // ...
    'resources/css/filament/admin/theme.css',
]

1. Registrar el archivo CSS generado por Vite en el proveedor del panel:

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->viteTheme('resources/css/filament/admin/theme.css');
}

Personalización de columnas mediante CSS

Una vez creado y configurado el tema, el siguiente paso es personalizar el diseño de columnas. Para modificar el diseño predeterminado de 3 columnas a, por ejemplo, 5 columnas, se debe agregar el siguiente código CSS en el archivo theme.css del tema personalizado. Dado que Filament utiliza FilePond internamente, es necesario dirigirse a las clases de ancho de los elementos específicos de FilePond:

.filepond--item {
    width: calc(20% - 0.5em);
}

Este ajuste permitirá que el layout del File Upload Grid sea más flexible y se adapte al incremento en el número de columnas.

Finalmente, es necesario compilar el tema utilizando Vite con el siguiente comando:

npm run build

Conclusión

Personalizar el File Upload Grid en Filament 4 para incorporar más columnas es un proceso que permite una mayor flexibilidad y adaptabilidad en la carga de archivos. A través de la creación de un tema personalizado y ajustes en el CSS, se logra mejorar la disposición de los elementos en la interfaz de usuario. Esto no solo optimiza la experiencia para el usuario final, sino que también refleja un enfoque más a medida en el diseño de aplicaciones.

Para más consejos y guías sobre desarrollo y personalización en Filament, se invita a los lectores a seguir explorando el contenido de este blog.