安装

如果使用 @nativescript

• tns plugin add nativescript-material-floatingactionbutton

如果使用 tns-core-modules

• tns plugin add [email protected]

确保在添加插件后运行新的构建，以避免任何问题。

Material Design 规范

使用方法

纯 NativeScript

重要： 确保在 Page 元素上包含 xmlns:mdf="nativescript-material-floatingactionbutton"

XML

<Page xmlns:mdf="nativescript-material-floatingactionbutton">
    <StackLayout horizontalAlignment="center">
        <mdf:FloatingActionButton src="res://ic_action_add"/>
        <mdf:FloatingActionButton elevation="5" src="res://ic_action_add"/>
   </StackLayout>
</Page>

CSS

mdcfloatingactionbutton {
    ripple-color: blue;
    elevation: 4;
}

NativeScript + Angular

import { registerElement } from '@nativescript/angular/element-registry';
import { FloatingActionButton } from 'nativescript-material-floatingactionbutton';
registerElement('MDFloatingActionButton', () => FloatingActionButton);

<MDFloatingActionButton rippleColor="blue" src="res://ic_action_add"></MDFloatingActionButton>

NativeScript + Vue

import Vue from 'nativescript-vue';
import FloatingActionButtonPlugin from 'nativescript-material-floatingactionbutton/vue';

Vue.use(FloatingActionButtonPlugin);

<MDFloatingActionButton rippleColor="blue" src="res://ic_action_add"/>

属性

继承自 Nativescript Button 因此它已经具有所有相同的属性

属性

• src 可选

一个用于设置 floatingactionbutton 图标的属性。目前 FAB 仅支持图片作为图标

• elevation 可选

一个用于设置 floatingactionbutton 仰角的属性。这将增加 floatingactionbutton 的 'drop-shadow'。

• rippleColor 可选

一个用于设置 floatingactionbutton 波纹颜色的属性。