技術

【ionic】バックボタンの文字だけ消す

投稿日:

どうも中田です。

今回はHTML5ハイブリッド開発でお馴染みのionicについてのお話

どんな開発でもつまづくことはあるんですが、
何が困るかって、

日本語のコンテンツが少ない!!

ってことです。
私の英語力をもってすれば、検索するのも一苦労。。。
「横にシュッとスワイプした時に…」とかの検索がね。。
(英語勉強しろやって話なんですがね)

それはおいといて、英語があまり達者でない方のお目に掛かれればと思い、
ionicの色んなつまづきを残していきます。

んでは早速。

バックボタンをアイコンだけにしたい!

<ion-nav-buttons>
navigationを使っていると自動的に左上にバックボタンが付くのですが、
デフォルトでは、アイコンと文字が入っています。
これをアイコンだけにしたいって話です。

とりあえず結論

moduleの設定をしているところで

angular.module('starter', ['ionic'])
.config(function($ionicConfigProvider) {
  $ionicConfigProvider.backButton.previousTitleText(false);
  $ionicConfigProvider.backButton.text(null);
})

と書いておくと、「<」という戻るアイコンだけになります。

補足話

ではそれぞれ何の意味かを調べてみました。

$ionicConfigProvider.backButton.previousTitleText(false);

これは、前のページのタイトルを引き継いで戻るボタンの横に付けますか?
って設定です。(デフォルトはtrue)

トップページから画面遷移した場合
< トップ
のようになります。

この場合、設定がfalseなので、デフォルトの値
< Back
となります。

んで、もう一つ

$ionicConfigProvider.backButton.text(null);

なんとなく想像つくかと思いますが、テキストの設定ですね。
上記、Backの部分を好きな文字列にすることができます。

しかしながら、previousTitleTextをfalseにしてないと効かないので要注意

今日はそんな感じで。

-技術
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

[ Ionic ]Cannot find module ‘../node_modules/xml2js’ でVRプラグインを消せない!

こんにちは。たなかです。 Ionicでandroidをbuild中、下記のような …

no image

Angular6で子コンポーネントに文字列を渡す

文字列と変数の値を渡す時、記述が少しだけ違います。 // 文字列を渡したい時 & …

no image

【ionic】FBログイン時にSafari認証になってしまう

どうも中田です。 ionicでFacebookログインを実装した時に、 Nati …

no image

javascriptで画面サイズ毎に処理をしたい時

こんにちは 今回はjavascriptで画面サイズ毎に処理をしたい時にオススメの …

Angularでビューのパラメーターを詳細まで見たいときのコード

こんにちはコーテッグのこやまです angularでviewのパラメーターがうまく …