Components

#Panels Panel, PanelGroup, Accordion

#Basic example

By default, all the <Panel /> does is apply a 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.

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

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

render(panelInstance);

#Panel with heading

Easily add a heading container to your panel with the <Panel.Heading> and <Panel.Title> sub-components.

Panel heading without a title
Panel content

Panel heading with a title

Panel content
<div>
  <Panel>
    <Panel.Heading>Panel heading without a title</Panel.Heading>
    <Panel.Body>Panel content</Panel.Body>
  </Panel>
  <Panel>
    <Panel.Heading>
      <Panel.Title componentClass="h3">Panel heading with a title</Panel.Title>
    </Panel.Heading>
    <Panel.Body>Panel content</Panel.Body>
  </Panel>
</div>;

#Panel with footer

Pass buttons or secondary text in the <Panel.Footer> sub-component. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Panel content
Panel footer
<Panel>
  <Panel.Body>Panel content</Panel.Body>
  <Panel.Footer>Panel footer</Panel.Footer>
</Panel>;

#Contextual alternatives

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

Panel heading

Panel content

Panel heading

Panel content

Panel heading

Panel content

Panel heading

Panel content

Panel heading

Panel content
<div>
  <Panel bsStyle="primary">
    <Panel.Heading>
      <Panel.Title componentClass="h3">Panel heading</Panel.Title>
    </Panel.Heading>
    <Panel.Body>Panel content</Panel.Body>
  </Panel>

  <Panel bsStyle="success">
    <Panel.Heading>
      <Panel.Title componentClass="h3">Panel heading</Panel.Title>
    </Panel.Heading>
    <Panel.Body>Panel content</Panel.Body>
  </Panel>

  <Panel bsStyle="info">
    <Panel.Heading>
      <Panel.Title componentClass="h3">Panel heading</Panel.Title>
    </Panel.Heading>
    <Panel.Body>Panel content</Panel.Body>
  </Panel>

  <Panel bsStyle="warning">
    <Panel.Heading>
      <Panel.Title componentClass="h3">Panel heading</Panel.Title>
    </Panel.Heading>
    <Panel.Body>Panel content</Panel.Body>
  </Panel>

  <Panel bsStyle="danger">
    <Panel.Heading>
      <Panel.Title componentClass="h3">Panel heading</Panel.Title>
    </Panel.Heading>
    <Panel.Body>Panel content</Panel.Body>
  </Panel>
</div>;

#With tables and list groups

Add any <Table />, <ListGroup /> to a panel for a seamless integration. Mix and match with Panel.Body as needed.

Panel heading
Some default panel content here.
  • Item 1
  • Item 2
  • …
Some more panel content here.
<Panel>
  <Panel.Heading>Panel heading</Panel.Heading>
  <Panel.Body>Some default panel content here.</Panel.Body>
  <ListGroup>
    <ListGroupItem>Item 1</ListGroupItem>
    <ListGroupItem>Item 2</ListGroupItem>
    <ListGroupItem>&hellip;</ListGroupItem>
  </ListGroup>
  <Panel.Body>Some more panel content here.</Panel.Body>
</Panel>;

#Collapsible Panel


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

You can also make the Panel heading toggle the collapse.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Or use a Panel.Toggle component to customize

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
class Example extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      open: true
    };
  }

  render() {
    return (
      <div>
        <Button onClick={() => this.setState({ open: !this.state.open })}>
          Click to toggle
        </Button>
        <br />
        <Panel id="collapsible-panel-example-1" expanded={this.state.open}>
          <Panel.Collapse>
            <Panel.Body>
              Anim pariatur cliche reprehenderit, enim eiusmod high life
              accusamus terry richardson ad squid. Nihil anim keffiyeh
              helvetica, craft beer labore wes anderson cred nesciunt sapiente
              ea proident.
            </Panel.Body>
          </Panel.Collapse>
        </Panel>

        <p>You can also make the Panel heading toggle the collapse.</p>

        <Panel id="collapsible-panel-example-2" defaultExpanded>
          <Panel.Heading>
            <Panel.Title toggle>
              Title that functions as a collapse toggle
            </Panel.Title>
          </Panel.Heading>
          <Panel.Collapse>
            <Panel.Body>
              Anim pariatur cliche reprehenderit, enim eiusmod high life
              accusamus terry richardson ad squid. Nihil anim keffiyeh
              helvetica, craft beer labore wes anderson cred nesciunt sapiente
              ea proident.
            </Panel.Body>
          </Panel.Collapse>
        </Panel>

        <p>Or use a Panel.Toggle component to customize</p>

        <Panel id="collapsible-panel-example-3" defaultExpanded>
          <Panel.Heading>
            <Panel.Title>Title that functions as a collapse toggle</Panel.Title>
            <Panel.Toggle componentClass="a">My own toggle</Panel.Toggle>
          </Panel.Heading>
          <Panel.Collapse>
            <Panel.Body>
              Anim pariatur cliche reprehenderit, enim eiusmod high life
              accusamus terry richardson ad squid. Nihil anim keffiyeh
              helvetica, craft beer labore wes anderson cred nesciunt sapiente
              ea proident.
            </Panel.Body>
          </Panel.Collapse>
        </Panel>
      </div>
    );
  }
}

render(<Example />);

#Controlled PanelGroups

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

