こんにちは!ぐちです。
ons-toolbar
ナビゲーションコントロールやヘッダなど様々な呼ばれ方がありますがOnsen UIにも画面上部で固定されタイトルやボタンを設置するコンポーネントがあります。そして画面下部に固定されツールボタンを設置するためにタブバーとは別にons-bottom-toolbarと呼ばれるコンポーネントも提供されています。
詳細はこちらをご覧ください。
ons-toolbar-buttonの配置方法は?
ons-toolbarでは下記のようにすることで左側や中央、右側にボタンなどを配置することができます。
<ons-toolbar> <div class="left"><ons-toolbar-button>Button</ons-toolbar-button></div> <div class="center">Title</div> <div class="right"><ons-toolbar-button><ons-icon icon="ion-navion" size="28px"></ons-icon></ons-toolbar-button></div> </ons-toolbar>
しかし!ons-bottom-toolbarでは子要素のleftなどの属性が有効になりません。というかons-bottom-toolbarにはそういった属性がないそうです。
※詳しくはこちらをご覧ください。
従って下記のようにstyle属性を追加し独自で配置する場所を記述する必要があります。
<ons-bottom-toolbar> <div class="bottom-bar__line-height" style="text-align: center;">Bottom toolbar</div> </ons-bottom-toolbar>
なんでons-toolbarとons-bottom-toolbarとで違う仕様にしたのでしょうか・・・