Add Another Icon
Remarque
Vous souhaitez apprendre en français ? Dans ce badge, les validations de défi pratique Trailhead se font en anglais. Les traductions sont fournies entre parenthèses à titre de référence. Dans votre Trailhead Playground, veillez (1) à définir les États-Unis comme région, (2) à sélectionner l’anglais comme langue, et (3) à copier et coller uniquement les valeurs en anglais. Suivez les instructions ici.
Consultez le badge Trailhead dans votre langue pour découvrir comment profiter de l’expérience Trailhead traduite.
Ce que vous allez faire
- Ajouter une icône utilisateur en regard de chaque nom de contact sur la vignette
Étape 1 : Ajouter une icône à la vignette du contact
Pour cela, nous allons remplacer la fonction createTile entre les commentaires /* FUNCTION createTile */ par le code suivant :
/* 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 */Étape 2 : Prévisualiser
Enregistrez votre page, puis cliquez sur le bouton Preview (Aperçu).
Ressources
Le site Design System contient une documentation supplémentaire sur le composant icône.
