You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Hugo Ferreira <hf...@gmail.com> on 2020/07/15 00:38:10 UTC
Itemrenderer for icone on Titlebar
How to add an icone to TitleBarModel, or even better, how to apply an
itemrenderer:
<js:Container id="panel1" width="100%">
<js:beads>
<js:TitleBarModel title="Panel 1" />
<js:VerticalLayout />
</js:beads>
<js:Label text="Top Line 1" className="menuItem" />
<js:Label text="Middle Line 1" className="menuItem" />
<js:Label text="Last Line 1" className="menuItem" />
</js:Container>
The goal is to build my own menu based on Accordion.
Re: Itemrenderer for icone on Titlebar
Posted by Hugo Ferreira <hf...@gmail.com>.
It's similar.
I think that it's still used a lot.
For now, I have solved.
Carlos Rovira <ca...@apache.org> escreveu no dia sexta, 24/07/2020
à(s) 10:21:
> Hi Hugo,
>
> I think some day I'll do a Jewel Accordion version to have some counterpart
> to Basic or Flex. Just seemed to me that Accordion is not a component
> needed as 10-15 years ago, but it is clear we need one.
>
> You can check the example I posted recently where I use a List and
> ListItemRenderers to collapse renders. Is not an Accordion, but the effect
> is nearly the same
>
> https://avant2.es/productos-y-companias
>
> The code is available here:
>
>
> https://github.com/codeoscopic/avant2-website/tree/master/avant2-products-companies
>
> HTH
>
> Carlos
>
>
>
>
> El vie., 24 jul. 2020 a las 2:09, Hugo Ferreira (<hf...@gmail.com>)
> escribió:
>
> > Hi Carlos,
> >
> > This one gave me a lot of trouble but it's now working as expected.
> >
> > Accordion seems to be tied to the bead TitleBarModel that adds a title to
> > the Accordion ItemRenderer.
> > Not very flexible.
> >
> > I extended TitleBarModel to IconTitleBarModel and add a string property
> for
> > the MaterialIcon.
> > Then I created an ItemRenderer that extends from AccordionItemRenderer
> and
> > add the MaterialIcon at the first position and played with Spacer.
> > The final result was what I wanted.
> >
> > I already checked the Jewel List before started with basic Accordion
> > however for my menu I need a look and feel more like Accordion than a
> List.
> > With a lot of css this Accordion is now pixel perfect as I wanted.
> >
> > Thank you.
> >
> > Carlos Rovira <ca...@apache.org> escreveu no dia quarta,
> 15/07/2020
> > à(s) 15:53:
> >
> > > Hi Hugo,
> > >
> > > don't understand the problem completely, but if you want to add
> something
> > > to a model just extend it and use the extension
> > > But model should only have the data, not the visuals.
> > > Don't know much more about Basic Accordion
> > > Other option is to use a List and create an item renderer that collapse
> > >
> > > El mié., 15 jul. 2020 a las 2:38, Hugo Ferreira (<
> hferreira.80@gmail.com
> > >)
> > > escribió:
> > >
> > > > How to add an icone to TitleBarModel, or even better, how to apply an
> > > > itemrenderer:
> > > >
> > > > <js:Container id="panel1" width="100%">
> > > > <js:beads>
> > > > <js:TitleBarModel title="Panel 1" />
> > > > <js:VerticalLayout />
> > > > </js:beads>
> > > > <js:Label text="Top Line 1" className="menuItem" />
> > > > <js:Label text="Middle Line 1" className="menuItem" />
> > > > <js:Label text="Last Line 1" className="menuItem" />
> > > > </js:Container>
> > > >
> > > > The goal is to build my own menu based on Accordion.
> > > >
> > >
> > >
> > > --
> > > Carlos Rovira
> > > http://about.me/carlosrovira
> > >
> >
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
Re: Itemrenderer for icone on Titlebar
Posted by Carlos Rovira <ca...@apache.org>.
Hi Hugo,
I think some day I'll do a Jewel Accordion version to have some counterpart
to Basic or Flex. Just seemed to me that Accordion is not a component
needed as 10-15 years ago, but it is clear we need one.
You can check the example I posted recently where I use a List and
ListItemRenderers to collapse renders. Is not an Accordion, but the effect
is nearly the same
https://avant2.es/productos-y-companias
The code is available here:
https://github.com/codeoscopic/avant2-website/tree/master/avant2-products-companies
HTH
Carlos
El vie., 24 jul. 2020 a las 2:09, Hugo Ferreira (<hf...@gmail.com>)
escribió:
> Hi Carlos,
>
> This one gave me a lot of trouble but it's now working as expected.
>
> Accordion seems to be tied to the bead TitleBarModel that adds a title to
> the Accordion ItemRenderer.
> Not very flexible.
>
> I extended TitleBarModel to IconTitleBarModel and add a string property for
> the MaterialIcon.
> Then I created an ItemRenderer that extends from AccordionItemRenderer and
> add the MaterialIcon at the first position and played with Spacer.
> The final result was what I wanted.
>
> I already checked the Jewel List before started with basic Accordion
> however for my menu I need a look and feel more like Accordion than a List.
> With a lot of css this Accordion is now pixel perfect as I wanted.
>
> Thank you.
>
> Carlos Rovira <ca...@apache.org> escreveu no dia quarta, 15/07/2020
> à(s) 15:53:
>
> > Hi Hugo,
> >
> > don't understand the problem completely, but if you want to add something
> > to a model just extend it and use the extension
> > But model should only have the data, not the visuals.
> > Don't know much more about Basic Accordion
> > Other option is to use a List and create an item renderer that collapse
> >
> > El mié., 15 jul. 2020 a las 2:38, Hugo Ferreira (<hferreira.80@gmail.com
> >)
> > escribió:
> >
> > > How to add an icone to TitleBarModel, or even better, how to apply an
> > > itemrenderer:
> > >
> > > <js:Container id="panel1" width="100%">
> > > <js:beads>
> > > <js:TitleBarModel title="Panel 1" />
> > > <js:VerticalLayout />
> > > </js:beads>
> > > <js:Label text="Top Line 1" className="menuItem" />
> > > <js:Label text="Middle Line 1" className="menuItem" />
> > > <js:Label text="Last Line 1" className="menuItem" />
> > > </js:Container>
> > >
> > > The goal is to build my own menu based on Accordion.
> > >
> >
> >
> > --
> > Carlos Rovira
> > http://about.me/carlosrovira
> >
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: Itemrenderer for icone on Titlebar
Posted by Hugo Ferreira <hf...@gmail.com>.
Hi Carlos,
This one gave me a lot of trouble but it's now working as expected.
Accordion seems to be tied to the bead TitleBarModel that adds a title to
the Accordion ItemRenderer.
Not very flexible.
I extended TitleBarModel to IconTitleBarModel and add a string property for
the MaterialIcon.
Then I created an ItemRenderer that extends from AccordionItemRenderer and
add the MaterialIcon at the first position and played with Spacer.
The final result was what I wanted.
I already checked the Jewel List before started with basic Accordion
however for my menu I need a look and feel more like Accordion than a List.
With a lot of css this Accordion is now pixel perfect as I wanted.
Thank you.
Carlos Rovira <ca...@apache.org> escreveu no dia quarta, 15/07/2020
à(s) 15:53:
> Hi Hugo,
>
> don't understand the problem completely, but if you want to add something
> to a model just extend it and use the extension
> But model should only have the data, not the visuals.
> Don't know much more about Basic Accordion
> Other option is to use a List and create an item renderer that collapse
>
> El mié., 15 jul. 2020 a las 2:38, Hugo Ferreira (<hf...@gmail.com>)
> escribió:
>
> > How to add an icone to TitleBarModel, or even better, how to apply an
> > itemrenderer:
> >
> > <js:Container id="panel1" width="100%">
> > <js:beads>
> > <js:TitleBarModel title="Panel 1" />
> > <js:VerticalLayout />
> > </js:beads>
> > <js:Label text="Top Line 1" className="menuItem" />
> > <js:Label text="Middle Line 1" className="menuItem" />
> > <js:Label text="Last Line 1" className="menuItem" />
> > </js:Container>
> >
> > The goal is to build my own menu based on Accordion.
> >
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
Re: Itemrenderer for icone on Titlebar
Posted by Carlos Rovira <ca...@apache.org>.
Hi Hugo,
don't understand the problem completely, but if you want to add something
to a model just extend it and use the extension
But model should only have the data, not the visuals.
Don't know much more about Basic Accordion
Other option is to use a List and create an item renderer that collapse
El mié., 15 jul. 2020 a las 2:38, Hugo Ferreira (<hf...@gmail.com>)
escribió:
> How to add an icone to TitleBarModel, or even better, how to apply an
> itemrenderer:
>
> <js:Container id="panel1" width="100%">
> <js:beads>
> <js:TitleBarModel title="Panel 1" />
> <js:VerticalLayout />
> </js:beads>
> <js:Label text="Top Line 1" className="menuItem" />
> <js:Label text="Middle Line 1" className="menuItem" />
> <js:Label text="Last Line 1" className="menuItem" />
> </js:Container>
>
> The goal is to build my own menu based on Accordion.
>
--
Carlos Rovira
http://about.me/carlosrovira