ページヘッダーの追加

操作内容

  • ページにヘッダーを追加する

ステップ 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 (プレビュー)] ボタンをクリックします。

ヘッダーを追加後の Visualforce ページのプレビュー

リソース

Design System サイトに、これらのコンポーネントの他のドキュメントや例が掲載されています。