ionic4での変更点
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
|
ionic4での変更点 [2018/08/07] adash333 [公式ドキュメント] |
ionic4での変更点 [2018/10/07] (現在) |
||
|---|---|---|---|
| ライン 59: | ライン 59: | ||
| ===== slot ===== | ===== slot ===== | ||
| + | |||
| + | Ionic4では、<wrap em><ion-buttons slot="end"></wrap>のように、ボタンなどの配置を設定します。 | ||
| + | |||
| + | 以下のサイトが分かりやすいです。(英語) | ||
| + | |||
| + | https://www.joshmorony.com/understanding-how-slots-are-used-in-ionic-4/ | ||
| + | |||
| + | 上記サイトによると、例えば、ページのヘッダーは、以下のように記載するとのことです。(ちなみに、ion-navbarではなく、ion-toolbarを用いる。) | ||
| + | |||
| + | <code html> | ||
| + | <ion-toolbar color="primary"> | ||
| + | <ion-title> | ||
| + | The Title | ||
| + | </ion-title> | ||
| + | <ion-buttons slot="end"> | ||
| + | <ion-button (click)="addTodo()"> | ||
| + | <ion-icon slot="icon-only" name="add-circle"></ion-icon> | ||
| + | </ion-button> | ||
| + | </ion-buttons> | ||
| + | </ion-toolbar> | ||
| + | </code> | ||
| + | |||
| + | |||
| + | ionic3 | ||
| + | <code> | ||
| + | <ion-item> | ||
| + | <ion-input type="password" placeholder="Password"></ion-input> | ||
| + | <button clear item-right>Forgot</button> | ||
| + | </ion-item> | ||
| + | </code> | ||
| + | |||
| + | ionic4 | ||
| + | <code> | ||
| + | <ion-item> | ||
| + | <ion-input type="password" placeholder="Password"></ion-input> | ||
| + | <ion-buttons slot="end"> | ||
| + | <ion-button>Forget</ion-button> | ||
| + | </ion-buttons> | ||
| + | </ion-item> | ||
| + | </code> | ||
| + | |||
| ===== ion-navbarがion-toolbarに変更 ===== | ===== ion-navbarがion-toolbarに変更 ===== | ||
| + | 上記のコードを参考にしてください。 | ||
| + | ===== RxJS5からRxJS6に変更 ===== | ||
| + | |||
| + | 非同期通信のためのRxJSですが、大幅変更が行われています。 | ||
| + | |||
| + | [[RxJS6(Ionic4-Angular6)での変更点]] | ||
| ===== PWA化が面倒に ===== | ===== PWA化が面倒に ===== | ||
| ionic3では、index.htmlの一部分のコメントを外すだけでPWA化できたのですが、コマンドブロンプトで、@angular/pwaをインストールする必要があります。 | ionic3では、index.htmlの一部分のコメントを外すだけでPWA化できたのですが、コマンドブロンプトで、@angular/pwaをインストールする必要があります。 | ||
| ライン 81: | ライン 128: | ||
| 2018年7月に、Ionic 4.0.0-beta.0がリリースされました。まだ、beta版なので、様子見でよいと思います。 | 2018年7月に、Ionic 4.0.0-beta.0がリリースされました。まだ、beta版なので、様子見でよいと思います。 | ||
| + | |||
| + | |||
| + | https://ionicthemes.com/tutorials/about/ionic-4-tutorial-mastering-web-components-in-ionic-4 | ||
| + | |||
| + | https://github.com/ionicthemes/ionic-4-custom-components | ||
| ===== Ionic3でお勧めの本 ===== | ===== Ionic3でお勧めの本 ===== | ||
ionic4での変更点.1533683541.txt.gz · 最終更新: 2018/10/07 (外部編集)
