【Salesforce】Lightning Design System으로 모달 화면 만들기
모달
다음은 모달 화면의 샘플 코드입니다.
<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;">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">ヘッダーのタイトルです。</h2>
<p class="slds-m-top_x-small">ヘッダーの本文です。</p>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<p>本文です。</p>
</div>
<footer class="slds-modal__footer">
<button class="slds-button slds-button_neutral">キャンセル</button>
<button class="slds-button slds-button_brand">保存</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</body>
</html>
</apex:page>
다음은 모달 화면의 작성 이미지입니다.
모달 화면 구성
요소
비고
헤더(header)
모달의 헤더 부분입니다. 필요하지 않으면 삭제해도 괜찮습니다.
콘텐츠(div)
모달의 콘텐츠 부분입니다. 본문을 기재합니다.
바닥글(footer)
모달의 바닥글 부분입니다. 일반적으로 버튼을 배치합니다.
참고
■Modals
h tps : // ぃ ght 마늘 g로하고 g g sys m. 코 m / 코 m 포넨 ts / 모다 ls /
Reference
이 문제에 관하여(【Salesforce】Lightning Design System으로 모달 화면 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/quroooos/items/87709e68f2dd4fae99d8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
