펼치기 가능한 위젯은 맞춤 요소 <devsite-expandable>를 사용하여 사용자가 펼치기 가능한 섹션에서 콘텐츠의 일부를 숨기거나 표시할 수 있도록 합니다. 마크다운에서
파일에서 맞춤 요소를 표준 HTML 요소(예:
<section> 또는 <div>
섹션 전환 버튼
다음 예는 <devsite-expandable> 맞춤 요소로 래핑되어 있습니다.
숨겨진 위치로 기본 설정됩니다. 제목에 class 속성이 있습니다.
showalways입니다.
이 제목은 항상
이 단락은 기본적으로 숨겨진 위치에 있습니다.
This code block within the custom element also defaults to a hidden
position.
맞춤 컨트롤
다음 예에서는 expand-control 클래스를button
<devsite-expandable> 맞춤 요소를 사용하여 섹션 펼치거나 접음
할 수 있습니다.
한 번 펼치기
다음 예에서는 expand-control once 클래스를
클릭 시 추가 콘텐츠를 표시하는 <devsite-expandable> 맞춤 요소
페이지에서 사라집니다.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut Enim 광고 최소 베암, 퀴스 노스트러드, 울람코 라보리스 니시 ut aliquip ex ea commodo consequat
더보기Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolor eu fugiat nulla pariatur. 예외, 신트, 오카에카트, 논 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
연결 시 자동 확장
다음 예에서는 #sample1 ID를
페이지 로드 시 섹션을 자동으로 펼치는 <devsite-expandable> 맞춤 요소
표시됩니다.
연결 시 자동 확장하는 방법
이 확장 가능 섹션을 닫고 위의 #sample1 링크를 클릭한 다음 페이지를 새로고침하여 이 확장 가능 섹션을 자동으로 펼칩니다.
Code block within the 'Auto-expand on linking' demo.
기본적으로 열기
다음 예에서는 expanded 속성을
<devsite-expandable> 맞춤 요소를 사용하여 확장형 광고가 기본으로 열리도록 합니다.
기본적으로 펼쳐짐
기본적으로 열기는 출시 노트와 같이 펼칠 수 있는 항목이 많지만 가장 최근 항목을 열어 두려는 경우에 유용합니다.