ons-toolbar-button

ons-toolbarあるいはons-bottom-toolbarに設置できるボタン用コンポーネントです。

実例

<ons-page>要素

Onsen UIを使ったアプリケーションでは、<ons-page>要素を使ってある画面を作成します。この要素は、スクリーンいっぱいに広がり他の要素のコンテナとして利用されます。

コンテンツを配置する

<ons-page>要素で作った画面にコンポーネントを配置するには、contentクラス属性をもつdiv要素以下に配置してください。

<ons-page>
  <div class="content">
    Hello World!
  </div>
</ons-page>

次のように書くこともできます。

<ons-page>
  <div class="page__content">
    Hello World!
  </div>
</ons-page>

ツールバーを配置する

ほとんどのモバイルアプリケーションでは、画面の上部にツールバーを持ちます。このツールバーにはテキストやボタン等を配置できます。

Onsen UIでは、<ons-toolbar>要素を使ってツールバーを置くことができます。ツールバー内には、次のように左右中央に要素を配置することができます。

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

  <div class="content">
    ...
  </div>
</ons-page>

背景を配置する

<ons-page>の背景を表現する要素は、<ons-page>コンポーネント内に自動的に補完されますが、開発者がページの背景を指定したい場合にはクラス属性にbackgroundを指定したdiv要素を手動で配置することができます。

次のコードでは、<ons-page>の背景をgrayにします。

<ons-page>
  <div class="background" style="background-color: gray;"></div>
  <div class="content">
    ...
  </div>
</ons-page>

背景を指定するには、次のように書くこともできます。

<ons-page>
  <div class="page__background" style="background-color: gray;"></div>
  <div class="page__content">
    ...
  </div>
</ons-page>

関連情報

名前 型 / デフォルト値 概要
modifier String ボタンの表現を指定します。 Optional.
icon String ons-iconコンポーネントを悪性します。 Optional.
disabled ボタンを無効化する場合は指定してください。 Optional.
名前 概要
disabled 無効化されている場合にtrue
Name 概要
material Material Design toolbar button. (翻訳中)
outline アウトラインをもったボタンを表示します。

お困りですか?

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

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

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