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.

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

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

Formatieren Sie das Hintergrundbild, wie im Screenshot unten dargestellt

Speichern Sie Ihre Änderungen.

Gestalten des Status "Besucht"

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

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.

Ressourcen für Business.Adobe.com