# Rubix Panels PanelContainer, PanelTabContainer, Panel, PanelHeader, PanelFooter, PanelLeft, PanelRight, PanelBody

# Basic Panel

Basic panel layout with a single <PanelBody> nested within a <Panel> and <PanelContainer>.


          class BasicPanel extends React.Component {
            render() {
              return (
                <PanelContainer>
                  <Panel>
                    <PanelBody style={{padding: 0}}>
                      <Grid>
                        <Row>
                          <Col xs={12}>
                            <h3>Basic Panel</h3>
                            <p>
                              <LoremIpsum query='5s' />
                            </p>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelBody>
                  </Panel>
                </PanelContainer>
              );
            }
          }

          
        

# Panel Body, Footer without Header

Panel layout with a single <PanelBody> and <PanelFooter> nested within a <Panel> and <PanelContainer>.


          class PanelBodyFooterWithoutHeader extends React.Component {
            render() {
              return (
                <PanelContainer>
                  <Panel>
                    <PanelBody>
                      <Grid>
                        <Row>
                          <Col xs={12}>
                            <p>
                              <LoremIpsum query='5s' />
                            </p>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelBody>
                    <PanelFooter className='bg-red'>
                      <Grid>
                        <Row>
                          <Col xs={12} className='fg-white'>
                            <h4>Panel Body + Footer without Panel Header</h4>
                            <h6>Mini Heading</h6>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelFooter>
                  </Panel>
                </PanelContainer>
              );
            }
          }

          
        

# Panel Body, Header without Footer

Panel layout with a single <PanelBody> and <PanelHeader> nested within a <Panel> and <PanelContainer>.


          class PanelBodyHeaderWithoutFooter extends React.Component {
            render() {
              return (
                <PanelContainer>
                  <Panel>
                    <PanelHeader className='bg-green'>
                      <Grid>
                        <Row>
                          <Col xs={12} className='fg-white'>
                            <h4>Panel Body + Header without Panel Footer</h4>
                            <h6>Mini Heading</h6>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelHeader>
                    <PanelBody>
                      <Grid>
                        <Row>
                          <Col xs={12}>
                            <p>
                              <LoremIpsum query='5s' />
                            </p>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelBody>
                  </Panel>
                </PanelContainer>
              );
            }
          }

          
        

# Panel Body, Header and Footer

Panel layout with a <PanelBody>, <PanelHeader> and <PanelFooter> nested within a <Panel> and <PanelContainer>.


          class PanelBodyHeaderAndFooter extends React.Component {
            render() {
              return (
                <PanelContainer>
                  <Panel>
                    <PanelHeader className='bg-blue'>
                      <Grid>
                        <Row>
                          <Col xs={12} className='fg-white'>
                            <h3>Panel Header</h3>
                            <h6>Mini Heading</h6>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelHeader>
                    <PanelBody>
                      <Grid>
                        <Row>
                          <Col xs={12}>
                            <p>
                              <LoremIpsum query='5s' />
                            </p>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelBody>
                    <PanelFooter className='bg-lightblue'>
                      <Grid>
                        <Row>
                          <Col xs={12} className='fg-white'>
                            <h3>Panel Footer</h3>
                            <h6>Mini heading</h6>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelFooter>
                  </Panel>
                </PanelContainer>
              );
            }
          }

          
        

# Panel Body, Header with Plain Tabs and a Footer

