Add a Detail Row
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 Detailzeile zur Seitenkopfzeile
Schritt 1: Hinzufügen einer Detailzeile zur Seitenkopfzeile
In diesem Schritt soll die Seitenkopfzeile erweitert werden, damit Platz für einige Metadaten vorhanden ist. Fügen Sie den folgenden Code zwischen den <!-- PAGE HEADER DETAIL ROW -->-Kommentaren hinzu:
<!-- PAGE HEADER DETAIL ROW --> <ul class="slds-grid slds-page-header__detail-row"> <li class="slds-page-header__detail-block"> <p class="slds-text-title slds-truncate slds-m-bottom_xx-small" title="Field 1">Field 1</p> <p class="slds-text-body_regular slds-truncate" title="Description that demonstrates truncation with a long text field">Description that demonstrates truncation with a long text field.</p> </li> <li class="slds-page-header__detail-block"> <p class="slds-text-title slds-truncate slds-m-bottom_xx-small" title="Field2 (3)">Field 2 (3) <button class="slds-button slds-button_icon" aria-haspopup="true" title="More actions"> <svg aria-hidden="true" class="slds-button__icon slds-button__icon_small"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use> </svg> <span class="slds-assistive-text">More Actions</span> </button> </p> <p class="slds-text-body_regular">Multiple Values</p> </li> <li class="slds-page-header__detail-block"> <p class="slds-text-title slds-truncate slds-m-bottom_xx-small" title="Field 3">Field 3</p> <a href="javascript:void(0);">Hyperlink</a> </li> <li class="slds-page-header__detail-block"> <p class="slds-text-title slds-truncate slds-m-bottom_xx-small" title="Field 4">Field 4</p> <p> <span title="Description (2-line truncation—must use JS to truncate).">Description (2-line truncat...</span> </p> </li> </ul> <!-- / PAGE HEADER DETAIL ROW --> 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.
