Genie Discord forum

Author Avataryakir12
9/26/2023, 7:37:15 PM

Consider the following MWE:

using GenieFramework
@genietools

@app begin
    @in slider_one = 1
    @in slider_two = 11

    @onchange slider_one println(slider_one)
    @onchange slider_two println(slider_two)

    @out tabgroup = "one"
    @out tabpanelgroup = "one"
end

function ui()
    [
     tabgroup(:tabgroup, 
              [
               tab(name="one", label="Tab one"),
               tab(name="two", label="Tab two")
              ])
     tabpanelgroup(:tabpanelgroup, 
                   [
                    tabpanel("Inside tab one", name = "one", [slider(1:10, :slider_one, markers=true, labelalways=true)])
                    tabpanel("Inside tab two", name = "two", [slider(11:20, :slider_two, markers=true, labelalways=true)])
                   ])
    ]
end

@page("/", ui)

Server.up()

How can we have the tab panel switch to panel "two" so that :slider_two can display and the user interact with it?

Author Avataryakir12
9/26/2023, 8:43:35 PM

To be clear, when I press (with the mouse) on TAB TWO the content of the panel below does not change.

Author AvatarPere
10/2/2023, 10:51:35 AM

you need to use the same reactive variable for both tabgroup and tabpanel. Setting both to works

See this example, where the v-model parameter is the reactive variable https://learn.genieframework.com/examples/reactive-ui/components/tabs