바닥 내비게이션 (Bottom nav)

v-bottom-nav 사이드바(sidebar)의 대용품입니다. 주로 모바일 장치에 사용하면 두가지 변형 "아이콘과 텍스트", 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.

API

v-bottom-nav
이름
absolute
디폴트
false
타입
boolean

요소를 절대 위치 시킴

이름
active.sync
디폴트
undefined
타입
number | string

현재 활성화된 버튼의 값이 저장됩니다. 만약 버튼에 지정된 값이 없다면, 버튼의 인덱스가 사용됩니다. 이 prop은 .sync 수식어(modifier)를 지원합니다.

이름
app
디폴트
false
타입
boolean

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

이름
color
디폴트
undefined
타입
string

컨트롤에 색상을 지정

이름
dark
디폴트
false
타입
boolean

다크 테마를 적용

이름
fixed
디폴트
false
타입
boolean

요소의 위치를 고정

이름
height
디폴트
56
타입
number | string

컴포넌트의 높이를 설정

이름
light
디폴트
false
타입
boolean

라이트 테마를 적용

이름
mandatory
디폴트
false
타입
boolean

Components.BottomNavigation.

이름
shift
디폴트
false
타입
boolean

활성화되지 않을 시 버튼 택스트 숨기기

이름
value
디폴트
undefined
타입
any

표시여부를 조절 (Controls visibility)

예제

Color & shift

배경색을 사용할때, light prop을 사용하기를 권장합니다. shift prop은 버튼이 활성화 되기 전에는 보이지 않게 합니다. v-btn의 텍스트는 <span> 태그로 감싸야 한다는 점을 기억하십시오.

토글 (Toggle)

다른 Vuetify 컴포넌트들 처럼, v-model 로 표시 상태를 조절할 수 있습니다.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore