View Source Improve this doc

ons-toolbar

ナビゲーションで使用するツールバー用コンポーネントです。クラス名により、左、中央、右のコンテナを指定できます。

使い方 # 

<ons-page>
  <ons-toolbar>
    <div class="left"><ons-back-button>Back</ons-back-button></div>
    <div class="center">Title</div>
    <div class="right">Label</div>
  </ons-toolbar>
</ons-page>

実例 #

See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.

Open in New Window

関連情報 #

属性 #

名前 型 / デフォルト値 概要
var String このツールバーを参照するための名前を指定します。 Optional
inline ツールバーをインラインに置きます。スクロール領域内にそのまま表示されます。 Optional
modifier ツールバーの表現を指定します。 Optional
fixed-style このコンポーネントは、Androidではタイトルを左寄せ、iOSでは中央配置します。 この属性を使用すると、要素はAndroidとiOSともに中央配置となります。 Optional

プリセットのmodifier #

Modifier名 概要
transparent 透明な背景を持つツールバーを表示します。
android Androidライクなツールバーを表示します。タイトルが左に寄ります。

議論 #