Toolbar (Barra de ferramentas)
O componente v-toolbar é fundamental para qualquer interface, pelo fato de geralmente ser a principal fonte de navegação do site. O componente barra de ferramentas (toolbar) trabalha bem em conjunto com o navigation drawer para esconder links e também apresenta um ativador para abrir o sidebar (menu lateral) em dispositivos móveis.
Utilização
Uma barra de ferramentas (toolbar) é um container flexível que pode ser utilizado em diversas maneiras. Por padrão, a barra de ferramentas possui 64px de altura em desktops, 56px de altura em dispositivos móveis na vertical (modo retrato) e 48px de altura em dispositivos móveis na horizontal (modo paisagem). Existe um número de componentes de auxílio disponíveis para serem usados com a barra de ferramentas. Estes são v-toolbar-side-icon, v-toolbar-title e v-toolbar-items.
API
Components.Toolbars.
Designa o componente como parte do layout do aplicativo. Usado para ajustar dinamicamente o dimensionamento de conteúdo
Herda a border radius quando usada dentro de um v-card
Designa que as aplicações v-navigation-drawer são cortados no lado esquerdo da barra de ferramentas (toolbar)
Designa que as aplicações v-navigation-drawer são cortados no lado direito da barra de ferramentas (toolbar)
Components.Toolbars.
Components.Toolbars.
Reduz a altura do conteúdo e extensão da barra de ferramentas (toolbar)
Força a barra de ferramentas (toolbar) a gerar uma extensão sem a utilização de um slot
Components.Toolbars.
Components.Toolbars.
Remove a box-shadow da barra de ferramentas (toolbar)
Faz com que a barra de ferramentas (toolbar) flutue em linha
Designa uma altura específica para a barra de ferramentas (toolbar)
Components.Toolbars.
Components.Toolbars.
Manualmente aplica a funcionalidade scroll-off-screen
Aumenta a altura do conteúdo e extensão da barra de ferramentas (toolbar)
Irá deslocar a barra de ferramentas (toolbar) para fora da tela ao rolar para baixo
Atribui o alvo da rolagem para o scroll-off-screen
A quantidade da distância da rolagem para baixo antes da barra de ferramentas (toolbar) usar scroll-off-screen
Components.Toolbars.
Components.Toolbars.
Exemplos
Barra de aplicativos
A barra de aplicativos é a principal barra de ferramentas (toolbar) de sua aplicação. Ela pode conter ícones, menus, entre outros.
Barra de aplicativos com itens
Utilizando o componente v-toolbar-items, você pode usar os componentes v-btn normalmente para criar uma barra de aplicativos com itens. Não se esqueça de aplicar a propriedade flat para cada botão.
Barra de aplicativos com extensão
Uma extensão pode ser usada para criar uma barra mais proeminente. Se um título for colocado dentro da entesão, ela irá ser deslocada automaticamente para a direita para combinar a localização normal que seria na barra principal.
Largura da coluna com hierarquia
Barras de ferramentas (toolbars) possuem 2 variantes, clara e escura. Barras de ferramentas claras possuem botões de cor escura e texto escuro, ao passo que barras de ferramentas escuras possuem botões de cor branca e texto branco.
Barra de ferramentas flexível (flexible toolbar) e barra de ferramentas cartão (toolbar card)
Com poucos estilos customizados, você pode facilmente criar suas incríveis interfaces de usuários.
Flutuante com pesquisa
Uma barra de ferramentas (toolbar) flutuante pode ser colocada sobre o conteúdo que ela referencia.
Variações
Uma barra de aplicativos (app-bar) possui múltiplas variações que podem ser aplicadas com temas e classes de auxílio. Estes variam entre temas claros e escuros, coloridos e transparentes.
Barras de ferramentas proeminentes (prominent toolbars)
Barras de ferramentas proeminentes adicionam um slot onde você pode colocar elementos dentro da área extendida. Haverá uma trava para 64px de altura no conteúdo e áreas de extensão.
Barras de ferramentas densas (dense toolbars)
Barras de ferramentas densas têm sua altura reduzida para 48px. Isto também é o comportamento padrão para dispositivos móveis na horizontal (modo paisagem).
Técnicas de rolagem
Uma barra de ferramentas (toolbar) pode ser escondida ao rolar a tela. Aqui nós demonstramos como você pode especificar o alvo da rolagem ('window' é o padrão). Tenha em mente que para este exemplo, existe uma marcação especial que não será requerida em sua aplicação.
Barra de aplicativos com menu
Você pode adicionar um menu de componentes a uma barra de ferramentas (toolbar).
Barras do sistema - status/janela
Barras do sistema (system bars) são úteis para ícones de notificação em dispositivos móveis e desktop. Para exemplos ao vivo, vá até os layouts pré-definidos.