Collapsible Panel Component

A collapsible, themable panel component using React with styled-components.

Open

Closed

Groups

Collapsible

Component Structure

Components

const panels = (
    <PanelGroup>
      {/* Collapsible panel */}
      <Panel collapse>
        <PanelHeader>
          <PanelTitle>
            Panels are fun!
          </PanelTitle>
        </PanelHeader>
        <PanelBody>
          They can hold all kinds of stuff.<br />
          <a href="#">Like links.</a><br />
        </PanelBody>
      </Panel>
      {/* Static panel */}
      <Panel>
        <PanelHeader>
          <PanelTitle>
            This panel
          </PanelTitle>
        </PanelHeader>
        <PanelBody>
          Put any content you want here.
        </PanelBody>
      </Panel>
    </PanelGroup>
)

Theming

The PanelGroup component accepts a theme prop. All of the themable properties are specified below.

Themable Properties

Property	Type	Description
borderColor	string	A valid CSS color value for the Panel's border
borderWidth	number	The desired border width in px
borderRadius	number	The desired border radius in px
bodyBackgroundColor	string	A valid CSS color value for the PanelBody's background
bodyTextColor	string	A valid css color value for the text inside the PanelBody
headerBackgroundColor	string	A valid CSS color value for the PanelHeader's background
headerTextColor	string	A valid CSS color value for any text inside the PanelHeader (including a PanelTitle)

The following theme will yield something like this.

const theme = {
    borderWidth: 1,
    borderRadius: 2,
    bodyBackgroundColor: '#F76F8E',
    bodyTextColor: '#1B2021',
    headerBackgroundColor: '#3A405A',
    headerTextColor: '#FBFAF8'
}

const panels = (
    <PanelGroup theme={ theme }>
        {/* ...arbitrary number of Panels */}
    </PanelGroup>
)