Add a Page Header
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 un en-tête à votre page
Étape 1 : Ajouter un en-tête de page de base
Le composant en-tête de page peut être différent selon le contexte de la page. Dans le cas présent, nous nous contentons d’ajouter un simple titre. Dans les étapes suivantes, nous ajouterons des boutons et une ligne de détail.
Ajoutez le code suivant entre les commentaires <!-- PAGE HEADER --> :
<!-- 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 --> Étape 2 : Prévisualiser
Enregistrez votre page, puis cliquez sur le bouton Preview (Aperçu).
Ressources
Le site Design System contient une documentation et des exemples supplémentaires sur ces composants :
