Collapsible Block
Collapsible Block은 콘텐츠 영역을 접었다 펼 수 있는 컨트롤이다.
기본코드
Collapsible Block을 이용하기 위해서는 블럭을 만들려는 컨텐츠를 감싸고 있는 div Tag에 >data-role="collapsible"을 추가 한다. 이때 div Tag안에 처음 정의된 헤더 테그가 collapsible Block의 타이틀로 사용되며 접힘/펼침을 시각적으로 표현하기 위한 +,- 아이콘이 타이틀 앞에 자동으로 추가 된다.또한 처음 화면을 로드 할 때 Block이 펼쳐있는 상태를 원할 시에는 감싸고 있는 div Tab에 data-collapsed="false"을 추가한다.
default collapsible header
default collapsible header content
open collapsible header
open collapsible header content
- <div data-role="collapsible">
- <h3>default collapsible header</h3>
- <p>default collapsible header content</p>
- </div>
- <div data-role="collapsible" data-collapsed="false">
- <h3>open collapsible header</h3>
- <p>open collapsible header content</p>
- </div>
색상변경
색상변경 시에는 data-role="collapsible"이 선언된 div Tag에data-theme=[a~g]을 선언하여 색상을 변경한다.(총 7가지 색상 지원)
data-theme="b" collapsible header
data-theme="b" collapsible header content
data-theme="g" collapsible header
data-theme="g" Theme collapsible header content
- <div data-role="collapsible" data-theme="b">
- <h3>data-theme="b" collapsible header</h3>
- <p>data-theme="b" collapsible header content</p>
- </div>
- <div data-role="collapsible" data-collapsed="false" data-theme="g">
- <h3>data-theme="g" collapsible header</h3>
- <p>data-theme="g" Theme collapsible header content</p>
- </div>
형태변경
여러개의 Collapsible Block을 하나의 그룹으로 구성하고 싶다면 이것들을 감싸고 있는 div Tag에 <div data-role="collapsible-set"> 속성을 지정하면 된다.이렇게 그룹으로 구성하면 각 Collapsible Block의 접힘/펼침은 상호 배타적으로 동작한다.
collapsible 1
collapsible 1 content
collapsible 2
collapsible 2 content
collapsible 3
collapsible 3 content
collapsible 4
collapsible 4 content
- <div data-role="collapsible-set">
- <div data-role="collapsible">
- <h3>collapsible 1</h3>
- <p>collapsible 1 content</p>
- </div>
- <div data-role="collapsible" data-collapsed="false">
- <h3>collapsible 2</h3>
- <p>collapsible 2 content</p>
- </div>
- <div data-role="collapsible">
- <h3>collapsible 3</h3>
- <p>collapsible 3 content</p>
- </div>
- <div data-role="collapsible">
- <h3>collapsible 4</h3>
- <p>collapsible 4 content</p>
- </div>
- </div>
연속적인 Collapsible Block을 형성 할때는 content 영역에 하위 Collapsible Block을 선언한다.
collapsible 1
collapsible 1 content
collapsible 1-1 content
collapsible 1-1 content
- <div data-role="collapsible">
- <h3>collapsible 1</h3>
- <p>collapsible 1 content</p>
- <div data-role="collapsible">
- <h3>collapsible 1-1 content</h3>
- <p>collapsible 1-1 content</p>
- </div>
- </div>