You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Call a function when the value of an HTML element is changed. It returns four callback values.
The first is the trigger object
The second is the target ID of each panel
The third is the currently active index
The fourth is the persistent index of item.
-
onLoad
function
-
Call a function when the component is rendered. It returns only one callback value which is the function of activating item(Function).
-
Tab List
import{TabList}from'funda-ui/Tabs';
Property
Type
Default
Description
Required
key
string | tab-list-*
-
A “key” is a special string attribute you need to include when creating lists of elements. Let’s assign a key to our list of items. Must contain the string tab-list
-
defaultActive
boolean
false
Set an item to activate by default
-
Tab Panel
import{TabPanel}from'funda-ui/Tabs';
Property
Type
Default
Description
Required
key
string | tab-panel-*
-
A “key” is a special string attribute you need to include when creating lists of elements. Let’s assign a key to our list of items. Must contain the string tab-panel
-
defaultActive
boolean
false
Set an item to activate by default
-
tabpanelClass
string
-
Additional style name, such as shadow
-
It accepts all props(include data-* attributes) which native div support.
Examples
importReactfrom"react";import{Tabs,TabList,TabPanel}from'funda-ui/Tabs';exportdefault()=>{functionhandleChange(nav,targetId,index,persistentIndex){console.log(nav,targetId,index,persistentIndex);}return(<><TabsanimTransitionDuration={150}navClassName="nav nav-tabs mb-3"onChange={handleChange}style={{fontSize: '0.875rem'}}><TabListkey="tab-list-1"defaultActive><buttonclassName="nav-link active"type="button"role="tab">Tab 1</button></TabList><TabListkey="tab-list-2"><buttonclassName="nav-link"type="button"role="tab">Tab 2</button></TabList><TabListkey="tab-list-3"><buttonclassName="nav-link"type="button"role="tab">Tab 3</button></TabList><TabPanelkey="tab-panel-1"tabpanelClass="fs-6"defaultActive><p>Hi, this is the first tab.</p></TabPanel><TabPanelkey="tab-panel-2"tabpanelClass="fs-6"><p>This is the 2nd tab.</p><p>This is the 2nd tab.</p><p>This is the 2nd tab.</p></TabPanel><TabPanelkey="tab-panel-3"tabpanelClass="fs-6"><p>And this is the 3rd tab.</p></TabPanel></Tabs><TabsexpandedActiveClassNameForNav="border rounded-1 bg-light text-dark"expandedActiveClassNameForPanel="bg-info"wrapperClassName="mb-3 position-relative d-flex align-items-start"navClassName="nav flex-column nav-pills me-3 border-end px-3"panelClassName="tab-content flex-grow-1"onChange={handleChange}>{[1,2,3].map((item: any,i: number)=>{return<TabListkey={`tab-list-${i}`}defaultActive={i===0 ? true : false}><buttonclassName={`btn btn-transparent btn-sm border-0 text-secondary ${i===0 ? 'active border rounded-1 bg-light text-dark' : ''}`}type="button"role="tab">{item}</button></TabList>})}{[1,2,3].map((item: any,i: number)=>{return<TabPanelkey={`tab-panel-${i}`}tabpanelClass="fs-6"defaultActive={i===0 ? true : false}><p>{item}</p></TabPanel>})}</Tabs><TabsnavClassName="nav nav-tabs mb-3"onChange={handleChange}>{[1,2,3].map((item: any,i: number)=>{return<TabListkey={`tab-list-${i}`}defaultActive={i===0 ? true : false}><buttonclassName={`nav-link ${i===0 ? 'active' : ''}`}type="button"role="tab">{item}</button></TabList>})}{[1,2,3].map((item: any,i: number)=>{return<TabPanelkey={`tab-panel-${i}`}tabpanelClass="fs-6"defaultActive={i===0 ? true : false}><p>{item}</p></TabPanel>})}</Tabs></>);}