Skip to content

Public Methods

present

present({animate: boolean = false, transition: {}}): Promise

Will render pane DOM and show pane with setted params.

myPane.present();

Possible to pass custom transitions:

myPane.present({
  animate: true,
  transition: {
    duration: 600,
    from: {
      opacity: 0.7,
      transform: `translateY(280px) perspective(250px) rotateX(65deg) scale(0.3)`
    },
    to: {
      opacity: 1
    }
  }
});

destroy

destroy({animate: boolean = false, transition: {}}}}): Promise

Remove pane from DOM and clear styles

myPane.destroy({animate: true});

Possible to pass custom transitions (look above present method for example)

on

on({events: string, handler: Function}): Promise

Will assign a function to be executed when the event will be fired.

myPane.on('onDidPresent', () => console.log('Presented!'));

moveToBreak

moveToBreak('top' | 'middle' | 'bottom')

Will change pane position with animation to selected breakpoint.

myPane.moveToBreak('top');

moveToHeight

moveToHeight(val: number)

Will move pane to exact height with animation. Breakpoints will saved.

myPane.moveToHeight(575);

hide

hide()

Dissappear pane from screen, still keep pane in DOM.

myPane.hide();

isHidden

isHidden()

Determinate if pane position was moved out of screen, but pane still exist in DOM. true - in DOM but not visible, false - in DOM and visible, null - not rendered

if (myPane.isHidden()) {
    myPane.moveToBreak('top');
}

currentBreak

currentBreak()

Method return current break position in text format ('top' | 'middle' | 'bottom)

if (myPane.currentBreak() === 'top') {
    myPane.moveToBreak('bottom');
}

disableDrag

disableDrag()

Method disable any drag actions for pane

myPane.disableDrag();

enableDrag

enableDrag()

Method enable any drag actions for pane

myPane.enableDrag();

backdrop

backdrop({show: boolean = true})

Show/Hide backdrop method

myPane.backdrop({show: true}); // show
myPane.backdrop({show: false}); // hide

setBreakpoints

setBreakpoints(breakpoints: PaneBreaks)

Method updates breakpoints configuration for rendered Pane

myPane.setBreakpoints({
  top: {
      enabled: true,
      height: 700,
      bounce: true
  },
  middle: { ... },
  bottom: { ... }
});

preventDismiss

preventDismiss(boolean = false)

Use this method to prevent dismiss events. Use onWillDismiss() callback to listen if dismiss event prevented.

const settings = {
  ...
  events: {
    onWillDismiss: (e) => {
      if (e) {
        console.log(e.prevented);
      }
    }
  }
}

const myPane = new CupertinoPane('.cupertino-pane', settings);
myPane.present({animate: true});
myPane.preventDismiss(true);

calcFitHeight

calcFitHeight()

Force re-calculate height for fitHeight: true in cases when height was calculated not properly.

myPane.calcFitHeight();