State Component     

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
any component outside of slot="active"
is displayed for the default state
<button class="primary" @click="changeState()">
Default State - Hit me!
// 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)