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.
visible Boolean Specify the visibility of the component. (翻訳中) 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に記載をお願いいたします。

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