The default tabs arrangement is horizontal, meaning you can do only a few before you run out of space.
In order to emulate the typical menus where the tabs are in the left (for example) and teh content open in the right, as game settings etc, I would need a vertical tab system. This could be in the main tabs or new widgets of type tap part of a panel widget.
Any way to achieve this?
By vertical I mean, horizontal text, but arranged vertically, as a vertical column in a spreadsheet instead rows as now. I don't mean the text fonts oriented vertically.
Adding this css to the tab container should do the trick:
> .panel {
flex-direction: row
}
> .panel > .navigation {
height: auto;
}
> .panel > .navigation .tablist {
flex-direction: column;
height:100%;
}
> .panel > .navigation li {
width: 100%;
max-width: 100%;
}
This may become a built in option in the future.
Thanks, that works perfectly.
I was trying to make a color differentiation between active and not active tab background. It seems there is a style preset that dictates the color differentiation. How can I change that? This is the CSS I use to achieve this, but even I can change the buttons color, the differentiation is always the same intensity. Meaning in dark colors is hardly noticeable. I have no idea how to change the color or the panel title either. All my changes only affect the tabs background and all fonts. But not the background of the title or the differentiation between selected and non selected tab. I can not change either the background color
of the tab.
Font-size:120%;
color:#000000;
–color-light:#000000;
–color-raised:#D30700;
letter-spacing:3rem;
Another thing I cannot get working is text align, but in this case in any place. text is always centered no matter what. And I have not been able to find a single example done with Open Stage where the text is not centered (with the exception of drop downs)
div {
text-align:left;
}
You can use the chrome inspector (F12) to look into the elements figure out how to affect them.
As for text alignment, searching on the forums could help : Text alignment in a switch widget Text is often centered with flex related properties instead of text-align.
Hello.This css doesn't work to me.Is still that code for vertical tab?Thanks.
No, it's not valid in v1 and above, tab containers have a verticalTabs property now.
@Greenman your screenshot points to the wrong property, verticalTabs is at the bottom of the image.
actually i don't understand what this option really does ... Does this option is linked with the layout field ?
Its effect is only visible when the container contains tabs.
Hello,
ok here is a working example with open stage control 1.9.13
verticalTabs.json (25.8 KB)
Cheers