Statistics Card - Material

PRO

The Statistics Cards components helps you to simply create a beautiful card displaying data in an interesting way.

Mini Statistics Card

Music Volume

15/100

<template>
  <mini-statistics-card
   :title="{
    text: 'Music Volume',
    color: 'opacity-7 text-gray',
  }"
   :value="{
    text: '15/100',
    color: 'text-dark',
  }"
   :icon="{
    component: 'volume_down',
    background: 'bg-success',
 }"
/>
</template>

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

1<template>
2  <mini-statistics-card
3   :title="{
4    text: 'Music Volume',
5    color: 'opacity-7 text-gray',
6  }"
7   :value="{
8    text: '15/100',
9    color: 'text-dark',
10  }"
11   :icon="{
12    component: 'volume_down',
13    background: 'bg-success',
14 }"
15/>
16</template>
17
18<script>
19import MiniStatisticsCard from '@/examples/Cards/MiniStatisticsCard.vue";
20export default { components: { MiniStatisticsCard, }, };
21</script>

Props Information

Name	Type	Default	Description
directionReverse	boolean	false	Used to set the of the `MiniStatisticsCard` component to RTL.
title	['String', 'Object']		`title` as an obbject allows to set the title `text` and `color`.
value*	'string', 'object', 'number'		Used to set a value for the `MiniStatisticsCard` component. As an object receives two values: `text` of type [string, number] to set a value. `color` of type string to set the value color. It is a required prop.
icon	['String', 'Object']		icon is used to set the icon. And `icon` as an object allows to set the icon `component`, icon `background` color and icon.
classContent	String		`classContent` is used to apply custom classes around the content of the `MiniStatisticsCard`.