Vue Categories List - Argon

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

<template>
  <categories-list
  :items="[
    {
      icon: {
        component: 'ni ni-mobile-button',
        background: 'dark',
      },
      label: 'Devices',
      description: '250 in stock <strong>346+ sold</strong>',
    },
    {
      icon: {
        component: 'ni ni-tag',
        background: 'dark',
      },
      label: 'Tickets',
      description: '123 closed <strong>15 open</strong>',
    },
    {
      icon: { component: 'ni ni-box-2', background: 'dark' },
      label: 'Error logs',
      description: '1 is active <strong>40 closed</strong>',
    },
  ]"
/>
</template>

<script>
import CategoriesList from '@/examples/Cards/CategoriesList.vue";

export default {
 components: {
    CategoriesList,
   },
 };
</script>

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

Props Information

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