Select to view content in your preferred language

How to change Tab in Tabs programatically?

520
2
Jump to solution
08-18-2022 03:50 AM
Labels (1)
Robert_van_Gilst
Occasional Contributor

When using the Tabs object, I would like to programatically change the tab that is visible.

I expected that I could update the value-property by setting this.showTab with an id of a Tab to change the tab that is shown. But this is not the case.

  <Tabs
    defaultValue="tab-1"
    value={this.showTab}
    type="tabs"
  >
    <Tab
      id="tab-1"
      title="First"
    >
      <Box
        className="p-5"
        width="100%"
      >
        Content 1
      </Box>
    </Tab>
    <Tab
      id="tab-2"
      title="Second"
    >
      <Box
        className="p-5"
        width="100%"
      >
        Content 2
      </Box>
    </Tab>
  </Tabs>
</div>

 

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

The way I manage it is use a state.  so Tabs value property is set to a widget state called selTab and programmatically I set the widgets state for selTab and it works fine.

View solution in original post

0 Kudos
2 Replies
RobertScheitlin__GISP
MVP Emeritus

The way I manage it is use a state.  so Tabs value property is set to a widget state called selTab and programmatically I set the widgets state for selTab and it works fine.

0 Kudos
Robert_van_Gilst
Occasional Contributor

Thanks @RobertScheitlin__GISP this was exactly what I needed

// Robert

0 Kudos