바닥 내비게이션 (Bottom nav)

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

사용법

바닥 네비게이션(bottom nav)은 뷰-라우터(vue-router)와 함께 사용하도록 설계되어 있으며 active.sync prop을 사용하여 프로그램적으로 버튼의 활성화 상태를 조절할 수 있습니다. 버튼의 값은 value 속성(attribute)으로 바꿀 수 있습니다.


API

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

요소를 절대 위치 시킴

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

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

이름
app
디폴트
false
타입
boolean

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

이름
color
디폴트
undefined
타입
string

컨트롤에 색상을 지정

이름
fixed
디폴트
false
타입
boolean

요소의 위치를 고정

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

컴포넌트의 높이를 설정

이름
mandatory
디폴트
false
타입
boolean
이름
shift
디폴트
false
타입
boolean

Hide text of button when not active

이름
value
디폴트
undefined
타입
any

표시여부를 조절 (Controls visibility)

예제

Color & shift

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


토글 (Toggle)

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