nativescript-vue-fab

一个显示 Material Design Fab 按钮的 Vue 组件

安装

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);

您还需要从您的应用样式文件中导入 css 样式。原因是这种方式可以轻松覆盖任何 css 类。

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

使用方法

安装后，它可以在模板中使用，就像这样

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