State Component     

WARNING
This component is deprecated and will soon be removed. Use v-if directive instead.

Quasar State Component helps you when you have two states (called “default” and “active”) to display using the same real estate of a page. Look at the demo which presents a button that when clicked it shifts to the “active” state and shows a spinner.

What else can you build with State component? Inline editor as an example.

Basic Usage

<!-- Template for VueModel below -->
<q-state :active="state">
<div slot="active">
<spinner :size="51"></spinner> Active State
</div>
<!--
any component outside of slot="active"
is displayed for the default state
-->
<button class="primary" @click="changeState()">
Default State - Hit me!
</button>
</q-state>
// VueModel for template above
{
...,
data () {
return {
...,
state: false
}
},
methods: {
...,
changeState () {
this.state = true
setTimeout(() => {
this.state = false
}, 2000)
}
}
}

Vue Properties

Vue PropertyTypeDescription
modelBooleanShow default (when false) or “active” state (when true)