Element组件浅尝辄止4:Button组件

Button按钮组件:用途太广泛了,几乎参与到了日常开发中的方方面面

1.如何使用?How?

 

//使用type、plain、round和circle属性来定义 Button 的样式。<el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button>
</el-row><el-row><el-button plain>朴素按钮</el-button><el-button type="primary" plain>主要按钮</el-button><el-button type="success" plain>成功按钮</el-button><el-button type="info" plain>信息按钮</el-button><el-button type="warning" plain>警告按钮</el-button><el-button type="danger" plain>危险按钮</el-button>
</el-row><el-row><el-button round>圆角按钮</el-button><el-button type="primary" round>主要按钮</el-button><el-button type="success" round>成功按钮</el-button><el-button type="info" round>信息按钮</el-button><el-button type="warning" round>警告按钮</el-button><el-button type="danger" round>危险按钮</el-button>
</el-row><el-row><el-button icon="el-icon-search" circle></el-button><el-button type="primary" icon="el-icon-edit" circle></el-button><el-button type="success" icon="el-icon-check" circle></el-button><el-button type="info" icon="el-icon-message" circle></el-button><el-button type="warning" icon="el-icon-star-off" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>

2.拓展用法?

  • 按钮禁用 

你可以使用disabled属性来定义按钮是否可用,它接受一个Boolean值,默认为false。

//你可以使用disabled属性来定义按钮是否可用,它接受一个Boolean值。<el-row><el-button disabled>默认按钮</el-button><el-button type="primary" disabled>主要按钮</el-button><el-button type="success" disabled>成功按钮</el-button><el-button type="info" disabled>信息按钮</el-button><el-button type="warning" disabled>警告按钮</el-button><el-button type="danger" disabled>危险按钮</el-button>
</el-row>
  • 文字按钮

    没有边框和背景色的按钮。 

 

 

<el-button type="text">文字按钮</el-button>
<el-button type="text" disabled>文字按钮</el-button>
  • 图标按钮

    带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。 

//设置icon属性即可,icon 的列表可以参考 Element 的 icon 组件,
//也可以设置在文字右边的 icon ,只要使用i标签即可,可以使用自定义图标。<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
  • 按钮组

    以按钮组的方式出现,常用于多项类似操作。

    //使用<el-button-group>标签来嵌套你的按钮。<el-button-group><el-button type="primary" icon="el-icon-arrow-left">上一页</el-button><el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </el-button-group>
    <el-button-group><el-button type="primary" icon="el-icon-edit"></el-button><el-button type="primary" icon="el-icon-share"></el-button><el-button type="primary" icon="el-icon-delete"></el-button>
    </el-button-group>
     
  • 加载中

    点击按钮后进行数据加载操作,在按钮上显示加载状态。 

//要设置为 loading 状态,只要设置loading属性为true即可。<el-button type="primary" :loading="true">加载中</el-button>
  • 不同尺寸

    Button 组件提供除了默认值以外的三种尺寸,可以在不同场景下选择合适的按钮尺寸。 

//额外的尺寸:medium、small、mini,通过设置size属性来配置它们。<el-row><el-button>默认按钮</el-button><el-button size="medium">中等按钮</el-button><el-button size="small">小型按钮</el-button><el-button size="mini">超小按钮</el-button>
</el-row>
<el-row><el-button round>默认按钮</el-button><el-button size="medium" round>中等按钮</el-button><el-button size="small" round>小型按钮</el-button><el-button size="mini" round>超小按钮</el-button>
</el-row>

 上述简单介绍了button组件的内容,想要深入浅出 具体的button定制可到按钮组件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/84390.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

企业微信 企业内部开发 学习笔记

官方文档 文档 术语介绍 引入pom <dependency><groupId>com.github.binarywang</groupId><artifactId>wx-java-cp-spring-boot-starter</artifactId><version>4.5.3.B</version></dependency>核心代码 推送消息 final WxCp…

【Spring专题】Spring底层核心原理解析

目录 前言阅读导航前置知识Q1&#xff1a;你能描述一下JVM对象创建过程吗&#xff1f;Q2&#xff1a;Spring的特性是什么&#xff1f;前置知识总结 课程内容一、Spring容器的启动二、一般流程推测2.1 扫描2.2 IOC2.3 AOP 2.4 小结三、【扫描】过程简单推测四、【IOC】过程简单推…

分布式 - 消息队列Kafka:Kafka生产者架构和配置参数

文章目录 1. kafka 生产者发送消息整体架构2. Kafka 生产者重要参数配置01. acks02. 消息传递时间03. linger.ms04. buffer.memory05. batch.size06. max.in.flight.requests.per.connection07. compression.type08. max.request.size09. receive.buffer.bytes和 send.buffer.b…

uniapp 微信小程序 封装公共的请求js(api版本)

一、新建api文件夹 在项目目录下创建api文件夹&#xff0c;内放files跟index.js文件夹&#xff0c;files文件夹内放每个页面对应的js请求接口 1、index.js /*** api接口的统一出口*/ const api {}; const requireComponent require.context(./files, false, /\.js$/) requi…

ssm亚盛汽车配件销售业绩管理统源码和论文PPT

ssm亚盛汽车配件销售业绩管理统源码和论文PPT007 开发工具&#xff1a;idea 数据库mysql5.7(mysql5.7最佳) 数据库链接工具&#xff1a;navcat,小海豚等 开发技术&#xff1a;java ssm tomcat8.5 研究的意义 汽车配件销售类企业近年来得到长足发展,在市场份额不断扩大同时…

