Botões de alternância
Os botões de alternância podem ser usados para agrupar opções relacionadas.
Para enfatizar grupos de botões de alternância relacionados, o grupo deve ter um contêiner em comum. O ToggleButtonGroup controla o estado selecionado de seus botões filhos através de sua propriedade value.
Seleção exclusiva
Botões de alternância para justificação ou alinhamento de texto apresentam opções como esquerda, direita, centro, distribuído e justificado, com apenas um item disponível para seleção por vez. Selecionar uma opção irá desmarcar qualquer outra.
Seleção múltipla
Opções lógicas agrupadas, como negrito, itálico e sublinhado, permitem a seleção de múltiplas opções.
<ToggleButtonGroup value={formats} onChange={handleFormat} aria-label="text formatting">
<ToggleButton value="bold" aria-label="bold">
<FormatBoldIcon />
</ToggleButton>
<ToggleButton value="italic" aria-label="italic">
<FormatItalicIcon />
</ToggleButton>
<ToggleButton value="underlined" aria-label="underlined">
<FormatUnderlinedIcon />
</ToggleButton>
<ToggleButton value="color" aria-label="color" disabled>
<FormatColorFillIcon />
<ArrowDropDownIcon />
</ToggleButton>
</ToggleButtonGroup><ToggleButtonGroup orientation="vertical" value={view} exclusive onChange={handleChange}>
<ToggleButton value="list" aria-label="list">
<ViewListIcon />
</ToggleButton>
<ToggleButton value="module" aria-label="module">
<ViewModuleIcon />
</ToggleButton>
<ToggleButton value="quilt" aria-label="quilt">
<ViewQuiltIcon />
</ToggleButton>
</ToggleButtonGroup>Forçar valor definido
Se você deseja forçar para pelo menos um botão estar ativo, você pode adaptar sua função handleChange.
const handleFormat = (event, newFormats) => {
if (newFormats.length) {
setFormats(newFormats);
}
};
const handleAlignment = (event, newAlignment) => {
if (newAlignment !== null) {
setAlignment(newAlignment);
}
};<ToggleButton
value="check"
selected={selected}
onChange={() => {
setSelected(!selected);
}}
>
<CheckIcon />
</ToggleButton>Botão de alternância customizado
Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de sobrescritas.