Skip to content

Modules

Available modules: ZStackModule, FollowerModule, BackdropModule, FitHeightModule, InverseModule, HorizontalModule

Modular architecture of the project helps us to keep small size of bundles, also huge scalability features are possible.

We are welcome to creators — feel free to make your own modules!

Examples of modules can be found here

Install es bundle with all modules

By default you will import esm with all modules in bundle:

import { CupertinoPane } from 'cupertino-pane';

Size of this bundle might be more than you need, if you don't use all features and modules.

Install es bundle with specific modules

Pick modules that you need to decrease bundle size:

import { CupertinoPane } from 'cupertino-pane/dist/core';
import { BackdropModule, FitHeightModule } from 'cupertino-pane/dist/modules';

let myPane = new CupertinoPane('.cupertino-pane', {
  modules: [BackdropModule, FitHeightModule],
  fitHeight: true,
  backdrop: true
});

Be sure that you're import only core version here with modules you need. You can check installed modules:

console.log(myPane.modules);

Build your own umd bundles with specific modules

Clone repository and run commands:

npm run build // will include all modules
npm run build -- --modules="" // will not include any modules
npm run build -- --modules="ZStackModule, BackdropModule" // Cherry-pick your modules 

As output you will have your umd and esm builds in dist folder.

Z-Stack

Configuration for 3D push effects and z-stack

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