Filtro flexible es un potente Bric personalizado que te permite agregar filtrado de contenido en tiempo real a cualquier página web, es fácil de usar y rápido de configurar.
Instrucciones de uso
Una vez que se haya comprado y instalado El filtro flexible Bric, simplemente agregue el Bric a su Blocs proyecto utilizando la barra Bric, asigne un ID de grupo y luego asigne la misma ID a cada elemento filtrable usando la personalización atributo de datos grupo de filtros de datos.
También puedes filtrar elementos por etiqueta utilizando el atributo de datos etiquetas de filtro de datos.
Atributos de datos
La siguiente costumbre atributos de datos son compatibles al utilizar el Flexi Filter Bric.
grupo de filtros de datos = El ID del grupo que coincide con el Flexi Filter Bric.
etiquetas de filtro de datos = Las etiquetas por las que se filtra un elemento, cada etiqueta debe estar separada por una coma.
Controles
Flexi Filter tiene una amplia gama de opciones de personalización que le permiten adaptar no solo la apariencia y el diseño de los controles del filtro, sino también el estilo de las animaciones de filtrado.
ID de grupo
Utilice este control para establecer un ID único para la instancia actual de Flexi Filter. El mismo ID debe aplicarse a cada elemento filtrable mediante el atributo de datos. grupo de filtros de datos.
Artículos coincidentes
Filtrar usando
Este control le permite seleccionar cómo se filtran los resultados, hay tres opciones disponibles.
Contenido del texto = Los elementos se filtran según el contenido de texto que contienen (las imágenes usan texto alternativo).
Atributo de etiqueta = Los elementos se filtran según el contenido establecido en el atributo de etiqueta (etiquetas de filtro de datos).
Texto y etiquetas = Los elementos se filtran según el contenido del texto y de los atributos de la etiqueta.
Campo de clase
Este campo permite asignar una clase predefinida a cada elemento filtrado. Esto permite personalizar la apariencia y el estilo de los elementos filtrados mediante una clase personalizada.
Artículos excluidos
Estilo
Este control le permite personalizar el estilo de animación de los elementos excluidos, hay cinco opciones disponibles.
Fundir: = Los elementos excluidos desaparecerán y luego quedarán ocultos.
Esconder = Los elementos excluidos se ocultarán instantáneamente.
Encogimiento = Los elementos excluidos se reducirán de tamaño y luego quedarán ocultos.
Mudo = Los elementos excluidos se volverán semitransparentes y permanecerán visibles.
Desenfoque = Los elementos excluidos se verán borrosos y permanecerán visibles.
Campo de entrada
Forma
Este control le permite establecer la forma del campo de entrada del filtro, hay cuatro opciones disponibles.
Tamaño inicial
Este control se puede utilizar para establecer el tamaño inicial del campo de entrada del filtro, hay tres opciones disponibles.
Normal = El campo de entrada se muestra inicialmente en su tamaño completo.
Compact = El campo de entrada se muestra inicialmente en modo compacto, al hacer clic en él se expandirá a su tamaño completo, lo que permitirá al usuario ingresar una consulta de búsqueda.
Oculto = El campo de entrada está oculto, esta opción está destinada únicamente al filtrado de la nube de etiquetas.
Campo de marcador de posición
Utilice este campo para establecer el texto de marcador de posición de los campos de entrada.
Ícono
Estilo
Utilice esta opción para configurar el estilo del icono de la lupa; hay ocho para elegir.
Posición:
Utilice esta opción para establecer la posición de visualización del icono, hay tres opciones para elegir: izquierda, derecha y oculto.
Color
Utilice esta opción para establecer el color del icono de la lupa.
Nube de etiquetas
Flexi Filter generará automáticamente una nube de etiquetas basada en el contenido de todos etiquetas de filtro de datos atributos de datos que se encuentran en elementos filtrables con un ID de grupo coincidente.
Posición:
Este control le permite establecer la posición de la nube de etiquetas, hay cinco opciones disponibles.
Después del campo = La nube de etiquetas se muestra después del campo de entrada en la misma línea.
Por encima del campo =La nube de etiquetas se muestra encima del campo de entrada.
Antes del campo = La nube de etiquetas se muestra antes del campo de entrada en la misma línea.
Debajo del campo =La nube de etiquetas se muestra debajo del campo de entrada.
Oculto =La nube de etiquetas está oculta y no se muestra.
Alineación:
Este control le permite establecer la alineación horizontal de las etiquetas dentro de la nube de etiquetas.
Forma
Este control le permite establecer la forma de las etiquetas dentro de la nube de etiquetas, hay tres opciones disponibles.
Selección
Este control le permite personalizar cómo funciona la selección de etiquetas, hay dos opciones disponibles.
Múltiple =Se pueden seleccionar varias etiquetas modificando los elementos filtrados.
Individual =Solo se puede seleccionar una única etiqueta, cuando se selecciona otra etiqueta, se deselecciona la etiqueta seleccionada anteriormente.
Mostrar barra de desplazamiento
Este control le permite alternar la visibilidad de la barra de desplazamiento en la nube de etiquetas.
Clase de etiqueta
Flexi Filter le permite personalizar aún más el estilo de las etiquetas generadas en la nube de etiquetas utilizando clases personalizadas.
Campo normal
Este campo le permite establecer una única clase que se aplicará a todas las etiquetas.
Campo seleccionado
Este campo le permite establecer una única clase que se aplicará a todas las etiquetas seleccionadas.
Tenga en cuenta que, al utilizar las opciones de clase de etiqueta, todos los estilos de etiqueta de filtro Flexi predeterminados se eliminarán de los botones de etiqueta.
Tema oscuro y claro
Puede configurar el tema del campo de entrada del Filtro Flexi y la nube de etiquetas seleccionando el contenedor principal del Bric del Filtro Flexi y configurando su opción de Tema Bootstrap en oscuro o claro. Tenga en cuenta que esta opción solo está disponible para... Bootstrap 5 marco de referencia.
El filtro Flexi está disponible para comprar en Blocs Tienda.