领域驱动设计精简版
按钮是任何功能网站的组成部分( 设计师喜欢它们! ),用户在网络上的操作通常以单击按钮开始和结束。 例如,在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
领域驱动设计精简版