Skip to content
On this page


Common configuration

horizontalbooleanfalseDrag by horizontal axis will be possible on true and left right screen edge will automatically recognized as horizontal breakpoints
horizontalOffsetnumber'null'Margin left and right for screen edges used with horizontal gestures
inversebooleanfalseOn true will change pane direction from bottom-to-top to top-to-bottom
parentElementstring or HTMLElementParent elementPane will be appended to this element as child
followerElementstringFollower element selectorElement with selector will following pane transitions
cssClassstringnullAdditional classes to apply for wrapper to stylize different panes
fitHeightboolean'false'Automatically calc and define content height as top breakpoint. Middle and bottom breakpoint will be disabled
maxFitHeightnumber'null'Define a maximum possible automatically calculated height with fitHeight property
fitScreenHeightboolean'true'On true will automatically adjust pane maximum height to screen height
initialBreak'top' | 'middle' | 'bottom''middle'Initial pane position
backdropbooleanfalseDimmed overlay will rendered with pane if true
backdropOpacitynumber0.4Dimmed overlay opacity value
animationTypestring'ease'Base transition timing function
animationDurationnumber300Transition property duration
bottomClosebooleanfalseClose pane with drag to bottom breakpoint
fastSwipeClosebooleanfalseClose pane with fast drag to bottom direction
fastSwipeSensivitynumber3Increase value and fast swipes become heavier
freeModebooleanfalseOn true will remove automatical magnetic effects to near breakpoint
lowerThanBottombooleantrueBy default allow user to drag pane lower than bottom position. On false will automatically place pane to bottom position on lower than bottom attemption
upperThanTopbooleanfalseAllow user to drag pane upper than maximum top position. Useful with bulletin style without overflow-y
touchAnglenumber45Allowable angle (in degrees) to trigger drag gestures
buttonDestroybooleantrueDeterminate whetever close button will render or not
bottomOffsetnumber0Margin bottom for pane from screen bottom point
topperOverflowbooleantrueAbility to scroll content inside pane if topper point reached
topperOverflowOffsetnumber0Offset from screen bottom to the end of overflow content
showDraggablebooleantrueRender rectangular shape on the top of pane
draggableOverbooleantrueRender rectangular shape over a pane
clickBottomOpenbooleantrueIf bottom position reached, simple click to pane will open pane to the next upper point
dragBystring[]nullArray of selectors for whom elements drag events will be attached. By default drag events attached to pane element. If you are about to drag only with draggable component set option to ['.pane .draggable']
preventClicksbooleantruePrevent accidental unwanted clicks events during move gestures
handleKeyboardbooleantruePane will be pushed up on open keyboard (only for cordova/capacitor/phonegap applications)
touchMoveStopPropagationbooleanfalseIf enabled, then propagation of "touchmove" will be stopped
simulateTouchbooleantrueSimulate touch events for Desktop
passiveListenersbooleantrue(Indicates that the function specified by listener will never call preventDefault())