collapsible-sliding-panel

2.5.0 • Public • Published

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: Image of Collapsible Sliding Panel when panel is collapsed

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

For right collapsible panel:

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

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

For vertical collapsible panel:

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

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

Readme

Keywords

none

Package Sidebar

Install

npm i collapsible-sliding-panel

Weekly Downloads

3

Version

2.5.0

License

Apache-2.0

Unpacked Size

41.8 kB

Total Files

13

Last publish

Collaborators

  • stormuicomponents