Adicionar ícones para indicar guias ativas e concluídas

Quando você tem um formulário adaptável com a navegação da guia esquerda, talvez queira exibir ícones para indicar o status da guia. Por exemplo, você deseja mostrar um ícone para indicar a guia ativa e o ícone para indicar a guia concluída, como mostrado na captura de tela abaixo.

Criação de um Formulário adaptável

Um formulário adaptável simples baseado no modelo Básico e no tema do Canvas 3.0 foi usado para criar o formulário de amostra.
Os ícones usados neste artigo podem ser baixados aqui.

Estilo do estado padrão

Abrir o formulário no modo de edição
Verifique se você está na camada de estilo e selecione qualquer guia (por exemplo, guia Geral).
Você está no estado padrão ao abrir o editor de estilos da guia, como mostrado na captura de tela abaixo

Defina as propriedades de CSS para o estado padrão conforme mostrado abaixo

Salve as alterações

Estilo do estado ativo

Verifique se você está no estado Ativo e estilize as seguintes propriedades de CSS

Estilize a imagem de plano de fundo conforme mostrado na captura de tela abaixo

Salve as alterações.

Estilo do estado visitado

Verifique se você está no estado visitado e estilize as seguintes propriedades

Estilize a imagem de plano de fundo conforme mostrado na captura de tela abaixo

Salve as alterações

Pré-visualize o formulário e teste se os ícones estão funcionando como esperado.