Grid View
Grid View는 UX Component를 같은 넓이, 같은 행으로 나타 낼 때 사용되며 Grid View 안에 컴포넌트를
넣어 나란하게 배열 할 수 있다.
기본코드
Grid 속성으로 칼럼(column) 수를 지정하고 Block 속성으로 내부의 셀을 지정한다.
class 속성 값을 ui-grid-[a~d] 갖도록 하여 격자 형태의 레이아웃을 구성하며 ui-grid-[a~d] 는 각각 [2~5]개의 칼럼을
제공한다. 기본적으로 각 칼럼의 너비는 동일하며 class 속성 값을 ui-block-[a~e] 으로 설정하여 내부 셀을 추가 한다.
I'm Block A and text inside will wrap
I'm Block B and text inside will wrap
- <div class="ui-grid-a">
- <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
- <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
- </div>
- 한 줄 Grid(동일 넓이)
- 기본 코드에 class="ui-grid-[a~d]"를 추가한다.
Grid Layout 에서 칼럼의 너비는 class 속성 값을 ui-grid-[a~d] 값에 따라 전체 Grid의 크기를 N등분한 길이이다.
- ui-grid-a : 2등분
- <div class="ui-grid-a">
- <div class="ui-block-a"><div class="ui-body-e" style="text-align:center"><h3>ui-block-a</h3></div></div>
- <div class="ui-block-b"><div class="ui-body-e" style="text-align:center"><h3>ui-block-b</h3></div></div>
- </div>
- ui-grid-b : 3등분
- <div class="ui-grid-b">
- <div class="ui-block-a"><div class="ui-body-e" style="text-align:center"><h3>ui-block-a</h3></div></div>
- <div class="ui-block-b"><div class="ui-body-e" style="text-align:center"><h3>ui-block-b</h3></div></div>
- <div class="ui-block-c"><div class="ui-body-e" style="text-align:center"><h3>ui-block-c</h3></div></div>
- </div>
- ui-grid-c : 4등분
- <div class="ui-grid-c">
- <div class="ui-block-a"><div class="ui-body-e" style="text-align:center"><h3>ui-block-a</h3></div></div>
- <div class="ui-block-b"><div class="ui-body-e" style="text-align:center"><h3>ui-block-b</h3></div></div>
- <div class="ui-block-c"><div class="ui-body-e" style="text-align:center"><h3>ui-block-c</h3></div></div>
- <div class="ui-block-d"><div class="ui-body-e" style="text-align:center"><h3>ui-block-d</h3></div></div>
- </div>
- ui-grid-d : 5등분
- <div class="ui-grid-d">
- <div class="ui-block-a"><div class="ui-body-e" style="text-align:center"><h3>ui-block-a</h3></div></div>
- <div class="ui-block-b"><div class="ui-body-e" style="text-align:center"><h3>ui-block-b</h3></div></div>
- <div class="ui-block-c"><div class="ui-body-e" style="text-align:center"><h3>ui-block-c</h3></div></div>
- <div class="ui-block-d"><div class="ui-body-e" style="text-align:center"><h3>ui-block-d</h3></div></div>
- <div class="ui-block-e"><div class="ui-body-e" style="text-align:center"><h3>ui-block-e</h3></div></div>
- </div>
- 다중 행 Grid(동일넓이)
- <div class="ui-grid-[a~d]"> Tag 에 <div class="ui-block-[a~d]"> Tag를 반복적으로 추가하여 여러 개의 행을 생성할 수 있다.
- <div class="ui-grid-b">
- <div class="ui-block-a"><div class="ui-body-e" style="text-align:center"><h3>ui-block-a</h3></div></div>
- <div class="ui-block-b"><div class="ui-body-e" style="text-align:center"><h3>ui-block-b</h3></div></div>
- <div class="ui-block-c"><div class="ui-body-e" style="text-align:center"><h3>ui-block-c</h3></div></div>
- <div class="ui-block-a"><div class="ui-body-e" style="text-align:center"><h3>ui-block-a</h3></div></div>
- <div class="ui-block-b"><div class="ui-body-e" style="text-align:center"><h3>ui-block-b</h3></div></div>
- <div class="ui-block-c"><div class="ui-body-e" style="text-align:center"><h3>ui-block-c</h3></div></div>
- </div>
- 한 줄 Grid(다른 넓이)
- <div class="egov-grid">내
class="egov-wid[1~11]"의 class 속성을 사용하여 총 가로 길이가 egov-wid12로 표현되며 각 grid의 크기를 다르게 줄 수 있다.
* 총 grid의 합이 12가 되어야 한다.
- <div class="egov-grid">
- <div class="egov-wid3"><div class="ui-bar-c" style="text-align:center"><h3>wid3</h3></div></div>
- <div class="egov-wid9"><div class="ui-bar-c" style="text-align:center"><h3>wid9</h3></div></div>
- </div>
- <div class="egov-grid">
- <div class="egov-wid6"><div class="ui-bar-c" style="text-align:center"><h3>wid6</h3></div></div>
- <div class="egov-wid6"><div class="ui-bar-c" style="text-align:center"><h3>wid6</h3></div></div>
- </div>
- 다중 행 Grid(다른넓이)
- <div class="egov-wid[1~11]"> Tag에 <div class="egov-wid[1~11]"> Tag를 반복적으로 추가하여 여러 개의 Row 생성이 가능하다.
- <div class="egov-grid">
- <div class="egov-wid2"><div class="ui-bar-c" style="text-align:center"><h3>egov-wid2</h3></div></div>
- <div class="egov-wid10"><div class="ui-bar-c" style="text-align:center"><h3>egov-wid10</h3></div></div>
- <div class="egov-wid3"><div class="ui-bar-c" style="text-align:center"><h3>egov-wid3</h3></div></div>
- <div class="egov-wid9"><div class="ui-bar-c" style="text-align:center"><h3>egov-wid9</h3></div></div>
- <div class="egov-wid10"><div class="ui-bar-c" style="text-align:center"><h3>egov-wid10</h3></div></div>
- <div class="egov-wid2"><div class="ui-bar-c" style="text-align:center"><h3>egov-wid2</h3></div></div>
- </div>
응용
Grid 선언 클래스 내 컴포넌트 들을 넣으면 해당 컴포넌트가 그 크기에 맞게 나타난다.
- <div class="ui-grid-a">
- <div class="ui-block-a"><button type="submit" data-theme="c">block1</button></div>
- <div class="ui-block-b"><button type="submit" data-theme="b">block2</button></div>
- </div>
- <div class="egov-grid">
- <div class="egov-wid7"><button type="submit" data-theme="a">button1</button></div>
- <div class="egov-wid5"><button type="submit" data-theme="b">button2</button></div>
- </div>