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.
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.
Ö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
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
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.
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
Speichern Sie Ihre Änderungen
Zeigen Sie eine Vorschau des Formulars an und testen Sie, ob die Symbole erwartungsgemäß funktionieren.