Material Design?

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

Material Design?

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

Re: Material Design?

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

Re: Material Design?

Post by SparrowhawkMMU »

Thanks Peter, I'll give that a go. I appreciate your help, as ever :)
Post Reply