JavaScript Reference > ons-toolbar

ons-toolbar

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

実例

Adding a toolbar

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

In Onsen UI this is achieved using the <ons-toolbar> element. It is divided into three sections that are defined using the HTML classes left, center and right.

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

Buttons can be added to the toolbar with the <ons-toolbar-button> element.

Inline and static toolbars

We can indicate that the toolbar should be part of the scrollable content with the inline attribute.

Additionally, the static attribute prevents the toolbar from being animated in some navigator animations to enhance performance.

Compilation

ons-toolbar divides its layout in three parts: div.left, div.center and div.right. However, these classes are simple aliases for the real classes. A normal toolbar will compile its content as follows:

<ons-toolbar class="toolbar">
  <div class="left toolbar__left">Left content</div>
  <div class="center toolbar__center">Center content</div>
  <div class="right toolbar__right">Right content</div>
</ons-toolbar>

In addition, these containers are sorted automatically to always match “left - center - right” order.

関連情報

属性

[編集]
名前 型 / デフォルト値 概要
inline ツールバーをインラインに置きます。スクロール領域内にそのまま表示されます。 Optional. 初期化時のみ有効
static 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 ツールバーの表現を指定します。 Optional.

プロパティ概要

[編集]
名前 概要
static Static toolbars are not animated by ons-navigator when pushing or popping pages. This can be useful to improve performance in some situations. （翻訳中）
visible Whether the toolbar is shown or not. （翻訳中）

プリセットの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 ツールバーに影を付けずに表示します。

メソッド

[編集]
シグネチャ 概要
setVisibility(visible) Shows the toolbar if visible is true, otherwise hides it. （翻訳中）
show() Show the toolbar. （翻訳中）
hide() Hide the toolbar. （翻訳中）
setVisibility(visible)

Shows the toolbar if visible is true, otherwise hides it. （翻訳中）

パラメーター
名前 型 概要
visible Boolean Set to true to show the toolbar, false to hide it （翻訳中）
show()

Show the toolbar. （翻訳中）

hide()

Hide the toolbar. （翻訳中）

お困りですか?

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

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

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