Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Different skins for TBTabContainer #18

Closed
swap15 opened this issue Aug 28, 2014 · 7 comments
Closed

Different skins for TBTabContainer #18

swap15 opened this issue Aug 28, 2014 · 7 comments

Comments

@swap15
Copy link

swap15 commented Aug 28, 2014

Now I can't create tab containers with different visual. Need support for skin attribute for tab container :)

@fruxo
Copy link
Owner

fruxo commented Aug 29, 2014

This should work today i think:
Give the TBTabContainer some special skin name, f.ex skin: "duck", "badger" for every new style.
Then in "TBTabContainer.rootlayout", "TBTabContainer.tablayout_x/y", "TBTabContainer.container" and "TBTabContainer.tab" you can use override (or strong-override) with a condition for ancestors with skin name "duck" or "badger" to specify the different versions. It would probably quickly get quite messy (and less efficient) if you have a lot of different visuals though.

Other possible solutions:
You can use the skin attribute under the "tabs" section (or any other attribute) and it will apply to the tabs layout. Adding the same possibility for "container" and "root" would be super simple and allow the skin attribute on those too.

A bug: I noticed TBTabLayout::OnChildAdded always override the skin for TBButton, so any attempt to set the skin attibute directly on a specific tab will currently fail.

@swap15
Copy link
Author

swap15 commented Aug 29, 2014

Could you write a little example of skin for additional skin, please. For example I want to change background of layout and backgrounds of tab buttons.
Thank you!

@fruxo
Copy link
Owner

fruxo commented Aug 30, 2014

In your ui resource:

TBTabContainer: skin: "duck"

In your skin override (assuming you override the default skin):

TBTabContainer.tab_top
    strong-overrides
        element TBTabContainer.ducky_tab
            condition: target: ancestors, property: skin, value: duck
TBTabContainer.ducky_tab
    padding 10
    overrides
        element TBTabContainer.ducky_tab.pressed
            state pressed
TBTabContainer.ducky_tab.pressed
    padding 10
    background-color #fd0

This will add the strong-override section to the default "TBTabContainer.tab_top" skin so the TBTabContainer.ducky_tab skin will be used instead if any ancestor has skin "duck", which the TBTabContainer has.

There's some limitations for what you can change in an override skin, since they can only add to the override/strong-override/child/overlay lists (and not replace in them). So some things requires changing the base skin.

@fruxo
Copy link
Owner

fruxo commented Aug 30, 2014

The example won't look pretty, but at least it shows how conditions can be used :)

@swap15
Copy link
Author

swap15 commented Aug 31, 2014

It working! Thank you!

@fruxo
Copy link
Owner

fruxo commented Sep 2, 2014

Great!
And now it's also possible to use the skin attribute on "content" and "root".

@swap15
Copy link
Author

swap15 commented Sep 3, 2014

Cool! Thanks! :)

@swap15 swap15 closed this as completed Sep 3, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants