Note that there are some explanatory texts on larger screens.

plurals
  1. POFlex 4 Skin: Change skin based on parent containers state
    primarykey
    data
    text
    <p>I have a custom component <em>ExpandCollapseMenu</em> that extends <em>SkinnableContainer</em>. This component can have state "normal" or "expanded".<br> Inside this component I have buttons, with different skin based on ExpandCollapseMenu's state.<br> This works fine when defining the buttons inside ExpandCollapsMenu's skin class:</p> <pre><code>&lt;s:Group id="contentGroup" top="20" left="10" right="10" bottom="10"&gt; &lt;s:layout&gt; &lt;s:VerticalLayout/&gt; &lt;/s:layout&gt; &lt;component:ExpandCollapseMenuButton label="Foo" skinClass.expanded="component.ExpandCollapseMenuButtonExpandedSkin" skinClass.normal="component.ExpandCollapseMenuButtonSkin" /&gt; &lt;/s:Group&gt; </code></pre> <p>But I don't want to define the buttons inside ExpandCollapsMenu's skin class, I want to define them where I use ExpandCollapseMenu. Like this:</p> <pre><code>&lt;component:ExpandCollapseMenu skinClass="component.ExpandCollapseMenuSkin"&gt; &lt;component:ExpandCollapseMenuButton label="Foo" /&gt; &lt;/component:ExpandCollapseMenu&gt; </code></pre> <p>At this level, I can't reference <em>skinclass.expanded</em>, but I got it working by using CSS like this:</p> <pre><code>component|ExpandCollapseMenu:expanded component|ExpandCollapseMenuButton { skinClass: ClassReference("component.ExpandCollapseMenuButtonExpandedSkin"); } component|ExpandCollapseMenu:normal component|ExpandCollapseMenuButton { skinClass: ClassReference("component.ExpandCollapseMenuButtonSkin"); } </code></pre> <p>Is this a good way to change skin based on parent containers state? Or is there a better way?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload