vue(el-button的五种类型,三种css格式)

几种按钮的效果图
在写一个系统的css文件的时候,发现了不同类型的button的初始颜色不同,为了完美的使button的颜色和背景的颜色相映照,就去搜了一下,小做总结,为以后的使用做准备。

第一种

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

第二种

  <div style="margin: 20px 0">
    <el-button><span>朴素按钮</span></el-button>
    <el-button type="primary"><span>主要按钮</span></el-button>
    <el-button type="success"><span>成功按钮</span></el-button>
    <el-button type="info"><span>信息按钮</span></el-button>
    <el-button type="warning"><span>警告按钮</span></el-button>
    <el-button type="danger"><span>危险按钮</span></el-button>
  </div>

第三种

  <div>
    <el-button round><span>圆形按钮</span></el-button>
    <el-button type="primary" round><span>主要按钮</span></el-button>
    <el-button type="success" round><span>成功按钮</span></el-button>
    <el-button type="info" round><span>信息按钮</span></el-button>
    <el-button type="warning" round><span>警告按钮</span></el-button>
    <el-button type="danger" round><span>危险按钮</span></el-button>
  </div>

需要的话自取,如果说要记的话,可以记一下下面这几点。
a.round设置圆边按钮
b.
默认白
主要蓝 primary
成功绿 success
信息灰 info
警告橘黄 warning
危险红 danger

阿甘正传

每天都会有奇迹。
——阿甘正传

在学习的过程中,自学为主的话,可以推荐你去看看element的官网,比我这里全哦,这里送上链接:
elementUI

  • 5
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值