reactjsfluent-uifluentui-react

Having tabs that look like buttons


I have this example that I took from React Fluent UI: https://stackblitz.com/edit/fahztj?file=src%2Fexample.tsx.

I tried to modify it in a way that the component Tab is now a Button, however the tabs do not work any more. It seems that the Tab component has something in built that helps with the functionality.

Is there a way from that example to either:

Is either of these two options even possible?


Solution

  • I think there are multiple ways. One of the quickest might be to simply wrap the buttons in tabs

          <TabList selectedValue={selectedValue} onTabSelect={onTabSelect}>
            <Tab id="Arrivals" value="arrivals">
              <Button icon={<Airplane />}>Arrivals</Button>
            </Tab>
            <Tab id="Departures" value="departures">
              <Button icon={<AirplaneTakeOff />}>Departures</Button>
            </Tab>
            <Tab id="Conditions" value="conditions">
              <Button icon={<TimeAndWeather />}>Conditions</Button>
            </Tab>
          </TabList>