<template> <div> <el-row> <el-col :span="24"> <i class="el-icon-edit"></i> <i class="el-icon-share"></i> <i class="el-icon-delete"></i> <el-button type="primary" icon="el-icon-search">搜索</el-button> </el-col> </el-row> <el-row> <el-col :span="24"> <el-button>默认按钮</el-button> <el-button type="primary" disabled>主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning" disabled>警告按钮</el-button> <el-button type="danger">解除按钮</el-button> </el-col> </el-row> <el-row> <el-col :span="24"> <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 disabled>警告按钮</el-button> <el-button type="danger" plain>解除按钮</el-button> </el-col> </el-row> <el-row> <el-col :span="24"> <el-button round>圆角按钮</el-button> <el-button type="primary" round>主要按钮</el-button> <el-button type="success" round>成功按钮</el-button> <el-button type="info" round disabled>信息按钮</el-button> <el-button type="warning" round>警告按钮</el-button> <el-button type="danger" round>解除按钮</el-button> </el-col> </el-row> <el-row> <el-col :span="24"> <el-button icon="el-icon-search" >Search</el-button> <el-button type="primary" icon="el-icon-edit" >Edit</el-button> <el-button icon="el-icon-check" >Check</el-button> <el-button icon="el-icon-message" >Message</el-button> <el-button icon="el-icon-start-off" disabled>Start-off</el-button> <el-button icon="el-icon-delete" >Delete</el-button> </el-col> </el-row> <el-row> <el-col :span="24"> <el-button type="text">文字按钮</el-button> <el-button type="text" disabled>文字按钮</el-button> <el-button type="primary"> 上传<i class="el-icon-upload el-icon--right"></i> </el-button> </el-col> </el-row> <el-row> <el-col :span="8"> <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-col> <el-col :span="8"> <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> </el-col> <el-col :span="8"> <el-button type="primary" :loading="true">加载中</el-button> </el-col> </el-row> <el-row> <el-col :span="24"> <el-button>默认按钮</el-button> <el-button size="medium">中等按钮</el-button> <el-button size="small">小型按钮</el-button> <el-button size="mini">超小按钮</el-button> </el-col> </el-row> </div> </template> <script> </script> <style> .el-row { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } .el-col { border-radius: 4px; } </style>
ElementUI中的按钮
猜你喜欢
转载自www.cnblogs.com/aguncn/p/12287104.html
今日推荐
周排行