The v-bottom-navigation is an alternative to the sidebar. It is primarily used on mobile and comes in two variants, icons and text, and shift.

While the bottom nav is meant to be used with the vue-router, you can also programmatically control the active state of the buttons by using the active.sync prop. You can change a button's value by using its value attribute.

제공되는 Props, Slots, Events 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.

간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.

The color prop applies a color to the background the bottom navigation. It is recommended to use the light and dark props to properly contrast text color.

If v-bottom-navigation has grow property, buttons within it grow to fill available space.

The horizontal prop, places nav text next to the icon as appose to beneath it.

The shift prop will hide the button text until active. For this to work, v-btn text is required to be wrapped in a <span> tag.

The display state of v-bottom-navigation can be toggled using the input-value prop. You can also control the currently active button using v-model.

Hide-on-scroll hides v-bottom-navigation when target element is scrolled.

scroll-threshold property allows you to customize the threshold you can scroll before v-bottom-navigation disappears.

더 읽을 준비 되었나요? 그렇다면 아래 설명서를 더 읽어보세요!

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!