Top
Panel API - API
Panel API
Props (13)
Styling Props (5)
Bool
default: true
Boolean prop denoting if the body should show scrollbars when appropriate. The default value is true, so scrollbars are shown when the content is overflowing. Using false is not recommended.
import React from 'react'

import Panel from '@zippytech/react-toolkit/Panel'
import '@zippytech/react-toolkit/Panel/index.css'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { bodyScrollable: true }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          onChange={bodyScrollable => this.setState({bodyScrollable})}
          checked={this.state.bodyScrollable}
        >Body scrollable
        </CheckBox>
      </div>

      <Panel
        title="Panel with bodyScrollable"
        bodyScrollable={this.state.bodyScrollable}
        style={{ height: 150 }}
      >
        <p>
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
        </p>
        <ul>
          <li>
            <b>Performance</b>
            {' '}
            - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
          </li>
          <li>
            <b>Simplicity</b>
            {' '}
            - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
          </li>
          <li>
            <b>Flexibility & extensibility</b>
            {' '}
            - all components need to be very flexible in adapting to a wide spectrum of needs. Changing some styles, replacing some rendering logic or adding a custom validation should all be possible and easily achievable.
          </li>
        </ul>
      </Panel>
    </div>
  }
}
export default () => <App />
Fn(props): React.node
default: undefined
Gives you the possibility to render JSX elements after the title.
import React from 'react'

import Panel from '@zippytech/react-toolkit/Panel'
import '@zippytech/react-toolkit/Panel/index.css'

import Icon from './icons'
const icon = <Icon key="forward" type="forward" />

export default () => <div>
  <Panel
    title="Panel with icon after title"
    renderAfterTitle={() => icon}
  >
    <p>
      When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
    </p>
    <ul>
      <li>
        <b>Performance</b>
        {' '}
        - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
      </li>
      <li>
        <b>Simplicity</b>
        {' '}
        - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
      </li>
      <li>
        <b>Flexibility & extensibility</b>
        {' '}
        - all components need to be very flexible in adapting to a wide spectrum of needs. Changing some styles, replacing some rendering logic or adding a custom validation should all be possible and easily achievable.
      </li>
    </ul>
  </Panel>
</div>
Fn(props): React.node
default: undefined
Gives you the possibility to render JSX elements before the title.
import React from 'react'
import Panel from '@zippytech/react-toolkit/Panel'
import '@zippytech/react-toolkit/Panel/index.css'

import Icon from './icons'

const icon = <Icon key="back" type="back" />

export default () => <div>
  <Panel
    title="Panel with icon before title"
    renderBeforeTitle={() => icon}
  >
    <p>
      When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
    </p>
    <ul>
      <li>
        <b>Performance</b>
        {' '}
        - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
      </li>
      <li>
        <b>Simplicity</b>
        {' '}
        - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
      </li>
      <li>
        <b>Flexibility & extensibility</b>
        {' '}
        - all components need to be very flexible in adapting to a wide spectrum of needs. Changing some styles, replacing some rendering logic or adding a custom validation should all be possible and easily achievable.
      </li>
    </ul>
  </Panel>
</div>
Fn(props): React.Node
default: undefined
Custom function for rendering the <Panel />'s body.
import React from 'react'
import Panel from '@zippytech/react-toolkit/Panel'
import '@zippytech/react-toolkit/Panel/index.css'
class App extends React.Component {
  render() {
    return <Panel
      title="Panel with custom renderBody function"
      renderBody={props => <h3 {...props}/>}
    >
      <p>
        When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
      </p>
      <ul>
        <li>
          <b>Performance</b>
          {' '}
          - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
        </li>
        <li>
          <b>Simplicity</b>
          {' '}
          - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
        </li>
        <li>
          <b>Flexibility & extensibility</b>
          {' '}
          - all components need to be very flexible in adapting to a wide spectrum of needs. Changing some styles, replacing some rendering logic or adding a custom validation should all be possible and easily achievable.
        </li>
      </ul>
    </Panel>
  }
}

export default () => <App />
Fn(props): React.node
default: undefined
Render content after body.
import React from 'react'

import Panel from '@zippytech/react-toolkit/Panel'
import '@zippytech/react-toolkit/Panel/index.css'

export default () => <Panel
  title="Panel with custom renderFooter function"
  renderFooter={() => <div style={{ border: '1px solid red' }}>FOOTER</div>}
