アラート
以下がアラート画面のサンプルコードです。
前回の続きです。
■【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/