组合按钮
您可以使用 QBtnGroup 组件很方便的把 QBtn 和 QBtnDropdown 组合起来，如果您还不了解 QBtn 和 QBtnDropdown 组件的话，请先转到相应的页面去了解他们的属性和方法。
QBtnGroup API
QBtnGroup API
props
9
slots
1
content
2
style
7
spread
: Boolean
说明
水平扩展到所有可用空间
stretch
: Boolean
说明
在 flexbox 父元素上使用时，按钮将延伸到父元素的高度
用法
示例
Template
<template>
<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 push label="Second" icon="visibility" />
<q-btn push label="Third" icon="update" />
</q-btn-group>
<q-btn-group push>
<q-btn color="yellow" glossy text-color="black" push label="First" icon="verified_user" />
<q-btn color="amber" glossy text-color="black" push label="Second" />
<q-btn color="orange" glossy text-color="black" push label="Third" />
</q-btn-group>
<q-btn-group outline>
<q-btn outline color="brown" label="First" />
<q-btn outline color="brown" label="Second" icon-right="watch_later" />
<q-btn outline color="brown" label="Third" />
</q-btn-group>
<q-btn-group>
<q-btn color="secondary" glossy label="First" />
<q-btn color="secondary" glossy label="Second" />
<q-btn color="secondary" glossy label="Third" />
<q-btn color="secondary" glossy label="Fourth" />
</q-btn-group>
<q-btn-group>
<q-btn color="accent" icon="timeline" />
<q-btn color="accent" icon="visibility" />
<q-btn color="accent" icon="update" />
</q-btn-group>
<q-btn-group rounded>
<q-btn color="amber" rounded glossy icon="timeline" />
<q-btn color="amber" rounded glossy icon="visibility" />
<q-btn color="amber" rounded glossy icon-right="update" label="Update" />
</q-btn-group>
</div>
</template>Copied to clipboard
WARNING
您必须在 QBtnGroup 父组件和 QBtn/QBtnDropdown 上使用相同的外形设计模式（相同的 design 属性）(flat, outline, push, …)
在水平方向上扩展
Template
<template>
<div class="q-pa-md">
<q-btn-group spread>
<q-btn color="purple" label="First" icon="timeline" />
<q-btn color="purple" label="Second" icon="visibility" />
</q-btn-group>
</div>
</template>Copied to clipboard
搭配 QBtnDropdown
Template
<template>
<div class="q-pa-md">
<q-btn-group rounded>
<q-btn rounded color="primary" label="One" />
<q-btn rounded color="primary" label="Two" />
<q-btn-dropdown auto-close rounded color="primary" label="Three" split>
<!-- dropdown content goes here -->
<q-list padding style="width: 250px">
<q-item clickable>
<q-item-section avatar>
<q-avatar icon="folder" color="purple" text-color="white" />
</q-item-section>
<q-item-section>
<q-item-label>Photos</q-item-label>
<q-item-label caption>February 22, 2016</q-item-label>
</q-item-section>
<q-item-section side>
<q-icon name="info" color="amber" />
</q-item-section>
</q-item>
<q-item clickable>
<q-item-section avatar>
<q-avatar icon="folder" color="purple" text-color="white" />
</q-item-section>
<q-item-section>
<q-item-label>Videos</q-item-label>
<q-item-label caption>London</q-item-label>
</q-item-section>
<q-item-section side>
<q-icon name="info" color="amber" />
</q-item-section>
</q-item>
<q-separator inset />
<q-item-label header>Files</q-item-label>
<q-item clickable>
<q-item-section avatar>
<q-avatar icon="assignment" color="teal" text-color="white" />
</q-item-section>
<q-item-section>
<q-item-label>London</q-item-label>
<q-item-label caption>March 1st, 2018</q-item-label>
</q-item-section>
<q-item-section side>
<q-icon name="info" color="amber" />
</q-item-section>
</q-item>
<q-item clickable>
<q-item-section avatar>
<q-avatar icon="assignment" color="teal" text-color="white" />
</q-item-section>
<q-item-section>
<q-item-label>Paris</q-item-label>
<q-item-label caption>January 22nd, 2017</q-item-label>
</q-item-section>
<q-item-section side>
<q-icon name="info" color="amber" />
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</q-btn-group>
</div>
</template>Copied to clipboard
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。