quasar+vue实现button按钮及组下拉按钮自定义效果代码
代码语言:html
所属分类:表单美化
代码描述:quasar+vue实现button按钮及组下拉按钮自定义效果代码
代码标签: quasar vue button 按钮 组 下拉 按钮 自定义
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/quasar.prod.css">
</head>
<body>
<div id="q-app" style="min-height: 100vh;">
<div class="q-pa-md q-gutter-sm">
<q-btn color="primary" icon="mail" label="On Left" ></q-btn>
<q-btn round color="primary" icon="shopping_cart"></q-btn>
<q-btn color="white" text-color="black" label="Standard" ></q-btn>
<q-btn color="primary" label="Primary" ></q-btn>
<q-btn color="secondary" label="Secondary" ></q-btn>
<q-btn color="amber" glossy label="Amber"></q-btn>
<q-btn color="brown-5" label="Brown 5"></q-btn>
<q-btn color="deep-orange" glossy label="Deep Orange"></q-btn>
<q-btn color="purple" label="Purple"></q-btn>
<q-btn color="black" label="Black" ></q-btn>
</div>
<div class="q-pa-md q-gutter-y-md column items-start">
<q-btn-group push>
<q-btn push label="First" icon="timeline" ></q-btn>
<q-btn push label="Second" icon="visibility" ></q-btn>
<q-btn push label="Third" icon="update" ></q-btn>
</q-btn-group>
<q-btn-group push>
<q-btn color="yellow" glossy text-color="black" push label="First" icon="verified_user" ></q-btn>
<q-btn color="amber" glossy text-color="black" push label="Second" ></q-btn>
<q-btn color="orange" glossy t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0