Controller Card
PROThe ControllerCard component helps you to simply create a beautiful controller card that is switchable between on and off states.
The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.
Demo
// NextJS Material Dashboard 2 PRO examples
import ControllerCard from "/examples/Cards/ControllerCard";
// @mui material components
import Icon from "@mui/material/Icon";
Off
Temperature
ActiveProps Information
| Name | Type | Default | Description |
|---|---|---|---|
| color | 'primary''secondary''info''success''warning''error''dark' | dark | Used to set the ControllerCard background color when the `state` prop is equal to true. |
| state | bool | false | If true the ControllerCard background color will change, the switch will be active and the text off will be on. |
| icon* | node | Used to set the ControllerCard icon. Its a required prop. | |
| title* | string | Used to set the ControllerCard title. Its a required prop. | |
| description | string | Used to set the ControllerCard description. | |
| onChange* | event | Used to handle the `state` of the ControllerCard and makes the switch button able to toggle between `off` and `on` state. |
Functionality
Here is a complete example of ControllerCard including the functionality that how you can switch between `on` and `off` states of the card.