ion-digit-keyboard-v2, 在 2位应用程序中,使用了一个数字键盘插件

分享于 

10分钟阅读

GitHub

  繁體 雙語
A digital keyboard plugin to use in Ionic 2 applications.
  • 源代码名称:ion-digit-keyboard-v2
  • 源代码网址:http://www.github.com/skol-pro/ion-digit-keyboard-v2
  • ion-digit-keyboard-v2源代码文档
  • ion-digit-keyboard-v2源代码下载
  • Git URL:
    git://www.github.com/skol-pro/ion-digit-keyboard-v2.git
    Git Clone代码到本地:
    git clone http://www.github.com/skol-pro/ion-digit-keyboard-v2
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/skol-pro/ion-digit-keyboard-v2
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    Ionic 2 Digit Keyboard banner

    位数字键盘

    现在使用下面的id来尝试使用ionic视图( ): c53c6c00

    1---信息

    版本:2.0
    作者:Skol ( Vincent Letellier )
    电子邮件:skol.pro@gmail.com
    捐款:欢迎你在任何时候捐赠,任何时候- )

    2---变更日志

    • ( 尽快)的
      • 用于管理键盘和相关 component(s)的全球服务。
      • 自定义文本输入组件:
        • 防止本机键盘出现。
        • 自动显示键盘上的键盘。
        • 自动滚动到输入和滚动冻结。
    • Juin 1,2017
      • 更新了最新的Angular &ionic版本( 不影响ionic v2 ) 演示。
      • 已经重构组件,现在是面向模块的( 请参阅更新的教程)。
      • 可以在多个页面上使用,但没有问题。
      • 小心,IonDigitKeyboard componnet已经被重命名为 IonDigitKeyboardCmp
      • 在动作按钮上添加了 text 属性。 这允许 Having 一个十进制按钮例如。
      • 使用 text 属性和示例( 请参见 4.3选项 ) 更新了自述文件。

    3-- 安装&加载

    ion-digit-keyboard 模块文件夹复制到项目( 在 src/components/ 下,例如) 中。 将模块导入你的app.module.ts

    // app.module.tsimport { IonDigitKeyboard } from'../components/ion-digit-keyboard/ion-digit-keyboard.module';//.. .@NgModule({
     declarations: [
     MyApp,
     //.. . ],
     imports: [
     IonDigitKeyboard,
     IonicModule.forRoot(MyApp)
     ],
     bootstrap: [IonicApp],
     entryComponents: [
     MyApp,
     //.. . ],
     providers: []
    })exportclassAppModule { }

    4---用法

    4.1---在组件中导入

    你可以在任何需要的地方导入键盘,全球范围内的或者在每一页上。 对于全局用法,可以将它的插入 ion-nav,例如。

    // app.component.tsimport { IonDigitKeyboardCmp } from'../components/ion-digit-keyboard';
    <!-- app.html (or inline template under app.component.ts) --><ion-nav [root]="rootPage" #contentswipeBackEnabled="false"></ion-nav>
    <ion-digit-keyboard></ion-digit-keyboard>

    请不要忘记以为单位,以为单位导入。

    @import './components/ion-digit-keyboard/ion-digit-keyboard';

    使用这个极简的配置,你可以使用键盘,只需添加 buttonClick 事件 !

    <ion-digit-keyboard (buttonClick)="onKeyboardButtonClick()"></ion-digit-keyboard>
    onKeyboardButtonClick(key: number) {
     // Log the pressed keyconsole.log(key);
    }

    你还可以使用 onClick 订阅服务器,这样你就需要使用 @ViewChild() 访问键盘组件,ngOnInit 不能确定它:

    @ViewChild(IonDigitKeyboardCmp) keyboard;//...ngOnInit(): void {
     this.keyboard.onClick.subscribe((key) => {
     console.log('From subscriber: ', key);
     });
    }

    注意如果no事件被触发,请注意浏览器将按收费,因为键盘使用 touchend 事件,因此 browser

    4.2---public 方法&事件

    以下是 public 组件方法( this.keyboard.show(myCallback) ):

    • 显示 ( 函数): 显示键盘。在转换结束后将调用可选的回调。
    • 隐藏 ( 函数): 隐藏键盘。在转换结束后将调用可选的回调。
    • 销毁 ( 函数)的: 销毁键盘组件并调用可选的回调。

    下面是可用的事件( (buttonClick)="btnClickFunction($event)" ) :

    • 按钮:任意按钮单击
    • leftActionClick: 左操作单击
    • rightActionClick: 左操作单击
    • numberClick: clicked键

    使用 buttonClick的示例:

    <ion-digit-keyboard (buttonClick)="onKeyboardButtonClick()"></ion-digit-keyboard>
    // app.component.tspubliconKeyboardButtonClick(key: any) {
     // Key can be a number (0-9) or a string ('left' or 'right')}

    还有 3个可用的订阅服务器:

    • 收费: 与 buttonClick 事件相同。
    • 收费:当键盘出现( 动画后),使用这个收费的方法将一个回调设置为 register
    • 收费:当键盘被隐藏( 也在动画之后) 时,使用这个收费的方法来重新设置一个回调键。
    this.keyboard.onClick.subscribe((key:any) => {
     // Do something});this.keyboard.onShow.subscribe(() => {
     // Do something});
    4.3---选项

    首先,我建议你导入 IonDigitKeyboardOptions 接口。

    // app.component.tsimport { IonDigitKeyboardCmp, IonDigitKeyboardOptions } from'../components/ion-digit-keyboard';

    键盘选项( IonDigitKeyboardOptions 接口):

    • 对齐 ( 字符串): 键盘水平 alignement ( 没有对整个宽度的影响)。 可以是 'left''center' 或者 'right'
    • 宽度 ( 任意): 键盘宽度,可以表示为数字,也可以表示为百分比和像素。
    • 可见 ( 布尔型): 键盘可见性。
    • leftActionOptions ( ActionOptions ): 键盘左操作选项。
    • rightActionOptions ( ActionOptions ): 键盘正确操作选项。
    • roundButtons ( 布尔型): 如果设置为 true,则将按钮转换为圆角按钮。 这对于大多数主题来说都是不合适的。
    • showLetters ( 布尔型): 如果设置为 true,它将在按钮的下面显示字母。
    • swipeToHide ( 布尔型): 如果设置为 true,则从上往下滑动键盘将隐藏它。
    • 主题 ( 字符串): 键盘视觉主题。可用主题: 'light''dark''ionic''opaque-black''opaque-white''dusk''nepal''alihossein''messenger'。 也可以从 IonDigitKeyboardCmp.themes 访问。你可以将所有内容放在 ion-digit-keyboard 组件上:
    <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: '85%', 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'}

    操作选项( ActionOptions 接口):

    • 隐藏的 ( 布尔型): 显示操作按钮或者不显示。
    • 小数点 ( 字符串) 可选字体大小 adjustement。
    • iconName ( 字符串): 要显示的动作ionic icon 名称。
    • 文本 ( 字符串): 要在动作上显示的文本。

    你可能已经知道了,不需要这些中的 ! 同时,同时设置 iconNametext 属性将只显示 icon。

    5---工具栏

    你可以在 ion-digit-keyboard 组件中添加 ion-toolbar inside:

    <ion-digit-keyboard>
     <ion-toolbarno-border-bottom>
     <ion-buttonsstart>
     <buttonion-button (click)="hideKeyboard()">Cancel</button>
     </ion-buttons>
     <ion-buttonsend>
     <buttonion-buttonsolid>Next</button>
     <buttonion-buttonsolid>Done</button>
     </ion-buttons>
     </ion-toolbar>
    </ion-digit-keyboard>

    6-- 示例/演示

    只需克隆这个 repo,运行 npm installionic serve


    plugin  KEY  键盘  DIG  Digital  ION  
    相关文章