Ionic4(beta)ではでは無くを用いる（の使い方）

2018年8月1日

Ionic4.0.0-beta.0　を触っていると、

Ionic3　では、<ion-navbar>

であったところが、

Ionic4　では、<ion-toolbar>

となっており、やり方がだいぶ変わってしまっていて混乱した。

以下のサイトに、「Ionic4からは"slot"を用いるよん！」と書いてあったので、写経してみたい。

（開発環境）

Node v8.11.2
npm 6.1.0
Ionic (Ionic CLI) 4.0.1
Ionic Framework @ionic/angular 4.0.0-beta.0

（０）すること

Ionic4で<ion-toolbar>や、ion-onlyや、ion-item、ion-button の位置の設定などについて調べる（<slot>　というものを用いるらしい。。。）

以下のように、slot="xxx" のようにして、ion-itemなどの位置を指定する。

slot="start"

slot="end"

slot="icon-only"

（１）Ionic4アプリの作成

C:/ionic4/ フォルダに、ionic4-pwa/ アプリを作成する

C:/ionic4/ フォルダをVisualStudioCodeで開き、Ctrl+@でターミナルを開き、以下を入力。

ionic start ionic4-pwa blank --type=angular

何か聞かれたら、N + Enter　としておく。（Cordovaを使用したい場合は、最初の質問に対して、y としておく。）

src/app/home.page.html

(変更前)

(変更後)

ソースコード