diff --git a/ui/dev/src/pages/components/button-dropdown.vue b/ui/dev/src/pages/components/button-dropdown.vue
index aeb720a4e6a..c5ca4584c0a 100644
--- a/ui/dev/src/pages/components/button-dropdown.vue
+++ b/ui/dev/src/pages/components/button-dropdown.vue
@@ -359,6 +359,176 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Photos
+
+ February 22, 2016
+
+
+
+
+
+
+
+
+ Files
+
+
+
+
+
+
+ Vacation
+
+ February 22, 2016
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Photos
+
+ February 22, 2016
+
+
+
+
+
+
+
+
+ Files
+
+
+
+
+
+
+ Vacation
+
+ February 22, 2016
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Photos
+
+ February 22, 2016
+
+
+
+
+
+
+
+
+ Files
+
+
+
+
+
+
+ Vacation
+
+ February 22, 2016
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Photos
+
+ February 22, 2016
+
+
+
+
+
+
+
+
+ Files
+
+
+
+
+
+
+ Vacation
+
+ February 22, 2016
+
+
+
+
+
+
+
+
+
@@ -367,6 +537,10 @@ export default {
data () {
return {
toggle: false,
+
+ fullWidth: true,
+ stretch: false,
+
conf: [
{ split: false, dense: false, disable: false },
{ split: false, dense: true, disable: false },
diff --git a/ui/dev/src/pages/components/button-toggle.vue b/ui/dev/src/pages/components/button-toggle.vue
index 04dc0b42912..993fe7b4bbb 100644
--- a/ui/dev/src/pages/components/button-toggle.vue
+++ b/ui/dev/src/pages/components/button-toggle.vue
@@ -23,6 +23,29 @@
:options="optionsO1"
/>
+
+
+
+
+
+
+
+
.q-btn--push
&.q-btn--actionable
transform: none
diff --git a/ui/src/components/btn-group/QBtnGroup.styl b/ui/src/components/btn-group/QBtnGroup.styl
index e2994b04d1d..e0b7c948e92 100644
--- a/ui/src/components/btn-group/QBtnGroup.styl
+++ b/ui/src/components/btn-group/QBtnGroup.styl
@@ -41,6 +41,8 @@
z-index: -1
&--push
+ border-radius: $button-push-border-radius
+
> .q-btn--push
&.q-btn--actionable
transform: none
diff --git a/ui/src/components/btn-toggle/QBtnToggle.js b/ui/src/components/btn-toggle/QBtnToggle.js
index 9af23308e7f..18296c87ed7 100644
--- a/ui/src/components/btn-toggle/QBtnToggle.js
+++ b/ui/src/components/btn-toggle/QBtnToggle.js
@@ -95,6 +95,8 @@ export default Vue.extend({
const child = this.options.map((opt, i) => {
return h(QBtn, {
key: i,
+ class: opt.class,
+ style: opt.style,
on: {
...this.qListeners,
click: e => this.__set(opt.value, opt, e)
@@ -107,8 +109,8 @@ export default Vue.extend({
textColor: opt.value === this.value ? opt.toggleTextColor || this.toggleTextColor : opt.textColor || this.textColor,
icon: opt.icon,
iconRight: opt.iconRight,
- noCaps: this.noCaps === true || opt.noCaps === true,
- noWrap: this.noWrap === true || opt.noWrap === true,
+ noCaps: opt.noCaps === void 0 ? this.noCaps : opt.noCaps === true,
+ noWrap: opt.noWrap === void 0 ? this.noWrap : opt.noWrap === true,
outline: this.outline,
flat: this.flat,
rounded: this.rounded,
@@ -116,10 +118,10 @@ export default Vue.extend({
unelevated: this.unelevated,
size: this.size,
dense: this.dense,
- ripple: this.ripple !== void 0 ? this.ripple : opt.ripple,
- stack: this.stack === true || opt.stack === true,
+ ripple: opt.ripple === void 0 ? this.ripple : opt.ripple,
+ stack: opt.stack === void 0 ? this.stack : opt.stack === true,
tabindex: opt.tabindex,
- stretch: this.stretch
+ stretch: opt.stretch === void 0 ? this.stretch : opt.stretch === true
}
}, opt.slot !== void 0 ? slot(this, opt.slot) : void 0)
})
diff --git a/ui/src/components/btn-toggle/QBtnToggle.json b/ui/src/components/btn-toggle/QBtnToggle.json
index 079cc4b39c8..1bee26168d5 100644
--- a/ui/src/components/btn-toggle/QBtnToggle.json
+++ b/ui/src/components/btn-toggle/QBtnToggle.json
@@ -44,7 +44,7 @@
},
"...props": {
"type": "Any",
- "desc": "Any other QBtn props",
+ "desc": "Any other QBtn props (including class and style)",
"__exemption": [ "examples" ]
}
},
diff --git a/ui/src/components/btn/QBtn.sass b/ui/src/components/btn/QBtn.sass
index 425bf2bd54c..984cce1b32f 100644
--- a/ui/src/components/btn/QBtn.sass
+++ b/ui/src/components/btn/QBtn.sass
@@ -92,6 +92,11 @@
&--rounded
border-radius: $button-rounded-border-radius
+ &--stretch
+ border-radius: 0
+ align-self: stretch
+ flex-grow: 1
+
&--round
border-radius: 50%
diff --git a/ui/src/components/btn/QBtn.styl b/ui/src/components/btn/QBtn.styl
index 425bf2bd54c..984cce1b32f 100644
--- a/ui/src/components/btn/QBtn.styl
+++ b/ui/src/components/btn/QBtn.styl
@@ -92,6 +92,11 @@
&--rounded
border-radius: $button-rounded-border-radius
+ &--stretch
+ border-radius: 0
+ align-self: stretch
+ flex-grow: 1
+
&--round
border-radius: 50%
diff --git a/ui/src/mixins/btn.js b/ui/src/mixins/btn.js
index 62d8e5f306c..320ec767ebb 100644
--- a/ui/src/mixins/btn.js
+++ b/ui/src/mixins/btn.js
@@ -154,7 +154,7 @@ export default {
(this.noCaps === true ? ' q-btn--no-uppercase' : '') +
(this.noWrap === true ? '' : ' q-btn--wrap') + // this is for IE11
(this.dense === true ? ' q-btn--dense' : '') +
- (this.stretch === true ? ' no-border-radius self-stretch' : '') +
+ (this.stretch === true ? ' q-btn--stretch' : '') +
(this.glossy === true ? ' glossy' : '')
},