{"id":15018570,"url":"https://github.com/nstudio/nativescript-floatingactionbutton","last_synced_at":"2025-04-06T19:12:58.741Z","repository":{"id":3167546,"uuid":"48626432","full_name":"nstudio/nativescript-floatingactionbutton","owner":"nstudio","description":"Material Design Floating Action Button in NativeScript apps.","archived":false,"fork":false,"pushed_at":"2023-05-08T23:40:51.000Z","size":9325,"stargazers_count":137,"open_issues_count":36,"forks_count":33,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-10-29T21:54:21.287Z","etag":null,"topics":["android","ios","material-design","nativescript","nativescript-floatingactionbutton","nativescript-plugin","ui-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nstudio.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-12-26T23:16:36.000Z","updated_at":"2024-05-30T15:41:32.000Z","dependencies_parsed_at":"2023-07-05T21:32:51.334Z","dependency_job_id":null,"html_url":"https://github.com/nstudio/nativescript-floatingactionbutton","commit_stats":{"total_commits":231,"total_committers":21,"mean_commits":11.0,"dds":"0.49350649350649356","last_synced_commit":"d2b3fb66af28ec9908767ac8728f2f31e709bb48"},"previous_names":["bradmartin/nativescript-floatingactionbutton"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstudio%2Fnativescript-floatingactionbutton","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstudio%2Fnativescript-floatingactionbutton/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstudio%2Fnativescript-floatingactionbutton/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstudio%2Fnativescript-floatingactionbutton/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nstudio","download_url":"https://codeload.github.com/nstudio/nativescript-floatingactionbutton/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247535519,"owners_count":20954576,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","material-design","nativescript","nativescript-floatingactionbutton","nativescript-plugin","ui-components"],"created_at":"2024-09-24T19:52:07.816Z","updated_at":"2025-04-06T19:12:58.714Z","avatar_url":"https://github.com/nstudio.png","language":"TypeScript","readme":"\u003ca align=\"center\" href=\"https://www.npmjs.com/package/nativescript-floatingactionbutton\"\u003e\n    \u003ch3 align=\"center\"\u003eNativeScript-FloatingActionButton\u003c/h3\u003e\n\u003c/a\u003e\n\u003ch4 align=\"center\"\u003eNativeScript plugin for Material Design Floating Action Button UI component.\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@nstudio/nativescript-floatingactionbutton\"\u003e\n        \u003cimg src=\"https://github.com/nstudio/nativescript-floatingactionbutton/workflows/Build%20CI/badge.svg\" alt=\"Action Build\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@nstudio/nativescript-floatingactionbutton\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/v/@nstudio/nativescript-floatingactionbutton.svg\" alt=\"npm\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@nstudio/nativescript-floatingactionbutton\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/dt/@nstudio/nativescript-floatingactionbutton.svg?label=npm%20downloads\" alt=\"npm\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n## Installation\n\n### Nativescript 7+:\n\n`ns plugin add @nstudio/nativescript-floatingactionbutton`\n\n### NativeScript lower than 7:\n\n`tns plugin add @nstudio/nativescript-floatingactionbutton@2.1.0`\n\n### Screenshot\n\n---\n\n![FAB Android Screenshot](screens/android.png)\n![FAB iOS Screenshot](screens/ios.png)\n\n### Multiple FAB/Swipe Animation Support\n\n![FAB Animations](screens/animations.gif)\n\n## Usage\n\n\u003ch4\u003eThe icon for the FAB can be a local image in your app or an image/icon from the App_Resources.\u003c/h4\u003e\n\n### Plain NativeScript\n\n```xml\n\u003cPage xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\"\n      xmlns:FAB=\"@nstudio/nativescript-floatingactionbutton\"\u003e\n    \u003cActionBar title=\"Native FAB\" /\u003e\n    \u003cgrid-layout rows=\"auto, *\"\u003e\n        \u003clist-view row=\"1\" items=\"{{ users }}\"\u003e\n            \u003clist-view.itemTemplate\u003e\n                \u003clabel text=\"{{ name }}\" /\u003e\n            \u003c/list-view.itemTemplate\u003e\n        \u003c/list-view\u003e\n            \u003cFAB:fab tap=\"fabTap\"\n                     row=\"1\"\n                     icon=\"'~/assets/ic_add_white.png'\"\n                     rippleColor=\"#f1f1f1\"\n                     class=\"fab-button\" /\u003e\n    \u003c/grid-layout\u003e\n\u003c/Page\u003e\n```\n\n---\n\n### NativeScript Angular\n\n```typescript\nimport { registerElement } from 'nativescript-angular/element-registry';\nregisterElement(\n  'Fab',\n  () =\u003e require('@nstudio/nativescript-floatingactionbutton').Fab\n);\n```\n\n#### HTML\n\n```HTML\n\u003cStackLayout\u003e\n    \u003cFAB (tap)=\"fabTap()\" icon=\"~/assets/ic_add_white.png\" rippleColor=\"#f1f1f1\" class=\"fab-button\"\u003e\u003c/FAB\u003e\n\u003c/StackLayout\u003e\n```\n\n---\n\n### NativeScript Vue\n\n```javascript\nimport Vue from 'nativescript-vue';\n\nVue.registerElement(\n  'Fab',\n  () =\u003e require('@nstudio/nativescript-floatingactionbutton').Fab\n);\n```\n\n#### Template\n\n```html\n\u003ctemplate\u003e\n  \u003cpage\u003e\n    \u003cgrid-layout rows=\"auto, *\"\u003e\n      \u003clist-view row=\"1\" items=\"{{ users }}\"\u003e\n        \u003clist-view.itemTemplate\u003e\n          \u003clabel text=\"{{ name }}\" textWrap=\"true\" /\u003e\n        \u003c/list-view.itemTemplate\u003e\n      \u003c/list-view\u003e\n      \u003cfab\n        @tap=\"fabTap\"\n        row=\"1\"\n        icon=\"res://ic_add_white\"\n        rippleColor=\"#f1f1f1\"\n        class=\"fab-button\"\n      \u003e\u003c/fab\u003e\n    \u003c/grid-layout\u003e\n  \u003c/page\u003e\n\u003c/template\u003e\n```\n\n---\n\n#### CSS\n\nRecommended CSS styles.\n\n```css\n.fab-button {\n  height: 70;\n  width: 70; /// this is required on iOS - Android does not require width so you might need to adjust styles\n  margin: 15;\n  background-color: #ff4081;\n  horizontal-align: right;\n  vertical-align: bottom;\n}\n```\n\n## Use Icon Fonts\n\nFirst you need to setup icon fonts as described in [NativeScript documentation](https://docs.nativescript.org/ui/components/icon-fonts).\n\nAfter this, you can use icon fonts on FAB by specifiying the unicode as text and add the `fas`/`far` class:\n\n```\n\u003cFAB:fab text=\"\u0026#xf02a;\" class=\"fab-button fas\" /\u003e\n```\n\n---\n\n## API\n\n| Property              | Android | iOS | Description                                                                                                                                                                                      | Note                                                                                                 |\n| --------------------- | ------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |\n| backgroundColor       | X       | X   | Sets the background color of the button                                                                                                                                                          |\n| icon                  | X       | X   | Supports the same image source options that NativeScript images support                                                                                                                          | Required on android                                                                                  |\n| text                  | X       | X   | Allows to use text instead of image                                                                                                                                                              | Can be styled with `font-*` and `color` CSS properties                                               |\n| rippleColor           | X       |     | Ripple color on lollipop devices, it will fill the FAB on pre-lollipop devices                                                                                                                   | None                                                                                                 |\n| 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\" |\n| hideAnimationDuration | X       | X   | How many milliseconds it takes for the button to hide.                                                                                                                                           | Default if not set: 300ms                                                                            |\n| swipeAnimation        | X       | X   | slideDown, slideUp, slideLeft, slideRight, scale                                                                                                                                                 | Default is slideDown                                                                                 |\n| androidScaleType      | X       |     | center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY, matrix\u003cbr\u003e for more details see [Android-Docs](https://developer.android.com/reference/android/widget/ImageView.ScaleType) | Default is center                                                                                    |\n\n## iOS Notes\n\n- We're using [MNFloatingActionButton](http://cocoapods.org/pods/MNFloatingActionButton) by [Matt Nydam](https://github.com/mattnydam)\n- Width\\Height are requried properties\n- icon is a required property, if left as empty string default will be shown\n\n### Running Demo Apps\n\n```bash\nnpm run demo.android\n\n// or\n\nnpm run demo.ios\n```\n\n### [Changelog](./CHANGELOG.md)\n\n### Contributors\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\n| [\u003cimg src=\"https://avatars1.githubusercontent.com/u/6006148?s=100\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eBrad Martin\u003c/sub\u003e](https://github.com/bradmartin) | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/1542376?s=100\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eSteve McNiven-Scott\u003c/sub\u003e](https://github.com/sitefinitysteve) | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/850871?s=100\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eNathanael Anderson\u003c/sub\u003e](https://github.com/NathanaelA) | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/1100522?s=100\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eGabriel Marinho\u003c/sub\u003e](https://github.com/gabrielbiga) |\n| --------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |\n\n\n| [\u003cimg src=\"https://avatars1.githubusercontent.com/u/4092076?s=100\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eAlexander Vakrilov\u003c/sub\u003e](https://github.com/vakrilov) | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/8123916?s=100\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eLázaro Danillo Menezes\u003c/sub\u003e](https://github.com/lazaromenezes) | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/8638243?s=100\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eJofferson Ramirez Tiquez\u003c/sub\u003e](https://github.com/jofftiquez) | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/9256365?s=100\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eRavi\u003c/sub\u003e](https://github.com/dlucidone) |\n| -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |\n\n\n| [\u003cimg src=\"https://avatars3.githubusercontent.com/u/13824510?s=100\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eSamuel Ikechukwu\u003c/sub\u003e](https://github.com/holymp2006) | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/7893485?s=100\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eStanimira Vlaeva\u003c/sub\u003e](https://github.com/sis0k0) |     |     |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | --- | --- |\n\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnstudio%2Fnativescript-floatingactionbutton","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnstudio%2Fnativescript-floatingactionbutton","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnstudio%2Fnativescript-floatingactionbutton/lists"}