Controller Card

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>
 <ControllerCard
  class="text-white bg-gradient-success"
  :item="{
    state: true,
    label: { text: 'Wifi', class: 'mt-4' },
    description: 'Active',
  }">
  <Wifi />
 </ControllerCard>
</template>

<script setup>
import ControllerCard from "@/examples/cards/ControllerCard.vue";
</script>

1<template>
2 <ControllerCard
3  class="text-white bg-gradient-success"
4  :item="{
5    state: true,
6    label: { text: 'Wifi', class: 'mt-4' },
7    description: 'Active',
8  }">
9  <Wifi />
10 </ControllerCard>
11</template>
12
13<script setup>
14import ControllerCard from "@/examples/cards/ControllerCard.vue";
15</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 boolean. `description` of type string. `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.