在使用Element UI进行网页开发时，按钮(Button)与图标(Icon)是非常常见的组件。它们可以为网页增添美观和交互性。本文将介绍Element UI中按钮与图标的使用指南，帮助你更好地应用它们到你的项目中。

1. 按钮(Button)的基本使用

Element UI提供了多种按钮样式，你可以根据项目的需求选择合适的样式。以下是常用按钮样式的使用示例：

<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>

通过不同的type属性，可以设置按钮的颜色和样式。默认按钮是灰色的，主要按钮是蓝色的，成功按钮是绿色的，警告按钮是黄色的，危险按钮是红色的。

按钮也可以设置不同的大小，例如：

<el-button size="mini">迷你按钮</el-button>
<el-button size="small">小型按钮</el-button>
<el-button size="medium">中型按钮</el-button>
<el-button size="large">大型按钮</el-button>

通过设置size属性，可以调整按钮的大小。

2. 图标(Icon)的使用

Element UI提供了丰富的图标库，你可以在按钮中使用这些图标来增加更多的视觉效果。以下是图标的使用示例：

<el-button icon="el-icon-search">搜索</el-button>
<el-button icon="el-icon-edit">编辑</el-button>
<el-button icon="el-icon-delete">删除</el-button>

使用icon属性来指定要显示的图标样式。在示例中，我们使用了el-icon-search图标样式来表示搜索，el-icon-edit图标样式来表示编辑，el-icon-delete图标样式来表示删除。

Element UI还支持自定义图标，你可以使用自己的图片或SVG图标：

<el-button>
  <img src="custom-icon.png" alt="自定义图标" />
</el-button>

通过插入<img>标签来使用自定义图标。

3. 按钮与图标的组合使用

按钮和图标可以很好地结合在一起，形成更具吸引力的效果。以下代码展示了按钮与图标的组合使用示例：

<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button type="success" icon="el-icon-check">确认</el-button>
<el-button type="warning" icon="el-icon-warning">警告</el-button>
<el-button type="danger" icon="el-icon-delete">删除</el-button>

通过在按钮中添加icon属性，可以在按钮中显示对应的图标。

总结

通过本文，你学习了Element UI中按钮与图标的使用指南。按钮和图标是网页开发中常用的组件，它们能够为网页增添美观和交互性。你可以根据项目的需求选择合适的按钮样式和图标样式，也可以进行组合使用，创造更多的效果。

希望本文能够帮助你更好地应用Element UI中的按钮和图标到你的项目中，让你的网页更加出色！

本文来自极简博客，作者：数字化生活设计师，转载请注明原文链接：Element UI中的按钮(Button)与图标(Icon)使用指南