quasar+vue实现button按钮及组下拉按钮自定义效果代码-html代码-BFW代码库

quasar+vue实现button按钮及组下拉按钮自定义效果代码

代码语言：html

代码描述：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 text-color="black" push label="Third"></q-btn>
    </q-btn-group>

    <q-btn-group outline>
      <q-btn outline color="brown" label="First" ></q-btn>
      <q-btn outline color="brown" label="Second" icon-right="watch_later"></q-btn>
      <q-btn outline color="brown" label="Third" ></q-btn>
    </q-btn-group>

    <q-btn-group>
      <q-btn color="secondary" glossy label="First" ></q-btn>
      <q-btn color="secondary" glossy label="Second" ></q-btn>
      <q-btn color="secondary" glossy label="Third" ></q-btn>
      <q-btn color="secondary" glossy label="Fourth" ></q-btn>
    </q-btn-group>

    <q-btn-group>
      <q-btn color="accent" icon="timeline" ></q-btn>
      <q-btn color="accent" icon="visibility" ></q-btn>
      <q-btn color="accent" icon=&.........完整代码请登录后点击上方下载按钮下载查看