Symbole hinzufügen, um aktive und abgeschlossene Registerkarten anzuzeigen

Wenn Sie ein adaptives Formular mit Navigation auf der linken Registerkarte haben, sollten Sie Symbole anzeigen, um den Status der Registerkarte anzuzeigen. Sie möchten beispielsweise ein Symbol anzeigen, um die aktive Registerkarte und das Symbol anzuzeigen, um die abgeschlossene Registerkarte anzuzeigen, wie im Screenshot unten dargestellt.

toolbar-spacing

Erstellen eines adaptiven Formulars

Zum Erstellen des Beispielformulars wurde ein einfaches adaptives Formular verwendet, das auf der Basisvorlage und dem Canvas 3.0-Design basiert.
Die In diesem Artikel verwendete Symbole kann von hier heruntergeladen werden.

Stil des Standardstatus

Öffnen Sie das Formular im Bearbeitungsmodus Vergewissern Sie sich, dass Sie sich in der Stilschicht befinden, und wählen Sie eine beliebige Registerkarte aus (z. B. Registerkarte "Allgemein").
Sie befinden sich im Standardzustand, wenn Sie den Stileditor für die Registerkarte öffnen, wie im Screenshot unten dargestellt
navigation-tab

Legen Sie die CSS-Eigenschaften für den Standardstatus wie unten gezeigt fest. | Kategorie | Eigenschaftsname | Eigenschaftswert | |—|:—|:—| | Dimensionen und Funktion | Breite | 50px | | Text | Schriftstärke| Fett | | Text | Farbe | #FFF | |Text | Zeilenhöhe | 3 | |Text | Textausrichtung | Links | |Hintergrund| Farbe | #056dae |

Speichern Sie Ihre Änderungen

Stile für den aktiven Status festlegen

Stellen Sie sicher, dass Sie den Status "Aktiv"haben, und gestalten Sie die folgenden CSS-Eigenschaften

Kategorie Eigenschaftsname Eigenschaftswert
Abmessungen und Position Breite 50px
Text Schriftbreite Fett
Text Farbe #FFF
Text Zeilenhöhe 3
Text Text Ausrichten Links
Hintergrund Farbe #056dae

Formatieren Sie das Hintergrundbild, wie im Screenshot unten dargestellt

Speichern Sie Ihre Änderungen.

active-state

Gestalten des Status "Besucht"

Vergewissern Sie sich, dass Sie sich im besuchten Status befinden, und gestalten Sie die folgenden Eigenschaften:

Kategorie Eigenschaftsname Eigenschaftswert
Abmessungen und Position Breite 50 px
Text Schriftbreite Fett
Text Farbe #FFF
Text Zeilenhöhe 3
Text Text Ausrichten Links
Hintergrund Farbe #056dae

Formatieren Sie das Hintergrundbild, wie im Screenshot unten dargestellt

visited-state

Speichern Sie Ihre Änderungen

Zeigen Sie eine Vorschau des Formulars an und testen Sie, ob die Symbole erwartungsgemäß funktionieren.

Auf dieser Seite