どうも中田です。
今回は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にしてないと効かないので要注意
今日はそんな感じで。