【Material-UI】按钮组：垂直按钮组详解

Material-UI 是一个广泛使用的 React UI 框架，提供了丰富的组件以提升开发效率和用户体验。本文将详细介绍 Material-UI 中的 ButtonGroup 组件的垂直排列（Vertical Group）功能。通过使用 orientation 属性，可以将按钮组从默认的水平排列改为垂直排列，这在特定的用户界面设计中非常实用。

一、按钮组概述

1. 组件介绍

ButtonGroup 组件用于将一组按钮整齐排列，形成一个统一的操作组。默认情况下，按钮组是水平排列的，但通过设置 orientation="vertical" 属性，可以将按钮组垂直排列，使其更符合特定布局需求。

2. 基本用法

以下是一个简单的示例，展示了如何使用 ButtonGroup 组件来创建垂直排列的按钮组：

import * as React from 'react';
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import Box from '@mui/material/Box';const buttons = [<Button key="one">One</Button>,<Button key="two">Two</Button>,<Button key="three">Three</Button>,
];export default function GroupOrientation() {return (<Boxsx={{display: 'flex','& > *': {m: 1,},}}><ButtonGroup orientation="vertical" aria-label="Vertical button group">{buttons}</ButtonGroup><ButtonGrouporientation="vertical"aria-label="Vertical button group"variant="contained">{buttons}</ButtonGroup><ButtonGrouporientation="vertical"aria-label="Vertical button group"variant="text">{buttons}</ButtonGroup></Box>);
}

在上述代码中，我们创建了三个不同样式的垂直按钮组，分别使用了不同的 variant 属性来展示不同的按钮样式。

二、垂直按钮组的应用场景

1. 导航菜单

垂直按钮组在侧边导航栏（Sidebar）中非常常见。它能够在有限的水平空间中提供多个选项，方便用户导航。

<ButtonGroup orientation="vertical" aria-label="Vertical navigation group"><Button>Dashboard</Button><Button>Settings</Button><Button>Profile</Button>
</ButtonGroup>

2. 表单操作

在表单提交界面中，垂直按钮组可以用于将提交、重置等操作按钮集中排列，便于用户操作。

<ButtonGroup orientation="vertical" aria-label="Form action group"><Button>Submit</Button><Button>Reset</Button>
</ButtonGroup>

3. 选项切换

在需要提供多个选项的场景中，如切换不同的视图或模式，垂直按钮组能够清晰地展示所有选项，便于用户选择。

<ButtonGroup orientation="vertical" aria-label="View mode group"><Button>List View</Button><Button>Grid View</Button><Button>Map View</Button>
</ButtonGroup>

三、按钮组的样式定制

1. 变体（Variants）

ButtonGroup 组件支持多种按钮样式变体，包括 "text"、"outlined" 和 "contained"。这些变体决定了按钮的外观，如是否有边框、填充背景色等。

• Text：无边框和背景色的按钮，适用于低优先级操作。
• Outlined：带边框但无填充背景的按钮，适用于次要操作。
• Contained：填充背景的按钮，适用于主要操作。

<ButtonGroup orientation="vertical" variant="outlined" aria-label="Outlined vertical button group"><Button>Option 1</Button><Button>Option 2</Button><Button>Option 3</Button>
</ButtonGroup>

2. 颜色（Colors）

ButtonGroup 组件支持多种颜色选择，包括 "primary"、"secondary"、"default" 等。可以根据主题或设计需求选择合适的颜色。

<ButtonGroup orientation="vertical" color="secondary" aria-label="Secondary color vertical button group"><Button>Home</Button><Button>About</Button><Button>Contact</Button>
</ButtonGroup>

四、垂直按钮组的优势

1. 空间利用

垂直按钮组在需要节省水平空间时非常有用，尤其是在移动端或需要侧边栏导航的场景中。

2. 可读性与易用性

垂直排列的按钮组能够清晰地展示所有选项，不容易被忽略，提升用户的操作体验。

3. 视觉一致性

在特定的 UI 设计中，垂直按钮组可以与其他垂直元素（如文本、列表）保持一致，提升整体视觉效果。

五、注意事项

1. 无障碍支持

在使用 ButtonGroup 时，应为每个按钮提供合适的 aria-label 属性，以确保使用屏幕阅读器的用户能够顺利使用。

2. 交互反馈

确保按钮组在不同的状态下（如悬停、点击）提供足够的交互反馈，以提升用户体验。

3. 布局调整

根据界面布局和用户需求，可以使用 sx 属性或自定义样式调整按钮组的间距、对齐方式等，确保按钮组在各个设备和分辨率下的良好表现。

六、总结

Material-UI 的 ButtonGroup 组件通过支持垂直排列，为开发者提供了更灵活的布局选项。垂直按钮组在导航菜单、表单操作和选项切换等场景中具有广泛的应用。通过合理设置按钮组的变体和颜色，可以提升界面的视觉效果和用户体验。希望本文对您在使用 ButtonGroup 组件时有所帮助，并能够在实际项目中充分发挥其潜力。

推荐：

• JavaScript
• react
• vue

---