Tabs

Tabs components.

Usage

Example

123

456

789

Script


  return (
    <CTabs activeTab="home">
      <CNav variant="tabs">
        <CNavItem>
          <CNavLink data-tab="home">
            Home
          </CNavLink>
        </CNavItem>
        <CNavItem>
          <CNavLink data-tab="profile">
            Profile
          </CNavLink>
        </CNavItem>
        <CNavItem>
          <CNavLink data-tab="messages">
            Messages
          </CNavLink>
        </CNavItem>
      </CNav>
      <CTabContent>
        <CTabPane data-tab="home">
          123
        </CTabPane>
        <CTabPane data-tab="profile">
          456
        </CTabPane>
        <CTabPane data-tab="messages">
          789
        </CTabPane>
      </CTabContent>
    </CTabs>
  )

Features

Simple to use
Customizable styling
Optional fading effect when switching the active tab

CTab... and CTabs components are tightly coupled which means you using them together is required, for component to work.

# Tabs API

Name	Type	Default Value
children	any
children components
activeTab	(string \| number)	0
active tab number
onActiveTabChange	Function
on active tab change callback

Context

own context

TabContent

# TabContent API

Name	Type	Default Value
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag
fade	boolean	true

TabPane

# TabPane API

Name	Required	Type	Default Value
className		string
user classes for the main HTML tag
innerRef		(Function \| string \| object)
ref to the main tag
active		boolean
active state