Collapsible (+ Accordion)     

Quasar Collapsibles allow the hiding of content that is not immediately relevant to the user. Think of them as accordion elements that expand when clicked on.

They are basically QItem components wrapped with additional functionality. So they can be included in QLists and inherit QItem component properties.

Installation

Edit /quasar.conf.js:

framework: {
  components: ['QCollapsible']
}

Basic Usage

<q-list>
  <q-collapsible icon="explore" label="First">
    <div>
      Content
    </div>
  </q-collapsible>
  <q-collapsible icon="perm_identity" label="Second">
    <div>
      Content
    </div>
  </q-collapsible>
  <q-collapsible icon="shopping_cart" label="Third">
    <div>
      Content
    </div>
  </q-collapsible>
</q-list>

Accordion

You can group multiple Collapsibles to act as an Accordion, which is to open only one Collapsible at a time while closing the others automatically. For this, use group Vue property and specify a unique name within the Vue parent container of the Collapsibles.

<q-list>
  <q-collapsible group="somegroup" icon="explore" label="First">
    <div>
      Content
    </div>
  </q-collapsible>
  <q-collapsible group="somegroup" icon="perm_identity" label="Second">
    <div>
      Content
    </div>
  </q-collapsible>
  <q-collapsible group="somegroup" icon="shopping_cart" label="Third">
    <div>
      Content
    </div>
  </q-collapsible>
</q-list>

Vue Properties

Since QCollapsible is a wrapper over QItem components, it inherits some of their properties as you can see below.

Supports v-model to control the state (open/close).

Own PropertyTypeDescription
openedBooleanControl if Collapsible is opened or not when first rendered.
groupStringUnique name which allows to group multiple Collapsible so they work as an Accordion.
popupBoolean“Popup” mode instead of default behavior.
indentBooleanIndent Collapsible content. Useful when building a menu with it.
icon-toggleBooleanExpand/Contract only by clicking/tapping on the arrow on the right.
collapse-iconStringIcon used instead of default arrow on the right side.
header-styleArray/String/ObjectVue style binding for header.
header-classArray/String/ObjectVue class binding for header.
disableBooleanDisable current Collapsible.

QItem & QItem related components inherited properties:

Inherited PropertyTypeDescription
icon, right-iconStringIcon to use. Either use an icon, image, avatar or letter.
image, right-imageStringURL to image to use (point to statics). Either use an icon, image, avatar or letter.
avatar, right-avatarStringURL to avatar to use (point to statics). Either use an icon, image, avatar or letter.
letter, right-letterStringOne character String to define a letter. Either use an icon, image, avatar or letter.
labelStringLabel to use as title.
sublabelStringLabel to use as subtitle.
label-linesString / NumberNumber of lines the label can span to. Ellipsis are used when overflowing.
sublabel-linesString / NumberNumber of lines the sublabel can span to. Ellipsis are used when overflowing.
denseBooleanUse a dense QItem.
sparseBooleanUse a sparse QItem.
multilineBooleanUse a multiline QItem. Useful in cases where you use label and sublabel that spans multiple lines, but even then it’s optional.
separatorBooleanUse a separator from other QItems or QCollapsibles, just like on QItem.
inset-separatorBooleanInset separator, same behavior as separator.

Vue Methods

Vue MethodsDescription
toggle()Toggle open/close state.
show()Open it.
hide()Close it.

Vue Events

Vue MethodDescription
@showTriggered after opening Collapsible.
@hideTriggered after closing Collapsible.

Examples

Using a v-model

<template>
  <q-collapsible
    v-model="open"
    icon="perm_identity"
    label="With a model and events"
  >
    <div>...content...</div>
  </q-collapsible>
</template>

<script>
export default {
  data () {
    return { open: true }
  },
  methods: {
    toggle () {
      this.open = !this.open
    }
  }
}
</script>

Custom Header

<q-collapsible>
  <template slot="header">
    <q-chip color="primary" small class="q-mr-sm">
      Custom header
    </q-chip>
    <q-item-main label="using slot" />
    <q-item-side right>
      <q-icon name="star" color="red" size="24px" />
    </q-item-side>
  </template>

  <div>Collapsible content</div>
</q-collapsible>
<q-collapsible popup icon="mail" label="Inbox" sublabel="5 unread emails">
  <div>...content...</div>
</q-collapsible>
<q-collapsible popup icon="send" label="Outbox" sublabel="Empty">
  <div>...content...</div>
</q-collapsible>

Creating a Menu

<q-list separator>
  <q-collapsible indent icon="mail" label="Inbox" sublabel="5 unread emails" opened>

    <q-collapsible indent icon="receipt" label="Receipts">

      <q-collapsible label="Today">
        <div>...content...</div>
      </q-collapsible>
      <q-collapsible label="Yesterday">
        <div>...content...</div>
      </q-collapsible>

    </q-collapsible>

    <q-collapsible indent icon="schedule" label="Postponed">
      <div>...content...</div>
    </q-collapsible>

  </q-collapsible>

  <q-collapsible indent icon="send" label="Outbox" sublabel="Empty">
    <q-collapsible label="Today">
      <div>...content...</div>
    </q-collapsible>
    <q-collapsible label="Yesterday">
      <div>...content...</div>
    </q-collapsible>
  </q-collapsible>

  <q-collapsible indent icon="drafts" label="Draft" sublabel="Draft a new email">
    <div>...content...</div>
  </q-collapsible>
</q-list>

Preselecting Items

Collapsible items can be opened by default:

<q-collapsible opened icon="explore" label="First">
  <div>
    Content
  </div>
</q-collapsible>

<!-- or -->
<q-collapsible :opened="boolean_variable" icon="explore" label="First">
  <div>
    Content
  </div>
</q-collapsible>

Indenting Content

When you are building a complex menu (with sub-menus), like for example on a Left or Right side of QLayout, it’s useful to also have some kind of left-side indentation on the Collapsible content:

<q-collapsible indent icon="explore" label="First">
  <q-item link ...>...</q-item>
  <q-item link ...>...</q-item>
  <q-item link ...>...</q-item>
</q-collapsible>

Making Use of Events

<template>
  <q-collapsible
    indent
    icon="explore"
    label="Counter"
    @show="startCounting"
    @hide="stopCounting"
  >
    <div>
      <q-chip color="secondary">
        Counting: {{ counter }}
      </q-chip>
    </div>
    <div class="q-mt-md">
      Will only count when opened, using the show/hide events to control count timer.
    </div>
  </q-collapsible>
</template>

<script>
export default {
  data () {
    return {
      counter: 0
    }
  },
  methods: {
    startCounting () {
      this.hndl = setInterval(() => {
        this.counter++
      }, 1000)
    },
    stopCounting () {
      clearInterval(this.hndl)
    }
  }
}
</script>

Ubiquity

Be creative. In the example below we’re using a Card as Collapsible content.

<q-collapsible icon="explore" label="First Card" sublabel="Contains a Card">
  <q-card>
    <q-card-title>
      Card Title
    </q-card-title>
    <q-card-main>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </q-card-main>
  </q-card>
</q-collapsible>
Card DataTable
Last updated: Sat May 19 2018
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub