vue-classnames

0.1.0 • Public • Published

: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:

import { mixin as classNamesMixin } from 'vue-classnames';
 
Vue.component('my-component', {
  mixins: [classNamesMixin],
});
 
// or SFC
export default {
  mixins: [classNamesMixin],
};

To activate it globally, just use this package as Vue plugin, like so:

import VueClassNames from 'vue-classnames';
 
Vue.use(VueClassNames);

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 }, where name and value are current prop name and value, and props 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:
export default {
   props: {
     test1: {
       // `$classNames` will return `['test1']` if `otherProp` is truthy.
       className: ({ props }) => !!props.otherProp,
     },
     test2: {
       // `$classNames` will return `['better-class']` if `someOtherProp` is truthy.
       className: ({ props }) => !!props.someOtherProp && 'better-class',
     },
     test3: {
       // `$classNames` will return `['btn', 'btn-blue']` if `blue` is truthy.
       className: ({ props }) => !!props.blue && ['btn', 'btn-blue'],
     },
     test4: {
       // `$classNames` will return `['test4']` if this prop value is `some-value`.
       className: ({ name, 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', ({ props }) => !!props.padded && 'btn-relaxed'],
     },
  },
};

Package Sidebar

Install

npm i vue-classnames

Weekly Downloads

0

Version

0.1.0

License

MIT

Unpacked Size

6.76 kB

Total Files

4

Last publish

Collaborators

  • visualfanatic