Layout
Layout
출처: 문서
본문
기본 24컬럼 기반으로 레이아웃을 빠르고 쉽게 만들 수 있는 컴포넌트예요.
TIP
이 컴포넌트는 기본적으로 flex 레이아웃을 사용해요. type="flex"를 수동으로 설정할 필요가 없어요.
부모 컨테이너는 inline 관련 스타일을 피해야 해요. 그렇게 하면 컴포넌트가 자신의 너비를 채우지 못할 수 있어요.
컬럼의 기본 단위는 1이고, 최대 24, 최소 0이에요.
기본 레이아웃 (Basic layout)
컬럼을 사용해 기본 그리드 레이아웃을 만들어요. Row와 Col로 span 속성을 이용해 쉽게 레이아웃을 조작할 수 있어요.
컬럼 간격 (Column spacing)
컬럼 간격을 지원해요. Row는 컬럼 사이 간격을 지정하는 gutter 속성을 제공하며 기본값은 0이에요.
혼합 레이아웃 (Hybrid layout)
기본 1/24 컬럼을 조합해 더 복잡한 혼합 레이아웃을 만들 수 있어요.
컬럼 오프셋 (Column offset)
컬럼 오프셋을 지정할 수 있어요. Col의 offset 속성 값을 설정해서 컬럼이 왼쪽으로 밀리는 칸 수를 지정할 수 있어요.
정렬 (Alignment)
기본적으로 flex 레이아웃을 사용해 컬럼을 유연하게 정렬해요. justify 속성에 start, center, end, space-between, space-around 또는 space-evenly를 설정해 자식 요소의 배치를 정의할 수 있어요.
반응형 레이아웃 (Responsive Layout)
Bootstrap의 반응형 디자인을 참고해서 다섯 개의 브레이크포인트를 미리 설정했어요: xs, sm, md, lg, xl이에요.
요소 숨김 유틸리티 클래스 (Utility classes for hiding elements)
추가로 Element Plus는 특정 조건에서 요소를 숨기는 일련의 클래스를 제공해요. 이 클래스들은 어떤 DOM 요소나 커스텀 컴포넌트에도 추가할 수 있어요. 이 클래스들을 사용하려면 다음 CSS 파일을 import 해야 해요.
import 'element-plus/theme-chalk/display.css'
클래스들은 다음과 같아요.
hidden-xs-only- extra small viewport에서만 숨김hidden-sm-only- small viewport에서만 숨김hidden-sm-and-down- small viewport 이하에서 숨김hidden-sm-and-up- small viewport 이상에서 숨김hidden-md-only- medium viewport에서만 숨김hidden-md-and-down- medium viewport 이하에서 숨김hidden-md-and-up- medium viewport 이상에서 숨김hidden-lg-only- large viewport에서만 숨김hidden-lg-and-down- large viewport 이하에서 숨김hidden-lg-and-up- large viewport 이상에서 숨김hidden-xl-only- extra large viewport에서만 숨김
Row API
Row Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| gutter | grid spacing | number | 0 |
| justify | horizontal alignment of flex layout | enum | start |
| align | vertical alignment of flex layout | enum | — |
| tag | custom element tag | string | div |
Row Slots
| Name | Description | Subtags |
|---|---|---|
| default | customize default content | Col |
Col API
Col Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| span | number of column the grid spans | number | 24 |
| offset | number of spacing on the left side of the grid | number | 0 |
| push | number of columns that grid moves to the right | number | 0 |
| pull | number of columns that grid moves to the left | number | 0 |
| xs | <768px Responsive columns or column props object | number / object | — |
| sm | ≥768px Responsive columns or column props object | number / object | — |
| md | ≥992px Responsive columns or column props object | number / object | — |
| lg | ≥1200px Responsive columns or column props object | number / object | — |
| xl | ≥1920px Responsive columns or column props object | number / object | — |
| tag | custom element tag | string | div |
Col Slots
| Name | Description |
|---|---|
| default | customize default content |