접펼식 레이아웃

Back

1. 접펼식


기본 접펼식

<div data-role="collapsible">
<h3>제목</h3>
<p>내용</p>
</div>

기본 펼침

<div data-role="collapsible" data-collapsed="false">
<h3>제목</h3>
<p>내용</p>
</div>

아이콘 위치 설정

<div data-role="collapsible" data-iconpos="right">
<h3>제목</h3>
<p>내용</p>
</div>

테마 설정 : 머리만

<div data-role="collapsible" data-theme="a">
<h3>제목</h3>
<p>내용</p>
</div>

테마 설정 : 머리와 내용 모두

<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>제목</h3>
<p>내용</p>
</div>

테마 설정 : 머리와 내용을 달리

<div data-role="collapsible" data-theme="b" data-content-theme="e">
<h3>제목</h3>
<p>내용</p>
</div>

계층형 접펼식

여러가지 자유형의 내용을 담을 수 있습니다.

계층 2단계

하위단계에 또 있습니다.

계층 3단계

다단계 접펼식 구역을 만들 수 있습니다.

그리드

ui-block-a
ui-block-b
ui-block-c
ui-block-a
ui-block-b
ui-block-c

목록

지금까지 소개한 레이아웃들...

2. 아코디언

data-theme="a" : 미니형

data-content-theme="a"

data-theme="a"

data-content-theme="a"

data-theme="b"

data-content-theme="b"

data-theme="c"

data-content-theme="c"

data-theme="b"

data-content-theme="b"

data-theme="c"

data-content-theme="c"

Index