Collapsible Sliding Panel

Overview

The Collapsible Sliding Panel component used to show/hide contained elements.

CHANGELOG.md contains Release Notes for this package.

CONTRIBUTING.md contains guidelines on how to help improve this package.

Using Collapsible Sliding Panel

The Collapsible Sliding Panel can be included as follows:

import {CollapsibleSlidingPanel} from 'collapsible-sliding-panel';

...

getSlidingPanelContent() {
  [some logic to build sliding panel content]
}

getMainPanelContent() {
  [some logic to build main panel content]
}

...

render () {
    ....
    return (
        <CollapsibleSlidingPanel
          slidingPanelClassName='collapsible-sliding-panel-classname'
          slidingPanelClosedClassName='collapsible-sliding-panel-is-closed-classname'
          expanderHandleClassName='collapsible-sliding-panel-expander-classname'
          slidingPanelContent={getSlidingPanelContent()}
          collapsiblePanelOpen={true}
          collapseDirection="right"
          showToggleButton={true}
          tooltipText={{
            expand: "Expandir",
            collapse: "Contraer"
          }}>
            {getMainPanelContent()}
        </CollapsibleSlidingPanel>
    )
}

Configuring Collapsible Sliding Panel

The Collapsible Sliding Panel can be configured as follows

Property Name | Description --------------|------------ slidingPanelClassName | The class name used for styling the sliding panel slidingPanelClosedClassName | The class name used for styling the sliding panel when it is closed expanderHandleClassName | The class name used for styling the expander handle slidingPanelContent | The content that is to be rendered inside the sliding panel collapseCallback | The callback function that is called when the sliding panel is expanded or collapsed collapsiblePanelOpen | The boolean sets the initial expanded (true) / collapsed (false) state of the sliding panel; defaults to collapsed (false) tooltipText | Values appear as tooltips on the panel button: tooltipText.expand and tooltipText.collapse. tooltipText is optional and defaults to "Expand" and "Collapse", respectively. collapseDirection | String value which can be left, right, right-vertical or left-vertical, and it dictate if the collapsible panel will be on right or left side and will collapse vertically or horizontally. It has default value and fall back as "left" showToggleButton | The boolean balue to decide whether to show or hide the collapse button, Default value is true.

Style class names were added as properties for this component so that different styles could be assigned to different instances of the sliding panel within a single application.

When using the default styles, the 3 style class names mentioned above are combined in order to achieve the 'sliding/collapsing' effect as follows:

.slidingPanelClassName - how the sliding panel appears when it is expanded ... it also uses the CSS 'transition' property to determine it's expanding functionality .slidingPanelClassName.slidingPanelClosedClassName - how the sliding panel appears when it is closed ... it also uses the CSS 'transition' property to determine it's collapsing functionality .expanderHandleClassName - how the expander handle appears ... it also uses the CSS 'transition' property to determine how it moves when the sliding panel opens .expanderHandleClassName.slidingPanelClosedClassName - how the expander handle appears when it is closed ... it also uses the CSS 'transition' property to determine how it moves when the sliding panel closes .collapsible-sliding-panel-main-content.right-collapsible - how the collapsible panel will collapse or expand on right side .collapsible-sliding-panel-main-content-vertical - how the collapsible panel will collapse or expand vertically

Run & Test Locally

The Collapsible Sliding Panel component can be launched independently in order to see/test it's capabilities as follows:

1. type the following NPM command from a command prompt that supports NPM: npm run startDev
2. view the test app at the following URL: http://localhost:8005/collapsible-sliding-panel/

Once launched, the test application consists of the following components:

• header bar ... application title and text indicating whether the sliding panel is opened or closed
• sliding panel ... initially this panel is collapsed and it's content is not visible
• main content panel ... this is where the Collapsible Sliding Panel will render it's child elements (this.props.children)
• expander handle ... this 'tab' (depending on style assigned) is used to trigger the expanding and collapsing of the sliding panel

For the test application and using default styles, the Collapsible Sliding Panel looks like ths when collapsed:

For the test application and using default styles, the Collapsible Sliding Panel looks like ths when expanded:

For right collapsible panel:

For the test application and using default styles, the Collapsible Right Sliding Panel looks like ths when collapsed:

For the test application and using default styles, the Collapsible Right Sliding Panel looks like ths when expanded:

For vertical collapsible panel:

For the test application and using default styles, the Collapsible Left Sliding Panel looks like this:

For the test application and using default styles, the Collapsible Right Sliding Panel looks like this: