FAB and Speed Dial in Onsen ver1

[brandecho]

Is there a method to have the FAB or Speed Dial components when using Onsen Version 1 JavaScript library within a project? Currently, an existing project requires for only one screen using the ons-template to have the speed-dial component. Migrating to Onsen ui verion2 is an option, but requires extensive modifications to the existing code.

I was wondering if placing the script tags for Onsen ui ver 2 and angular.js within an the ons-template is possible as a short cut to getting the speed-dial component to function without effecting the rest of the screens.

[Fran Diox]

@brandecho Hi! It’s not possible to load any JavaScript in ons-template so I don’t think you can do anything like that. There is a migration guide here that cover most of the changes. Another difference is that ons-sliding-menu does not exist anymore since there is a new ons-splitter component which is more complete.

Otherwise, you might want to use FAB + FAB mini CSS components and implement the JS side yourself (positioning elements on the screen and showing items). You need to inspect the DOM in that example and see the applied CSS, or take it from the source.

[brandecho]

Thank you @Fran-Diox for the information. I reviewed the onsen ver2 css file and located the css style for fab, mini and speed dial components. I will copy and reference the style in a different css file.
Do you know if there is a function within the Onsen ver2 library that I also need to copy in order for these components to function accordingly within Onsen ver1 JavaScript library? Thank you in advance.

[Fran Diox]

@brandecho The ons-speed-dial JS implementation is here. Perhaps you can do something similar.