Agregar iconos para indicar las pestañas activas y completadas

Cuando tenga un formulario adaptable con navegación de pestaña izquierda, es posible que desee mostrar iconos para indicar el estado de la pestaña. Por ejemplo, desea mostrar un icono para indicar la pestaña activa y un icono para indicar la pestaña completada, como se muestra en la captura de pantalla siguiente.

Crear un formulario adaptable

Para crear el formulario de ejemplo se utilizó un formulario adaptable simple basado en la plantilla Básico y la temática Lienzo 3.0.
El iconos utilizados en este artículo se puede descargar desde aquí.

Establecer el estilo del estado predeterminado

Abra el formulario en modo de edición Asegúrese de que está en la capa de estilo y seleccione cualquier pestaña (por ejemplo, la pestaña General ).
Se encuentra en el estado predeterminado cuando abre el editor de estilos para la pestaña, como se muestra en la captura de pantalla siguiente

Establezca las propiedades CSS para el estado predeterminado como se muestra a continuación | Categoría | Nombre de propiedad | Valor de propiedad | |:—|:—|:—| | Dimension y posición | Ancho | 50 px | | Texto | Grosor de fuente| Negrita | | Texto | Color | #FFF | |Texto | Altura de línea| 3 | |Texto | Alineación de texto | Izquierda | |Fondo| Color | #056dae |

Guarde los cambios

Aplicar estilo al estado activo

Asegúrese de que está en estado Activo y aplique estilo a las siguientes propiedades CSS

Aplicar un estilo a la imagen de fondo como se muestra en la captura de pantalla siguiente

Guarde los cambios.

Aplicar estilo al estado visitado

Asegúrese de que está en el estado visitado y aplique estilo a las siguientes propiedades

Aplicar un estilo a la imagen de fondo como se muestra en la captura de pantalla siguiente

Guarde los cambios

Previsualice el formulario y pruebe que los iconos funcionan según lo esperado.