탐색 서랍 (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

v-navigation-drawer
이름
absolute
디폴트
false
타입
boolean

요소를 절대 위치 시킴

이름
app
디폴트
false
타입
boolean

컴포넌트를 어플리케이션 레이아웃은 한 부분으로 지정. 컨텐츠 크기를 동적으로 맞추는데 사용됨

이름
clipped
디폴트
false
타입
boolean

A clipped drawer rests under the application toolbar

이름
dark
디폴트
false
타입
boolean

다크 테마를 적용

이름
disable-resize-watcher
디폴트
false
타입
boolean

모바일과 데스크탑에서 서랍의 크기가 재조정 될 경우 자동으로 서랍을 열거나 닫습니다.

이름
disable-route-watcher
디폴트
false
타입
boolean

라우트가 변경될때 서랍을 열지 않습니다.

이름
fixed
디폴트
false
타입
boolean

요소의 위치를 고정

이름
floating
디폴트
false
타입
boolean

A floating drawer has no visible container (no border-right)

이름
height
디폴트
100%
타입
number | string

컴포넌트의 높이를 설정

이름
hide-overlay
디폴트
false
타입
boolean

오버레이를 감춥니다. (Hide the display of the overlay)

이름
light
디폴트
false
타입
boolean

라이트 테마를 적용

이름
mini-variant
디폴트
false
타입
boolean

밀집된 탐색 서랍 너비. .sync 변경자 사용 가능. 서랍을 클릭하면 서랍이 다시 열림

이름
mini-variant-width
디폴트
80
타입
number | string

mini 프롭이 활성화 될때, 너비를 지정

이름
mobile-break-point
디폴트
1264
타입
number | string

Sets the designated mobile breakpoint

이름
permanent
디폴트
false
타입
boolean

스크린 크기와 상관없이 서랍을 보이게 만듬

이름
right
디폴트
false
타입
boolean

탐색 서랍을 오른쪽에 위치

이름
stateless
디폴트
false
타입
boolean

모든 자동 상태 기능(크기변화, 모바일, 라우트)을 제거하고 서랍의 상태를 수동으로 제어

이름
temporary
디폴트
false
타입
boolean

어플리케이션 위에 자리하고, 배경을 어둡게 가림.

이름
touchless
디폴트
false
타입
boolean

모바일 터치 기능을 비활성화

이름
value
디폴트
undefined
타입
any

표시여부를 조절 (Controls visibility)

이름
width
디폴트
300
타입
number | string

The width of the content

예제

색깔이 있는 서랍 (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

Edit this page | language on Github