vue-css-modifiers
vue-css-modifiers provides a tiny, zero-dependencies directive to simplify the manipulation of CSS modifier classes.
The following code:
becomes:
The modifier classes merge seamlessly with other static and dynamic classes. You can also easily enforce the style of your choosing ('is-' or BEM) with a simple directive modifier.
Using a different directive to declare CSS modifiers also brings the indirect benefit of a clear separation between the main classes and their modifiers.
Installation
npm i vue-css-modifiers
Usage
Import and register the directive in the entry point of your app:
// main.js Vue;// […]
Call the directive using one of the following expressions:
- a string denoting a class name
- an array of strings denoting some class names
- an object whose keys are properties and values booleans
Examples:
<!-- With the string expression, the class name will be added/removed if the property with the corresponding camel case name is true/false --> <!-- Output: <div class="is-hidden"></div> --> <!-- Same thing but with several classes --> <!-- Output: <div class="is-hidden is-height-fixed"></div> --> <!-- With an object expression, the names of the properties will be converted to kebab case --> <!-- Output: <div class="is-height-fixed is-spinning"></div> --> <!-- Works with both props and data --> <!-- Output: <div class="is-opened is-height-fixed"></div> -->
Syntax modifiers
Use the is
modifier to automatically prefix all modifier classes with is-
:
<!-- Output: <div class="is-hidden, is-height-fixed"></div> -->
Use the bem
modifier to add the modifier class as a suffix to another class.
This base class can either be defined explicitly through a directive argument,
or left implicit (in that case, the directive will use the first class it founds
that is not a BEM modifier). Either way, if the base class is not present on the
element, the modifier will not be added.
<!-- Implicit base class --><!-- Output: <div class="navbar navbar––hidden"></div> --> <!-- Explicit base class --><!-- Output: <div class="left sidebar sidebar––hidden"></div> --> <!-- Dynamic base class --><!-- Output: <div class="menu-bottom"></div> (menuPos == 'bottom') <div class="menu-top menu-top––hidden"></div> (menuPos == 'top')--> <!-- Dynamic base class with dynamic argument --><!-- Output: <div class="navbar-left navbar-left––hidden"></div> -->
Using 'is-' or BEM syntax by default
If you register the directive with the name is
or bem
, it will discard
modifiers and always enforce the respective syntax.
// main.js Vue;Vue;// […]
<!-- Output: <div class="navbar is-hidden"></div> --> <!-- Output: <div class="navbar navbar––hidden"></div> -->
Changelog
See the full changelog here.
License
This software is distributed under the ISC license.