Edited at

Mobiscroll 4 betaを試す。Webコンポーネント標準仕様へ準拠されより使いやすく!

More than 1 year has passed since last update.


はじめに

Mobiscrollを新規インストールすると、β版のVersion4がダウンロードされるようになっています。(2017/12/16現在)

Ionic/Angularを拡張するWebコンポーネントmobiscroll

V3時代の過去プロジェクトコードをそのままV4で動かしてみようとしたのですが、

エラーが大量にでてしまい、最低限ですが、V4での変更点を確認しました。


Version4 新規導入の方法

npm install -g @mobiscroll/cli

mobiscroll config ionic

既にライセンス購入済の場合は、以下のコマンドにて、ライセンス認証が完了するようになっています

npm login --registry=https://npm.mobiscroll.com --scope=@mobiscroll

上のコマンド投入後、


Username:

Password:

Email:


を確認してきますので、全てを入力すると認証が完了します。


Version4ではカスタムタグとしてコンポーネントを利用可能

Version3では、HTML5標準エレメントへの属性として、コンポーネントが動作していましたが、

Version4では、完全なWebコンポーネントとしてカスタムタグ実装になってきています。


home.html#Version3.x

<input mbsc-numpad-decimal [options]="myOptions" [(ngModel)]="birthday">



home.html#Version4.x

<mbsc-numpad-time [options]="myOptions" [(ngModel)]="birthday"></mbsc-numpad-time>


TS上の記述は変更ありません。


home.ts

import { Component } from '@angular/core';

import { MbscDatetimeOptions } from '@mobiscroll/angular';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

constructor() {}

birthday : null;
myOptions: MbscDatetimeOptions = {
display: 'center',
timeFormat:'hh:ii'
};
}


スクリーンショット 2017-12-16 16.16.01.png

Numpad - Mobiscroll 4 API Documentation - Mobiscroll for Angular

以下は、日付選択UI。

<mbsc-date [(ngModel)]="birthday" [options]="mbscDateOptions"></mbsc-date>

/**

* MobileScroll Date オプション
*/

mbscDateOptions: MbscDatetimeOptions = {
display: "center",
lang: 'ja',
animate: 'fade',
dateFormat: 'yy/m/d(D)',
buttons: [
'cancel',
{ handler: "set", text: "反映する" }
]
};

スクリーンショット 2017-12-16 17.44.12.png

Date & Time - Mobiscroll 4 API Documentation - Mobiscroll for Angular

便利!