QActivity is an app extension for Quasar for making an activity list
Last updated 10 months ago by hawkeye64 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @quasar/quasar-app-extension-qactivity 
SYNC missed versions from official npm registry.

QActivity (@quasar/qactivity)

official icon npm (scoped) GitHub code size in bytes GitHub repo size in bytes npm

QActivity is an UI App Extension for Quasar Framework v1. It will not work with legacy versions of Quasar Framework.

This work is currently in beta and there are expected changes while things get worked out. Your help with testing is greatly appreciated.


QActivity is the smaller sister to QTimeline and can be used to create an activity list.

One of the most important actions is the ability to adjust the QActivity bar distance and the QActivityItem icon distance. This is needed when you adjust margins, padding or icon size to make everything line up properly. Therefore, when making an activity list, it is recommended to keep everything the same. If you do use different icon sizes, you will need to adjust the icon-distance property appropriately for each QActivityItem.


To add this App Extension to your Quasar application, run the following (in your Quasar app folder):

quasar ext add @quasar/qactivity


You can use quasar describe QActivity or quasar describe QActivityItem

Test Project

In demo folder of app-extension-qactivity.


Can be found here.

Example Code

Be sure to check out the Test Project for more examples.

        <q-item-label caption lines="2">Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.</q-item-label>

      <q-item-section side top>
        <q-item-label caption>5 min ago</q-item-label>
        <q-icon name="star" color="yellow" />
    v-for="(item, index) in data1"
    :class="{'bg-blue-grey-11': index % 2 }"
    <div class="inline-block vertical-middle middle-text">
      {{ item.text }}
    <div class="inline-block vertical-middle side-text">
      {{ item.time }}

QActivity Vue Properties

Vue Property Type Description
dense Boolean Dense mode; occupies less space
bar-color String CSS color (no Quasar colors allowed here)
bar-width String Size in CSS units, including unit name
bar-distance String Size in CSS units, including unit name

QActivity has no events or methods. It has a single "default" slot. You can put anything into this slot, but QActivityItem is expected.

QActivityItem Vue Properties

Vue Property Type Description
icon Boolean Icon name following Quasar convention; make sure you have the icon library installed
icon-color String Color name for icon from the Quasar Color Palette
icon-text-color String Color name for icon text from the Quasar Color Palette
icon-size String Size in CSS units, including unit name
icon-font-size String Size in CSS units, including unit name
icon-square Boolean Removes border-radius so borders are squared
icon-rounded Boolean Applies a small standard border-radius for a squared shape of the component
icon-image String Path to image to use. If used, do not also use icon, icon-color, icon-text-color or icon-font-size
icon-distance String Size in CSS units, including unit name. Used to help center icons on the bar

QActivityItem has no events or methods. It has a single "default" slot. You can put anything into this slot.


If you appreciate the work that went into this App Extension, please consider donating to Quasar.

Current Tags

  • 1.0.0-beta.5                                ...           latest (3 months ago)

6 Versions

  • 1.0.0-beta.5                                ...           3 months ago
  • 1.0.0-beta.4                                ...           10 months ago
  • 1.0.0-beta.3                                ...           a year ago
  • 1.0.0-beta.2                                ...           a year ago
  • 1.0.0-beta.1                                ...           a year ago
  • 1.0.0-alpha.1                                ...           2 years ago
Today 0
This Week 0
This Month 5
Last Day 0
Last Week 3
Last Month 3
Dependencies (0)
Dev Dependencies (7)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |