feat: add underline variant for Nav/Tabs (#6623)

* feat: new variant added for tabs * feat: tabs underline example added * fix: updated component name
react-bootstrap · Jun 8, 2023 · 600364b · 600364b
1 parent 3c094ec
commit 600364b
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 4 deletions.
diff --git a/src/Nav.tsx b/src/Nav.tsx
@@ -17,7 +17,7 @@ import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 export interface NavProps extends BsPrefixProps, BaseNavProps {
   navbarBsPrefix?: string;
   cardHeaderBsPrefix?: string;
-  variant?: 'tabs' | 'pills' | string;
+  variant?: 'tabs' | 'pills' | 'underline' | string;
   defaultActiveKey?: EventKey;
   fill?: boolean;
   justify?: boolean;
@@ -39,7 +39,7 @@ const propTypes = {
   /**
    * The visual variant of the nav items.
    *
-   * @type {('tabs'|'pills')}
+   * @type {('tabs'| 'pills' | 'underline')}
    */
   variant: PropTypes.string,
 

diff --git a/src/Tabs.tsx b/src/Tabs.tsx
@@ -33,7 +33,7 @@ const propTypes = {
   /**
    * Navigation style
    *
-   * @type {('tabs'| 'pills')}
+   * @type {('tabs'| 'pills' | 'underline')}
    */
   variant: PropTypes.string,
 

diff --git a/www/docs/components/tabs.mdx b/www/docs/components/tabs.mdx
@@ -6,6 +6,7 @@ sidebar_label: Tabs
 
 import TabsControlled from '!!raw-loader!../examples/Tabs/Controlled';
 import LeftTabs from '!!raw-loader!../examples/Tabs/LeftTabs';
+import Underline from '!!raw-loader!../examples/Tabs/Underline';
 import TabsNoAnimation from '!!raw-loader!../examples/Tabs/NoAnimation';
 import TabsUncontrolled from '!!raw-loader!../examples/Tabs/Uncontrolled';
 import TabsFill from '!!raw-loader!../examples/Tabs/Fill';
@@ -81,12 +82,20 @@ Create a set of NavItems each with an `eventKey`
 corresponding to the eventKey of a `TabPane`. Wrap the whole
 thing in a `TabContainer` and you have fully functioning
 custom tabs component. Check out the below example making use of the
-grid system and pills.
+grid system, pills and underline.
+
+## Pills
 
 <CodeBlock language="jsx" live previewClassName="bs-example-tabs">
   {LeftTabs}
 </CodeBlock>
 
+## Underline
+
+<CodeBlock language="jsx" live previewClassName="bs-example-tabs">
+  {Underline}
+</CodeBlock>
+
 ## API
 
 ### Tabs

diff --git a/www/docs/examples/Tabs/Underline.js b/www/docs/examples/Tabs/Underline.js
@@ -0,0 +1,31 @@
+import Col from 'react-bootstrap/Col';
+import Nav from 'react-bootstrap/Nav';
+import Row from 'react-bootstrap/Row';
+import Tab from 'react-bootstrap/Tab';
+
+function UnderlineExample() {
+  return (
+    <Tab.Container id="left-tabs-example" defaultActiveKey="first">
+      <Row>
+        <Col sm={3}>
+          <Nav variant="underline" className="flex-column">
+            <Nav.Item>
+              <Nav.Link eventKey="first">Tab 1</Nav.Link>
+            </Nav.Item>
+            <Nav.Item>
+              <Nav.Link eventKey="second">Tab 2</Nav.Link>
+            </Nav.Item>
+          </Nav>
+        </Col>
+        <Col sm={9}>
+          <Tab.Content>
+            <Tab.Pane eventKey="first">First tab content</Tab.Pane>
+            <Tab.Pane eventKey="second">Second tab content</Tab.Pane>
+          </Tab.Content>
+        </Col>
+      </Row>
+    </Tab.Container>
+  );
+}
+
+export default UnderlineExample;