@wearegenki/vue-directive-view v0.11.0
@wearegenki/vue-directive-view
Overview
A very simple Vue custom directive to show or hide an element. It's a simpler alternative to using Vue' native v-show
.
Part of @wearegenki/ui — a friendly UI framework which aims to be straightforward, intuitive, and high performance.
NOTE: This plugin is a dependency a some of the @wearegenki/ui vue components and is required for them to work correctly.
Differences to v-show
- When used with other package in the @wearegenki/ui framework it results in significantly faster animation and rendering performance due to using CSS opacity instead of v-show's
display:none
. - Only adds or removes a
hide
class on the element. - Doesn't trigger
<transition>
animations.
Usage
- Install
yarn add @wearegenki/vue-directive-view
- Register
import Vue from 'vue';
import vView from '@wearegenki/vue-directive-view';
import App from './App';
// register the custom directive
Vue.use(vView);
new Vue({
el: '#app',
render: h => h(App),
});
+ if you arn't using @wearegenki/css you'll also need to add CSS styles to handle the visibility, e.g.:
.hide {
pointer-events: none;
opacity: 0;
}
- Use in component templates
<div v-view="toggle">Hidden element</div>
Options
The following options are available when registering the plugin:
NOTE: The default options are required for compatibility with @wearegenki/ui vue components.
Option | Default | Type | Description |
---|---|---|---|
name | 'view' | <String> | The directive property name, e.g. the default = v-view . |
class | 'hide' | <String> | The name of the class which is added and removed. |
Example:
...
Vue.use(vView, {
name: 'view',
class: 'hide',
});
...
Licence
@wearegenki/vue-directive-view
is part of @wearegenki/ui
, an Apache-2.0 licensed open source project. See LICENCE.
© 2018 We Are Genki
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago