nativescript-vue-fab

nativescript-vue-fab

A Vue component that shows Material Design Fab button

Installation

npm i --save vue-clock-simple

import ButtonPlugin from '@nativescript-community/ui-material-button/vue';
import CardViewPlugin from 'nativescript-material-cardview/vue';
import FabPlugin from 'nativescript-vue-fab';
Vue.use(ButtonPlugin);
Vue.use(CardViewPlugin);
Vue.use(FabPlugin);

You also need to import the css style from your app style file. The reason is that this way you can easily override any css class.

@import '../node_modules/nativescript-vue-fab/style';

Usage

Once installed, it can be used in a template as simply as:

<Fab title="test" iconClass="mdi" :icon="'mdi-plus' | fonticon" :iconOn="'mdi-share-variant' | fonticon" @tap="onTap('main', $event)">
    <FabItem title="test6" iconClass="mdi" icon="e" color="red" @tap="onTap('test6', $event)" />
    <FabItem title="test5" iconClass="mdi" icon="d" color="red" @tap="onTap('test5', $event)" />
    <FabItem title="test4" iconClass="mdi" icon="c" color="red" @tap="onTap('test4', $event)" />
    <FabItem title="test3" iconClass="mdi" icon="b" color="red" @tap="onTap('test3', $event)" />
    <FabItem title="test" iconClass="mdi" icon="a" color="blue" @tap="onTap('test', $event)" />
</Fab>