Narnia Protect Me

    framework7-plugin-3d-panels

    2.0.0 • Public • Published

    Framework7 3D Panels Plugin

    Framework7 plugin to add 3d effect for side panels

    Installation

    Just grab plugin files from dist/ folder or using npm:

    npm install framework7-plugin-3d-panels
    

    And link them to your app's right AFTER Framework7's scripts and styles:

    <link rel="stylesheet" href="path/to/framework7.min.css">
    <link rel="stylesheet" href="path/to/framework7.3dpanels.css">
    ...
    <script src="path/to/framework7.min.js"></script>
    <script src="path/to/framework7.3dpanels.js"></script>
    

    Usage

    This plugin doesn't add new effect, it just converts "reveal"-effect panels to 3d panels. So make sure that you have "reveal" panel in your layout:

    <div class="panel panel-left panel-reveal">...</div>
    

    Install & Enable Plugin

    After you included plugin script file, you need to install plugin:

    // install plugin to Framework7
    Framework7.use(Framework73dPanels);
     
    // init app and enable plugin
    var app = new Framework7({
      // enable plugin
      panels3d: {
        enabled: true,
      }
    })

    ES Module

    This plugin comes with ready to use ES module:

    import Framework7 from 'framework7';
    import Framework73dPanels from 'framework7-plugin-3d-panels';
     
    // install plugin
    Framework7.use(Framework73dPanels);
     
    // init app and enable plugin
    var app = new Framework7({
      // enable plugin
      panels3d: {
        enabled: true,
      }
    })

    API

    When plugin installed to Framework7 with Framework7.use(Framework73dPanels), it will extend app instance with two additional methods:

    • app.panels3d.enable() - enables 3d panels
    • app.panels3d.disable() - disables 3d panels

    Demo

    Plugin comes with demo example to see how it works and looks. To make demo works you need to run in terminal:

    $ npm run prod
    

    Contribute

    All changes should be done only in src/ folder. This project uses gulp and rollup to build a distributable version.

    First you need to install all dependencies:

    $ npm install
    

    Then to build plugin's files for testing run:

    $ npm run build:dev
    

    If you need a local server while you developing you can run:

    $ gulp server
    

    or

    $ npm run dev
    

    And working demo will be available on http://localhost:3000/demo/

    Live Preview

    https://framework7io.github.io/framework7-plugin-3d-panels/

    Install

    npm i framework7-plugin-3d-panels

    DownloadsWeekly Downloads

    7

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    28.7 kB

    Total Files

    13

    Last publish

    Collaborators

    • nolimits4web