Try it now using Ionic View with the following id: c53c6c00.
Version: 2.0
Author: Skol (Vincent Letellier)
Email: [email protected]
Donations: You're really welcome to donate, any amount at any time :-)
- April 8, 2017
- Added
text
property on action buttons. This allows having a decimal button for-example. - Updated README with
text
property and example (see 4.3 Options).
- Added
Copy the ion-digit-keyboard
component folder into your project (under src/components/ for example). Import the component in your app.module.ts, add it to the declarations
and entryComponents
arrays.
// app.module.ts
import { IonDigitKeyboard } from '../components/ion-digit-keyboard/ion-digit-keyboard';
// ...
@NgModule({
declarations: [
MyApp,
IonDigitKeyboard,
// ...
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
IonDigitKeyboard,
// ...
],
providers: []
})
export class AppModule { }
You can now import the keyboard wherever you want, however I suggest you to insert it in your app.component.ts to have access to the it globaly (and destroy it later if needed).
Add it in your application html template, under ion-nav
for example (in most case you'll have one).
// app.component.ts
import { IonDigitKeyboard } from '../components/ion-digit-keyboard/ion-digit-keyboard';
<!-- app.html (or inline template under app.component.ts) -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
<ion-digit-keyboard></ion-digit-keyboard>
Don't forget to import ion-digit-keyboard.scss in app.scss.
With this minimalist configuration, you can already use the keyboard, just add the buttonClick
event !
<ion-digit-keyboard (buttonClick)="onKeyboardButtonClick()"></ion-digit-keyboard>
onKeyboardButtonClick(key: number) {
// Log the pressed key
console.log(key);
}
You could also use the onClick
subscriber like this:
IonDigitKeyboard.onClick.subscribe((key) => {
// Log the pressed key
console.log(key);
});
CAUTION - In case no event is fired, be sure your browser Mobile Emulation is turned ON, since the keyboard is using the
touchend
event.
Here are the public methods:
- show (function): Show the keyboard. The optional callback will be called after transition ends.
- hide (function): Hide the keyboard. The optional callback will be called after transition ends.
- destroy (function): Destroy the keyboard component and call the optional callback.
And here are the available events:
- buttonClick: Any button clicked
- leftActionClick: Left action clicked
- rightActionClick: Left action clicked
- numberClick: Number key clicked
Example using buttonClick
:
<ion-digit-keyboard (buttonClick)="onKeyboardButtonClick()"></ion-digit-keyboard>
// app.component.ts
public onKeyboardButtonClick(key: any) {
// Key can be a number (0-9) or a string ('left' or 'right')
}
There is also 3 available subscribers:
- onClick: Same as
buttonClick
event. - onShow: Use this method to register a callback when the keyboard is showing up (after the animation)
- onHide: Use this method to register a callback when the keyboard is getting hidden (also after the animation)
IonDigitKeyboard.onClick.subscribe((key: any) => {
// Do something
});
IonDigitKeyboard.onShow.subscribe(() => {
// Do something
});
First, I recommend you to import the IonDigitKeyboardOptions
interface.
// app.component.ts
import { IonDigitKeyboard, IonDigitKeyboardOptions } from '../components/ion-digit-keyboard/ion-digit-keyboard';
Keyboard options (IonDigitKeyboardOptions
interface):
- align (string): Keyboard horizontal alignement (no effects on full width). Can be
'left'
,'center'
or'right'
. - width (any): Keyboard width, can be expressed as number or as string for percents and pixels.
- visible (boolean): Keyboard visibility.
- leftActionOptions (ActionOptions): Keyboard left action options.
- rightActionOptions (ActionOptions): Keyboard right action options.
- roundButtons (boolean): If set to true, it turns the buttons to rounded buttons. It won't looks good for most of the themes.
- showLetters (boolean): If set to true, it will display letters under buttons number.
- swipeToHide (boolean): If set to true, swiping the keyboard from top to bottom will hide it.
- theme (string): Keyboard visual theme. Available themes:
'light'
,'dark'
,'ionic'
,'opaque-black'
,'opaque-white'
,'dusk'
,'nepal'
,'alihossein'
,'messenger'
. Also accessible fromIonDigitKeyboard.themes
. You can put all of them on theion-digit-keyboard
component:
<ion-digit-keyboard
[align]="keyboardSettings.align"
[width]="keyboardSettings.width"
[visible]="keyboardSettings.visible"
[leftActionOptions]="keyboardSettings.leftActionOptions"
[rightActionOptions]="keyboardSettings.rightActionOptions"
[roundButtons]="keyboardSettings.roundButtons"
[showLetters]="keyboardSettings.showLetters"
[swipeToHide]="keyboardSettings.swipeToHide"
[theme]="keyboardSettings.theme"
(numberClick)="numberClick($event)"
>
</ion-digit-keyboard>
keyboardSettings: IonDigitKeyboardOptions = {
align: 'center',
width: '',
visible: false,
leftActionOptions: {
iconName: 'ios-backspace-outline',
fontSize: '1.4em'
},
rightActionOptions: {
//iconName: 'ios-checkmark-circle-outline',
text: '.',
fontSize: '1.3em'
},
roundButtons: false,
showLetters: true,
swipeToHide: true,
theme: 'ionic'
}
Action options (ActionOptions
interface):
- hidden (boolean): Display the action button or not.
- fontSize (string): Optional font size adjustement.
- iconName (string): The action Ionic icon name to display.
- text (string): A text to display on the action.
As you probably already understood, none of those otpions are required ! Also, setting both iconName
and text
properties will only display the icon.
You can add an ion-toolbar
inside the ion-digit-keyboard
component:
<ion-digit-keyboard>
<ion-toolbar no-border-bottom>
<ion-buttons start>
<button ion-button (click)="hideKeyboard()">Cancel</button>
</ion-buttons>
<ion-buttons end>
<button ion-button solid>Next</button>
<button ion-button solid>Done</button>
</ion-buttons>
</ion-toolbar>
</ion-digit-keyboard>
Simply clone this repo, run npm install
and ionic serve
.