Add a Page Header
操作内容
- ページにヘッダーを追加する
ステップ 1: 基本的なページヘッダーを追加する
ページヘッダーコンポーネントは、ページのコンテキストによって見た目が異なることがあります。ここではシンプルなタイトルを追加するだけですが、後続のステップでボタンや詳細行も追加します。
<!-- 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 -->
ステップ 2: プレビューする
ページを保存して、[Preview (プレビュー)] ボタンをクリックします。
リソース
Design System サイトに、これらのコンポーネントの他のドキュメントや例が掲載されています。