Toolbar
Barra de ferramentas — uma fileira de controles relacionados, como os botões de formatação de um editor, que ocupa uma só parada do Tab. As setas andam entre eles.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no cliente.
import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarToggle, ToolbarLink, ToolbarInput, ToolbarSeparator } from "@camaleo/react";Anatomia
Um div com role="toolbar". Só um controle dele fica na ordem do Tab por vez; as setas mudam qual é. Um ToggleGroup dentro entra na mesma ordem quando os toggles são renderizados pelo ToolbarButton.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima. Clique num deles e use o Tab e as setas.
- nº 4821Padaria EstrelaR$ 932,00
- nº 4822Café AuroraR$ 460,00
- nº 4823Mercado SolR$ 2.063,75
Ações para as linhas selecionadas
Selecione pedidos e clique em Exportar. A busca fica ao lado da toolbar, não dentro: ela procura na tabela, não na seleção, então tem sua própria parada do Tab.
Paleta de ferramentas vertical
Com orientation="vertical", as setas para cima e para baixo movem o foco. As ferramentas são um ToggleGroup, então só uma fica pressionada.
Botões de ícone com nome
Todo botão só de ícone precisa de aria-label. Um tooltip com as mesmas palavras mostra esse nome também para quem enxerga.
O que não cabe vai para Mais
Estreite a janela. Abaixo de 420 px ficam só Responder e Responder a todos; o resto vai para o menu Mais em vez de quebrar a linha.
Desativado, mas alcançável
Botões desativados continuam na ordem das setas, então a pessoa encontra o Desfazer e ouve por que ele está desligado. Passe focusableWhenDisabled={false} para pular um deles.
Um campo dentro da toolbar
Digite um número de página e aperte Enter. O ToolbarInput entra na ordem das setas; dentro dele as setas movem o cursor e só saem do campo nas pontas do texto.
Links ao lado de botões
O ToolbarLink leva a outra página e o ToolbarButton age nesta; os dois dividem a mesma ordem das setas.
Em contexto
São pedaços inteiros de interface para copiar, no estilo que você escolheu.
- Contratos—
- nota-0326.pdf182 KB
- tabela-precos-abril.xlsx48 KB
- fachada.jpg2.4 MB
Boas práticas
Histórico, formatação e inserir ganham cada um seu ToolbarGroup com nome, separados por divisórias.
Negrito ao lado de Desfazer ao lado de Imagem: a pessoa varre a fileira inteira toda vez.
Negrito e Desfazer são reconhecidos pelo ícone. "Níveis" e "Vinheta", não.
O leitor de tela ouve os nomes, mas o resto das pessoas precisa adivinhar ou passar o mouse em cada um.
Props
O ToolbarToggle recebe pressed e é controlado: inverta o valor no onClick. O ToolbarButton recebe disabled e focusableWhenDisabled (padrão true). O ToolbarGroup recebe disabled e um aria-label. O ToolbarInput recebe as props de <input>; dê nome a ele com aria-label.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou na própria toolbar.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
/* alvos maiores no app de desenho */
.canvas-tools [data-slot="toolbar"] {
--cml-toolbar-btn-size: 2.5rem;
}Acessibilidade
- Dê nome a toda toolbar com aria-label ("Formatação do texto") e a todo ToolbarGroup ou ToggleGroup que reúna um conjunto ("Alinhamento").
- O ToolbarToggle marca aria-pressed, então o leitor de tela diz "Negrito, botão de alternância, pressionado". Mantenha o rótulo igual nos dois estados.
- Botões desativados continuam na ordem das setas com aria-disabled, então a pessoa ainda os encontra. Diga o motivo com aria-describedby.
- Dê nome ao ToolbarInput com aria-label. Um campo que serve a página toda, como uma busca, fica melhor ao lado da toolbar, com sua própria parada do Tab.