Panel layout with a <PanelBody>, <PanelHeader> and a <PanelFooter> nested within a <Panel> and <PanelTabContainer>. <PanelHeader> contains plain tab component <Nav> which controls the <Tab.Content> in <PanelBody> via the eventKey property.


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

              this.state = {
                activeTab: ''
              };
            }

            handleActiveState(eventKey) {
              this.setState({
                activeTab: eventKey
              });
            }

            getItemProps(eventKey) {
              return {
                eventKey,
                active: this.state.activeTab === eventKey
              };
            }

            render() {
              return (
                <PanelTabContainer id='panel-body-header-tab-footer' defaultActiveKey="home">
                  <Panel>
                    <PanelHeader className='bg-purple fg-white' style={{ display: 'block' }}>
                      <Grid>
                        <Row>
                        <Col xs={12}>
                          <h4>Panel Header + Plain Tabs</h4>
                        </Col>
                        </Row>
                      </Grid>
                      <Nav bsStyle="tabs" className='plain' onSelect={::this.handleActiveState}>
                        <NavItem eventKey="home">
                          <Icon bundle='fontello' glyph='home'/>
                        </NavItem>
                        <NavItem eventKey="user">
                          <Icon bundle='fontello' glyph='user'/>
                        </NavItem>
                        <NavItem eventKey="cog">
                          <Icon bundle='fontello' glyph='cog'/>
                        </NavItem>
                        <NavDropdown title={<Icon bundle='fontello' glyph='angle-down'/>} noCaret bsStyle='purple' pullRight>
                          <MenuItem {...this.getItemProps("fat")}>@fat</MenuItem>
                          <MenuItem {...this.getItemProps("mdo")}>@mdo</MenuItem>
                        </NavDropdown>
                      </Nav>
                    </PanelHeader>
                    <PanelBody>
                      <Grid>
                        <Row>
                          <Col xs={12}>
                            <Tab.Content>
                              <Tab.Pane eventKey="home">
                                <h4>home-0</h4>
                                <p><LoremIpsum query='2s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="user">
                                <h4>user-0</h4>
                                <p><LoremIpsum query='2s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="cog">
                                <h4>cog-0</h4>
                                <p><LoremIpsum query='2s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="fat">
                                <h4>fat-0</h4>
                                <p><LoremIpsum query='2s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="mdo">
                                <h4>mdo-0</h4>
                                <p><LoremIpsum query='2s'/></p>
                              </Tab.Pane>
                            </Tab.Content>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelBody>
                    <PanelFooter className='bg-lightpurple'>
                      <Grid>
                        <Row>
                          <Col xs={12} className='fg-white'>
                            <h4>Panel Footer</h4>
                            <h6>Mini heading</h6>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelFooter>
                  </Panel>
                </PanelTabContainer>
              );
            }
          }

          
        

# Panel Body, Footer with Plain Tabs and a Header

Panel layout with a <PanelBody>, <PanelHeader> and a <PanelFooter> nested within a <Panel> and <PanelTabContainer>. <PanelFooter> contains plain tab component <Nav> which controls the <Tab.Content> in <PanelBody> via the eventKey property.


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

              this.state = {
                activeTab: ''
              };
            }

            handleActiveState(eventKey) {
              this.setState({
                activeTab: eventKey
              });
            }

            getItemProps(eventKey) {
              return {
                eventKey,
                active: this.state.activeTab === eventKey
              };
            }

            render() {
              return (
                <PanelTabContainer id='panel-body-header-footer-tab' defaultActiveKey="home">
                  <Panel>
                    <PanelHeader className='bg-palepink'>
                      <Grid>
                        <Row>
                          <Col xs={12} className='fg-white'>
                            <h4>Panel Header</h4>
                            <h6>Mini heading</h6>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelHeader>
                    <PanelBody>
                      <Grid>
                        <Row>
                          <Col xs={12}>
                            <Tab.Content animation={false}>
                              <Tab.Pane eventKey="home">
                                <h3>home-1</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="user">
                                <h3>user-1</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="cog">
                                <h3>cog-1</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="fat">
                                <h3>fat-1</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="mdo">
                                <h3>mdo-1</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                            </Tab.Content>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelBody>
                    <PanelFooter className='bg-palepink fg-white'>
                      <Nav bsStyle="tabs" className='plain' onSelect={::this.handleActiveState}>
                        <NavItem eventKey="home">
                          <Icon bundle='fontello' glyph='home'/>
                        </NavItem>
                        <NavItem eventKey="user">
                          <Icon bundle='fontello' glyph='user'/>
                        </NavItem>
                        <NavItem eventKey="cog">
                          <Icon bundle='fontello' glyph='cog'/>
                        </NavItem>
                        <NavDropdown title={<Icon bundle='fontello' glyph='angle-up'/>} noCaret dropup bsStyle='palepink'>
                          <MenuItem {...this.getItemProps("fat")}>@fat</MenuItem>
                          <MenuItem {...this.getItemProps("mdo")}>@mdo</MenuItem>
                        </NavDropdown>
                      </Nav>
                      <Grid>
                        <Row>
                          <Col xs={12}>
                            <h4>Panel Footer + Plain Tabs</h4>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelFooter>
                  </Panel>
                </PanelTabContainer>
              );
            }
          }

          
        

# Panel Body, Header and Footer with Plain Tabs

