Repository files navigation

Keypad plugin extends Framework7 with additional custom keyboards. By default it comes with predefinedNumpad andCalculator keyboards, but it also can be used to create custom keyboards with custom buttons.

Just grab plugin files fromdist/ folder or using npm:

npm install framework7-plugin-keypad

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

<link rel="stylesheet" href="path/to/framework7.bundle.min.css"><link rel="stylesheet" href="path/to/framework7-keypad.min.css">...<script src="path/to/framework7.bundle.min.js"></script><script src="path/to/framework7-keypad.min.js"></script>

After you included plugin script file, you need to install plugin before you init app:

// install plugin to Framework7Framework7.use(Framework7Keypad);// init appvarapp=newFramework7({  ...})

This plugin comes with ready to use ES module:

importFramework7from'framework7';importFramework7Keypadfrom'framework7-plugin-keypad';// install pluginFramework7.use(Framework7Keypad);// init appvarapp=newFramework7({  ...})

Plugin extends initiliazedapp instance with new methods:

• app.keypad.create(parameters) - init Keypad. This method returns initialized Keypad instance.
• app.keypad.get(keypadEl) - get Keypad instance by HTML element. Method returns initialized Keypad instance.
• app.keypad.destroy(keypadEl) - destroy Keypad instance

Keypad can be created and initialized only using JavaScript. We need to use related App's method:

app.keypad.create(parameters)

Whereparameters -object - object with Keypad parameters. RequiredThis method returns initialized Keypad instance

For example

varmyKeypad=app.keypad.create({inputEl:'#demo-numpad-limited',valueMaxLength:2,dotButton:false});

Let's look on list of all available parameters:

...buttons: [    {        html:'1',        value: 1,        onClick: function () {            console.log('Button 1 clicked')        }    },    {        html:'A',        value: 'a',    },    ...]

After we initialize Keypad we have its initialized instance in variable (likemyKeypad variable in example above) with helpful methods and properties:

Such predefined Numpad and Calculator keypads could be initialized automatically. Just use usual inputs but with special type attribute:

<inputtype="numpad"><inputtype="calculator">

If you initialize Keypad as inline Keypad or using automatic initialization, it is still possible to access to Keypad's instance from its HTML container:

varmyKeypad=$$('.keypad-inline')[0].f7Keypad;

The following CSS custom properties available to customize it:

:root {--f7-keypad-height:260px;--f7-keypad-landscape-height:200px;--f7-keypad-inline-height:200px;--f7-keypad-inline-calc-height:260px;--f7-keypad-popover-width:300px;--f7-keypad-button-bg-color:#fcfcfd;--f7-keypad-button-text-color:#000;--f7-keypad-button-border-color:rgba(0,0,0,0.1);--f7-keypad-button-pressed-bg-color:#bcc0c5;--f7-keypad-button-dark-bg-color:#ddd;--f7-keypad-button-dark-pressed-bg-color:#fcfcfd;--f7-keypad-button-number-font-size:28px;--f7-keypad-button-number-letters-size:11px;--f7-keypad-calc-button-text-color:#fff;--f7-keypad-calc-button-bg-color:#ff9500;--f7-keypad-calc-button-pressed-bg-color:#e0750e;--f7-keypad-calc-button-active-border-color:rgba(0,0,0,0.4);--f7-keypad-calc-button-active-border-width:1px;}

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

All changes should be done only insrc/ folder. This project usesgulp 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 athttp://localhost:3000/demo/

https://framework7io.github.io/framework7-plugin-keypad/