Skip to content

Official Vue flavour of Reactive CSS Properties - A tiny library to superchage your styling workflow. With Reactive CSS Properties (re.css) you can set css custom properties and react to changes in realtime from JavaScript

License

Notifications You must be signed in to change notification settings

adam-cyclones/vue-reactive-css-properties

Repository files navigation

Reactive css logo

Vue Reactive CSS Properties

Vue flavour of Reactive CSS Properties - A tiny library to supercharge your styling workflow. With Reactive CSS Properties (re.css) you can set css custom properties and react to changes in realtime from JavaScript

Experimental

The Plugin is functional but no release exists yet, or instructions or tests. check back in soon.

This is not the readme - TODO

Design notes

<!-- declare a prop --> <script> {  props: {  themeTextColor: {  type: CSSProp,  validator: CSSProp.validator,  default: () => new CSSProp()  }  } } </script> <!-- update a property --> <script> {  methods: {  handleColorChange(e) {  const value = e.target.value;  this.themeTextColor(value);  },  handleClick() {  this.themeTextColor("blue");  }  } } </script> <!-- watch css property in realtime --> <script> {  watch: {  themeTextColor(color, oldValue) {  console.log("change", color, "was", oldValue);  this.msg = `Hello Reactive CSS!, the color is now ${color}`;  }  } } </script>

About

Official Vue flavour of Reactive CSS Properties - A tiny library to superchage your styling workflow. With Reactive CSS Properties (re.css) you can set css custom properties and react to changes in realtime from JavaScript

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published