Button groups 按钮组组件 按钮组组件可用于对相关按钮进行分组。
The buttons can be grouped by wrapping them with the ButtonGroup component. They need to be immediate children. 它们必须是直接的子组件。 They need to be immediate children.
< ButtonGroup variant = " contained" aria-label = " outlined primary button group" > < Button > </ Button > < Button > </ Button > < Button > </ Button > </ ButtonGroup > Press Enter to start editing
Copy (Or Ctrl + C) All the standard button variants are supported.
< ButtonGroup variant = " outlined" aria-label = " outlined button group" > < Button > </ Button > < Button > </ Button > < Button > </ Button > </ ButtonGroup > < ButtonGroup variant = " text" aria-label = " text button group" > < Button > </ Button > < Button > </ Button > < Button > </ Button > </ ButtonGroup > Press Enter to start editing
Copy (Or Ctrl + C) 大小和颜色 size 和 color 属性可以用于控制按钮组的外观。
One Two Three
One Two Three
One Two Three
< ButtonGroup size = " small" aria-label = " small button group" > { buttons}
</ ButtonGroup > < ButtonGroup color = " secondary" aria-label = " medium secondary button group" > { buttons}
</ ButtonGroup > < ButtonGroup size = " large" aria-label = " large button group" > { buttons}
</ ButtonGroup > Press Enter to start editing
Copy (Or Ctrl + C) Vertical group 垂直组 可以使用 orientation 属性让按钮组垂直排列。
One Two Three
One Two Three
One Two Three
按钮组组件也可用于创建分体式按钮。 下拉列表可以改变其按钮 action（如此例所示），或者被用于立即触发一个与下拉列表相关的 action。
Disabled elevation 禁用立体效果（elevation） 你也可以使用属性 disableElevation 属性来消除实心按钮的立体效果。
< ButtonGroup disableElevation
variant = " contained" aria-label = " Disabled elevation buttons" > < Button > </ Button > < Button > </ Button > </ ButtonGroup > Press Enter to start editing
Copy (Or Ctrl + C)