Vue Controller Card - Argon

PRO

The ControllerCard component helps you to simply create a beautiful controller card that is switchable between on and off states.

Demo

Wifi

Active

<template>
 <controller-card
  class="text-white bg-gradient-success"
  :item="{
    state: 'On',
    label: { text: 'Wifi', class: 'mt-4' },
    description: 'Active',
  }">
  <air />
 </controller-card>
</template>

<script>
import ControllerCard from '@/examples/Cards/ControllerCard.vue";
import Wifi from "@/components/Icons/Wifi.vue";

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

1<template>
2 <controller-card
3  class="text-white bg-gradient-success"
4  :item="{
5    state: 'On',
6    label: { text: 'Wifi', class: 'mt-4' },
7    description: 'Active',
8  }">
9  <air />
10 </controller-card>
11</template>
12
13<script>
14import ControllerCard from '@/examples/Cards/ControllerCard.vue";
15import Wifi from "@/components/Icons/Wifi.vue";
16
17export default {
18 components: {
19    ControllerCard,
20    Wifi,
21   },
22 };
23</script>

Props Information

Name	Type	Default	Description
item*	Object		`item` is a required object used to set the details for the `ControllerCard` component. It has the following keys: `state` of type string. `description` of type string. `isChecked` of type Boolean. `label` of type object with the following keys: `text` of type string. `class` of type string
slot			The `ControllerCard` component has a default slot that is used to pass icon or node.