Royale with Material design lite

[Roman Isitua]

Hi everyone,

I am exploring the feasibility of using royale with material design
lite(MDL) to port an existing application built with react that uses
material design.
I have no prior experience with material design so I am getting up to speed
with it by learning from this site.

https://www.tutorialspoint.com/materialdesignlite/materialdesignlite_environment.htm

I am trying to replicate the following

 <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">Features</a>
               <a class = "mdl-navigation__link" href = "">About Us</a>
               <a class = "mdl-navigation__link" href = "">Log Out</a>
            </nav>
         </div>

         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello
World!</div>
         </main>


in royale. It appears to be much more complicated than I thought.
My implementation

<html:Div className = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <html:Div className = "mdl-layout__drawer">
            <html:Span class = "mdl-layout-title">Material
Design</html:Span>
            <mdl:Navigation className = "mdl-navigation">
               <mdl:NavigationLink className = "mdl-navigation__link" href
= "" innerText="Home"></mdl:NavigationLink>
               <mdl:NavigationLink className = "mdl-navigation__link" href
= "" innerText="Features"></mdl:NavigationLink>
               <mdl:NavigationLink className = "mdl-navigation__link" href
= "" innerText="About Us"></mdl:NavigationLink>
               <mdl:NavigationLink className = "mdl-navigation__link" href
= "" innerText="Log Out"></mdl:NavigationLink>
            </mdl:Navigation>
         </html:Div>

        <html:Div id="main" className = "mdl-layout__content">
            <html:Div className = "page-content" style =
"padding-left:100px;" innerText="Hello World !!!"></html:Div>
         </html:Div>

    </html:Div>


The navigation links do not show.
The action script documentation for the material design lite does not open
so I have no idea how to configure it.

Browsing through the source code of royale mdl library I found the
following comment on mdl Navigation.as

/*
The Navigation class is a <nav> tag in HTML. It parents a list of links
*  In Royale Navigation is implemented as a List component and by default
*  it uses NavigationLinkItemRenderer class to define each item.
*/

This made me realise that my above configuration will not work.

Would appreciate help on this.


Regards,