Vuetify 2.x 버전으로 레이아웃 잡기

#2070

Vutify 2.x 레이아웃

지난번에 Vuetify 프로젝트 이후로는 아마 하지 않으리라 예측했었는데.. 두 번째 Vuetify 프로젝트를 진행하고 있습니다. 지난번에는 1.x 였는데 2.x대로 업그레이드가 되었네요. 일단 기본적인 레이아웃을 구성하는 방법이 바뀌었습니다. 이번 포스팅에서는 기본적인 내용을 포함해서 다음 내용을 정리해 보려 합니다.

• 기본 블록
• Button Group, Align
• Expansion Panel

기본 블록

1.x대에서는 다음과 같은 형식으로 블록을 지정해주었습니다.

이것이 2.x로 올라가면서 바뀌었습니다.

우선 좌우로 정렬시킬 경우입니다.

See the Pen Vuetify layout 01 by minamiland (@minamiland) on CodePen.

다음은 기본적인 정렬 방식입니다.

See the Pen Vuetify layout 02 by minamiland (@minamiland) on CodePen.

기본적으로 Vuetify에서 flex속성을 지원하니까 명시적으로 바꾼 것 같은데요 테스트를 해보니 기존의 v-layout, v-flex속성은 그대로 사용 가능한 것 같습니다. 가이드에서도 2.x에서는 사용하지 말라고 하니 따라야겠죠? 예제를 보시면 아시겠지만, v-row에는 기본적으로 상하로 margin이 잡혀 있습니다. 일반적으로 p에 사용되는 상하 여백에 구분을 주기 위한 차원에서 적용된 방식이라 생각됩니다. 이 margin을 초기화시키기 위해서는 no-gutters속성을 적용해 주면 됩니다.

Button Group, Align

버튼을 배치시킬 경우의 기본 레이아웃입니다. v-row에 class="my-6" 등을 추가해서 버튼 그룹의 상하로 여백을 줄 수도 있습니다. 이 부분에서 상하로 다르게 주는 이유는 Vuetify로 작업하고 v-row로 그룹화 한 뒤 상하 영역에 생기는 margin값이 높은 쪽으로 상쇄되어야 하는데 아무래도 flex 처리되고 블록으로 공간이 잡혀서 자연스럽게 상쇄되지 않고 양쪽으로 각각 magin이 잡히는 경우가 있습니다. 이때 콘텐츠 간의 여백을 조정하기 위해 사용합니다.

정렬에는 여러 방법이 있겠지만, 전 이번 프로젝트에서 다음과 같은 방법을 사용하고 있는데요 다른 방법도 있지만 다른 컴포넌트에서도 작업 가능하도록 패턴을 정의해 두고 싶어서 이 방법을 택하게 되었습니다.

See the Pen Vuetify layout 03 by minamiland (@minamiland) on CodePen.

양쪽으로 정렬시켜야 하는 경우도 있는데 여기선 취향에 따라 작업하면 좋을 것 같습니다. 첫 번째 방법은 상기 정렬 방식에서 v-spacer만 사용하는 방법이죠.

See the Pen Vuetify layout 03-2 by minamiland (@minamiland) on CodePen.

두 번째는 class를 사용하는 방법입니다.

See the Pen Vuetify layout 03-1 by minamiland (@minamiland) on CodePen.

Expansion Panel

우선 기본적으로 확장 패널 사용 시 기본 템플릿을 사용하면 됩니다.

샘플입니다.

See the Pen Vuetify layout 04 by minamiland (@minamiland) on CodePen.

다음 방법은 Vue 공식 채널에서 제공하는 방식을 적용시켜본 방법으로 열기, 닫기 버튼을 새로운 디자인에 적용시키기 위해 시험해 본 방법입니다.

샘플입니다.

See the Pen Vuetify layout 05 by minamiland (@minamiland) on CodePen.

기본적인 레이아웃 잡기 예제에 대한 정리였습니다. 몇 년 전에 이미 뷰를 접했음에도 아직도 입문, 초급 수준에 머물러 있는 것을 보니 정말 문제가 많은 것 같습니다...