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
  }
}