JavaScript CSS
Switch branches/tags
Clone or download
Latest commit 697e99f Feb 24, 2018
Permalink
Failed to load latest commit information.
demo v2 Feb 24, 2018
dist v2 Feb 24, 2018
scripts v2 Feb 24, 2018
src v2 Feb 24, 2018
.editorconfig v2 Feb 24, 2018
.eslintignore v2 Feb 24, 2018
.eslintrc.js v2 Feb 24, 2018
.gitignore v2 Feb 24, 2018
.npmignore v2 Feb 24, 2018
CHANGELOG.md v2 Feb 24, 2018
LICENSE Initial commit Jul 20, 2014
README.md v2 Feb 24, 2018
gulpfile.js v2 Feb 24, 2018
package-lock.json Add replace util Feb 24, 2018
package.json Add replace util Feb 24, 2018

README.md

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/