@nativescript-community/ui-material-speeddial

When pressed, the Material Design component can display three to six related actions in the form of a speed dial.

Usage no npm install needed!

<script type="module">
  import nativescriptCommunityUiMaterialSpeeddial from 'https://cdn.skypack.dev/@nativescript-community/ui-material-speeddial';
</script>

README

NativeScript Material Speed dial

Material Design's Speed dial component for NativeScript.

npm npm

Contents

  1. Installation
  2. Changelog
  3. FAQ
  4. Usage

Installation

:warning: Warning :warning:

From NativeScript 5.x using this component will break the NativeScript tab component on iOS (which is bound to be removed). This is needed to allow using the latest native iOS features. If needed you can use either bottomnavigationbar (this one is the best choice, closest to material design) or material-tabs (clone of the NativeScript one, but with a little less features).

ns plugin add @nativescript-community/ui-material-speeddial

Be sure to run a new build after adding plugins to avoid any issues.

Changelog

FAQ

Usage

NativeScript + Vue

import Vue from 'nativescript-vue';
import speeddialPlugin from '@nativescript-community/ui-material-speeddial/vue';

Vue.use(speeddialPlugin);

<MDSpeedDial buttonFontSize="26" text="mdi-one-up"  buttonClass="mdi" buttonBackgroundColor="yellow" @tap="onTap">
    <MDSpeedDialItem icon="res://ic_action_add" title="test1" backgroundColor="red"  @tap="onTap"/>
    <MDSpeedDialItem text="mdi-card-account-mail" title="test2" buttonClass="mdi" backgroundColor="green"  @tap="onTap"/>
    <MDSpeedDialItem backgroundImage="~/images/iu.jpg"  backgroundColor="blue"  @tap="onTap"/>
    <MDSpeedDialItem icon="res://ic_action_add" title="test4" backgroundColor="orange" @tap="onTap"/>
</MDSpeedDial>