『PostgreSQL』在 PostgreSQL中创建只读权限和读写权限的账号

&#x1f4e3;读完这篇文章里你能收获到 理解在 PostgreSQL 数据库中创建账号的重要性以及如何进行账号管理掌握在 PostgreSQL 中创建具有只读权限和读写权限的账号的步骤和方法学会使用 SQL 命令来创建账号、为账号分配适当的权限以及控制账号对数据库的访问级别了解如何确保…

HBase-写流程

写流程顺序正如API编写顺序&#xff0c;首先创建HBase的重量级连接 &#xff08;1&#xff09;读取本地缓存中的Meta表信息&#xff1b;&#xff08;第一次启动客户端为空&#xff09; &#xff08;2&#xff09;向ZK发起读取Meta表所在位置的请求&#xff1b; &#xff08;…

MySQL 建表 及其 表的约束类型

目录 步骤&#xff1a; 1、选择数据库(mydb--自定义数据库) 2、建立班级表 3、建立学生表 4、增加约束删除约束 增添约束&#xff1a; 删除约束&#xff1a; 以班级表和学生表为例说明表的约束类型 步骤&#xff1a; 1、选择数据库(mydb--自定义数据库) 2、建立班级表 …

【图像去噪的扩散滤波】基于线性扩散滤波、边缘增强线性和非线性各向异性滤波的图像去噪研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

SQL SERVER ip地址改别名

SQL server在使用链接服务器时必须使用别名&#xff0c;使用ip地址就会把192.188.0.2这种点也解析出来 解决方案&#xff1a; 1、物理机ip 192.168.0.66 虚拟机ip 192.168.0.115 2、在虚拟机上找到 C:\Windows\System32\drivers\etc 下的 &#xff08;我选中的文件&a…

maven Jar包反向install到本地仓库

maven Jar包反向install到本地仓库 需求实现 需求 项目打包时报错&#xff0c;缺少一个jar包。 但是在maven仓库都找不到此jar包&#xff0c;其他人提供了这个jar包。 需要把这个jar包install到本地仓库&#xff0c;使项目能正常打包运行。 实现 使用git bash命令执行以下脚…

24聊城大学823软件工程考研

1.软件发展有几个阶段&#xff1f;各有何特征&#xff1f; ①程序设计阶段 硬件特征&#xff1a;价格贵、存储容量小、运行可靠性差。 软件特征&#xff1a;只有程序、程序设计概念&#xff0c;不重视程序设计方法。 ②程序系统阶段。 硬件特征&#xff1a;速度、容量及工作可…

Redis的RDB持久化

Redis是一个键值对数据库服务器&#xff0c;服务器中通常包含着任意个非空数据库&#xff0c;而每个非空数据库中又可以包含任意个键值对&#xff0c;为了方便起见&#xff0c;我们将服务器中的非空数据库以及它们的键值对统称为数据库状态。 举个例子&#xff0c;下图展示了一…

使用自己的数据集预加载 Elasticsearch

作者&#xff1a;David Pilato 我最近在讨论论坛上收到一个问题&#xff0c;关于如何修改官方 Docker 镜像以提供一个现成的 Elasticsearch 集群&#xff0c;其中已经包含一些数据。 说实话&#xff0c;我不喜欢这个想法&#xff0c;因为你必须通过提 entrypoint.sh 的分叉版本…

一文详解 DolphinDB SQL 标准化

1. 与标准 SQL 的兼容性 在脚本层面&#xff0c;自 1.30.22 / 2.00.10 版本起&#xff0c;DolphinDB SQL 开始支持&#xff1a; 关键字全大写或全小写的书写方式脚本的换行不影响语法解析&#xff0c;但存在两种特殊情况&#xff1a; 组合关键字不允许拆分&#xff0c;如 ord…

PromQL实现Actuator获取的JVM指标的Full GC次数监控

Spring Boot 版本需要2.0.0或更高版本。 添加Micrometer Prometheus registry依赖: <dependency><groupId>io.micrometer</groupId><artifactId>micrometer-registry-prometheus</artifactId> </dependency>在application.properties中开…

去趋势化一个心电图信号、信号功率谱、低通IIR滤波器并平滑信号、对滤波器引起的延迟进行补偿研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

嗅探抓包工具,解决线上偶现问题来不及抓包的情况阅读目录

目录 背景 实现思路 具体实现 Python 抓包 总结 资料获取方法 背景 测试群里经常看到客户端的同学反馈发现了偶现Bug&#xff0c;但是来不及抓包&#xff0c;最后不了了之&#xff0c;最近出现得比较频繁&#xff0c;所以写个小脚本解决这个问题。 实现思路 之前写过一个…

IDEA快捷键总结

切换窗口 Alt&#xff08;1-9&#xff09; Alt1 打开或者关闭左侧project Alt4 Run窗口 Alt5 Debug窗口 Alt7 类结构窗口 生成构造函数、get、set等方法 Altinsert 快速生成输出语句 Soutenter键 运行程序 chtlshiftf10 运行程序 shiftf9 debug方式运行程序 代码…

汽车控制器底层软件BOOTLOADER开发经历

引言 现在所谓智能汽车必备的OTA技术&#xff0c;在ECU控制器层面就是BOOT的开发&#xff0c;对应autosar体系里面的BSW基础软件。 同学刚开始接触汽车软件开发会有一种思想&#xff0c;要学就学听起来high level的autosar&#xff0c;但是到底autosar是个什么东西也搞不懂&am…