>
  <p>
    When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
  </p>
  <ul>
    <li>
      <b>Performance</b>
      {' '}
      - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
    </li>
    <li>
      <b>Simplicity</b>
      {' '}
      - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
    </li>
    <li>
      <b>Flexibility & extensibility</b>
      {' '}
      - all components need to be very flexible in adapting to a wide spectrum of needs. Changing some styles, replacing some rendering logic or adding a custom validation should all be possible and easily achievable.
    </li>
  </ul>
</Panel>
Bool|Fn(props): React.node
default: undefined
Gives you the possibility to render JSX elements as title. If renderTitleBar=false, no title will be rendered.
import React from 'react'

import Panel from '@zippytech/react-toolkit/Panel'
import '@zippytech/react-toolkit/Panel/index.css'

import Icon from './icons'

const icon = <Icon key="forward" type="forward" />
export default () => <div>
  <Panel
    title="Panel with custom rendered title"
    renderTitleBar={props => <div {...props} style={{color: 'green'}} />}
    titleIcon={icon}
  >
    <p>
      When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
    </p>
    <ul>
      <li>
        <b>Performance</b>
        {' '}
        - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
      </li>
      <li>
        <b>Simplicity</b>
        {' '}
        - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
      </li>
      <li>
        <b>Flexibility & extensibility</b>
        {' '}
        - all components need to be very flexible in adapting to a wide spectrum of needs. Changing some styles, replacing some rendering logic or adding a custom validation should all be possible and easily achievable.
      </li>
    </ul>
  </Panel>
</div>
Bool
default: true
Whether to use direction: rtl.
import React from 'react'

import Panel from '@zippytech/react-toolkit/Panel'
import '@zippytech/react-toolkit/Panel/index.css'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { rtl: false }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox checked={this.state.rtl} onChange={checked => this.setState({rtl: checked})}>rtl</CheckBox>
      </div>
      <Panel
        rtl={this.state.rtl}
        title="Panel with rtl configured"
      >
        <p>
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
        </p>
        <ul>
          <li>
            <b>Performance</b>
            {' '}
            - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
          </li>
          <li>
            <b>Simplicity</b>
            {' '}
            - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
          </li>
          <li>
            <b>Flexibility & extensibility</b>
            {' '}
            - all components need to be very flexible in adapting to a wide spectrum of needs. Changing some styles, replacing some rendering logic or adding a custom validation should all be possible and easily achievable.
          </li>
        </ul>
      </Panel>
    </div>
  }
}
export default () => <App />
React.node
default: undefined
Specifies the contents of the title.
import React from 'react'

import Panel from '@zippytech/react-toolkit/Panel'
import '@zippytech/react-toolkit/Panel/index.css'

export default () => <div>
  <Panel
    title="Panel with a title"
  >
    <p>
      When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
    </p>
    <ul>
      <li>
        <b>Performance</b>
        {' '}
        - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
      </li>
      <li>
        <b>Simplicity</b>
        {' '}
        - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
      </li>
      <li>
        <b>Flexibility & extensibility</b>
        {' '}
        - all components need to be very flexible in adapting to a wide spectrum of needs. Changing some styles, replacing some rendering logic or adding a custom validation should all be possible and easily achievable.
      </li>
    </ul>
  </Panel>
</div>
String
default: "start"
Specifies the alignment of the title. Available values are:
  • "start"
  • "center"
  • "end"
  • "left"
  • "right"
import React from 'react'

import Panel from '@zippytech/react-toolkit/Panel'
import '@zippytech/react-toolkit/Panel/index.css'

import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { align: 'start' }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <ComboBox
          style={{width: 150}}
          collapseOnSelect
          changeValueOnNavigation
          onChange={value => this.setState({align: value})}
          value={this.state.align}
          dataSource={[
            {id: 'start', label: 'start'},
            {id: 'center', label: 'center'},
            {id: 'end', label: 'end'},
            {id: 'left', label: 'left'},
            {id: 'right', label: 'right'}
          ]}
        />
      </div>
      <Panel
        title="Panel with titleAlign configured"
        titleAlign={this.state.align}
      >
        <p>
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
        </p>
        <ul>
          <li>
            <b>Performance</b>
            {' '}
            - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
          </li>
          <li>
            <b>Simplicity</b>
            {' '}
            - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
          </li>
          <li>
            <b>Flexibility & extensibility</b>
            {' '}
            - all components need to be very flexible in adapting to a wide spectrum of needs. Changing some styles, replacing some rendering logic or adding a custom validation should all be possible and easily achievable.
          </li>
        </ul>
      </Panel>
    </div>
  }
}
export default () => <App />
String
default: "top"
Specifies the position of the title. Available values are:
  • "top"
  • "bottom"
  • "left"
  • "right"
