Nativescript-angular: Request to support Material Design components like Floating Action Button (FAB), Cards, Navigation Animations, etc

Created on 26 Apr 2016  路  4Comments  路  Source: NativeScript/nativescript-angular

As we are all using the latest Android versions which support Material Design components, it would be nice if we get full support for all the Material Design elements in this integration of Angular 2 with NativeScript.

Request to support Material Design components like Floating Action Button (FAB), Cards, Navigation Animations, etc.

Most helpful comment

https://github.com/matt4446/Demo-Material-NativeScript/tree/master/screenshots/Android

here is a very early demo/sample project that implements:

  • cardview
  • pulltorefresh
  • fab (partly done, I would rather use the material font and or text instead of a resources)

Anyone can use that as a getting started point with any of the components. I'll be adding more controls + a light theme as I find time.

All 4 comments

So Material only for Android? or both Android, IOS and later Windows

I'm already using cards in nativescript-angular, action buttons would be easy to add to a nativescript project.

IOS and Android specific versions have been included by Brad and Nathan:
https://github.com/bradmartin/nativescript-cardview
https://github.com/bradmartin/nativescript-floatingactionbutton
https://github.com/bradmartin/nativescript-snackbar
...
The documentation is being / may even be written for adding in 3rd party nativescript controls.

It would be nice if they were all grouped together in an easy to include material npm package. They are easy enough to add on their own for the moment. I was thinking about adding the main ones into a project for material elements but im short of time these days.

In all that would be nice. Maybe a few of us could get together to start off a nativescript-material collection of controls and a theme.

Would love that. I'm already thinking of a 'NativeScript-Material' or 'Angular2-NativeScript-Material' collection in the lines of the existing integration called Angular-Material (in development phase now).

I think this will do a lot of good for the future of mobile app development - The Material Way for Android, iOS & Windows too.

Looking at the plugins @matt4446 listed above:

  • FAB looks like a simple tag, that is a registerElement away from being usable in an Angular app.
  • The snackbar plugin exposes a JS module, which should be perfectly usable as is in event handlers, directives, etc
  • The card view may need a more sophisticated wrapper that exposes a templated component or directive, so that it's usable in markup.

Ideally the FAB and card view wrappers should be registered by a module hosted inside the plugin, and imported just by Angular apps e.g. import CARDVIEW_PROVIDERS from "nativescript-cardview". If that can't happen for some reason, then the next best thing could be getting those wrappers together in a "NativeScript-Material" package.

https://github.com/matt4446/Demo-Material-NativeScript/tree/master/screenshots/Android

here is a very early demo/sample project that implements:

  • cardview
  • pulltorefresh
  • fab (partly done, I would rather use the material font and or text instead of a resources)

Anyone can use that as a getting started point with any of the components. I'll be adding more controls + a light theme as I find time.

Was this page helpful?
0 / 5 - 0 ratings