按钮组(Button Group)

您可以使用QBtnGroup方便地将QBtn和QBtnDropdown分组。 一定要查阅这些组件的各自页面以查看它们的属性和方法。

安装

编辑 /quasar.conf.js:

framework: {
  components: [
    'QBtnGroup',
    'QBtn',        // 如果使用QBtn
    'QBtnDropdown' // 如果使用QBtnDropdown
  ]
}

基础用法

简单的三个按钮组：

<q-btn-group>
  <q-btn label="One" @click="clickHandler1"/>
  <q-btn label="Two" @click="clickHandler2"/>
  <q-btn label="Three" @click="clickHandler3"/>
</q-btn-group>

简单的三个具有推送(push)效果的按钮：

<q-btn-group push>
  <q-btn push label="One" @click="clickHandler1" />
  <q-btn push label="Two" @click="clickHandler2" />
  <q-btn push label="Three" @click="clickHandler3" />
</q-btn-group>

简单的三个概述(outline)按钮：

<q-btn-group outline>
  <q-btn outline label="One" @click="clicHandler1" />
  <q-btn outline label="Two" @click="clicHandler2" />
  <q-btn outline label="Three" @click="clicHandler3" />
</q-btn-group>

Vue 属性

Vue属性 类型 说明
outline 布尔值 设置为true，如果你想要一个概述的按钮。
flat 布尔值 设置为true，如果你想要一个平面按钮。
push 布尔值 设置为true，如果想按钮具有推送效果。
rounded 布尔值 设置为true，如果想方形按钮具有圆角。

您必须在父元素QBtnGroup和子元素QBtn/QBtnDropdown上同时使用这些属性。

更多例子

简单的三个圆角(rounded)按钮

<q-btn-group rounded>
  <q-btn rounded label="One" @click="clickHandler1" />
  <q-btn rounded label="Two" @click="clickHandler2" />
  <q-btn rounded label="Three" @click="clickHandler3" />
</q-btn-group>

简单的三个平面(flat)按钮：

<q-btn-group flat>
  <q-btn flat label="One" @click="clickHandler1" />
  <q-btn flat label="Two" @click="clickHandler2" />
  <q-btn flat label="Three" @click="clickHandler3" />
</q-btn-group>

两个圆角按钮和一个圆角下拉按钮的简单组合：

<q-btn-group rounded>
  <q-btn rounded color="primary" label="One" />
  <q-btn rounded color="primary" label="Two" />
  <q-btn-dropdown rounded color="primary" label="Three" split>
    <!-- 下拉内容在这里 -->
    <q-list link>
      <q-item v-close-overlay>
        <q-item-side icon="folder" inverted color="primary" />
        <q-item-main>
          <q-item-tile label>Photos</q-item-tile>
          <q-item-tile sublabel>February 22, 2016</q-item-tile>
        </q-item-main>
        <q-item-side right icon="info" color="amber" />
      </q-item>
      <q-item-separator inset />
      <q-list-header inset>Files</q-list-header>
      <q-item v-close-overlay>
        <q-item-side icon="assignment" inverted />
        <q-item-main>
          <q-item-tile label>Vacation</q-item-tile>
          <q-item-tile sublabel>February 22, 2016</q-item-tile>
        </q-item-main>
        <q-item-side right icon="info" color="amber" />
      </q-item>
    </q-list>
  </q-btn-dropdown>
</q-btn-group>

按钮 下拉按钮