Categories List - Material

PRO

The CategoriesList component helps you to simply create a beautiful list of items.

Demo

Categories

Devices
250 in stock 346+ sold
Tickets
23 closed 15 open
Error logs
1 is active 40 closed
Happy Users
+ 430

<template>
  <categories-list
  :items="[
    {
      icon: { component: 'launch', background: 'dark' },
      title: 'Devices',
      description: '250 in stock <strong>346+ sold</strong>',
    },
    {
      icon: {
        component: 'book_online',
        background: 'dark',
      },
      title: 'Tickets',
      description: '123 closed <strong>15 open</strong>',
    },
    {
      icon: { component: 'priority_high', background: 'dark' },
      title: 'Error logs',
      description: '1 is active <strong>40 closed</strong>',
    },
    {
      icon: { component: 'insert_emoticon', background: 'dark' },
      title: 'Happy Users',
      description: '+ 430',
    },
  ]"
/>
</template>

<script>
import CategoriesList from '@/examples/Cards/CategoriesList.vue";
export default { components: { CategoriesList, }, };
</script>

1<template>
2  <categories-list
3  :items="[
4    {
5      icon: { component: 'launch', background: 'dark' },
6      title: 'Devices',
7      description: '250 in stock <strong>346+ sold</strong>',
8    },
9    {
10      icon: {
11        component: 'book_online',
12        background: 'dark',
13      },
14      title: 'Tickets',
15      description: '123 closed <strong>15 open</strong>',
16    },
17    {
18      icon: { component: 'priority_high', background: 'dark' },
19      title: 'Error logs',
20      description: '1 is active <strong>40 closed</strong>',
21    },
22    {
23      icon: { component: 'insert_emoticon', background: 'dark' },
24      title: 'Happy Users',
25      description: '+ 430',
26    },
27  ]"
28/>
29</template>
30
31<script>
32import CategoriesList from '@/examples/Cards/CategoriesList.vue";
33export default { components: { CategoriesList, }, };
34</script>

Props Information

Name	Type	Default	Description
title	String	Categories	Used to set the `CategoriesList` title.
items*	Array		Used to set the `CategoriesList` items, it should be an `array`of objects and the objects should contain the following keys: `icon` of type object with `component` and `background` keys. `title` of type string. `description` of type string. It is a required prop.