Panel layout with a <PanelBody>, <PanelHeader> and a <PanelFooter> nested within a <Panel> and <PanelTabContainer>. <PanelHeader> contains normal tab component <Nav> which controls the <Tab.Content> in <PanelBody> via the eventKey property.


          class PanelBodyHeaderFooterBothPlainTabs extends React.Component {
            render() {
              return (
                <PanelTabContainer id='panel-body-header-footer-both-plain-tabs' defaultActiveKey="home">
                  <Panel>
                    <PanelHeader className='bg-red fg-white' style={{ display: 'block' }}>
                      <Grid>
                        <Row>
                          <Col xs={12}>
                            <h4>Panel Header + Plain Tabs</h4>
                          </Col>
                        </Row>
                      </Grid>
                      <Nav bsStyle="tabs" className='plain'>
                        <NavItem eventKey="home">
                          <Icon bundle='fontello' glyph='home'/>
                        </NavItem>
                        <NavItem eventKey="user">
                          <Icon bundle='fontello' glyph='user'/>
                        </NavItem>
                        <NavItem eventKey="cog">
                          <Icon bundle='fontello' glyph='cog'/>
                        </NavItem>
                      </Nav>
                    </PanelHeader>
                    <PanelBody>
                      <Grid>
                        <Row>
                          <Col xs={12}>
                            <Tab.Content animation={false}>
                              <Tab.Pane eventKey="home">
                                <h3>Home (header)</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="user">
                                <h3>User (header)</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="cog">
                                <h3>Cog (header)</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="home-1">
                                <h3>Home (footer)</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="user-1">
                                <h3>User (footer)</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="cog-1">
                                <h3>Cog (footer)</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                            </Tab.Content>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelBody>
                    <PanelFooter className='bg-purple fg-white' style={{ display: 'block' }}>
                      <Nav bsStyle="tabs" className='plain'>
                        <NavItem eventKey="home-1">
                          <Icon bundle='fontello' glyph='home'/>
                        </NavItem>
                        <NavItem eventKey="user-1">
                          <Icon bundle='fontello' glyph='user'/>
                        </NavItem>
                        <NavItem eventKey="cog-1">
                          <Icon bundle='fontello' glyph='cog'/>
                        </NavItem>
                      </Nav>
                      <Grid>
                        <Row>
                          <Col xs={12}>
                            <h4>Panel Footer</h4>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelFooter>
                  </Panel>
                </PanelTabContainer>
              );
            }
          }

          
        

# Panel Body and Header with Normal Tabs

Panel layout with a <PanelBody> and <PanelHeader> nested within a <Panel> and <PanelTabContainer>. <PanelHeader> contains normal tab component <Nav> which controls the <Tab.Content> in <PanelBody> via the eventKey property.


          class PanelBodyHeaderNormalTabs extends React.Component {
            render() {
              return (
                <PanelTabContainer id='panel-body-header-footer-tab' defaultActiveKey="home">
                  <Panel>
                    <PanelHeader className='bg-palegreen fg-white'>
                      <Nav bsStyle="tabs">
                        <NavItem eventKey="home">
                          <Icon bundle='fontello' glyph='home'/>
                        </NavItem>
                        <NavItem eventKey="user">
                          <Icon bundle='fontello' glyph='user'/>
                        </NavItem>
                        <NavItem eventKey="cog">
                          <Icon bundle='fontello' glyph='cog'/>
                        </NavItem>
                      </Nav>
                    </PanelHeader>
                    <PanelBody>
                      <Grid>
                        <Row>
                          <Col xs={12}>
                            <Tab.Content animation={false}>
                              <Tab.Pane eventKey="home">
                                <h3>home-2</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="user">
                                <h3>user-2</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="cog">
                                <h3>cog-2</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                            </Tab.Content>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelBody>
                  </Panel>
                </PanelTabContainer>
              );
            }
          }

          
        

# Panel Body and Footer with Normal Tabs

Panel layout with a <PanelBody> and <PanelFooter> nested within a <Panel> and <PanelTabContainer>. <PanelFooter> contains normal tab component <Nav> which controls the <Tab.Content> in <PanelBody> via the eventKey property.


          class PanelBodyFooterNormalTabs extends React.Component {
            render() {
              return (
                <PanelTabContainer id='panel-body-header-footer-tab' defaultActiveKey="home">
                  <Panel>
                    <PanelBody>
                      <Grid>
                        <Row>
                          <Col xs={12}>
                            <Tab.Content animation={false}>
                              <Tab.Pane eventKey="home">
                                <h3>home-3</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="user">
                                <h3>user-3</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="cog">
                                <h3>cog-3</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                            </Tab.Content>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelBody>
                    <PanelFooter className='bg-orange fg-white'>
                      <Nav bsStyle="tabs">
                        <NavItem eventKey="home">
                          <Icon bundle='fontello' glyph='home'/>
                        </NavItem>
                        <NavItem eventKey="user">
                          <Icon bundle='fontello' glyph='user'/>
                        </NavItem>
                        <NavItem eventKey="cog">
                          <Icon bundle='fontello' glyph='cog'/>
                        </NavItem>
                      </Nav>
                    </PanelFooter>
                  </Panel>
                </PanelTabContainer>
              );
            }
          }

          
        

