Is it possible to develop Android apps with SB that confirm to Google's Material Design? If so, does anyone have any examples of how to bring in the stylesheet, JS etc ?
Just got a new phone which is running Nougat and I thought I'd try my hand at building a mobile app that looks native to see whether it's feasible under SB.
Thanks
Material Design?
- SparrowhawkMMU
- Posts: 281
- Joined: Wed Aug 19, 2015 3:02 pm
- Location: United Kingdom
Re: Material Design?
here is a code to start with (using Materialize):
Good luck!
Greetings ... Peter
Code: Select all
EnableExplicit
Procedure Container()
! $("<div id='mainContainer' class='container'></div>").appendTo("body");
EndProcedure
Procedure Button(Text.s)
Protected HTML.s
HTML = "<a class='waves-effect waves-light btn'>" + Text + "</a>"
! $(v_html).appendTo("#mainContainer");
EndProcedure
Procedure Collapsible()
Protected HTML.s
HTML = "<ul class='collapsible'>" +
" <li>" +
" <div class='collapsible-header'>" +
" <i class='material-icons'>filter_drama</i>First" +
" </div>" +
" <div class='collapsible-body'>" +
" <span>Lorem ipsum dolor sit amet.</span>" +
" </div>" +
" </li>" +
" <li>" +
" <div class='collapsible-header'>" +
" <i class='material-icons'>place</i>Second" +
" </div>" +
" <div class='collapsible-body'>" +
" <span>Lorem ipsum dolor sit amet.</span>" +
" </div>" +
" </li>" +
" <li>" +
" <div class='collapsible-header'>" +
" <i class='material-icons'>whatshot</i>Third" +
" </div>" +
" <div class='collapsible-body'>" +
" <span>Lorem ipsum dolor sit amet.</span>" +
" </div>" +
" </li> " +
"</ul>"
! $(v_html).appendTo("#mainContainer");
! $('.collapsible').collapsible();
EndProcedure
; Remove SpiderBasic (Dojo) - Styles:
! $('link[rel="stylesheet"], style').remove();
! $('*').removeAttr('style');
CloseDebugOutput()
! $(".spiderwindow").remove();
! $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0"/>');
! $('<link rel="stylesheet" type="text/css">').attr('href','https://fonts.googleapis.com/icon?family=Material+Icons').appendTo('head');
! $('<link rel="stylesheet" type="text/css">').attr('href','https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/css/materialize.min.css').appendTo('head');
! require(["https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/js/materialize.min.js"], function() {
Container()
Collapsible()
Button("Button1")
Button("Button2")
Button("Button3")
! });
Greetings ... Peter
- SparrowhawkMMU
- Posts: 281
- Joined: Wed Aug 19, 2015 3:02 pm
- Location: United Kingdom
Re: Material Design?
Thanks Peter, I'll give that a go. I appreciate your help, as ever