Add a Page Header
Hinweis
Lernen Sie auf Deutsch? In diesem Badge ist für die praktischen Trailhead-Aufgaben Englisch als Bearbeitungssprache festgelegt. Übersetzungen werden zur Referenz in Klammern angegeben. Vergewissern Sie sich, dass Sie in Ihrem Trailhead-Playground (1) das Gebietsschema auf USA und (2) die Sprache auf Englisch festgelegt haben. (3) Verwenden Sie zum Kopieren und Einfügen nur die englischen Werte. Die zugehörigen Anweisungen finden Sie hier.
Weitere Details dazu, wie Sie die übersetzte Trailhead-Umgebung optimal nutzen können, finden Sie unter dem Badge "Trailhead in Ihrer Sprache".
Ihre Aufgaben
- Hinzufügen einer Kopfzeile zu Ihrer Seite
Schritt 1: Hinzufügen einer einfachen Seitenkopfzeile
Die Seitenkopfzeilenkomponente kann abhängig vom Kontext der Seite unterschiedlich aussehen. In diesem Fall wird lediglich ein einfacher Titel hinzugefügt. In späteren Schritten werden jedoch Schaltflächen und eine Detailzeile hinzugefügt.
Fügen Sie den folgenden Code zwischen den Kommentaren in <!-- PAGE HEADER --> hinzu:
<!-- PAGE HEADER --> <div class="slds-page-header"> <!-- LAYOUT GRID --> <div class="slds-grid"> <!-- GRID COL --> <div class="slds-col slds-has-flexi-truncate"> <!-- HEADING AREA --> <p class="slds-text-title_caps slds-line-height_reset">Contacts</p> <h1 class="slds-page-header__title slds-m-right_small slds-align-middle slds-truncate" title="My Contacts">My Contacts</h1> <!-- / HEADING AREA --> </div> <!-- ACTION BUTTONS --> <!-- / ACTION BUTTONS --> </div> <!-- / LAYOUT GRID --> <!-- PAGE HEADER DETAIL ROW --> <!-- / PAGE HEADER DETAIL ROW --> </div> <!-- / PAGE HEADER --> Schritt 2: Vorschau
Speichern Sie die Seite und klicken Sie auf die Schaltfläche "Preview (Vorschau)".
Ressourcen
Auf der Design System-Website finden Sie weitere Dokumentation und Beispiele für die folgenden Komponenten:
