|
| 1 | +# angular-material-keyboard |
| 2 | +Onscreen virtual keyboard for Angular (https://angularjs.org/) using Material (https://material.angularjs.org/) and the Angular Virtual Keyboard by the-darc (https://github.com/the-darc/angular-virtual-keyboard) based on GreyWyvern VKI (http://www.greywyvern.com/code/javascript/keyboard). |
| 3 | + |
| 4 | +## usage |
| 5 | +* download or clone the latest release, or use your preferred packet manager |
| 6 | +* add the javascript and css files to your project: |
| 7 | +```html |
| 8 | + <script src="angular-material-keyboard/dist/mdKeyboard.min.js"></script> |
| 9 | + <link rel="stylesheet" href="angular-material-keyboard/dist/mdKeyboard.css"> |
| 10 | +``` |
| 11 | +* register module: |
| 12 | +```javascript |
| 13 | +'use strict'; |
| 14 | + |
| 15 | +angular |
| 16 | + .module('myApp', [ |
| 17 | + 'ngAria', |
| 18 | + 'ngAnimate', |
| 19 | + 'ngMaterial', |
| 20 | + 'material.components.keyboard' |
| 21 | + ]); |
| 22 | +``` |
| 23 | +* use as directive |
| 24 | +```html |
| 25 | +<form name="myForm"> |
| 26 | + <md-input-container> |
| 27 | + <input type="text" |
| 28 | + use-keyboard="Deutsch" |
| 29 | + ng-model="myModel"> |
| 30 | + </md-input-container> |
| 31 | +</form> |
| 32 | +``` |
| 33 | + |
| 34 | +## configure |
| 35 | +Use the `mdKeyboardProvider` to set your default layout or to add custom layouts: |
| 36 | +```javascript |
| 37 | +'use strict'; |
| 38 | + |
| 39 | +angular |
| 40 | + .module('myApp') |
| 41 | + .config(function ($mdKeyboardProvider) { |
| 42 | + |
| 43 | + // add layout for number fields |
| 44 | + $mdKeyboardProvider.addLayout('Numbers', { |
| 45 | + 'name': 'Numbers', 'keys': [ |
| 46 | + [['1', '1'], ['2', '2'], ['3', '3']], |
| 47 | + [['4', '4'], ['5', '5'], ['6', '6']], |
| 48 | + [['7', '7'], ['8', '8'], ['9', '9']], |
| 49 | + [['Bksp', 'Bksp'], ['0', '0'], ['Enter', 'Enter']] |
| 50 | + ], 'lang': ['de'] |
| 51 | + }); |
| 52 | + |
| 53 | + // default layout is german |
| 54 | + $mdKeyboardProvider.useLayout('Deutsch'); |
| 55 | + }); |
| 56 | +``` |
| 57 | +The first entry in each 'key' array is the default char. The second is used when pressing 'shift' or 'caps lock', the third when 'alt' is rpessed. |
| 58 | +You can use the `spacer` key to provide a gap in the layout. |
| 59 | + |
| 60 | +The `$mdKeyboardProvider` has the following methods: |
| 61 | + |
| 62 | +`getLayout():string` will give you the current used layout |
| 63 | + |
| 64 | +`getLayouts():array` returns all registered layouts |
| 65 | + |
| 66 | +`useLayout(layout:string):void` tells the directive which layout to use as default |
| 67 | + |
| 68 | +`addLayout(layout:string, keys:array):void` expects the name of a new layout to register along an 'keys' array |
| 69 | + |
| 70 | +`isVisible():boolean` returns wether the keyboard is currently visible or not |
| 71 | + |
| 72 | +## build |
| 73 | +* install node.js (I recomend to use [nvm](https://github.com/creationix/nvm)) |
| 74 | +* get dependencies: `$ npm install && bower install` |
| 75 | +* build with gulp task: `$ gulp build` |
0 commit comments