Add Another Icon
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 eines Benutzersymbols neben den einzelnen Kontaktnamen in der Kachel
Schritt 1: Hinzufügen eines Symbols zur Kontaktkachel
Zu diesem Zweck ersetzen wir die createTile -Funktion zwischen den /* FUNCTION createTile */-Kommentaren durch folgenden Code:
/* FUNCTION createTile */ function createTile (record) { return [ '<li class="slds-item">', '<div class="slds-tile slds-media">', '<div class="slds-media__figure">', '<svg aria-hidden="true" class="slds-icon slds-icon-standard-user">', '<use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#user')}"></use>', '</svg>', '</div>', '<div class="slds-media__body">', '<h3 class="slds-truncate" title="', record.get('Name'), '"><a href="javascript:void(0);">', record.get('Name') ,'</a></h3>', '<div class="slds-tile__detail slds-text-body_small">', '<p class="slds-truncate">', record.get('Title') ,'</p>', '</div>', '</div>', '</div>', '</li>' ].join(''); } /* FUNCTION createTile */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 zur Symbolkomponente.
