質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Q&A

解決済

1回答

572閲覧

ionicでボタンとトグルメニューのデザインが反映されない

Linkey

総合スコア77

Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

0グッド

0クリップ

投稿2020/05/11 14:26

ionicを勉強しているものです。ionicでプロジェクトを作成し、ボタンとトグルメニューを実装して動作確認してみたのですが
ボタンとトグルメニューのデザインが反映されません。

tab1.page.html

html

1<ion-header [translucent]="true"> 2 <button ion-button menuToggle> 3 <ion-icon name="menu">aaaa</ion-icon> 4 </button> 5</ion-header> 6 7<ion-content [fullscreen]="true"> 8 <ion-header collapse="condense"> 9 <ion-toolbar> 10 <ion-title size="large">Tab 1</ion-title> 11 </ion-toolbar> 12 </ion-header> 13 14 <button ion-button (click)="onClick()">Button 1</button> 15 16 <app-explore-container name="Tab 1 page"></app-explore-container> 17</ion-content>

実際の画面
イメージ説明

期待すべきことは以下のようなデザインが反映されることです。
イメージ説明

実行したコマンド
ionic start sampleApp
※AngularでTabありのテンプレートを指定

npm i -g cordova-res
ionic cordova platform add ios
ionic cordova platform add androird
ionic cordova build android
ionic serve

Googleで検索してみましたが、このような現象の問題について情報がなく、原因が突き止められません。
そもそもプロジェクトの作成の仕方に問題があるのでしょうか?
ionicにお詳しい方がいましたらご回答いただけないでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

<button ion-button (click)="onClick()">Button 1</button> の書き方は、Ionic2/Ionic3のもので、最新のものでは

<ion-button (click)="onClick()">Button 1</ion-button> と書きます。詳しくはドキュメントをご覧くださいー。

https://ionicframework.jp/docs/api/button

投稿2020/05/12 02:42

rdlabo

総合スコア448

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Linkey

2020/05/12 13:02

ありがとうございました。期待通りの結果となりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問