Onsen UIのons-bottom-toolbarで要素の位置を指定する方法

こんにちは!ぐちです。

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とで違う仕様にしたのでしょうか・・・