List and List Items

The QList and QItem are a group of components which can work together to present multiple line items vertically as a single continuous element. They are best suited for displaying similar data types as rows of information, such as a contact list, a playlist or menu. Each row is called an Item. QItem can also be used outside of a QList too.

Lists can encapsulate Items or Item-like components, for example QExpansionItem or QSlideItem. Also QSeparator can be used to split up sections, where needed.

List Items have the following pre-built child components:

  • QItemSection - An item section can have several uses for particular content. They are controlled via the avatar, thumbnail and side props. With no props, it will render the main section of your QItem (which spans to the fullest of available space).

  • QItemLabel - An item label is useful for predefined text content type within a QItemSection, or for header-like content of the QList itself.

Installation


// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QList',
      'QItem',
      'QItemSection',
      'QItemLabel'
    ]
  }
}

Usage

Basic

Basic



On a dark background



Dense



QItemSection

Left avatar/thumbnail QItemSection



Right avatar/thumbnail QItemSection



TIP

When you have multi-line items, you could use top property on QItemSection side/avatar to align the sections to top, overriding default middle alignment.

Side QItemSection



Active state

Active prop



QItemLabel

WARNING

Notice you can handle label overflow with lines prop, telling it how many lines it can span. However, this feature uses Webkit specific CSS so won’t work in IE/Edge.

ItemLabel



More involved examples

Contact list



Settings



Emails



Folder listing



For demoing purposes in the example below, we’re using the active prop instead of QItem’s router props (to, exact). UMD doesn’t have Vue Router so you wouldn’t be able to play with it in Codepen/jsFiddle.

Menu



TIP

For more complex menus, consider also using QExpansionItem.

Connecting to Vue Router

You can use QItems together with Vue Router through <router-link> properties bound to it. These allow for listening to the current app route and also triggering a route when clicked/tapped.

<q-item to="/inbox" exact>
  <q-item-section avatar>
    <q-icon name="inbox" />
  </q-item-section>

  <q-item-section>
    Inbox
  </q-item-section>
</q-item>

QList API

QItem API

QItemSection API

QItemLabel API