【Salesforce】Lightning Design System에서 Path 작성
11210 단어 SalesforceLightningDesignSystem
기본 Path
다음은 기본 Path 샘플 코드입니다.
<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>
<div class="slds-path" style="padding: 8px;">
<div class="slds-grid slds-path__track">
<div class="slds-grid slds-path__scroller-container">
<div class="slds-path__scroller">
<div class="slds-path__scroller_inner">
<ul class="slds-path__nav" role="listbox" aria-orientation="horizontal">
<li class="slds-path__item slds-is-current slds-is-active" role="presentation">
<a aria-selected="true" class="slds-path__link" href="javascript:void(0);" id="path-1" role="option" tabindex="0">
<span class="slds-path__stage">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-path__title">フェーズ1</span>
</a>
</li>
<li class="slds-path__item slds-is-incomplete" role="presentation">
<a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-2" role="option" tabindex="-1">
<span class="slds-path__stage">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-path__title">フェーズ2</span>
</a>
</li>
<li class="slds-path__item slds-is-incomplete" role="presentation">
<a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-3" role="option" tabindex="-1">
<span class="slds-path__stage">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-path__title">フェーズ3</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</apex:page>
단계가 1입니다.
단계를 진행하고 싶다면?
단계를 진행하려는 경우 대상 단계의 클래스 이름에 "slds-is-active"를 추가합니다.
아래 코드에서는 '2단계' 목록에 클래스 이름 'slds-is-active'를 추가합니다.
<li class="slds-path__item slds-is-incomplete slds-is-active" role="presentation">
<a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-2" role="option" tabindex="-1">
<span class="slds-path__stage">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-path__title">フェーズ2</span>
</a>
</li>
단계를 2로 변경할 수 있습니다.
참고
■Path
h tps : // ぃ ght 마늘 g로하고 g g sys m. 코 m / 코 m 포넨 ts / 파 th /
Reference
이 문제에 관하여(【Salesforce】Lightning Design System에서 Path 작성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/quroooos/items/d8365e191e2a5d2a8f6e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
