# Vue Breathing Colors ## [Demo](https://mycurelabs.github.io/vue-breathing-colors/) ## Installation ### **Yarn** ``` yarn add vue-breathing-colors ``` ### **NPM** ``` npm install vue-breathing-colors --save ``` ### **CDN** ```html

``` ## Sample ### **Auto** The colors will change from array index `0` to array index `n` and back to `0` again. #### HTML ```html

``` #### JavaScript ```javascript export default { data() { return { sample: { colors: ['red', 'green', 'blue'], interval: 3000, transition: { duration: 1000 } } } } } ``` ## API The main data needed by the directive is an object with 3 required fields `colors:Array`, `intervale:Number`, `transition:[Object, duration:Number]`. | Object | Type | Decription | | --------------------- | --------------- | ------------------------------------------------------------------------- | | `colors` | Array | Array of string colors. E.g. `#fff`, `#000000`, `red`, `rgb()`, `rgba()`. | | `interval` | Number (millis) | Interval indicates how often the color should change. | | `transition.duration` | Number (millis) | The duration of transition timing. | ## Modifiers There 2 modifiers for this version, the `hover` and `random`. | Modifier | Usage | Description | | -------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `random` | `v-breathing-colors.random` | Using the random modifier will... you know, change the colors in random. | | `hover` | `v-breathing-colors.hover` | Unlike the auto, hover will disrespect the inverval from the data object. The color will change in the auto order `0`,`1`,`2`,`3`,etc.. but only when the `onmouseover` event was triggered. | ## Tips 1. Modifiers can be combined like `v-breathing-colors.random.hover`. 2. For best result, always keep in mind that the `interval` should always be greater of at least `200%` than the `transition.duration`. Say, the `transition.duration` is 1000, the minimum `interval` should be at least 2000. ## More coming soon More modifiers will be added for future versions. Made with

by [Joff Tiquez](https://twitter.com/jrtiquez) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://oss.mycure.md/vue-breathing-colors/vue-breathing-colors.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.