Panel content 1
class ControlledPanelGroup extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleSelect = this.handleSelect.bind(this);

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

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

  render() {
    return (
      <PanelGroup
        accordion
        id="accordion-controlled-example"
        activeKey={this.state.activeKey}
        onSelect={this.handleSelect}
      >
        <Panel eventKey="1">
          <Panel.Heading>
            <Panel.Title toggle>Panel heading 1</Panel.Title>
          </Panel.Heading>
          <Panel.Body collapsible>Panel content 1</Panel.Body>
        </Panel>
        <Panel eventKey="2">
          <Panel.Heading>
            <Panel.Title toggle>Panel heading 2</Panel.Title>
          </Panel.Heading>
          <Panel.Body collapsible>Panel content 2</Panel.Body>
        </Panel>
      </PanelGroup>
    );
  }
}

render(<ControlledPanelGroup />);

#Uncontrolled PanelGroups

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

Panel content 2
<PanelGroup accordion id="accordion-uncontrolled-example" defaultActiveKey="2">
  <Panel eventKey="1">
    <Panel.Heading>
      <Panel.Title toggle>Panel heading 1</Panel.Title>
    </Panel.Heading>
    <Panel.Body collapsible>Panel content 1</Panel.Body>
  </Panel>
  <Panel eventKey="2">
    <Panel.Heading>
      <Panel.Title toggle>Panel heading 2</Panel.Title>
    </Panel.Heading>
    <Panel.Body collapsible>Panel content 2</Panel.Body>
  </Panel>
</PanelGroup>;

#Accordions

Use <PanelGroup accordion /> to create an accordion style collapsing Panel set.

<PanelGroup accordion id="accordion-example">
  <Panel eventKey="1">
    <Panel.Heading>
      <Panel.Title toggle>Collapsible Group Item #1</Panel.Title>
    </Panel.Heading>
    <Panel.Body collapsible>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
      dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
      moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
      assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
      wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
      butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
      aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </Panel.Body>
  </Panel>
  <Panel eventKey="2">
    <Panel.Heading>
      <Panel.Title toggle>Collapsible Group Item #2</Panel.Title>
    </Panel.Heading>
    <Panel.Body collapsible>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
      dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
      moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
      assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
      wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
      butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
      aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </Panel.Body>
  </Panel>
  <Panel eventKey="3">
    <Panel.Heading>
      <Panel.Title toggle>Collapsible Group Item #3</Panel.Title>
    </Panel.Heading>
    <Panel.Body collapsible>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
      dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
      moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
      assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
      wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
      butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
      aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </Panel.Body>
  </Panel>
</PanelGroup>;

#Props

#Panels, Accordion[source]

NameTypeDefaultDescription
expanded
boolean
 controlled by: onToggle, initial prop: defaultExpanded

Controls the collapsed/expanded state ofthe Panel. Requires a Panel.Collapse or <Panel.Body collapsible> child component in order to actually animate out or in.

onToggle
function
 controls expanded

A callback fired when the collapse state changes.

eventKey
any

A unique identifier for the Component, the eventKey makes it distinguishable from others in a set. Similar to React's key prop, in that it only needs to be unique amoungst the Components siblings, not globally.

id
string

An HTML id attribute uniquely identifying the Panel component.

#Panel.Heading[source]

NameTypeDefaultDescription
componentClass
elementType
'div'

You can use a custom element type for this component.

bsClass
string
'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.

#Panel.Title[source]

NameTypeDefaultDescription
componentClass
elementType
'div'

You can use a custom element type for this component.

toggle
boolean

A convenience prop that renders the Panel.Title as a panel collapse toggle component for the common use-case.

bsClass
string
'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.

#Panel.Toggle[source]

NameTypeDefaultDescription
componentClass
elementType
SafeAnchor

You can use a custom element for this component

#Panel.Collapse[source]

NameTypeDefaultDescription
onEnter
function

Callback fired before the component expands

onEntering
function

Callback fired after the component starts to expand

onEntered
function

Callback fired after the component has expanded

onExit
function

Callback fired before the component collapses

onExiting
function

Callback fired after the component starts to collapse

onExited
function

Callback fired after the component has collapsed

bsClass
string
'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.

#Panel.Body[source]

NameTypeDefaultDescription
collapsible
boolean
false

A convenience prop that renders a Collapse component around the Body for situations when the parent Panel only contains a single Panel.Body child.

renders:

<Panel.Collapse>
 <Panel.Body />
</Panel.Collapse>
bsClass
string
'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.

#Panel.Footer[source]

NameTypeDefaultDescription
bsClass
string
'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.

#PanelGroup[source]

NameTypeDefaultDescription
accordion
boolean
false
activeKey
any
 controlled by: onSelect, initial prop: defaultActiveKey

When accordion is enabled, activeKey controls the which child Panel is expanded. activeKey should match a child Panel eventKey prop exactly.

onSelect
function
 controls activeKey

A callback fired when a child Panel collapse state changes. It's called with the next expanded activeKey

role
string

An HTML role attribute

generateChildId
function
(eventKey, type) => `${this.props.id}-${type}-${key}`

A function that takes an eventKey and type and returns a unique id for each Panel heading and Panel Collapse. The function must be a pure function, meaning it should always return the same id for the same set of inputs. The default value requires that an id to be set for the PanelGroup.

The type argument will either be "body" or "heading".

id
generatedId('PanelGroup')

HTML id attribute, required if no generateChildId prop is specified.