admin 管理员组

文章数量: 1086019


2024年3月10日发(作者：程序员代码)

Element Plus 是 Vue 3 的一个组件库，它提供了丰富的 UI 组件用于构建

界面。Element Plus 使用了统一的设计语言，使得组件之间有良好的一致性。

以下是一些常用的 Element Plus 组件的 class：

按钮 (Button)

.el-button：基础按钮样式

.el-button--primary：主要按钮样式

.el-button--success：成功按钮样式

.el-button--warning：警告按钮样式

.el-button--danger：危险按钮样式

.el-button--info：信息按钮样式

.el-button--text：文字按钮样式

输入框 (Input)

.el-input：基础输入框样式

.el-input--large：大尺寸输入框样式

.el-input--small：小尺寸输入框样式

表格 (Table)

.el-table：基础表格样式

.el-table--border：带边框的表格样式

.el-table--stripe：条纹表格样式

卡片 (Card)

.el-card：基础卡片样式

导航条 (Navbar)

.el-navbar：基础导航条样式

提示框 (Tooltip)

.el-tooltip：基础提示框样式

布局 (Layout)

.el-container：基础容器样式，常用于页面的主体部分

表单 (Form)

.el-form：基础表单样式

图片 (Image)

.el-image：基础图片样式，常用于图片容器或者图片列表中

分页器 (Pagination)

.el-pagination：基础分页器样式

弹出层 (Popover)

.el-popover：基础弹出层样式，常用于显示额外信息或操作。

进度条 (Progress)

.el-progress：基础进度条样式。例如，.el-progress--line是线性进度

条，.el-progress--circle是环形进度条。

图标 (Icon)

通常使用 Element Plus 的图标类，如.el-icon-edit、.el-icon-check等。

这些图标类是class="el-icon"基础上加上相应的图标名称。例如，.el-

icon-check会显示一个勾选图标。

通知 (Notification)

.el-notification：基础通知样式。常用于显示系统消息或提示。

菜单 (Menu)

.el-menu：基础菜单样式。常用于导航菜单或下拉菜单。

表单元素 (Form Element)

例如，.el-input__inner是输入框的内部分区，.el-input__clear是输入框

的清除按钮等。这些类用于更细粒度的样式定制。

颜色主题

Element Plus 提供了多种颜色主题类，如.is-primary、.is-success、.is-

warning、.is-danger、.is-info等，用于快速应用颜色主题。这些类通常

与按钮、输入框等组件一起使用。


本文标签： 样式 基础 按钮 显示 组件

版权声明：本文标题：element-plus 常用class汇总 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1710024852a554162.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。