Panels Panel, PanelGroup, Accordion. #Basic example. By default, all the does is apply a basic border and padding to contain ...
ComponentsGettingstartedLayoutComponentsAlertsBadgeBreadcrumbButtonsButtonGroupCarouselDropdownsFormsGlyphiconsImagesJumbotronLabelListGroupModalNavsNavbarOverlaysPageHeaderPaginationPanelPopoversProgressTableTabsTooltipsWellUtilities#PanelsPanel,PanelGroup,Accordion#BasicexampleBydefault,allthedoesisapplyabasicborderandpaddingtocontainsomecontent.Youcanpassonanyadditionalpropertiesyouneed,e.g.acustomonClickhandler,asitisshownintheexamplecode.Theyallwillapplytothewrapperdivelement.BasicpanelexamplefunctionhandleClick(){
alert('Youhaveclickedonme');
}
constpanelInstance=(
Basicpanelexample
);
render(panelInstance);
#PanelwithheadingEasilyaddaheadingcontainertoyourpanelwiththeandsub-components.PanelheadingwithoutatitlePanelcontentPanelheadingwithatitlePanelcontent
Panelheadingwithoutatitle
Panelcontent
Panelheadingwithatitle
Panelcontent
;
#PanelwithfooterPassbuttonsorsecondarytextinthesub-component.Notethatpanelfootersdonotinheritcolorsandborderswhenusingcontextualvariationsastheyarenotmeanttobeintheforeground.PanelcontentPanelfooter
Panelcontent
Panelfooter
;
#ContextualalternativesLikeothercomponents,easilymakeapanelmoremeaningfultoaparticularcontextbyaddingabsStyleprop.PanelheadingPanelcontentPanelheadingPanelcontentPanelheadingPanelcontentPanelheadingPanelcontentPanelheadingPanelcontent
Panelheading
Panelcontent
Panelheading
Panelcontent
Panelheading
Panelcontent
Panelheading
Panelcontent
Panelheading
Panelcontent
;
#WithtablesandlistgroupsAddany,toapanelforaseamlessintegration.MixandmatchwithPanel.Bodyasneeded.PanelheadingSomedefaultpanelcontenthere.Item1Item2…Somemorepanelcontenthere.
Panelheading
Somedefaultpanelcontenthere.
Item1
Item2
…
Somemorepanelcontenthere.
;
#CollapsiblePanelClicktotoggleAnimpariaturclichereprehenderit,enimeiusmodhighlifeaccusamusterryrichardsonadsquid.Nihilanimkeffiyehhelvetica,craftbeerlaborewesandersoncrednesciuntsapienteeaproident.YoucanalsomakethePanelheadingtogglethecollapse.TitlethatfunctionsasacollapsetoggleAnimpariaturclichereprehenderit,enimeiusmodhighlifeaccusamusterryrichardsonadsquid.Nihilanimkeffiyehhelvetica,craftbeerlaborewesandersoncrednesciuntsapienteeaproident.OruseaPanel.TogglecomponenttocustomizeTitlethatfunctionsasacollapsetoggleMyowntoggleAnimpariaturclichereprehenderit,enimeiusmodhighlifeaccusamusterryrichardsonadsquid.Nihilanimkeffiyehhelvetica,craftbeerlaborewesandersoncrednesciuntsapienteeaproident.classExampleextendsReact.Component{
constructor(props,context){
super(props,context);
this.state={
open:true
};
}
render(){
return(
this.setState({open:!this.state.open})}>
Clicktotoggle
Animpariaturclichereprehenderit,enimeiusmodhighlife
accusamusterryrichardsonadsquid.Nihilanimkeffiyeh
helvetica,craftbeerlaborewesandersoncrednesciuntsapiente
eaproident.
YoucanalsomakethePanelheadingtogglethecollapse.
Titlethatfunctionsasacollapsetoggle
Animpariaturclichereprehenderit,enimeiusmodhighlife
accusamusterryrichardsonadsquid.Nihilanimkeffiyeh
helvetica,craftbeerlaborewesandersoncrednesciuntsapiente
eaproident.
OruseaPanel.Togglecomponenttocustomize
Titlethatfunctionsasacollapsetoggle
Myowntoggle
Animpariaturclichereprehenderit,enimeiusmodhighlife
accusamusterryrichardsonadsquid.Nihilanimkeffiyeh
helvetica,craftbeerlaborewesandersoncrednesciuntsapiente
eaproident.
);
}
}
render();
#ControlledPanelGroupsPanelGroupscanbecontrolledbyaparentcomponent.TheactiveKeypropdictateswhichpanelisopen.Panelheading1Panelcontent1Panelheading2Panelcontent2classControlledPanelGroupextendsReact.Component{
constructor(props,context){
super(props,context);
this.handleSelect=this.handleSelect.bind(this);
this.state={
activeKey:'1'
};
}
handleSelect(activeKey){
this.setState({activeKey});
}
render(){
return(
Panelheading1
Panelcontent1
Panelheading2
Panelcontent2
);
}
}
render();
#UncontrolledPanelGroupsPanelGroupscanalsobeuncontrolledwheretheymanagetheirownstate.ThedefaultActiveKeypropdictateswhichpanelisopenwheninitially.Panelheading1Panelcontent1Panelheading2Panelcontent2
Panelheading1
Panelcontent1
Panelheading2
Panelcontent2
;
#AccordionsUsetocreateanaccordionstylecollapsingPanelset.CollapsibleGroupItem#1Animpariaturclichereprehenderit,enimeiusmodhighlifeaccusamusterryrichardsonadsquid.3wolfmoonofficiaaute,noncupidatatskateboarddolorbrunch.Foodtruckquinoanesciuntlaborumeiusmod.Brunch3wolfmoontempor,suntaliquaputabirdonitsquidsingle-origincoffeenullaassumendashoreditchet.Nihilanimkeffiyehhelvetica,craftbeerlaborewesandersoncrednesciuntsapienteeaproident.Adveganexcepteurbutchervicelomo.Leggingsoccaecatcraftbeerfarm-to-table,rawdenimaestheticsynthnesciuntyouprobablyhaven'theardofthemaccusamuslaboresustainableVHS.CollapsibleGroupItem#2Animpariaturclichereprehenderit,enimeiusmodhighlifeaccusamusterryrichardsonadsquid.3wolfmoonofficiaaute,noncupidatatskateboarddolorbrunch.Foodtruckquinoanesciuntlaborumeiusmod.Brunch3wolfmoontempor,suntaliquaputabirdonitsquidsingle-origincoffeenullaassumendashoreditchet.Nihilanimkeffiyehhelvetica,craftbeerlaborewesandersoncrednesciuntsapienteeaproident.Adveganexcepteurbutchervicelomo.Leggingsoccaecatcraftbeerfarm-to-table,rawdenimaestheticsynthnesciuntyouprobablyhaven'theardofthemaccusamuslaboresustainableVHS.CollapsibleGroupItem#3Animpariaturclichereprehenderit,enimeiusmodhighlifeaccusamusterryrichardsonadsquid.3wolfmoonofficiaaute,noncupidatatskateboarddolorbrunch.Foodtruckquinoanesciuntlaborumeiusmod.Brunch3wolfmoontempor,suntaliquaputabirdonitsquidsingle-origincoffeenullaassumendashoreditchet.Nihilanimkeffiyehhelvetica,craftbeerlaborewesandersoncrednesciuntsapienteeaproident.Adveganexcepteurbutchervicelomo.Leggingsoccaecatcraftbeerfarm-to-table,rawdenimaestheticsynthnesciuntyouprobablyhaven'theardofthemaccusamuslaboresustainableVHS.
CollapsibleGroupItem#1
Animpariaturclichereprehenderit,enimeiusmodhighlifeaccusamusterry
richardsonadsquid.3wolfmoonofficiaaute,noncupidatatskateboard
dolorbrunch.Foodtruckquinoanesciuntlaborumeiusmod.Brunch3wolf
moontempor,suntaliquaputabirdonitsquidsingle-origincoffeenulla
assumendashoreditchet.Nihilanimkeffiyehhelvetica,craftbeerlabore
wesandersoncrednesciuntsapienteeaproident.Adveganexcepteur
butchervicelomo.Leggingsoccaecatcraftbeerfarm-to-table,rawdenim
aestheticsynthnesciuntyouprobablyhaven'theardofthemaccusamus
laboresustainableVHS.
CollapsibleGroupItem#2
Animpariaturclichereprehenderit,enimeiusmodhighlifeaccusamusterry
richardsonadsquid.3wolfmoonofficiaaute,noncupidatatskateboard
dolorbrunch.Foodtruckquinoanesciuntlaborumeiusmod.Brunch3wolf
moontempor,suntaliquaputabirdonitsquidsingle-origincoffeenulla
assumendashoreditchet.Nihilanimkeffiyehhelvetica,craftbeerlabore
wesandersoncrednesciuntsapienteeaproident.Adveganexcepteur
butchervicelomo.Leggingsoccaecatcraftbeerfarm-to-table,rawdenim
aestheticsynthnesciuntyouprobablyhaven'theardofthemaccusamus
laboresustainableVHS.
CollapsibleGroupItem#3
Animpariaturclichereprehenderit,enimeiusmodhighlifeaccusamusterry
richardsonadsquid.3wolfmoonofficiaaute,noncupidatatskateboard
dolorbrunch.Foodtruckquinoanesciuntlaborumeiusmod.Brunch3wolf
moontempor,suntaliquaputabirdonitsquidsingle-origincoffeenulla
assumendashoreditchet.Nihilanimkeffiyehhelvetica,craftbeerlabore
wesandersoncrednesciuntsapienteeaproident.Adveganexcepteur
butchervicelomo.Leggingsoccaecatcraftbeerfarm-to-table,rawdenim
aestheticsynthnesciuntyouprobablyhaven'theardofthemaccusamus
laboresustainableVHS.
;
#Props#Panels,Accordion[source]NameTypeDefaultDescriptionexpandedboolean controlledby:onToggle,initialprop:defaultExpandedControlsthecollapsed/expandedstateofthePanel.Requires
aPanel.Collapseorchildcomponent
inordertoactuallyanimateoutorin.onTogglefunction controlsexpandedAcallbackfiredwhenthecollapsestatechanges.eventKeyanyAuniqueidentifierfortheComponent,theeventKeymakesitdistinguishablefromothersinaset.SimilartoReact'skeyprop,inthatitonlyneedstobeuniqueamoungsttheComponentssiblings,notglobally.idstringAnHTMLidattributeuniquelyidentifyingthePanelcomponent.#Panel.Heading[source]NameTypeDefaultDescriptioncomponentClasselementType'div'Youcanuseacustomelementtypeforthiscomponent.bsClassstring'panel'BaseCSSclassandprefixforthecomponent.GenerallyoneshouldonlychangebsClasstoprovidenew,non-Bootstrap,CSSstylesforacomponent.#Panel.Title[source]NameTypeDefaultDescriptioncomponentClasselementType'div'Youcanuseacustomelementtypeforthiscomponent.togglebooleanAconveniencepropthatrendersthePanel.Titleasapanelcollapsetogglecomponent
forthecommonuse-case.bsClassstring'panel'BaseCSSclassandprefixforthecomponent.GenerallyoneshouldonlychangebsClasstoprovidenew,non-Bootstrap,CSSstylesforacomponent.#Panel.Toggle[source]NameTypeDefaultDescriptioncomponentClasselementTypeSafeAnchorYoucanuseacustomelementforthiscomponent#Panel.Collapse[source]NameTypeDefaultDescriptiononEnterfunctionCallbackfiredbeforethecomponentexpandsonEnteringfunctionCallbackfiredafterthecomponentstartstoexpandonEnteredfunctionCallbackfiredafterthecomponenthasexpandedonExitfunctionCallbackfiredbeforethecomponentcollapsesonExitingfunctionCallbackfiredafterthecomponentstartstocollapseonExitedfunctionCallbackfiredafterthecomponenthascollapsedbsClassstring'panel'BaseCSSclassandprefixforthecomponent.GenerallyoneshouldonlychangebsClasstoprovidenew,non-Bootstrap,CSSstylesforacomponent.#Panel.Body[source]NameTypeDefaultDescriptioncollapsiblebooleanfalseAconveniencepropthatrendersaCollapsecomponentaroundtheBodyfor
situationswhentheparentPanelonlycontainsasinglePanel.Bodychild.
renders:
bsClassstring'panel'BaseCSSclassandprefixforthecomponent.GenerallyoneshouldonlychangebsClasstoprovidenew,non-Bootstrap,CSSstylesforacomponent.#Panel.Footer[source]NameTypeDefaultDescriptionbsClassstring'panel'BaseCSSclassandprefixforthecomponent.GenerallyoneshouldonlychangebsClasstoprovidenew,non-Bootstrap,CSSstylesforacomponent.#PanelGroup[source]NameTypeDefaultDescriptionaccordionbooleanfalseactiveKeyany controlledby:onSelect,initialprop:defaultActiveKeyWhenaccordionisenabled,activeKeycontrolsthewhichchildPanelisexpanded.activeKeyshould
matchachildPaneleventKeypropexactly.onSelectfunction controlsactiveKeyAcallbackfiredwhenachildPanelcollapsestatechanges.It'scalledwiththenextexpandedactiveKeyrolestringAnHTMLroleattributegenerateChildIdfunction(eventKey,type)=>`${this.props.id}-${type}-${key}`AfunctionthattakesaneventKeyandtypeandreturnsa
uniqueidforeachPanelheadingandPanelCollapse.Thefunctionmustbeapurefunction,
meaningitshouldalwaysreturnthesameidforthesamesetofinputs.Thedefault
valuerequiresthatanidtobesetforthePanelGroup.
Thetypeargumentwilleitherbe"body"or"heading".idgeneratedId('PanelGroup')HTMLidattribute,requiredifnogenerateChildIdprop
isspecified.
