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

    Install

    npm i vhue

    DownloadsWeekly Downloads

    2

    Version

    0.5.0

    License

    MIT

    Unpacked Size

    558 kB

    Total Files

    42

    Last publish

    Collaborators

    • rtransat