Content formatting

Layout grid

레이아웃 그리드란 컨텐츠를 배치하는 방법을 지정한다. 배치하려는 컨텐츠를 포함하고 있는 컨테이너 엘리먼트에 배치 방식에 해당하는 클래스 이름을 부여한다. 클래스 이름은 아래와 같다.

칼럼의 수	비율	클래스 명	자식으로 올 수 있는 CSS 클래스
2	50:50%	ui-grid-a	ui-block-a,b
3	33:33:33%	ui-grid-b	ui-block-a,b,c
4	25:25:25:25%	ui-grid-c	ui-block-a,b,c,d
5	20:20:20:20:20%	ui-grid-d	ui-block-a,b,c,d,e

다음 예제는 버튼을 수평으로 배치하는 예제다.

<fieldset class="ui-grid-a">
    <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
    <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>     
</fieldset>

<div class="ui-grid-b">
	<div class="ui-block-a">Block A</div>
	<div class="ui-block-b">Block B</div>
	<div class="ui-block-c">Block C</div>
</div><!-- /grid-b -->

행을 나누고 싶을 때는 ui-block-* 클래스를 중복해서 사용한다.

<div class="ui-grid-b">
    <div class="ui-block-a">Block A</div>
    <div class="ui-block-b">Block B</div>
    <div class="ui-block-c">Block C</div>
    <div class="ui-block-a">Block A</div>
    <div class="ui-block-b">Block B</div>
    <div class="ui-block-c">Block C</div>
    <div class="ui-block-a">Block A</div>
    <div class="ui-block-b">Block B</div>
    <div class="ui-block-c">Block C</div>
</div>

전체소스

Collapsible content

컨텐츠를 감추었다가 사용자가 원하면 보여주는 컴포넌트로 div 태그에 data-role="collapsible" 속성을 사용한다. 처음으로 등장하는 헤더 태그가 제목으로 사용된다.

<div data-role="collapsible">
   <h3>I'm a header</h3>
   <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>