NativeScript Material Floating action button

为 NativeScript 提供的 Material Design 浮动操作按钮 组件。

内容

1. 安装
2. 变更日志
3. 常见问题解答
4. 用法
   • 纯 NativeScript
   • Angular
   • Vue
5. API

安装

适用于 NativeScript 7.0+

• tns plugin add @nativescript-community/ui-material-floatingactionbutton

适用于 NativeScript 6.x

• tns plugin add nativescript-material-floatingactionbutton

如果使用 tns-core-modules

• tns plugin add [email protected]

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

变更日志

常见问题解答

用法

纯 NativeScript

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

XML

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

CSS

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

NativeScript + Angular

import { registerElement } from '@nativescript/angular/element-registry';
import { FloatingActionButton } from '@nativescript-community/ui-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-community/ui-material-floatingactionbutton/vue';

Vue.use(FloatingActionButtonPlugin);

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

API

属性

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

• src 可选

用于设置浮动操作按钮图标的属性。目前 FAB 仅支持图像作为图标。

• elevation 可选

用于设置浮动操作按钮的抬升度的属性。这将增加浮动操作按钮的“阴影”。

• rippleColor 可选

用于设置浮动操作按钮波纹颜色的属性。