NativeScript-Vue 2.0: Back to the Vueture (Webinar) is now on YouTube
그리드 (GridLayout)

This is an overview of the most common usage of 그리드 (GridLayout). For more information about the available properties, methods, or events, head over to the complete API documentation for 그리드 (GridLayout).

GridLayout은 자식 요소들을 행과 열의 테이블 구조로 배치합니다. 하나의 셀(cell)은 여러 자식 요소를 가질 수 있고, 여러 행/열로 확장(span)되거나 겹쳐질(overlap) 수 있습니다. GridLayout은 기본값으로 하나의 행과 하나의 열을 가지고 있습니다. 행/열을 추가하려면, 열의 정의를(쉼표로 분리) columns 프로퍼티에, 행의 정의를(쉼표로 분리) rows 프로퍼티에 명시해야 합니다. 열의 너비와 행의 높이는 픽셀의 절대량, 사용 가능한 공간의 퍼센티지, 혹은 자동으로 지정할 수 있습니다.:

  • Absolute: 고정된 픽셀 크기.
  • Star (*): 가능한 최대 값(모든 auto 와, 고정 크기 열이 채워진 후), 모든 star-sized 열 크기에 비례하여 나누어짐. 따라서 3/730/70 과 같음.
  • Auto: 포함된 자식 요소들에 필요한 최대한의 공간을 차지.

예제

복잡한 그리드 레이아웃

<GridLayout columns="40, auto, *" rows="40, auto, *" backgroundColor="#3c495e">
  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
  <Label text="0,1" row="0" col="1" colSpan="2" backgroundColor="#1c6b48"/>
  <Label text="1,0" row="1" col="0" rowSpan="2" backgroundColor="#289062"/>
  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
  <Label text="1,2" row="1" col="2" backgroundColor="#289062"/>
  <Label text="2,1" row="2" col="1" backgroundColor="#1c6b48"/>
  <Label text="2,2" row="2" col="2" backgroundColor="#43b883"/>
</GridLayout>

그리드 레이아웃과 별-크기(star sizing)

<GridLayout columns="*, 2*" rows="2*, 3*" backgroundColor="#3c495e">
  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
  <Label text="0,1" row="0" col="1" backgroundColor="#1c6b48"/>
  <Label text="1,0" row="1" col="0" backgroundColor="#289062"/>
  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
</GridLayout>

그리드 레이아웃과 고정/자동 크기

<GridLayout columns="80, auto" rows="80, 80" backgroundColor="#3c495e">
  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
  <Label text="0,1" row="0" col="1" backgroundColor="#1c6b48"/>
  <Label text="1,0" row="1" col="0" backgroundColor="#289062"/>
  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
</GridLayout>

Props

이름타입설명
columnsString열의 너비를 나타내는 쉼표로 나누어진 문자열 값. 열의 너비는 절대값이나 auto, *가 가능. 숫자는 고정된 절대값 너비를 의미하고, auto는 가장 넓은 자식의 너비, * 는 컬럼이 가능한 모든 가로공간을 차지하도록 만듬.
rowsString행의 높이를 나타내는 쉼표로 나누어진 문자열 값. 행의 높이는 절대값이나 auto, *가 가능. 숫자는 고정된 절대값 높이를 의미하고, auto는 가장 높은 자식의 높이, * 는 행이 가능한 모든 세로 공간을 차지하도록 만듬.

추가적인 자식 Props

요소가 GridLayout의 직접적인 자식일때 다음 prop들이 가능합니다:

이름타입설명
rowNumber요소의 행
columnNumber요소의 열
rowSpanNumber요소가 확장되는 행의 수
columnSpanNumber요소가 확장되는 열의 수
Contributors