领域驱动设计精简版_学习资料设计精简版：按钮

领域驱动设计精简版

按钮是任何功能网站的组成部分（ 设计师喜欢它们！ ），用户在网络上的操作通常以单击按钮开始和结束。 例如，在Google Mail中，我们通过单击“ 撰写”按钮来创建新电子邮件。 我们可能还会在途中单击其他一些按钮来自定义电子邮件。 最后，我们单击发送按钮以发送电子邮件。 在我们的学习材料设计精简版（MDL）系列的这一部分中，我们将研究 按钮组件。

MDL中的Buttons组件本质上是<button>或<a>元素的视觉增强，以符合Material Design美学要求。 根据规格，按钮有四种类型

• 平面
• 上调
• 浮动
• 图标

我们将研究如何实现这些功能以及何时最适合使用哪个按钮。

提醒一下，请确保文档head列出了MDL样式表和JavaScript。 您可以使用“ MDL主题”构建器来自定义将应用于组件的配色方案。

<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" />
<script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script>

设置完毕后，我们可以部署 按钮组件-从平面类型开始。

平面按钮

创建一个MDL按钮非常简单。 我们可以使用button元素，具有submit类型的input元素或锚标记来创建按钮。

<button>Submit</button>
<!-- or -->
<input type="text" type="submit" title="Submit">
<!-- or -->
<a href="#">Submit</a>

将mdl-button类添加到这些元素以应用MDL按钮样式。

<button class="mdl-button">Submit</button>

在下面的演示中，我们创建了一个扁平按钮，其默认颜色设置为黑色。

通过包含以下修饰符之一，可以自定义按钮文本的颜色   类。

• mdl-button--colored添加此类以将原色应用于按钮文本。
• mdl-button--accent或者，添加此类以应用重音颜色。

参照主要样式表名称（material.teal-red.min.css），我们的主要颜色是“ teal”，而“ red”将被用作强调色或辅助颜色（在下面的电子邮件输入中输入文字以查看这些颜色生效）。

扁平按钮是MDL中最基本的按钮类型。 在需要直观地执行某项操作的情况下（例如在弹出对话框，Card组件或“登录”或“注册”表单中），它会最好地工作。

但是，由于其外观，不建议在正文中使用平面按钮。 如上所示， 扁平按钮显示为常规文本。 而且，由于它乍一看没有明确目前常见的按钮的特性，扁平按钮不会传达启示 ，大多数用户将识别为一个可点击的按钮。

当扁平按钮不合适时，请考虑使用凸起的按钮类型。

升起的按钮

凸起的按钮描绘了按钮的典型特征。 它是带有阴影的正方形，可以产生凸起的效果。 要创建一个，我们从一个button元素开始，该元素附加了mdl-button类。

<button class="mdl-button">Submit</button>

然后将mdl-button--raised类添加到元素。 之前，也可以通过添加mdl-button--colored或mdl-button--accent类）来定制凸起的按钮。

<button class="mdl-button mdl-button--raised">Submit</button>
<button class="mdl-button mdl-button--raised mdl-button--colored">Submit</button>
<button class="mdl-button mdl-button--raised mdl-button--accent">Submit</button>

在这里，我们提出了带有默认，主色和强调色作为按钮背景的按钮。

凸起的按钮突出显示，这使它在用户的注意力放在首位时很合适。 例如，它可以应用于英雄部分中的号召性用语按钮，订阅表单中的提交按钮或产品页面中的“立即购买”按钮。

注意 ：应用凸起按钮时请记住层次结构。 在带有阴影的内容层中使用凸起的按钮（如弹出对话框），可能会使内容过于忙碌，无法吸引人们的注意。

浮动动作按钮（FAB）

浮动动作按钮（FAB）已被确认为Material Design的签名元素。 FAB是一个圆形按钮，其图标浮动在页面上。 FAB的目的类似于号召性用语按钮； 它强调了一种用户可能会执行最多的操作。 通常以鲜艳的颜色显示，使其在该页面上的其他UI元素中更加突出。

再一次，我们使用mdl-button类从一个空button元素开始一个Floating Action Button。 这次，我们在按钮内包括了一个包含图标的图标，而不是文本。 请参考“材料设计”图标指南以选择要显示的图标名称。

<button class="mdl-button"><i class="material-icons">mode_edit</i></button>

要将按钮变成FAB，我们添加了mdl-button--fab类，另外还对mdl-button--colored以修改背景色。

<button class="mdl-button mdl-button--fab mdl-button--colored">Submit</button>

正如您在下面看到的那样，FAB按钮在设置为彩色按钮时采用强调色，而与原色相反，这与我们使用扁平按钮和凸起按钮时所看到的一样。

MDL将原色应用到大多数“有色”组件中，例如导航，选项卡，文本字段，滑块和复选框，这使其完全占主导地位。 FAB应该在UI的其余部分中更为突出，因此默认情况下采用的是强调色。

在任何情况下，如果原色更合适，则可以添加mdl-button--primary类。

<button class="mdl-button mdl-button--fab mdl-button--primary">Submit</button>

这是原色：

图标按钮

与FAB不同，该图标不是圆圈。 它只是显示为一个图标。 在空间有限的情况下，图标按钮会派上用场，或者当用户习惯了该应用程序时，就足以表示按钮的用途。 以Google Docs工具栏为例：

在这种情况下，为工具栏使用文本按钮是无法想象的。

图标按钮是通过mdl-button和mdl-button--icon类组合形成的：

<button class="mdl-button mdl-button--icon">
	<i class="material-icons">backup</i>
</button>

本示例显示一个描述上传或备份功能的图标：

纽扣纹波效果

此外，可以利用波纹效果增强这些按钮。 波纹效果是Material Design的另一种视觉特征，当单击按钮时会提供视觉反馈。 效果从单击时的坐标开始，复制了效果在现实生活中的工作方式。

此增强功能通过两类实现： mdl-js-button和mdl-js-ripple-effect可以应用于任何MDL按钮类型。

将这两个类添加到按钮：

<button class="mdl-button mdl-js-button mdl-js-ripple-effect">Save</button>

现在应该应用涟漪效应：

无效按钮

在某些情况下，例如当必需的文本字段仍然为空，或者尚未选择特定选项时，最好将可操作按钮设置为禁用。 要禁用MDL按钮，添加HTML布尔属性disabled的按钮元素：

<button class="mdl-button" disabled>Send</button>

现在，该按钮应该对用户交互无响应（波纹效果也将被禁用）。 添加颜色修饰符类mdl-button--colored或mdl-button--accent也不会对禁用的按钮产生影响。

尽管不是有效HTML， disabled属性也适用于使用锚标记创建的按钮。

结语

按钮非常容易实现。 我们可以构建一个样式优美的按钮，并具有平滑的波纹效果动画，并且只有几个类。 我个人希望通过从Bootstrap Button组件中汲取灵感（可能包括Button Groups变体）来进一步改进该组件。

在本系列的下一部分中，我们将看一下Text Fields组件，到目前为止，我们已经遇到了几次。

直到下一次！

翻译自: https://webdesign.tutsplus.com/tutorials/learning-material-design-lite-buttons--cms-24593

领域驱动设计精简版