Page 1 of 1
Material Design?
Posted: Fri Dec 08, 2017 4:58 pm
by SparrowhawkMMU
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
Re: Material Design?
Posted: Sat Dec 09, 2017 12:38 am
by Peter
here is a code to start with (using
Materialize):
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")
! });
Good luck!
Greetings ... Peter
Re: Material Design?
Posted: Sun Dec 10, 2017 4:05 pm
by SparrowhawkMMU
Thanks Peter, I'll give that a go. I appreciate your help, as ever