# Panel Body, Header and Footer with Normal Tabs

Panel layout with a <PanelBody>, <PanelHeader> and <PanelFooter> nested within a <Panel> and <PanelTabContainer>. <PanelHeader> and <PanelFooter> contain normal tab component <Nav> which controls the <Tab.Content> in <PanelBody> via the eventKey property.


          class PanelBodyHeaderFooterNormalTabs extends React.Component {
            render() {
              return (
                <PanelTabContainer id='panel-body-header-footer-normal-tab' defaultActiveKey="home">
                  <Panel>
                    <PanelHeader className='bg-grayishcyan fg-white'>
                      <Nav bsStyle="tabs">
                        <NavItem eventKey="home">
                          <Icon bundle='fontello' glyph='home'/>
                        </NavItem>
                        <NavItem eventKey="user">
                          <Icon bundle='fontello' glyph='user'/>
                        </NavItem>
                        <NavItem eventKey="cog">
                          <Icon bundle='fontello' glyph='cog'/>
                        </NavItem>
                      </Nav>
                    </PanelHeader>
                    <PanelBody>
                      <Grid>
                        <Row>
                          <Col xs={12}>
                            <Tab.Content animation={false}>
                              <Tab.Pane eventKey="home">
                                <h3>Home (header)</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="user">
                                <h3>User (header)</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="cog">
                                <h3>Cog (header)</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="home-1">
                                <h3>Home (footer)</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="user-1">
                                <h3>User (footer)</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="cog-1">
                                <h3>Cog (footer)</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                            </Tab.Content>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelBody>
                    <PanelFooter className='bg-darkcyan fg-white'>
                      <Nav bsStyle="tabs">
                        <NavItem eventKey="home-1">
                          <Icon bundle='fontello' glyph='home'/>
                        </NavItem>
                        <NavItem eventKey="user-1">
                          <Icon bundle='fontello' glyph='user'/>
                        </NavItem>
                        <NavItem eventKey="cog-1">
                          <Icon bundle='fontello' glyph='cog'/>
                        </NavItem>
                      </Nav>
                    </PanelFooter>
                  </Panel>
                </PanelTabContainer>
              );
            }
          }

          
        

# Horizontal Panel with PanelLeft and a PanelBody with Normal Tabs

Panel layout with a <PanelBody> and <PanelLeft> nested within a <Panel> and <PanelTabContainer>. <PanelLeft> contains normal tab component <Nav> which controls the <Tab.Content> in <PanelBody> via the eventKey property.


          class PanelLeftHorizontal extends React.Component {
            render() {
              return (
                <PanelTabContainer id='panel-body-left' defaultActiveKey="home">
                  <Panel horizontal>
                    <PanelLeft className='bg-red fg-white panel-sm-2'>
                      <Nav bsStyle="tabs">
                        <NavItem eventKey="home">
                          <Icon bundle='fontello' glyph='home'/>
                        </NavItem>
                        <NavItem eventKey="user">
                          <Icon bundle='fontello' glyph='user'/>
                        </NavItem>
                        <NavItem eventKey="cog">
                          <Icon bundle='fontello' glyph='cog'/>
                        </NavItem>
                      </Nav>
                    </PanelLeft>
                    <PanelBody className='panel-sm-10' style={{paddingTop: 0}}>
                      <Grid>
                        <Row>
                          <Col xs={12}>
                            <Tab.Content animation={false}>
                              <Tab.Pane eventKey="home">
                                <h3>home-4</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="user">
                                <h3>user-4</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="cog">
                                <h3>cog-4</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                            </Tab.Content>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelBody>
                  </Panel>
                </PanelTabContainer>
              );
            }
          }

          
        

# Horizontal Panel with PanelBody and a PanelRight with Normal Tabs

