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. It is common to pair drawers with the v-list component using the nav property.

API

예제

Colored drawer

Navigation drawers can be customized to fit any application's design. Here we apply a custom background color and an appended content area using the append slot.

Permanent floating drawer

By default, a navigation drawer has a 1px right border that separates it from content. In this example we want to detach the drawer from the left side and let it float on its own. The floating property removes the right border (or left if using right).

미니 (Mini)

탐색 서랍은 또한 vini-variant.sync prop을 사용하여 제어하는 미니-변형을 가지고 있습니다.

임시 (Temporary)

임시 서랍은 어플리케이션 위에 위치하고, 백그라운를 어둡게 가리는 현수막(scrim)을 사용합니다. 이 서랍의 동작방식은 모바일에서의 영구적 서랍을 흉내낸 것입니다. 서랍의 바깥을 클릭하면 서랍이 닫힙니다.

Right positioned

Navigation drawers can also be positioned on the right side of your application (or an element). This is also useful for creating a side-sheet with auxillary information that may not have any navigation links. When using RTL you must explicitly define right for your drawer.

Expand on hover

Places the component in mini-variant mode and expands once hovered. Does not alter the content area. Width can be controlled with the mini-variant-width property.

Backgrounds

Apply a custom background to your drawer. If you need to customize v-img's properties you can use the img slot.

Combined drawers

In this example we define a custom width to accommodate our nested drawer. Using v-layout we ensure that the drawer and list stack horizontally next to each other.

Bottom drawer

Using the bottom prop, we are able to relocate our drawer on mobile devices to come from the bottom of the screen. This is an alternative style and only activates once the mobile-break-point is met.

Edit this page | language on Github
Vuetify
상점For Enterprise