【Salesforce】Lightning Design Systemでアラート画面を作る

5661 ワード
Salesforce Alert LightningDesignSystem Salesforce テキストリンク

アラート

以下がアラート画面のサンプルコードです。
前回の続きです。

■【Salesforce】Lightning Design Systemでモーダル画面を作る
https://qiita.com/quroooos/items/87709e68f2dd4fae99d8

<apex:page title="Test" showHeader="false" standardStylesheets="false" sidebar="false" docType="html-5.0">
  <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="ja">
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="x-ua-compatible" content="ie=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <apex:slds />
    </head>

    <body style="padding: 8px;">
      <div class="demo-only" style="height:24rem">
        <section role="alertdialog" tabindex="0" aria-labelledby="prompt-heading-id" aria-describedby="prompt-message-wrapper" class="slds-modal slds-fade-in-open slds-modal_prompt" aria-modal="true">
          <div class="slds-modal__container">
            <header class="slds-modal__header slds-theme_error slds-theme_alert-texture">
              <h2 class="slds-text-heading_medium" id="prompt-heading-id">予期せぬエラーが発生しました</h2>
            </header>

            <div class="slds-modal__content slds-p-around_medium" id="prompt-message-wrapper">
              <p>予期せぬエラーが発生しました。システム管理者に連絡してください。</p>
            </div>

            <footer class="slds-modal__footer slds-theme_default">
              <button class="slds-button slds-button_neutral">閉じる</button>
            </footer>
          </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
      </div>
    </body>
  </html>
</apex:page>

以下がアラート画面の作成イメージです。

アラート画面の構成

要素 備考
ヘッダー（header） アラートのヘッダー部分です。背景色は赤としています。
コンテンツ（div） アラートのコンテンツ部分です。本文を記載します。
フッター（footer） アラートのフッター部分です。閉じるボタンを配置するのが良いと思います。

参考

■Prompt
https://lightningdesignsystem.com/components/prompt/