:construction: vue-classnames :construction:
Installation
yarn add vue-classnames# or npm i vue-classnames
Activation
There are two ways of activating this package: globally and locally. If you want to use it on a single component, it would be a good idea to go with the local method:
; Vue; // or SFC mixins: classNamesMixin;
To activate it globally, just use this package as Vue plugin, like so:
; Vue;
Usage
Heading.vue |
Content.vue |
---|---|
<template> <div :class="$classNames()"> <h1><slot /></h1> </div> </template> |
<template> <section> <Heading large padded>SFC demo</Heading> <!-- or simply --> <Heading big>SFC demo</Heading> </section> </template> |
Output | |
<section> <div class="relaxed large"> <h1>SFC demo</h1> </div> </section> |
API
vm.$classNames(defaultClassName = null)
Returns an array of the class names, otherwise defaultClassName
.
className
- If
true
, then prop name will be also name of the class. - If value is a string, then it will be name of the class.
- If value is a function then it will be executed with following object as argument
{ name, value, props }
, wherename
andvalue
are current prop name and value, andprops
contains all props passed to the component. - If value is array, then each element is treated as a single
className
.
NOTE:
If className
is a function or an array,
then both function output and each array element will be processed as a single className
, which means that all above rules apply to them.
EXAMPLE:
props: test1: // `$classNames` will return `['test1']` if `otherProp` is truthy. !!propsotherProp test2: // `$classNames` will return `['better-class']` if `someOtherProp` is truthy. !!propssomeOtherProp && 'better-class' test3: // `$classNames` will return `['btn', 'btn-blue']` if `blue` is truthy. !!propsblue && 'btn' 'btn-blue' test4: // `$classNames` will return `['test4']` if this prop value is `some-value`. value === 'some-value' && name test5: // `$classNames` will return `['btn', 'btn-large', 'btn-relaxed']` if `padded` is truthy, // otherwise it will return `['btn', 'btn-large']`. className: 'btn' 'btn-large' !!propspadded && 'btn-relaxed' ;