A panel React component

A panel React component.

 

Basic example

By default, all the <Panel /> 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 = (
 <Panel onClick={ handleClick }>
   Basic panel example
 </Panel>
);

ReactDOM.render(panelInstance, mountNode);

 

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>
       <Panel collapsible expanded={this.state.open}>
         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>
     </div>
   );
 }
}

ReactDOM.render(<Example/>, mountNode);

 

Panel with heading

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

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

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

ReactDOM.render(panelsInstance, mountNode);

 

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 = (
 <Panel footer="Panel footer">
   Panel content
 </Panel>
);

ReactDOM.render(panelInstance, mountNode);

 

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>
   <Panel header={title}>
     Panel content
   </Panel>

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

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

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

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

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

ReactDOM.render(panelsInstance, mountNode);

 

With tables and list groups

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

const panelInstance = (
 <Panel 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.
 </Panel>
);

ReactDOM.render(panelInstance, mountNode);

Properties

NameTypeDescription
bsStyle("success"|"warning"|"danger"|"info"|"default"|"primary")

Component visual or contextual style variants.

collapsiblebool
onSelectfunc
headernode
id(string|number)
footernode
defaultExpandedbool
expandedbool
eventKey*
headerRolestring
panelRolestring
onEnterfunc

Callback fired before the component expands.

onEnteringfunc

Callback fired after the component starts to expand.

onEnteredfunc

Callback fired after the component has expanded.

onExitfunc

Callback fired before the component collapses.

onExitingfunc

Callback fired after the component starts to collapse.

onExitedfunc

Callback fired after the component has collapsed.

Test Summary

<Panel> Should have class and bodyTests didn't run
<Panel> Should have bootstrap style classTests didn't run
<Panel> Should honour additional classes passed in, adding not overridingTests didn't run
<Panel> Should have unwrapped headerTests didn't run
<Panel> Should have custom component headerTests didn't run
<Panel> Should have custom component header with anchorTests didn't run
<Panel> Should have custom component header with custom classTests didn't run
<Panel> Should have footerTests didn't run
<Panel> Should have collapse classesTests didn't run
<Panel> Should pass through dom propertiesTests didn't run
<Panel> Should pass id to panel-collapseTests didn't run
<Panel> Should be openTests didn't run
<Panel> Should be closedTests didn't run
<Panel> Should call onSelect handlerTests didn't run
<Panel> Should obey onSelect handlerTests didn't run
<Panel> Should toggle when uncontrolledTests didn't run
<Panel> Should not wrap panel-filling tables in a panel bodyTests didn't run
<Panel> Should not wrap single panel-fill table in a panel bodyTests didn't run
<Panel> Should pass transition callbacks to CollapseTests didn't run
<Panel> Web Accessibility Should be aria-expanded=trueTests didn't run
<Panel> Web Accessibility Should be aria-expanded=falseTests didn't run
<Panel> Web Accessibility Should add aria-controls with idTests didn't run