Lägg till ikoner för att ange aktiva och slutförda flikar

När du har ett anpassat formulär med vänster fliknavigering kanske du vill visa ikoner som anger flikens status. Du kan t.ex. visa en ikon som anger att fliken är aktiv och en ikon som anger att den är klar, vilket visas på skärmbilden nedan.

verktygsfält-spacing

Skapa ett adaptivt formulär

Ett enkelt adaptivt formulär baserat på den grundläggande mallen och Canvas 3.0-temat användes för att skapa exempelformuläret.
De ikoner som används i den här artikeln kan hämtas härifrån.

Formatera standardläge

Öppna formuläret i redigeringsläge
Kontrollera att du befinner dig i stillagret och välj en flik (till exempel fliken Allmänt).
Du är i standardläget när du öppnar formatredigeraren för fliken så som visas på skärmbilden nedan
navigeringsflik

Ange CSS-egenskaper för standardläget enligt nedan
| Kategori | Egenskapsnamn | Egenskapsvärde |
|:—|:—|:—|
| Dimensioner och position | Bredd | 50px |
| Text | Teckenbredd| Fet |
| Text | Färg | #FFF |
|Text | Radhöjd| 3 |
|Text | Textjustering | Vänster |
|Bakgrund| Färg | #056dae |

Spara ändringarna

Formatera det aktiva läget

Kontrollera att du är i läget Aktiv och formatera följande CSS-egenskaper

Kategori
Egenskapsnamn
Egenskapsvärde
Dimensioner och position
Bredd
50px
Text
Teckenbredd
Fet
Text
Färg
#FFF
Text
Radhöjd
3
Text
Textjustering
Vänster
Bakgrund
Färg
#056dae

Formatera bakgrundsbilden som den visas på bilden nedan

Spara ändringarna.

active-state

Formatera besöksstatus

Se till att du är i besökt läge och formatera följande egenskaper

Kategori
Egenskapsnamn
Egenskapsvärde
Dimensioner och position
Bredd
50px
Text
Teckenbredd
Fet
Text
Färg
#FFF
Text
Radhöjd
3
Text
Textjustering
Vänster
Bakgrund
Färg
#056dae

Formatera bakgrundsbilden som den visas på bilden nedan

besökt-state

Spara ändringarna

Förhandsgranska formuläret och testa att ikonerna fungerar som förväntat.

recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e