import React from 'react'

import Panel from '@zippytech/react-toolkit/Panel'
import '@zippytech/react-toolkit/Panel/index.css'

import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { position: 'top' }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <ComboBox
          style={{width: 150}}
          collapseOnSelect
          changeValueOnNavigation
          onChange={value => this.setState({position: value})}
          value={this.state.position}
          dataSource={[
            {id: 'top', label: 'top'},
            {id: 'bottom', label: 'bottom'},
            {id: 'right', label: 'right'},
            {id: 'left', label: 'left'},
          ]}
        />
      </div>
      <Panel
        title="Panel with titleBarPosition configured"
        titleBarPosition={this.state.position}
        titleStyle={{color: 'red'}}
      >
        <p>
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
        </p>
        <ul>
          <li>
            <b>Performance</b>
            {' '}
            - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
          </li>
          <li>
            <b>Simplicity</b>
            {' '}
            - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
          </li>
          <li>
            <b>Flexibility & extensibility</b>
            {' '}
            - all components need to be very flexible in adapting to a wide spectrum of needs. Changing some styles, replacing some rendering logic or adding a custom validation should all be possible and easily achievable.
          </li>
        </ul>
      </Panel>
    </div>
  }
}
export default () => <App />
Bool
default: false
Specifies the if the title should have an ellipsis when it doesn't fit into the title bar. By default, this prop is false, so the title is wrapped.
import React from 'react'

import Panel from '@zippytech/react-toolkit/Panel'
import '@zippytech/react-toolkit/Panel/index.css'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { titleEllipsis: false, width300: false }
  }
  render() {
    return <div style={{ maxHeight: 400, display: 'flex', flexFlow: 'column' }}>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          onChange={width300 => this.setState({width300})}
          checked={this.state.width300}
        >Width: 200px
        </CheckBox>
      </div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          onChange={titleEllipsis => this.setState({titleEllipsis})}
          checked={this.state.titleEllipsis}
        >Title ellipsis
        </CheckBox>
      </div>

      <Panel
        title="Panel with titleEllipsis configured and a very very long title so it will probably wrap if titleEllipsis is false"
        titleEllipsis={this.state.titleEllipsis}
        style={{ flex: 1, width: this.state.width300 ? 300 : 'auto' }}
      >
        <p>
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
        </p>
        <ul>
          <li>
            <b>Performance</b>
            {' '}
            - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
          </li>
          <li>
            <b>Simplicity</b>
            {' '}
            - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
          </li>
          <li>
            <b>Flexibility & extensibility</b>
            {' '}
            - all components need to be very flexible in adapting to a wide spectrum of needs. Changing some styles, replacing some rendering logic or adding a custom validation should all be possible and easily achievable.
          </li>
        </ul>
      </Panel>
    </div>
  }
}
export default () => <App />
React.node
default: undefined
Gives you the possibility to add an icon to the title.
import React from 'react'
import Panel from '@zippytech/react-toolkit/Panel'
import '@zippytech/react-toolkit/Panel/index.css'
import Icon from './icons'
const icon = <Icon key="zoom_back" type="zoomBack" />
export default () => <div>
  <Panel
    title="Panel with title icon"
    titleIcon={icon}
  >
    <p>
      When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
    </p>
    <ul>
      <li>
        <b>Performance</b>
        {' '}
        - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
      </li>
      <li>
        <b>Simplicity</b>
        {' '}
        - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
      </li>
      <li>
        <b>Flexibility & extensibility</b>
        {' '}
        - all components need to be very flexible in adapting to a wide spectrum of needs. Changing some styles, replacing some rendering logic or adding a custom validation should all be possible and easily achievable.
      </li>
    </ul>
  </Panel>
</div>
String|Number
default: "90 when titleBarPosition is `right`, -90 when titleBarPosition is `left`"
Specifies the rotation of the title. Available values are:
  • 90 or "90"
  • -90 or "-90"
The titleRotate prop will only work when titleBarPosition is left or right.
import React from 'react'

import Panel from '@zippytech/react-toolkit/Panel'
import '@zippytech/react-toolkit/Panel/index.css'

