Material Design 组件 Button 的属性说明

前言

Material Design 是谷歌在设计界面上的一项重要工作，旨在为所有平台（包括 Web）提供动态、细腻的用户体验。其设计哲学核心是“材料模拟”。Material Design 组件 Button 作为其中重要的一员，在 Web 开发过程中广泛应用，无论是在组合中还是单独使用都具有很强的实用性和美观性。本文将详细介绍 Material Design 组件 Button 的属性含义和使用方法，通过实例代码让读者轻松掌握 Button 的使用要点和技巧。

组件基本概述

在 Material Design 中，Button 组件是一种常用的元素，其作用是触发一个行动，如提交表单、导航等。Button 组件的使用要点包括字数紧凑、明确的文字提示、相对于其他元素更高的视觉优先级等。下面是 Material Design 组件 Button 的相关属性介绍：

属性

color

color 属性用于设置 Button 组件的颜色。颜色有以下可选值：

• primary: 代表主要的行动。
• secondary: 代表次要的行动。
• success: 代表成功的行动。
• warning: 代表警告的行动。
• danger: 代表错误的行动。

示例代码：

<button class="md-button md-primary">Primary</button>
<button class="md-button md-secondary">Secondary</button>
<button class="md-button md-success">Success</button>
<button class="md-button md-warning">Warning</button>
<button class="md-button md-danger">Danger</button>

disabled

disabled 属性用于禁止用户进行 Button 组件相关的操作。当 Button 组件被禁用时，其样式会被固定为灰色，并且无法被点击。

示例代码：

<button class="md-button" disabled>Disabled Button</button>

raised

raised 属性用于设置 Button 组件的立体效果。设置 raised 属性后，Button 组件会突出显示，并显示墨水效果。

示例代码：

<button class="md-button md-primary" raised>Raised Button</button>

unelevated

unelevated 属性和 raised 属性相似，但两者展示效果略有不同。设置 unelevated 属性后，Button 组件不会出现墨水效果，但是其颜色明亮。

示例代码：

<button class="md-button md-primary" unelevated>Unelevated Button</button>

outlined

outlined 属性用于设置 Button 组件的描边效果。设置 outlined 属性后，Button 组件会呈现描边样式，且按钮背景为透明。

示例代码：

<button class="md-button md-primary" outlined>Outlined Button</button>

text

text 属性用于设置 Button 组件的纯文本样式。设置 text 属性后，Button 组件会呈现纯文本样式，按钮颜色和背景为透明。

示例代码：

<button class="md-button md-primary" text>Text Button</button>

size

size 属性用于设置 Button 组件的大小，默认为正常（md-button）。属性可选值为 small、large 等。

示例代码：

<button class="md-button md-primary small">Small Button</button>
<button class="md-button md-primary">Normal Button</button>
<button class="md-button md-primary large">Large Button</button>

结语

本文详细介绍了 Material Design 组件 Button 的属性含义和使用方法，包括 color、disabled、raised、unelevated、outlined、text 和 size 等重要属性，同时为读者提供了相应的示例代码。通过本文的学习，读者将能够轻松掌握 Button 组件的使用要点和技巧，更好地应用 Material Design 组件 Button 在 Web 页面的开发过程中。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67933431504e4ea9bd754745