Lists

Easy-to-use List component with support for icons, avatars, item selection.

Components

• va-list
• va-item
• va-list-label
• va-item-section
• va-item-label

Here's the general example:

<va-list fit>
  <va-list-label color="primary">
    Customers
  </va-list-label>

  <va-item clickable to="/foo/1" @click="notify">
    <va-item-section side>
      <va-icon name="fa fa-star" />
    </va-item-section>

    <va-item-section avatar>
      <va-avatar>
        <img src="path">
      </va-avatar>
    </va-item-section>

    <va-item-section>
      <va-item-label>
        Add profile images
      </va-item-label>

      <va-item-label caption>
        You can use PNG or JPG files.
      </va-item-label>
    </va-item-section>
  </va-item>
</va-list>

va-list

Props

• fit - Boolean - full width

va-item

Props

• clickable - Boolean - make list items clickable
• to - String - use item as router-link

va-list-label

Props

• color- String (default: info) - theme or color

va-item-section

Props

• avatar- Boolean - reserve space for an avatar (48px)
• side- Boolean - reserve space for an icon / action (24px)

va-item-label

Props

• caption- Boolean - smaller (caption) text