There used to be an extensive mdl example with source code. I expect navigation was also showcased. @piotr, do you know where roman can find this example?
On 2021/09/07 13:39:31, Roman Isitua <romanisi...@gmail.com> wrote: > 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, >
