Skip to content

Settings

Common configuration

PropertyTypeDefaultDescription
modaltrue | ModalSettingsfalseWill present a modal style pane (see examples for more details)
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
ionContentScrollboolean'false'On false will add scroll-y="false" attribute to ion-content directive when pane is visible
initialBreak'top' | 'middle' | 'bottom''middle'Initial pane position
backdropbooleanfalseDimmed overlay will rendered with pane if true
backdropOpacitynumber0.4Dimmed overlay opacity value
backdropBlurbooleanfalseWill apply filter blur and filter saturation to backdrop on true
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())

Z-Stack

Configuration for 3D push effects and z-stack

js
let settings = {
  ...
  zStack: {
    pushElements: ['.card-1', '.main-content'],
    pushYOffset: 10
  }
}
PropertyTypeDefaultDescription
pushElementsstring[]nullDOM Element will be pushed and scaled
minPushHeightnumbernullHeight from which 3d push effect will be started
cardBorderRadiusnumbernullBorder radius for pushed elements
cardYOffsetnumbernullMargin value to place pushed elements upper
cardZScalenumber0.93Scale value for each pushed element
cardContrastnumber0.85Contrast value for each pushed element
stackZAnglenumber160Value from 0 to 3000 that define angle of z-stack in common. 0 - 150 positive expontial angle. 150 - 170 = 45 degree angle. 200 - 3000 negative exponential angle

A simple way to create your own modal windows and popups from any elements

js
let settings = {
    modal: true   
};

or

js
let settings = {
  ...
  modal: {
    transition: 'fade',
    flying: true,
	dismissOnIntense: true
  }
}
PropertyTypeDefaultDescription
transitionfade | zoomfadeModal module has two built-in enter and leave transitions
flyingbooleanfalseModal with dynamic flying effect animation to get user attention
dismissOnIntensebooleanfalseModal will be nicely dismissed on high-intense move events