vhue

0.5.0 • Public • Published

vhue component

Demo | Source

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

Package Sidebar

Install

npm i vhue

Weekly Downloads

1

Version

0.5.0

License

MIT

Unpacked Size

558 kB

Total Files

42

Last publish

Collaborators

  • rtransat