【Salesforce】Lightning Design System으로 다양한 버튼을 만든다
버튼
다음은 기본 버튼의 샘플 코드입니다.
각 버튼에 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;">
<button class="slds-button slds-button_brand">保存</button>
<button class="slds-button slds-button_destructive">削除</button>
<button class="slds-button slds-button_neutral" disabled="true">無効</button>
<button class="slds-button slds-button_neutral">キャンセル</button>
</body>
</html>
</apex:page>
다음 버튼을 만들었습니다.
· 저장 (주요 액션)
・삭제(파괴적인 액션)
・무효(무효인 액션)
・캔슬(보통 액션)
버튼의 클래스명 일람
클래스 이름
비고
slds-button_brand
주요 액션에 사용되는
slds-button_destructive
파괴적인 행동에 사용
slds-button_neutral
일반 액션에서 사용되는
참고
■Buttons
h tps : // ぃ ght 마늘 g로하고 g g sys m. 코 m / 코 m 포넨 ts / 부톤 s /
Reference
이 문제에 관하여(【Salesforce】Lightning Design System으로 다양한 버튼을 만든다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/quroooos/items/976cbdcc64fa4479b179텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
