Skip to content

Commit ea72025

Browse files
committed
Merge branch 'master' of github.com:davidenke/angular-material-keyboard
* 'master' of github.com:davidenke/angular-material-keyboard: Update README.md Create README.md
2 parents d9deb95 + f20e99d commit ea72025

File tree

1 file changed

+75
-0
lines changed

1 file changed

+75
-0
lines changed

README.md

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
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

Comments
 (0)