그리드 시스템 (Grid system)
Vuetify 12 포인트 그리드 시스템을 사용합니다. flex-box를 사용하는 이 그리드는 어플리케이션 컨텐츠의 레이아웃에 사용됩니다. 여기엔 여러 화면 크기와 방향에 대응하는 5가지 타입의 미디어 브레이크포인트가 있습니다. 그리드 컴포넌트의 prop들은 사실 정의된 속성에 따라 파생되는 (css) 클래스들입니다. 이를 이용해 이들 (css) 헬퍼 클래스들을 prop 형태로 쉽게 사용할 수 있습니다. 물론 이 클래스들은 여전히 어디든지 사용할 수 있습니다.
사용법
The v-container can be used for a center focused page, or given the fluid prop to extend its full width. v-layout is used for separating sections and contains the v-flex. The structure of your layout will be as follows, v-container » v-layout » v-flex. Each part of the grid chain is a flex-box element. The final, v-flex, automatically sets its children to have flex: 1 1 auto.
For convenience reasons, these components automatically transform attributes into classes. Allowing you to write <v-layout pa-3 mb-2></v-layout> instead of <v-layout class="pa-3 mb-2"></v-layout>. The only exception are data attributes which are left as-is.
API
항목을 베이스라인(baseline)으로 정렬
항목들을 중앙으로 정렬
컨텐츠를 중앙으로 정렬
컨텐츠를 끝 쪽으로 정렬
컨텐츠를 좌우정렬(Align content to the space around).
Align content to the space between.
컨텐츠를 앞 쪽으로 정렬
항목들을 끝 쪽으로 정렬
항목들을 앞쪽으로 정렬
display 항목을 flex/inline-flex/block 등으로 설정. 형식)d-{타입}. 예)d-flex.
Make sure that col element height is filled with parent and child. 자식이 column 요소일 경우, 사파리/파이어폭스 에서 중요함
Removes viewport size breakpoints
Sets the gutter between grid list items ranging from 2px to 24px
컴포넌트의 DOM 아이디를 설정
Justify content to the center.
Justify content to the end.
Justify content to the space around.
Justify content to the space between.
Justify content to the start.
컴포넌트 태그를 커스텀 태그로
예제
Layout playground
Test the layout props in a simple playground.
오프셋 (Offset)
오프셋은 아직 보이지 않는 요소를 보완하거나 컨텐츠의 위치를 제어하는데 유용합니다. 중단점(Breakpoint) 처럼, 여러 크기에 대응하여 오프셋을 정할 수 있습니다. 이를 통해 필요에 따라 레이아웃을 정확하게 미세 조정할 수 있습니다.
순서 (Order)
그리드 항목의 순서를 제어할 수 있습니다. 오프셋처럼 다양한 화면크기에 대응하는 순서를 지정할 수 있습니다. 어떤 어플리케이션에도 적합한 특수화된 스크린 레이아웃을 디자인 하세요.
방향과 정렬 (Direction and Align)
방향과 정렬을 다양한 방법으로 지정합니다. 가능한 모든 flex-box api 는 직관적인 헬퍼 prop을 통해 가능합니다.
행과 열 중단점 (Row and column breakpoints)
해상도에 따라 동적으로 레이아웃을 변경하세요. (화면 크기를 바꾸면서 작은 중단 점에서 레이아웃이 "하나의 `행"으로 바뀌는 것을 관찰해보세요)
Grow and Shrink
Flex components can utilize the grow and shrink props to automatically fill available space in a row or shrink to only use the space needed for its contents.
중첩 그리드 (Nested grid)
다른 프레임워크들 처럼 다양한 커스텀 레이아웃을 구현하기 위해 그리드는 중첩될 수 있습니다.
유니크한 레이아웃 (Unique layouts)
Vuetify 그리드 시스템의 강력함과 유연함과 함께 놀라운 사용자 인터페이스를 만들 수 있습니다.
v-spacer
v-spacer 컴포넌트는 가능한 공간을 체우거나 두 컴포넌트 사이에 공간을 만들고 싶을때 유용합니다.
HTML 태그 (Html tags)
때로 레이아웃 항목에 section 이나 li 같은 특정 태그를 사용하고 싶을 경우