Tab

Wrapper for the Bootstrap tab component.

Example Usage

import React from "react";
import {Tab} from "bs5-react-elements";

function ExampleUsage() {
  return <>
    <ul className="nav nav-tabs" role="tablist">
      <li className="nav-item" role="presentation">
        <Tab
          className="nav-link active"
          id="tab-1"
          data-bs-toggle="tab"
          data-bs-target="#panel-1"
          type="button"
          role="tab"
          aria-controls="panel-1"
          aria-selected="true">Tab 1</Tab>
      </li>
      <li className="nav-item" role="presentation">
        <Tab
          className="nav-link"
          id="tab-2"
          data-bs-toggle="tab"
          data-bs-target="#panel-2"
          type="button"
          role="tab"
          aria-controls="panel-2"
          aria-selected="false">Tab 2</Tab>
      </li>
    </ul>

    <div className="tab-content">
      <div
        className="tab-pane active"
        id="panel-1"
        role="tabpanel"
        aria-labelledby="tab-1">Lorem ispum 1</div>
      <div
        className="tab-pane"
        id="panel-2"
        role="tabpanel"
        aria-labelledby="tab-2">Lorem ipsum 2</div>
    </div>
  </>;
}

Important! If you choose to pass a user defined component to the as prop, it must support ref forwarding.

Demos

There are no demos available for this element. Submit an issue or pull request on GitHub to add one.

Props