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 Property Type Description
opened Boolean Control if Collapsible is opened or not when first rendered.
group String Unique name which allows to group multiple Collapsible so they work as an Accordion.
popup Boolean “Popup” mode instead of default behavior.
indent Boolean Indent Collapsible content. Useful when building a menu with it.
icon-toggle Boolean Expand/Contract only by clicking/tapping on the arrow on the right.
collapse-icon String Icon used instead of default arrow on the right side.
header-style Array/String/Object Vue style binding for header.
header-class Array/String/Object Vue class binding for header.
disable Boolean Disable current Collapsible.

QItem & QItem related components inherited properties:

Inherited Property Type Description
icon, right-icon String Icon to use. Either use an icon, image, avatar or letter.
image, right-image String URL to image to use (point to statics). Either use an icon, image, avatar or letter.
avatar, right-avatar String URL to avatar to use (point to statics). Either use an icon, image, avatar or letter.
letter, right-letter String One character String to define a letter. Either use an icon, image, avatar or letter.
label String Label to use as title.
sublabel String Label to use as subtitle.
label-lines String / Number Number of lines the label can span to. Ellipsis are used when overflowing.
sublabel-lines String / Number Number of lines the sublabel can span to. Ellipsis are used when overflowing.
dense Boolean Use a dense QItem.
sparse Boolean Use a sparse QItem.
multiline Boolean Use a multiline QItem. Useful in cases where you use label and sublabel that spans multiple lines, but even then it’s optional.
separator Boolean Use a separator from other QItems or QCollapsibles, just like on QItem.
inset-separator Boolean Inset separator, same behavior as separator.

Vue Methods

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

Vue Events

Vue Method Description
@show Triggered after opening Collapsible.
@hide Triggered 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: Mon Jul 23 2018
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub