Home Back

egovframework

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
한 줄 Grid(동일 넓이)
기본 코드에 class="ui-grid-[a~d]"를 추가한다.
Grid Layout 에서 칼럼의 너비는 class 속성 값을 ui-grid-[a~d] 값에 따라 전체 Grid의 크기를 N등분한 길이이다.
ui-grid-a : 2등분

ui-block-a

ui-block-b

ui-grid-b : 3등분

ui-block-a

ui-block-b

ui-block-c

ui-grid-c : 4등분

ui-block-a

ui-block-b

ui-block-c

ui-block-d

ui-grid-d : 5등분

ui-block-a

ui-block-b

ui-block-c

ui-block-d

ui-block-e

다중 행 Grid(동일넓이)
<div class="ui-grid-[a~d]"> Tag 에 <div class="ui-block-[a~d]"> Tag를 반복적으로 추가하여 여러 개의 행을 생성할 수 있다.

ui-block-a

ui-block-b

ui-block-c

ui-block-a

ui-block-b

ui-block-c

한 줄 Grid(다른 넓이)
<div class="egov-grid">내 class="egov-wid[1~11]"의 class 속성을 사용하여 총 가로 길이가 egov-wid12로 표현되며 각 grid의 크기를 다르게 줄 수 있다.
* 총 grid의 합이 12가 되어야 한다.

wid3

wid9

wid6

wid6

다중 행 Grid(다른넓이)
<div class="egov-wid[1~11]"> Tag에 <div class="egov-wid[1~11]"> Tag를 반복적으로 추가하여 여러 개의 Row 생성이 가능하다.

wid2

wid10

wid3

wid9

wid10

wid2

응용

Grid 선언 클래스 내 컴포넌트 들을 넣으면 해당 컴포넌트가 그 크기에 맞게 나타난다.

Copyright(c)2012 Ministry of Government Administration and Home Affairs.