탐색 서랍 (Navigation drawer)
v-navigation-drawer 컴포넌트는 사용자가 어플리케이션 내에서 탐색(navigate) 할 때 활용할 수 있습니다. 탐색 서랍은 (vue-router 를 사용하거나 사용하지 않고) 바로 쓸 수 있도록 미리 설정되어 있습니다.
사용법
The navigation drawer is primarily used to house links to the pages in your application. Using null as the starting value for its v-model will initialize the drawer as closed on mobile and as open on desktop.
API
요소를 절대 위치 시킴
컴포넌트를 어플리케이션 레이아웃은 한 부분으로 지정. 컨텐츠 크기를 동적으로 맞추는데 사용됨
A clipped drawer rests under the application toolbar
다크 테마를 적용
모바일과 데스크탑에서 서랍의 크기가 재조정 될 경우 자동으로 서랍을 열거나 닫습니다.
라우트가 변경될때 서랍을 열지 않습니다.
요소의 위치를 고정
A floating drawer has no visible container (no border-right)
컴포넌트의 높이를 설정
오버레이를 감춥니다. (Hide the display of the overlay)
라이트 테마를 적용
밀집된 탐색 서랍 너비. .sync 변경자 사용 가능. 서랍을 클릭하면 서랍이 다시 열림
mini 프롭이 활성화 될때, 너비를 지정
모바일 중단점 설정
스크린 크기와 상관없이 서랍을 보이게 만듬
탐색 서랍을 오른쪽에 위치
모든 자동 상태 기능(크기변화, 모바일, 라우트)을 제거하고 서랍의 상태를 수동으로 제어
어플리케이션 위에 자리하고, 배경을 어둡게 가림.
모바일 터치 기능을 비활성화
표시여부를 조절 (Controls visibility)
컨텐츠의 폭을 설정
예제
색깔이 있는 서랍 (Colored drawer)
탐색 서랍은 어떤 어플리케이션 디자인에도 적합하게 커스터마이즈 될 수 있습니다. 어떤 컴포넌트든 서랍 안에 사용할 수 있는데 주로 사용하게 되는 컴포넌트는 v-list 와 모든 list 의 자식 컴포넌트, 그리고 v-divder일 겁니다.
영구적인 떠 있는 서랍 (Permanent floating drawer)
탐색 서랍은 카드안에 위치해서 컨탠츠 배경 위로 떠 있을 수 있습니다.
아바타 (Avatars)
서랍 안에 v-list 를 사용할 수 있기 때문에, 커스터마이즈 된 대시보드를 쉽게 만들 수 있습니다.
미니 (Mini)
탐색 서랍은 또한 vini-variant.sync prop을 사용하여 제어하는 미니-변형을 가지고 있습니다.
임시 (Temporary)
임시 서랍은 어플리케이션 위에 위치하고, 백그라운를 어둡게 가리는 현수막(scrim)을 사용합니다. 이 서랍의 동작방식은 모바일에서의 영구적 서랍을 흉내낸 것입니다. 서랍의 바깥을 클릭하면 서랍이 닫힙니다.
다크 테마 (Dark theme)
Vuetify 는 또한 어두운(dark) 어플리케이션 테마를 지원합니다. 하지만 기본테마를 사용하는 컴포넌트의 설정을 덮어쓰지 않기 때문에 일부 경우 수동으로 어두운 테마 액센트(accent)를 설정해야 할 수도 있습니다.
Combined drawers
Drawers are flexible and are easily adapted to any use-case.
Nested lists
List tiles can be nested a second level for even more options for your navigation