The `InteractiveTab` component is an extension of the Tab component from `@fluentui/react-components`. It allows you to add interactive elements, such as buttons, inside a tab.
npm install @fluentui-contrib/react-interactive-tabThe InteractiveTab component is an extension of the Tab component from @fluentui/react-components. It allows you to add interactive elements, such as buttons, inside a tab.
To install the InteractiveTab component, you can use either npm or yarn:
``sh`
npm install @fluentui-contrib/react-interactive-tab
or
`sh`
yarn add @fluentui-contrib/react-interactive-tab
To use the InteractiveTab component, you need to import it and use it as a child component of the TabList component:
`tsx
import { TabList } from '@fluentui-contrib/react-components';
import { InteractiveTab } from '@fluentui-contrib/react-interactive-tab';
`
Please note that the InteractiveTab component uses a div as its root instead of the default Tab component. It also includes three additional slots: button (where role=tab is assigned), beforeContent, and afterContent`. This design allows users to insert interactive content before or after the tab button.