v-ons-toolbar

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

実例

Adding a toolbar

Most mobile apps have a toolbar at the top containing a header text and maybe some buttons.

The VOnsToolbar component displays a navigation bar on the top of a VOnsPage component. It is separated into three sections (left, center and right) in order to let the buttons and title be layouted a beautiful way.

<v-ons-toolbar>
  <div class="left">
    Left part
  </div>
  <div class="center">
    Title here
  </div>
  <div class="right">
    Right part
  </div>
</v-ons-toolbar>

関連情報

Prop一覧

名前 型 / デフォルト値 概要
inline Boolean ツールバーをインラインに置きます。スクロール領域内にそのまま表示されます。 Optional.
modifier Boolean ツールバーの表現を指定します。 Optional.
static Boolean Static toolbars are not animated by ons-navigator when pushing or popping pages. This can be useful to improve performance in some situations. (翻訳中) Optional.

プリセットのmodifier

Name 概要
material Material Design toolbar. (翻訳中)
transparent 透明な背景を持つツールバーを表示します。
cover-content Displays the toolbar on top of the page’s content. Should be combined with transparent modifier. (翻訳中)
noshadow ツールバーに影を付けずに表示します。

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。