import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { rotate: 90 }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Title rotate:{' '}
        <ComboBox
          style={{width: 150}}
          collapseOnSelect
          changeValueOnNavigation
          onChange={value => this.setState({rotate: value})}
          value={this.state.rotate}
          dataSource={[
            {id: 90, label: '90'},
            {id: -90, label: '-90'},
          ]}
        />
      </div>
      <Panel
        title="Panel with titleRotate configured"
        titleBarPosition="left"
        titleStyle={{color: 'red'}}
        titleRotate={this.state.rotate}
      >
        <p>
          When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
        </p>
        <ul>
          <li>
            <b>Performance</b>
            {' '}
            - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
          </li>
          <li>
            <b>Simplicity</b>
            {' '}
            - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
          </li>
          <li>
            <b>Flexibility & extensibility</b>
            {' '}
            - all components need to be very flexible in adapting to a wide spectrum of needs. Changing some styles, replacing some rendering logic or adding a custom validation should all be possible and easily achievable.
          </li>
        </ul>
      </Panel>
    </div>
  }
}
export default () => <App />
String
default: undefined
ClassName applied on body.
import React from 'react'

import Panel from '@zippytech/react-toolkit/Panel'
import '@zippytech/react-toolkit/Panel/index.css'

export default () => <Panel
  title="Panel with custom bodyClassName"
  bodyClassName="my-body-class"
>
  <p>
    When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
  </p>
  <ul>
    <li>
      <b>Performance</b>
      {' '}
      - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
    </li>
    <li>
      <b>Simplicity</b>
      {' '}
      - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
    </li>
    <li>
      <b>Flexibility & extensibility</b>
      {' '}
      - all components need to be very flexible in adapting to a wide spectrum of needs. Changing some styles, replacing some rendering logic or adding a custom validation should all be possible and easily achievable.
    </li>
  </ul>
</Panel>
Object
default: undefined
Style applied on body.
import React from 'react'

import Panel from '@zippytech/react-toolkit/Panel'
import '@zippytech/react-toolkit/Panel/index.css'

export default () => <Panel
  title="Panel with custom bodyStyle"
  bodyStyle={{background: 'aqua'}}
>
  <p>
    When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
  </p>
  <ul>
    <li>
      <b>Performance</b>
      {' '}
      - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
    </li>
    <li>
      <b>Simplicity</b>
      {' '}
      - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
    </li>
    <li>
      <b>Flexibility & extensibility</b>
      {' '}
      - all components need to be very flexible in adapting to a wide spectrum of needs. Changing some styles, replacing some rendering logic or adding a custom validation should all be possible and easily achievable.
    </li>
  </ul>
</Panel>
String
default: undefined
A CSS className to be appended to the <Panel /> component.
import React from 'react'

import Panel from '@zippytech/react-toolkit/Panel'
import '@zippytech/react-toolkit/Panel/index.css'

export default () => <Panel
  title="Panel with custom className"
  className="panel-class-name"
>
  <p>
    When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
  </p>
  <ul>
    <li>
      <b>Performance</b>
      {' '}
      - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
    </li>
    <li>
      <b>Simplicity</b>
      {' '}
      - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
    </li>
    <li>
      <b>Flexibility & extensibility</b>
      {' '}
      - all components need to be very flexible in adapting to a wide spectrum of needs. Changing some styles, replacing some rendering logic or adding a custom validation should all be possible and easily achievable.
    </li>
  </ul>
</Panel>
Object
default: undefined
A style object applied to the <Panel /> component.
import React from 'react'

import Panel from '@zippytech/react-toolkit/Panel'
import '@zippytech/react-toolkit/Panel/index.css'

export default () => <Panel
  title="Panel with custom style"
  style={{background: 'aqua'}}
>
  <p>
    When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
  </p>
  <ul>
    <li>
      <b>Performance</b>
      {' '}
      - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
    </li>
    <li>
      <b>Simplicity</b>
      {' '}
      - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
    </li>
    <li>
      <b>Flexibility & extensibility</b>
      {' '}
      - all components need to be very flexible in adapting to a wide spectrum of needs. Changing some styles, replacing some rendering logic or adding a custom validation should all be possible and easily achievable.
    </li>
  </ul>
</Panel>
Object
default: undefined
Style applied on title.
import React from 'react'

import Panel from '@zippytech/react-toolkit/Panel'
import '@zippytech/react-toolkit/Panel/index.css'

export default () => <Panel
  title="Panel with custom titleStyle"
  titleStyle={{color: 'green'}}
>
  <p>
    When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:
  </p>
  <ul>
    <li>
      <b>Performance</b>
      {' '}
      - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.
    </li>
    <li>
      <b>Simplicity</b>
      {' '}
      - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.
    </li>
    <li>
      <b>Flexibility & extensibility</b>
      {' '}
      - all components need to be very flexible in adapting to a wide spectrum of needs. Changing some styles, replacing some rendering logic or adding a custom validation should all be possible and easily achievable.
    </li>
  </ul>
</Panel>