Tabs
Usage
Example
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 | Required | Type | Default Value |
|---|
| children | | any | |
| children components |
| activeTab | | (string | number) | 0 |
| active tab number |
| onActiveTabChange | | Function | |
| on active tab change callback |
Context
