From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot ...
MenuGettingstartedLayoutFormsComponentsAlertsAccordionBadgeBreadcrumbButtonsButtonGroupCardsCarouselCloseButtonDropdownsFiguresImagesListGroupModalNavsNavbarOffcanvasOverlaysPaginationPlaceholderPopoversProgressSpinnersTableTabsTooltipsToastsUtilitiesMigratingAboutTabbedcomponentsDynamictabbedinterfacesExamples#Createdynamictabbedinterfaces,asdescribedinthe
WAIARIAAuthoringPractices.
Tabsisahigher-levelcomponentforquicklycreatinga
NavmatchedwithasetofTabPanes.
CopyControlled#Tabscanbecontrolleddirectlywhenyouwanttohandlethe
selectionlogicpersonally.functionControlledTabs(){
const[key,setKey]=useState('home');
return(
setKey(k)}
className="mb-3"
>
);
}
render();functionControlledTabs(){const[key,setKey]=useState('home');
return(setKey(k)}className="mb-3">);}
render();CopyNoanimation#Setthetransitionproptofalse.
CopyDropdowns?#Dynamictabbedinterfacesshouldnotcontaindropdownmenus,asthis
causesbothusabilityandaccessibilityissues.Fromausability
perspective,thefactthatthecurrentlydisplayedtab’striggerelement
isnotimmediatelyvisible(asit’sinsidethecloseddropdownmenu)can
causeconfusion.Fromanaccessibilitypointofview,thereiscurrently
nosensiblewaytomapthissortofconstructtoastandardWAIARIA
pattern,meaningthatitcannotbeeasilymadeunderstandabletousers
ofassistivetechnologies.Thatsaid,itDropdownsdoworktechnically(sansfocusmanagement),but
wedon'tmakeanyclaimsaboutsupport.CustomTabLayout#FormorecomplexlayoutstheflexibleTabContainer,TabContent,andTabPanecomponentsalongwithany
styleofNavallowyoutoquicklypiecetogetheryourownTabs
componentwithadditionalmarkupneeded.CreateasetofNavItemseachwithaneventKey
correspondingtotheeventKeyofaTabPane.Wrapthewhole
thinginaTabContainerandyouhavefullyfunctioning
customtabscomponent.Checkoutthebelowexamplemakinguseofthe
gridsystemandpills.
Tab1
Tab2
Tab1Tab2
CopyAPI#Tabs#viewsourcefileimportTabsfrom'react-bootstrap/Tabs'CopyimportcodefortheTabscomponentNameTypeDefaultDescriptionactiveKeystring|numbercontrolledby:onSelect,initialprop:defaultActivekeyMarktheTabwithamatchingeventKeyasactive.defaultActiveKeystring|numberThedefaultactivekeythatisselectedonstartidstringHTMLidattribute,requiredifnogenerateChildIdprop
isspecified.mountOnEnterbooleanfalseWaituntilthefirst"enter"transitiontomounttabs(addthemtotheDOM)onSelectfunctioncontrolsactiveKeyCallbackfiredwhenaTabisselected.
function(
AnyeventKey,
SyntheticEventevent?
)transitionTransition|false{Fade}Setsadefaultanimationstrategyforallchildrens.animation,elseusefalsetodisableora
react-transition-groupcomponent.unmountOnExitbooleanfalseUnmounttabs(removeitfromtheDOM)whenitisnolongervisiblevariant'tabs'|'pills''tabs'NavigationstyleTab#viewsourcefileimportTabfrom'react-bootstrap/Tab'CopyimportcodefortheTabcomponentNameTypeDefaultDescriptiondisabledbooleanThedisabledstateofthetab.eventKeystring|numberAuniqueidentifierfortheComponent,theeventKeymakesitdistinguishablefromothersinaset.SimilartoReact'skeyprop,inthatitonlyneedstobeuniqueamongsttheComponentssiblings,notglobally.tabAttrsobjectObjectcontainingattributestopasstounderlyingnavlink.tabClassNamestringClasstopasstotheunderlyingnavlink.titlerequirednodeContentforthetabtitle.TabContainer#viewsourcefileimportTabContainerfrom'react-bootstrap/TabContainer'CopyimportcodefortheTabContainercomponentNameTypeDefaultDescriptionactiveKeystring|numbercontrolledby:onSelect,initialprop:defaultActivekeyTheeventKeyofthecurrentlyactivetab.generateChildIdfunction(eventKey,type)=>`${props.id}-${type}-${eventKey}`AfunctionthattakesaneventKeyandtypeandreturnsauniqueidfor
childtabsands.Thefunctionmustbeapure
function,meaningitshouldalwaysreturnthesameidforthesameset
ofinputs.Thedefaultvaluerequiresthatanidtobesetforthe
.
Thetypeargumentwilleitherbe"tab"or"pane".idstringHTMLidattribute,requiredifnogenerateChildIdprop
isspecified.mountOnEnterbooleanWaituntilthefirst"enter"transitiontomounttabs(addthemtotheDOM)onSelectfunctioncontrolsactiveKeyAcallbackfiredwhenatabisselected.transition{Transition|false}{Fade}Setsadefaultanimationstrategyforallchildrens.
Defaultstoanimation;else,usefalsetodisable,ora
customreact-transition-groupcomponent.unmountOnExitbooleanUnmounttabs(removeitfromtheDOM)whentheyarenolongervisibleTabContent#viewsourcefileimportTabContentfrom'react-bootstrap/TabContent'CopyimportcodefortheTabContentcomponentNameTypeDefaultDescriptionaselementTypeYoucanuseacustomelementtypeforthiscomponent.bsPrefixrequiredstring'tab-content'ChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.TabPane#viewsourcefileimportTabPanefrom'react-bootstrap/TabPane'CopyimportcodefortheTabPanecomponentNameTypeDefaultDescriptionactivebooleanTogglestheactivestateoftheTabPane,thisisgenerallycontrolledbya
TabContainer.aria-labelledbystringaselementTypeYoucanuseacustomelementtypeforthiscomponent.eventKeystring|numberAkeythatassociatestheTabPanewithit'scontrollingNavLink.idstringmountOnEnterbooleanWaituntilthefirst"enter"transitiontomountthetab(addittotheDOM)onEnterfunctionTransitiononEntercallbackwhenanimationisnotfalseonEnteredfunctionTransitiononEnteredcallbackwhenanimationisnotfalseonEnteringfunctionTransitiononEnteringcallbackwhenanimationisnotfalseonExitfunctionTransitiononExitcallbackwhenanimationisnotfalseonExitedfunctionTransitiononExitedcallbackwhenanimationisnotfalseonExitingfunctionTransitiononExitingcallbackwhenanimationisnotfalsetransitionboolean|elementTypeUseanimationwhenshowingorhidings.Defaultsto
animation,elseusefalsetodisableorareact-transition-group
component.unmountOnExitbooleanUnmountthetab(removeitfromtheDOM)whenitisnolongervisiblebsPrefixstring'tab-pane'ChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.
how to import bootstrap in react