|
1 | 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). |
| 2 | +Onscreen virtual keyboard for [Angular](https://angularjs.org/) using [Angular 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 | +## demo |
| 5 | +Checkout the [demo.html](https://cdn.rawgit.com/davidenke/angular-material-keyboard/master/demo.html) |
3 | 6 |
|
4 | 7 | ## usage
|
5 | 8 | * download or clone the latest release, or use your preferred packet manager
|
6 | 9 | * add the javascript and css files to your project:
|
7 | 10 | ```html
|
8 | 11 | <script src="angular-material-keyboard/dist/mdKeyboard.min.js"></script>
|
9 | 12 | <link rel="stylesheet" href="angular-material-keyboard/dist/mdKeyboard.css">
|
| 13 | + <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Material+Icons"> |
10 | 14 | ```
|
11 | 15 | * register module:
|
12 | 16 | ```javascript
|
@@ -43,27 +47,31 @@ angular
|
43 | 47 | // add layout for number fields
|
44 | 48 | $mdKeyboardProvider.addLayout('Numbers', {
|
45 | 49 | '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 | + [['7', '7'], ['8', '8'], ['9', '9'], ['Bksp', 'Bksp']], |
| 51 | + [['4', '4'], ['5', '5'], ['6', '6'], ['-', '-']], |
| 52 | + [['1', '1'], ['2', '2'], ['3', '3'], ['+', '+']], |
| 53 | + [['0', '0'], ['Spacer'], [','], ['Enter', 'Enter']] |
50 | 54 | ], 'lang': ['de']
|
51 | 55 | });
|
52 | 56 |
|
53 | 57 | // default layout is german
|
54 |
| - $mdKeyboardProvider.useLayout('Deutsch'); |
| 58 | + $mdKeyboardProvider.defaultLayout('Deutsch'); |
55 | 59 | });
|
56 | 60 | ```
|
57 | 61 | 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 | 62 | You can use the `spacer` key to provide a gap in the layout.
|
59 | 63 |
|
60 | 64 | The `$mdKeyboardProvider` has the following methods:
|
61 | 65 |
|
62 |
| -`getLayout():string` will give you the current used layout |
| 66 | +`getLayout(layout:string):object` will give you the corresponding layout |
| 67 | + |
| 68 | +`getCurrentLayout():string` will give you the current used layout |
63 | 69 |
|
64 | 70 | `getLayouts():array` returns all registered layouts
|
65 | 71 |
|
66 |
| -`useLayout(layout:string):void` tells the directive which layout to use as default |
| 72 | +`defaultLayout(layout:string):void` tells the directive which layout to use as default |
| 73 | + |
| 74 | +`useLayout(layout:string):void` tells the directive which layout to use |
67 | 75 |
|
68 | 76 | `addLayout(layout:string, keys:array):void` expects the name of a new layout to register along an 'keys' array
|
69 | 77 |
|
|
0 commit comments