Just starting out? Need help? Post your questions and find answers here.
User avatar
SparrowhawkMMU
 
Posts: 265
Joined: Wed Aug 19, 2015 3:02 pm
Location: United Kingdom

Material Design?

by SparrowhawkMMU Fri Dec 08, 2017 4:58 pm

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
User avatar
Peter
 
Posts: 497
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1

Re: Material Design?

by Peter Sat Dec 09, 2017 12:38 am

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
User avatar
SparrowhawkMMU
 
Posts: 265
Joined: Wed Aug 19, 2015 3:02 pm
Location: United Kingdom

Re: Material Design?

by SparrowhawkMMU Sun Dec 10, 2017 4:05 pm

Thanks Peter, I'll give that a go. I appreciate your help, as ever :)
Return to Coding Questions

Who is online

Users browsing this forum: No registered users and 2 guests