Sistema de diseño
Filter
El componente de filtro permite a los usuarios ajustar y refinar los resultados según criterios específicos, facilitando la búsqueda y exploración de datos o contenido.
Figma
Storybook
AEM
Overview
Un componente de filtros suele presentarse como una barra lateral, un panel desplegable o controles en la parte superior o inferior de la pantalla.
Facilita a los usuarios ajustar filtros de forma rápida y sencilla, proporcionando un feedback visual claro que indica cuándo se aplican los filtros y cómo impactan en los resultados.
Es una herramienta esencial que permite a los usuarios refinar y ajustar resultados mostrados en la interfaz, mejorando la búsqueda y exploración de datos o contenido. Su diseño debe ser claro, interactivo y accesible para proporcionar una experiencia de usuario óptima.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
Subcategorías
En caso de que una categoría tenga subcategorías, deberá tener el despegable en estado default.
Selección no completa
En caso de que se seleccione más de un elemento del desplegable, pero no todos, se mostrará con un número.
Selección total
Al seleccionar por completo una categoría se mantendrá el ícono.
Categoría <20 carácteres
Si el nombre de la categoría del filtro tiene menos de 20 caracteres, se muestra directamente en el chip y el ícono se elimina.
Abrir desplegable
Al pinchar en un filtro que tenga opciones desplegables, se mostrará de la siguiente manera:
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes