スポンサーリンク

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

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

Ionic3 では、<ion-navbar>

であったところが、

Ionic4 では、<ion-toolbar>

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

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

https://www.joshmorony.com/understanding-how-slots-are-used-in-ionic-4/
image

(開発環境)
image_thumb21_thumb_thumb_thumb

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

(0)すること

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

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

slot=”start”

slot=”end”

slot=”icon-only”

(1)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

(変更前)
image_thumb[6]

(変更後)
image_thumb[7]

ソースコード

スポンサーリンク