まずはIonic2の準備から。
$ npm install -g ionic@beta $ ionic start cutePuppyPics --v2 $ cd cutePuppyPics $ ionic serve
Ionic2にはTypeScriptを利用する環境も全て整っています。
続いてng-lightningのインストールです。
$ npm install --save ng-lightning
もしかすると次のライブラリも必要かも
$ npm install --save @salesforce-ux/design-system@^2.0.1 $ npm install --save tether@^1.2.0
インストールできたら実際にバッチを表示してみます。まずはtsファイルの変更です。
home.ts
import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {NGL_DIRECTIVES} from 'ng-lightning/ng-lightning';
@Component({
directives: [NGL_DIRECTIVES],
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
constructor(private navCtrl: NavController) {
}
type = 'inverse';
private types: string[] = ['default', 'shade', 'inverse'];
change() {
this.type = this.types[(this.types.indexOf(this.type) + 1) % 3];
}
}
続いてhome.htmlの変更です。
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="home">
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps
that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>app/</code> directory to add or change tabs,
update any existing page or create new pages.
</p>
<ngl-badge>Badge</ngl-badge>
<ngl-badge type="default">Default</ngl-badge>
<ngl-badge type="info">Info</ngl-badge>
<ngl-badge type="success">Success</ngl-badge>
<ngl-badge type="warning">Warning</ngl-badge>
<ngl-badge type="error">Error</ngl-badge>
<div class="slds-m-top--large">
Type: <code>{{type}}</code>
<ngl-badge [type]="type" class="slds-m-horizontal--large">Badge</ngl-badge>
<button type="button" nglButton="neutral" (click)="change()">Change</button>
</div>
</ion-content>
最後にindex.htmlの変更です。(SLDSのCSS読み込みを追加)
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Ionic</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <link rel="stylesheet" href="https://npmcdn.com/@salesforce-ux/design-system@^2.0.2/assets/styles/salesforce-lightning-design-system.min.css"> <link ios-href="build/css/app.ios.css" rel="stylesheet"> <link md-href="build/css/app.md.css" rel="stylesheet"> <link wp-href="build/css/app.wp.css" rel="stylesheet"> </head> <body> <!-- This is Ionic's root component, where the app will load --> <ion-app></ion-app> <!-- cordova.js required for cordova apps --> <script src="cordova.js"></script> <!-- Polyfill needed for platforms without Promise and Collection support --> <script src="build/js/es6-shim.min.js"></script> <!-- Zone.js and Reflect-metadata --> <script src="build/js/Reflect.js"></script> <script src="build/js/zone.js"></script> <!-- The bundle which is built from the app's source code --> <script src="build/js/app.bundle.js"></script> </body> </html>
これでSLDSのバッチを表示することができました。
その他いろいろ試してみようと思ったのですが、ボタンコンポーネント利用時に次のエラーが発生してしまいました。
解決方法があるかは確認できませんでした。Ionic2とNG-Lightningはもしかすると相性がよくないかもしれません。
とりあえず今回試してみた結果はこんな感じです。Ionic2との組み合わせがうまくいったらいいなと思ったのですが、ちょっと簡単にはできそうにありませんでした。