The v-navigation-drawer component is what your users will utilize to navigate through the application. The navigation-drawer is pre-configured to work with or without vue-router right out the box. For the purpose of display, some examples are wrapped in a v-card element. Within your application you will generally place the v-navigation-drawer as a direct child of v-app.
If you are using v-navigation-drawer with app property enabled, you don't need to use absolute prop as in examples.
제공되는 Props, Slots, Events 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.
Applies position: absolute to the component.
해당 컴포넌트를 애플리케이션 레이아웃의 일부로 지정합니다. content sizing을 동적으로 조정하는데 사용됩니다. 이 prop을 사용하는 컴포넌트는 기능을 적절히 수행하기 위해 v-main의 바깥에 위치해야 합니다. application page에서 레이아웃에 대한 더 많은 내용을 확인할 수 있습니다. Note: 이 prop은 레이아웃 요소에 자동으로 position: fixed를 적용합니다. absolute prop을 사용하면 덮어쓸 수 있습니다.
휴대용 기기의 화면 아래에서 올라오도록 합니다
A clipped drawer rests under the application toolbar
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page.
Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes.
모바일과 데스크탑에서 서랍의 크기가 재조정 될 경우 자동으로 서랍을 열거나 닫습니다.
라우트가 변경될때 서랍을 열지 않습니다.
Collapses the drawer to a mini-variant until hovering with the mouse
Applies position: fixed to the component.
A floating drawer has no visible container (no border-right)
Sets the height of the navigation drawer
Hides the display of the overlay.
Applies the light theme variant to the component.
밀집된 탐색 서랍 너비. .sync 변경자 사용 가능. 서랍을 클릭하면 서랍이 다시 열림
mini 프롭이 활성화 될때, 너비를 지정
Sets the designated mobile breakpoint for the component. This will apply alternate styles for mobile devices such as the temporary prop, or activate the bottom prop when the breakpoint value is met. Setting the value to 0 will disable this functionality.
Sets the overlay color.
Sets the overlay opacity.
스크린 크기와 상관없이 서랍을 보이게 만듬
탐색 서랍을 오른쪽에 위치
Specifies a v-img as the component's background.
모든 자동 상태 기능(크기변화, 모바일, 라우트)을 제거하고 서랍의 상태를 수동으로 제어
Specify a custom tag used on the root element.
어플리케이션 위에 자리하고, 배경을 어둡게 가림.
모바일 터치 기능을 비활성화
Controls whether the component is visible or hidden.
Sets the width for the component.
A slot at the bottom of the drawer
The default Vue slot.
Used to modify v-img properties when using the src prop
{
height: string
src: string | srcObject
}A slot at the top of the drawer
연결된 모델을 업데이트 (The updated bound model)
booleanEmits event object when transition is complete.
objectThe mini-variant.sync event
boolean1px !default;16 !default;간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.
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.
탐색 서랍은 카드안에 위치해서 컨탠츠 배경 위로 떠 있을 수 있습니다.
When using the mini-variant prop, the drawer will shrink (default 56px) and hide everything inside of v-list except the first element. In this example we use the .sync modifier that allows us to tie the expanding/contracting of the drawer programmatically.
임시 서랍은 어플리케이션 위에 위치하고, 백그라운를 어둡게 가리는 현수막(scrim)을 사용합니다. 이 서랍의 동작방식은 모바일에서의 영구적 서랍을 흉내낸 것입니다. 서랍의 바깥을 클릭하면 서랍이 닫힙니다.
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.
Places the component in mini-variant mode and expands once hovered. Does not alter the content area. To have content area respond to expand-on-hover bind mini-variant.sync to a boolean. Width can be controlled with the mini-variant-width property.
Apply a custom background to your drawer. If you need to customize v-img's properties you can use the img slot.
In this example we define a custom width to accommodate our nested drawer. Using v-row we ensure that the drawer and list stack horizontally next to each other.
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-breakpoint is met.
더 읽을 준비 되었나요? 그렇다면 아래 설명서를 더 읽어보세요!