Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nstudio/nativescript-floatingactionbutton
Material Design Floating Action Button in NativeScript apps.
https://github.com/nstudio/nativescript-floatingactionbutton
android ios material-design nativescript nativescript-floatingactionbutton nativescript-plugin ui-components
Last synced: 3 days ago
JSON representation
Material Design Floating Action Button in NativeScript apps.
- Host: GitHub
- URL: https://github.com/nstudio/nativescript-floatingactionbutton
- Owner: nstudio
- License: other
- Created: 2015-12-26T23:16:36.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-05-08T23:40:51.000Z (over 1 year ago)
- Last Synced: 2024-10-29T21:54:21.287Z (3 months ago)
- Topics: android, ios, material-design, nativescript, nativescript-floatingactionbutton, nativescript-plugin, ui-components
- Language: TypeScript
- Homepage:
- Size: 8.89 MB
- Stars: 137
- Watchers: 8
- Forks: 33
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
NativeScript-FloatingActionButton
NativeScript plugin for Material Design Floating Action Button UI component.
## Installation
### Nativescript 7+:
`ns plugin add @nstudio/nativescript-floatingactionbutton`
### NativeScript lower than 7:
`tns plugin add @nstudio/[email protected]`
### Screenshot
---
### Multiple FAB/Swipe Animation Support
## Usage
The icon for the FAB can be a local image in your app or an image/icon from the App_Resources.
### Plain NativeScript
```xml
```
---
### NativeScript Angular
```typescript
import { registerElement } from 'nativescript-angular/element-registry';
registerElement(
'Fab',
() => require('@nstudio/nativescript-floatingactionbutton').Fab
);
```
#### HTML
```HTML
```
---
### NativeScript Vue
```javascript
import Vue from 'nativescript-vue';
Vue.registerElement(
'Fab',
() => require('@nstudio/nativescript-floatingactionbutton').Fab
);
```
#### Template
```html
```
---
#### CSS
Recommended CSS styles.
```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;
}
```
## Use Icon Fonts
First you need to setup icon fonts as described in [NativeScript documentation](https://docs.nativescript.org/ui/components/icon-fonts).
After this, you can use icon fonts on FAB by specifiying the unicode as text and add the `fas`/`far` class:
```
```
---
## API
| Property | Android | iOS | Description | Note |
| --------------------- | ------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
| backgroundColor | X | X | Sets the background color of the button |
| icon | X | X | Supports the same image source options that NativeScript images support | Required on android |
| text | X | X | Allows to use text instead of image | Can be styled with `font-*` and `color` CSS properties |
| rippleColor | X | | Ripple color on lollipop devices, it will fill the FAB on pre-lollipop devices | None |
| hideOnSwipeOfView | X | X | Directs the fab to animate itself in and out on scroll | Pass it the name of the view to monitor for a scroll event example: hideOnSwipeOfView="userListView" |
| hideAnimationDuration | X | X | How many milliseconds it takes for the button to hide. | Default if not set: 300ms |
| swipeAnimation | X | X | slideDown, slideUp, slideLeft, slideRight, scale | Default is slideDown |
| androidScaleType | X | | center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY, matrix
for more details see [Android-Docs](https://developer.android.com/reference/android/widget/ImageView.ScaleType) | Default is center |
## iOS Notes
- We're using [MNFloatingActionButton](http://cocoapods.org/pods/MNFloatingActionButton) by [Matt Nydam](https://github.com/mattnydam)
- Width\Height are requried properties
- icon is a required property, if left as empty string default will be shown
### Running Demo Apps
```bash
npm run demo.android
// or
npm run demo.ios
```
### [Changelog](./CHANGELOG.md)
### Contributors
| [
Brad Martin](https://github.com/bradmartin) | [
Steve McNiven-Scott](https://github.com/sitefinitysteve) | [
Nathanael Anderson](https://github.com/NathanaelA) | [
Gabriel Marinho](https://github.com/gabrielbiga) |
| --------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [
Alexander Vakrilov](https://github.com/vakrilov) | [
Lázaro Danillo Menezes](https://github.com/lazaromenezes) | [
Jofferson Ramirez Tiquez](https://github.com/jofftiquez) | [
Ravi](https://github.com/dlucidone) |
| -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| [
Samuel Ikechukwu](https://github.com/holymp2006) | [
Stanimira Vlaeva](https://github.com/sis0k0) | | |
| --------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | --- | --- |