Switch Card

PRO

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

Demo

Off

Air Conditioner

Inactive since: 1 hour

<template>
 <switch-card
  :item="{
   state: 'Off',
    label: 'Air Conditioner',
    description: 'Inactive since: 1 hour',
    classCustom: 'mt-4',
  }" >
  <air />
</switch-card>
</template>

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

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

1<template>
2 <switch-card
3  :item="{
4   state: 'Off',
5    label: 'Air Conditioner',
6    description: 'Inactive since: 1 hour',
7    classCustom: 'mt-4',
8  }" >
9  <air />
10</switch-card>
11</template>
12
13<script>
14import SwitchCard from '@/examples/Cards/SwitchCard.vue";
15
16export default {
17 components: {
18    SwitchCard,
19   },
20 };
21</script>

Props Information

Name	Type	Default	Description
item*	state, label, description, isChecked, classCustom		`item` is an object used to set the details for the `SwitchCard` component.
slot			The `SwitchCard` component has a default slot that can be used to pass icon or node.