# Bootstrap Panels BPanel, BPanelGroup, Accordion

# Basic example

By default, all the <BPanel /> does is apply some basic border and padding to contain some content.

You can pass on any additional properties you need, e.g. a custom onClick handler, as it is shown in the example code. They all will apply to the wrapper div element.


          function handleClick() {
            alert('You have clicked on me');
          }

          const panelInstance = (
            <BPanel onClick={ handleClick }>
              Basic panel example
            </BPanel>
          );

          
        

# Collapsible Panel


          class Example extends React.Component {
            constructor(...args) {
              super(...args);
              this.state = {
                open: true
              };
            }

            render() {
              return (
                <div>
                  <Button onClick={ ()=> this.setState({ open: !this.state.open })}>
                    click
                  </Button>
                  <BPanel collapsible expanded={this.state.open}>
                    <LoremIpsum query='2s' />
                  </BPanel>
                </div>
              );
            }
          }

          
        

# Panel with heading

Easily add a heading container to your panel with the header prop.


          const title = (
            <h3>Panel title</h3>
          );

          const panelsInstance = (
            <div>
              <BPanel header="Panel heading without title">
                Panel content
              </BPanel>
              <BPanel header={title}>
                Panel content
              </BPanel>
            </div>
          );

          
        

# Panel with footer

Pass buttons or secondary text in the footer prop. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.


          const panelInstance = (
            <BPanel footer="Panel footer">
              Panel content
            </BPanel>
          );

          
        

# Contextual alternatives

Like other components, easily make a panel more meaningful to a particular context by adding a bsStyle prop.


          const title = (
            <h3>Panel title</h3>
          );

          const panelsInstance = (
            <div>
              <BPanel header={title}>
                Panel content
              </BPanel>

              <BPanel header={title} bsStyle="primary">
                Panel content
              </BPanel>

              <BPanel header={title} bsStyle="success">
                Panel content
              </BPanel>

              <BPanel header={title} bsStyle="info">
                Panel content
              </BPanel>

              <BPanel header={title} bsStyle="warning">
                Panel content
              </BPanel>

              <BPanel header={title} bsStyle="danger">
                Panel content
              </BPanel>
            </div>
          );

          
        

# With tables and list groups

Add the fill prop to <Table /> or <ListGroup /> elements to make them fill the panel.


          const panelInstance = (
            <BPanel collapsible defaultExpanded header="Panel heading">
              Some default panel content here.
              <ListGroup fill>
                <ListGroupItem>Item 1</ListGroupItem>
                <ListGroupItem>Item 2</ListGroupItem>
                <ListGroupItem>&hellip;</ListGroupItem>
              </ListGroup>
              Some more panel content here.
            </BPanel>
          );

          
        

# Controlled PanelGroups

PanelGroups can be controlled by a parent component. The activeKey prop dictates which panel is open.


          class ControlledPanelGroup extends React.Component {
            constructor(...args) {
              super(...args);

              this.state = { activeKey: '1' };
            }

            handleSelect(activeKey) {
              this.setState({ activeKey });
            }

            render() {
              return (
                <BPanelGroup activeKey={this.state.activeKey} onSelect={::this.handleSelect} accordion>
                  <BPanel header="Panel 1" eventKey="1">Panel 1 content</BPanel>
                  <BPanel header="Panel 2" eventKey="2">Panel 2 content</BPanel>
                </BPanelGroup>
              );
            }
          }

          
        

# Uncontrolled PanelGroups

PanelGroups can also be uncontrolled where they manage their own state. The defaultActiveKey prop dictates which panel is open when initially.


          const panelGroupInstance = (
            <BPanelGroup defaultActiveKey="2" accordion>
              <BPanel header="Panel 1" eventKey="1">Panel 1 content</BPanel>
              <BPanel header="Panel 2" eventKey="2">Panel 2 content</BPanel>
            </BPanelGroup>
          );

          
        

# Accordions

<Accordion /> aliases <PanelGroup accordion />.


          const accordionInstance = (
            <Accordion>
              <BPanel header="Collapsible Group Item #1" eventKey="1">
                <LoremIpsum query='7s' />
              </BPanel>
              <BPanel header="Collapsible Group Item #2" eventKey="2">
                <LoremIpsum query='7s' />
              </BPanel>
              <BPanel header="Collapsible Group Item #3" eventKey="3">
                <LoremIpsum query='7s' />
              </BPanel>
            </Accordion>
          );

          
        

# Props

BPanel, Accordion

NameTypeDefaultDescription
bsClassstring'panel'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
bsStyleone of: "success", "warning", "danger", "info", "default", "primary"'panel'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
collapsibleboolean
defaultExpandedbooleanfalse
eventKeyany
expandedboolean
footernode
headernode
headerRolestring
idstring | number
onEnterfunction
onEnteredfunction
onEnteringfunction
onExitfunction
onExitedfunction
onExitingfunction
onSelectfunction
panelRolestring

PanelGroup

NameTypeDefaultDescription
bsClassstring'panel-group'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
activeKeyany
accordionbooleanfalse
childrennode
classNamestring
defaultActiveKeyany
onSelectfunction