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

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

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

Loading API...
Please wait...

QItem API

Loading API...
Please wait...

QItemSection API

Loading API...
Please wait...

QItemLabel API

Loading API...
Please wait...