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 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.
Applies position: absolute to the component.
The class applied to a v-btn when activated.
해당 컴포넌트를 애플리케이션 레이아웃의 일부로 지정합니다. content sizing을 동적으로 조정하는데 사용됩니다. 이 prop을 사용하는 컴포넌트는 기능을 적절히 수행하기 위해 v-main의 바깥에 위치해야 합니다. application page에서 레이아웃에 대한 더 많은 내용을 확인할 수 있습니다. Note: 이 prop은 레이아웃 요소에 자동으로 position: fixed를 적용합니다. absolute prop을 사용하면 덮어쓸 수 있습니다.
Changes the background-color for the component.
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.
Applies position: fixed to the component.
Sets the height for the component.
Will transition the navigation off screen when scrolling up.
Controls whether the component is visible or hidden. Supports the .sync modifier.
Applies the light theme variant to the component.
Forces a value to always be selected (if available).
Sets the maximum height for the component.
Sets the maximum width for the component.
Sets the minimum height for the component.
Sets the minimum width for the component.
Designates the element to target for scrolling events. Uses window by default.
The amount of scroll distance down before hide-on-scroll activates.
Holds the value of the currently active v-btn. If the button has no value supplied, its index will be used instead..
Sets the width for the component.
The default Vue slot.
The value of currently selected button. If no value is assigned, will be the current index of the button.
anyThe event used for input-value.sync.
string | numbermap-deep-get($headings, 'caption', 'size') !default;168px !default;80px !default;calc(100% - 22px) !default;calc(100% - 12px) !default;간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.
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.