跳转到内容

Button 按钮

只需轻点按钮,用户就可以触发动作或做出选择。

按钮可以传送了用户可以采取的行动。 他们通常直接放置在您的用户界面中,例如:

  • Dialogs 对话框
  • Modal windows 模态窗口
  • Forms 表单
  • Cards 卡片
  • Toolbars 工具栏

实心按钮

实心按钮 表示高度的强调,你根据它们的立体效果和填充颜色来区分彼此。 它们用于触发应用程序所具有的主要功能。

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

你也可以使用属性 disableElevation 属性来消除实心按钮的立体效果。

<Button variant="contained" disableElevation>
  Disable elevation
</Button>

文本按钮

文本按钮 通常用于不太明显的操作,包括那些位于:

  • 在 dialogs 对话框中的
  • 在 cards 卡片中的

在卡片中,文本按钮有助于强调卡片的内容。

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

描边按钮

描边按钮 表示中等程度的强调。 该按钮包含重要的操作,但不应该成为应用程序中的主要操作。

你也可以将描边按钮作为比实心按钮次要一点的替代方案,或者用来作为比文本按钮重要一点的展示。

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

Handling clicks 处理点击

所有组件都接受 onClick 处理程序,该处理程序被应用到根 DOM 元素中。

<Button
  onClick={() => {
    alert('clicked');
  }}
>
  点击我
</Button>

请注意,文档里组件的 API 部分 避免 提到原生的属性(还是有很多)。

Upload button 上传按钮

<label htmlFor="contained-button-file">
  <Input accept="image/*" id="contained-button-file" multiple type="file" />
  <Button variant="contained" component="span">
    Upload
  </Button>
</label>
<label htmlFor="icon-button-file">
  <Input accept="image/*" id="icon-button-file" type="file" />
  <IconButton color="primary" aria-label="upload picture" component="span">
    <PhotoCamera />
  </IconButton>
</label>

尺寸

您想要一个大一点或者小一点的按钮吗? 我们提供了 size 这个属性供您调整。

带有 icons(图标)和 label(标签)的按钮

因为相比纯文本来说用户对图标更敏感,所以有些时候你可能希望为某些按钮设置图标,以增强应用程序的用户体验。 例如,如果您有删除按钮,则可以使用垃圾箱图标对其进行标记。

<Button variant="outlined" startIcon={<DeleteIcon />}>
  Delete
</Button>
<Button variant="contained" endIcon={<SendIcon />}>
  Send
</Button>

图标按钮

图标按钮通常位于应用栏和工具栏中。

图标也适用于允许选择单个选项的切换按钮或取消选择,例如向项目添加或删除星标。

<IconButton aria-label="delete">
  <DeleteIcon />
</IconButton>
<IconButton aria-label="delete" disabled color="primary">
  <DeleteIcon />
</IconButton>
<IconButton color="secondary" aria-label="add an alarm">
  <AlarmIcon />
</IconButton>
<IconButton color="primary" aria-label="add to shopping cart">
  <AddShoppingCartIcon />
</IconButton>

Customized Buttons(自定义按钮)

你可以参考以下一些例子来自定义组件。 您可以在 重写文档页面 中了解更多有关此内容的信息。

👑 如果您还在寻找灵感,您可以看看 MUI Treasury 特别定制的一些例子

载入按钮(Loading buttons)

加载按钮可以显示加载状态并且禁用与此交互。

<LoadingButton loading variant="outlined">
  Submit
</LoadingButton>
<LoadingButton loading loadingIndicator="Loading..." variant="outlined">
  Fetch data
</LoadingButton>
<LoadingButton
  loading
  loadingPosition="start"
  startIcon={<SaveIcon />}
  variant="outlined"
>
  Save
</LoadingButton>

切换此切换按钮,可以查看不同状态之间的转换。

组合按钮

文本按钮,包含按钮,浮动操作按钮和图标按钮构建在同一组件之上:ButtonBase。 你可以利用这种低级组件来构建自定义交互功能。

Third-party routing library(第三方路由库)

一个常见的用例是使用按钮触发导航到新页面的操作。 ButtonBase 组件提供了 component 属性来处理此用例。 然而,一些特定 ButtonBase 的代码需要所给组件的 DOM 节点。 在组件上附加一个 ref,并且预期此组件能够将这个 ref 传递到下层 DOM 节点,通过这样的方法可以实现。 鉴于我们的许多交互式组件都依赖于 ButtonBase,您可以在任何情况都能受益于它。

这有一个与 react-router 交互的例子

设计局限

Cursor 鼠标悬浮的禁用

在 disabled 不可用的按钮上,ButtonBase 组件会有这个设置:pointer-events: none; ,这样一来不可用样式的鼠标悬浮就不会出现。

若您希望使用 not-allowed, 您有以下两种选择:

  1. 仅使用 CSS。 您可以移除作用在 <button> 元素上的指针事件的样式:
.MuiButtonBase-root:disabled {
  cursor: not-allowed;
  pointer-events: auto;
}

然而:

  1. 改变 DOM。 您可以这样封装按钮:
<span style={{ cursor: 'not-allowed' }}>
  <Button component={Link} disabled>
    disabled
  </Button>
</span>

这个方法能支持任何元素,例如,一个 <a> 元素。