【Salesforce】Lightning Design System으로 알림 화면 만들기
경고
다음은 경고 화면의 샘플 코드입니다.
전회의 계속입니다.
■【Salesforce】Lightning Design System으로 모달 화면 만들기
htps : // 코 m / 쿠로 오오 s / ms / 87709 68f2d d4 푸에 99d8
<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
h tps : // ぃ ght 마늘 g로하고 g g sys m. 코 m / 코 m 포넨 ts / p 필터 mpt /
Reference
이 문제에 관하여(【Salesforce】Lightning Design System으로 알림 화면 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/quroooos/items/c2517e7a586cf3b8338f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
