I want to create a page similar to this where I can “tab” through 2 or 3 pages/sets of widgets depending on what I select on the top.
The only way I can think of is by using an item and then make the widgets visible or invisible depending on the item state. But I somehow think there must be a “better way” to do this. One thing I would not like on the item solution is that my choice would persist. But I want the page to always start the same.
The component you’ve highlighted is just a segmental button which you can setup using the f7-segmented component:
And then, for each oh-button in the segmented button, you can set the action to variable and send a value to your chosen variable that will then allow you set visibility based on the non-persistent variable value rather than a persistent item state.
The f7-segmet is exactly what i need. but i can’t find out how to “connect” it with “wiget Variables”
Maybe I have to say, that i still (even after years ) try to wrap my head around these concepts used here. I have no background in Webdevelopment or frontenddesign… So i learn mostly by trial and error. YAML, CSS, F7 are all Alien to me. But i try and have build some really nice widgets for my self so far
So in those 2 Documentations I found nothing i really “understood”. Except that Variables exist and that i can use them for more complex tasks, what i would like to do.
So now i have 2 more specifc questions.
How do i define and access those “widget Variables” in YAML for OH3 Widgets.
I know how to acces a item. And how to use props as “placeholders”… but i cant find out how to create or access those widget variables.
I would like all widgets on a page to acces what i set with one f7-segment in the page. Is this possible?
One of the original intents of widget variables was to facilitate exactly this kind of communication between widgets. But to make sure that every widget on a page has access to the same variable you have to make sure to define that variable as a page variable in the page configuration: