nativescript-floatingactionbutton-enduco | NativeScript 市场place

NativeScript-FloatingActionButton

NativeScript 插件，用于 Material Design 浮动操作按钮 UI 组件。

安装

Nativescript 7+

ns plugin add @nstudio/nativescript-floatingactionbutton

NativeScript 低于 7

tns plugin add @nstudio/[email protected]

屏幕截图

FAB Android Screenshot FAB iOS Screenshot

支持多个 FAB/滑动动画

FAB Animations

用法

FAB 的图标可以是应用中的本地图片或 App_Resources 中的图片/图标。

纯 NativeScript

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded"
      xmlns:FAB="@nstudio/nativescript-floatingactionbutton">
    <ActionBar title="Native FAB" />
    <grid-layout rows="auto, *">
        <list-view row="1" items="{{ users }}">
            <list-view.itemTemplate>
                <label text="{{ name }}" />
            </list-view.itemTemplate>
        </list-view>
            <FAB:fab tap="fabTap"
                     row="1"
                     icon="'~/assets/ic_add_white.png'"
                     rippleColor="#f1f1f1"
                     class="fab-button" />
    </grid-layout>
</Page>

NativeScript Angular

import { registerElement } from 'nativescript-angular/element-registry';
registerElement(
  'Fab',
  () => require('@nstudio/nativescript-floatingactionbutton').Fab
);

HTML

<StackLayout>
    <FAB (tap)="fabTap()" icon="'~/assets/ic_add_white.png'" rippleColor="#f1f1f1" class="fab-button"></FAB>
</StackLayout>

NativeScript Vue

import Vue from 'nativescript-vue';

Vue.registerElement(
  'Fab',
  () => require('@nstudio/nativescript-floatingactionbutton').Fab
);

模板

<template>
  <page>
    <grid-layout rows="auto, *">
      <list-view row="1" items="{{ users }}">
        <list-view.itemTemplate>
          <label text="{{ name }}" textWrap="true" />
        </list-view.itemTemplate>
      </list-view>
      <fab
        @tap="fabTap"
        row="1"
        icon="res://ic_add_white"
        rippleColor="#f1f1f1"
        class="fab-button"
      ></fab>
    </grid-layout>
  </page>
</template>

CSS

推荐的 CSS 样式。

.fab-button {
  height: 70;
  width: 70; /// this is required on iOS - Android does not require width so you might need to adjust styles
  margin: 15;
  background-color: #ff4081;
  horizontal-align: right;
  vertical-align: bottom;
}

使用图标字体

首先，您需要按照 NativeScript 文档中的说明设置图标字体。

之后，您可以通过指定 unicode 作为文本并添加 fas/far 类来在 FAB 上使用图标字体。

<FAB:fab text="&#xf02a;" class="fab-button fas" />

API

属性	Android	iOS	描述	注意
backgroundColor	X	X	设置按钮的背景颜色
icon	X	X	支持与 NativeScript 图像相同的图像源选项	在 Android 上必需
text	X	X	允许使用文本而不是图像	可以使用 `font-*` 和 `color` CSS 属性进行样式化
rippleColor	X		在 Lollipop 设备上的水波纹颜色，在预 Lollipop 设备上它将填充 FAB	无
hideOnSwipeOfView	X	X	将 fab 指向在滚动时自动进入和退出的动画	传递要监视滚动事件的视图的名称，例如：hideOnSwipeOfView="userListView"
hideAnimationDuration	X	X	按钮隐藏所需的时间（毫秒）	默认值（未设置时）：300ms
swipeAnimation	X	X	slideDown, slideUp, slideLeft, slideRight, scale	默认值：slideDown
androidScaleType	X		center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY, matrix 有关更多详细信息，请参阅 Android 文档	默认值：center

iOS 注意事项

我们使用 MNFloatingActionButton，由 Matt Nydam 提供
宽度/高度是必需属性
图标是必需属性，如果留空，则显示默认图标

变更日志

贡献者

_{Brad Martin}	_{Steve McNiven-Scott}	_{Nathanael Anderson}	_{Gabriel Marinho}

_{Alexander Vakrilov}	_{Lázaro Danillo Menezes}	_{Jofferson Ramirez Tiquez}	_Ravi

_{Samuel Ikechukwu}	_{Stanimira Vlaeva}