Toggle Button 切换按钮
切换按钮组件可用于对相关选项进行分组。
为了强调组合之间的关联，每一组切换按钮应该共享一个容器。 当给定切换按钮的 value 属性时，ToggleButtonGroup 就可以控制其子按钮的选择状态（selected state）。
唯一的选择
在唯一的选择中，选择一个选项就会取消其他的选择状态。
In this example, text justification toggle buttons present options for left, center, right, and fully justified text (disabled), with only one item available for selection at a time.
<ToggleButtonGroup size="small" {...control}>
{children}
</ToggleButtonGroup>
<ToggleButtonGroup {...control}>{children}</ToggleButtonGroup>
<ToggleButtonGroup size="large" {...control}>
{children}
</ToggleButtonGroup><ToggleButtonGroup
color="primary"
value={alignment}
exclusive
onChange={handleChange}
>
<ToggleButton value="web">Web</ToggleButton>
<ToggleButton value="android">Android</ToggleButton>
<ToggleButton value="ios">iOS</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>强制设置值
如果你想要至少一个按钮必须是强制选中状态的，那么你可以调整你的 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>自定义切换按钮
以下是自定义组件的一个示例。 您可以在 重写文档页面 中了解更多有关此内容的信息。