Installation
npm install vhue
Run the app
If you clone the repository you can run a local web server to test the component
git clone git@github.com:rtransat/vhue.git
npm install
npm run serve
Usage
<template> <div id="app"> <Hue icon="living" name="Living room" color="#ffc457" :is-on="false" @change="onChange" /> <Hue icon="living" name="Living room" :color="['#4a2cb6', '#c66cd8']" :is-on="true" @change="onChange" /> </div></template> <script>import Hue from "vhue"; export default { name: "app", components: { Hue }, methods: { onChange(isOn) { console.log(isOn); } }};</script>
Documentation
Props
icon
: String
Icon to display
- attic
- balcony
- bathroom
- bedroom
- carpot
- closet
- computer
- dining
- driveway
- frontdoor
- garage
- guestroom
- gym
- hallway
- kidsbedroom
- kitchen
- laundryroom
- living
- lounge
- mancave
- nursery
- office
- other
- outdoor
- outdoor-socialtime
- pool
- porch
- recreation
- socialtime
- staircase
- storage
- studio
- terrace
- toilet
name
: String
ID of the light
name
: String
Name of the light
color
: String or Array
Background color of the component when the light is on. If array the background will be a gradient
intensity
: Number
Percentage value of intensity of the light
:is-on
: Boolean
default: false
Indicates if the light is on or off
Event
toggle
: Function
params: id, isOn
Trigger when the switch button is checked
change
: Function
params: id, value
Trigger when the slider value change
Credit
Icons come from the official Philips Hue icon pack