Panel layout with a <PanelBody> and <PanelRight> nested within a <Panel> and <PanelTabContainer>. <PanelRight> contains normal tab component <Nav> which controls the <Tab.Content> in <PanelBody> via the eventKey property.


          class PanelRightHorizontal extends React.Component {
            render() {
              return (
                <PanelTabContainer id='panel-body-right' defaultActiveKey="home">
                  <Panel horizontal>
                    <PanelBody className='panel-sm-10' style={{paddingTop: 0}}>
                      <Grid>
                        <Row>
                          <Col xs={12}>
                            <Tab.Content animation={false}>
                              <Tab.Pane eventKey="home">
                                <h3>home-5</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="user">
                                <h3>user-5</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="cog">
                                <h3>cog-5</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                            </Tab.Content>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelBody>
                    <PanelRight className='bg-orange fg-darkorange panel-sm-2'>
                      <Nav bsStyle="tabs">
                        <NavItem eventKey="home">
                          <Icon bundle='fontello' glyph='home'/>
                        </NavItem>
                        <NavItem eventKey="user">
                          <Icon bundle='fontello' glyph='user'/>
                        </NavItem>
                        <NavItem eventKey="cog">
                          <Icon bundle='fontello' glyph='cog'/>
                        </NavItem>
                      </Nav>
                    </PanelRight>
                  </Panel>
                </PanelTabContainer>
              );
            }
          }

          
        

# Horizontal Panel with PanelBody surrounded by PanelLeft and PanelRight with Normal Tabs

Panel layout with a <PanelBody> surrounded by a <PanelLeft> and <PanelRight> nested within a <Panel> and <PanelTabContainer>. <PanelLeft> and <PanelRight> contains normal tab component <Nav> which controls the <Tab.Content> in <PanelBody> via the eventKey property.


          class PanelLeftRight extends React.Component {
            render() {
              return (
                <PanelTabContainer id='panel-body-left-right' defaultActiveKey="home">
                  <Panel horizontal>
                    <PanelLeft className='bg-red fg-white panel-sm-1'>
                      <Nav bsStyle="tabs">
                        <NavItem eventKey="home">
                          <Icon bundle='fontello' glyph='home'/>
                        </NavItem>
                        <NavItem eventKey="user">
                          <Icon bundle='fontello' glyph='user'/>
                        </NavItem>
                        <NavItem eventKey="cog">
                          <Icon bundle='fontello' glyph='cog'/>
                        </NavItem>
                      </Nav>
                    </PanelLeft>
                    <PanelBody className='panel-sm-10' style={{paddingTop: 0}}>
                      <Grid>
                        <Row>
                          <Col xs={12}>
                            <Tab.Content animation={false}>
                              <Tab.Pane eventKey="home">
                                <h3>Home (left)</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="user">
                                <h3>User (left)</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="cog">
                                <h3>Cog (left)</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="home-1">
                                <h3>Home (right)</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="user-1">
                                <h3>User (right)</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                              <Tab.Pane eventKey="cog-1">
                                <h3>Cog (right)</h3>
                                <p><LoremIpsum query='4s'/></p>
                              </Tab.Pane>
                            </Tab.Content>
                          </Col>
                        </Row>
                      </Grid>
                    </PanelBody>
                    <PanelRight className='bg-purple fg-white panel-sm-1'>
                      <Nav bsStyle="tabs">
                        <NavItem eventKey="home-1">
                          <Icon bundle='fontello' glyph='home'/>
                        </NavItem>
                        <NavItem eventKey="user-1">
                          <Icon bundle='fontello' glyph='user'/>
                        </NavItem>
                        <NavItem eventKey="cog-1">
                          <Icon bundle='fontello' glyph='cog'/>
                        </NavItem>
                      </Nav>
                    </PanelRight>
                  </Panel>
                </PanelTabContainer>
              );
            }
          }

          
        

# PanelContainer

NameTypeDefaultDescription
controlsone of type: boolean or elementDefine custom controls here. If you don't want controls for that PanelContainer, just set it to 'false'
containerClassesstringClasses for the container element
borderedbooleanAdds a border around the PanelContainer
plainbooleanRemoves border and background from the PanelContainer
minimizebooleanMinimize the PanelContainer
handleMaximizefunction() {}Calls back when the maximize button is pressed in the Panel controls
onHidefunction() {}Calls back when the Panel container is in hidden state
onShowfunction() {}Calls back when the Panel container is in visible state
onTogglefunction() {}Calls back when the Panel container is toggled
onRemovefunction() {}Calls back when the Panel container is removed