【Material-UI】Button 组件中的基本按钮详解

news2024/11/15 15:53:04

文章目录

- 一、基本按钮变体
- - 1. 文本按钮（Text Button）
  - 2. 实心按钮（Contained Button）
  - 3. 轮廓按钮（Outlined Button）
- 二、应用场景与注意事项
- - 1. 使用场景
  - 2. 注意事项
- 三、总结

Material-UI 的 Button 组件是前端开发中常用的交互元素之一，提供了多种样式和功能选项。在这篇推文中，我们将详细介绍 Button 组件的基本用法及其三种主要变体：文本按钮（text）、实心按钮（contained）和轮廓按钮（outlined）。每种变体都有其独特的用途和设计理念，适用于不同的用户交互场景。

一、基本按钮变体

1. 文本按钮（Text Button）

文本按钮是默认的按钮变体，通常用于强调程度较低的操作。它们通常没有背景色，只有文字和点击效果，适合放置在对话框、卡片等地方。文本按钮通常用于次要操作，以减少对主要内容的干扰。

示例代码：

<Button variant="text">Text</Button>
<Button>Primary</Button>
<Button disabled>Disabled</Button>
<Button href="#text-buttons">Link</Button>

Primary: 这是一个常规的文本按钮，用于触发主要操作。
Disabled: 禁用状态的文本按钮，用户无法点击。
Link: 带有链接功能的文本按钮，点击后跳转到指定位置。

2. 实心按钮（Contained Button）

实心按钮具有较高的视觉强调度，通常用于需要突出显示的主要操作。实心按钮通过填充颜色和阴影来区分重要操作，适用于表单提交、确认操作等场景。

示例代码：

<Button variant="contained">Contained</Button>
<Button variant="contained" disabled>Disabled</Button>
<Button variant="contained" href="#contained-buttons">Link</Button>
<Button variant="contained" disableElevation>Disable elevation</Button>

Contained: 标准的实心按钮，强调主要操作。
Disabled: 禁用状态的实心按钮，用户无法点击。
Link: 带有链接功能的实心按钮，适合在按钮中嵌入链接。
Disable elevation: 取消按钮的阴影效果，使其平面化。

3. 轮廓按钮（Outlined Button）

轮廓按钮介于文本按钮和实心按钮之间，具有中等的视觉强调度。它们通常通过边框来描绘按钮的轮廓，适合用于次要操作或需要对比的场合。相比实心按钮，轮廓按钮的视觉效果更加轻盈；相比文本按钮，它们又具有更高的强调度。

示例代码：

<Button variant="outlined">Primary</Button>
<Button variant="outlined" disabled>Disabled</Button>
<Button variant="outlined" href="#outlined-buttons">Link</Button>

Primary: 标准的轮廓按钮，适合次要操作。
Disabled: 禁用状态的轮廓按钮，用户无法点击。
Link: 带有链接功能的轮廓按钮，点击后跳转到指定位置。