Switch Card - Soft UI

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";
15export default { components: { SwitchCard, }, };
16</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.