Bottom nav
O v-bottom-nav é uma alternativa à barra lateral. É usado principalmente em dispositivos móveis e tem duas variações: ícones e textos, e deslocamento.
Utilização
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
Position the element absolutely
Mantém o valor do botão atualmente ativo. Se o botão não tiver um valor atribuído, seu índice será usado. Esta propriedade suporta o modificador .sync.
Designa o componente como parte do layout do aplicativo. Usado para ajustar dinamicamente o dimensionamento de conteúdo
Components.BottomNavigation.
Components.BottomNavigation.
Position the element fixed
Define a altura do componente
Components.BottomNavigation.
Components.BottomNavigation.
Oculta o texto do botão quando não está ativo
Controla visibilidade
Exemplos
Cor e deslocamento
Ao usar um fundo colorido, recomenda-se usar a propriedade light. A propriedade shift esconderá o texto do botão até estar ativo. Tenha em mente que o texto de v-btn é necessário para ser envolvido em uma tag <span>.
Alternância
Assim como em outros componentes do Vuetify, você pode controlar o estado da exibição com v-model.