0

ons-toolbarは以下構造が基本だと思いますが、

<ons-toolbar><div class="left">...</div><div class="center">...</div><div class="right">...</div></ons-toolbar>

ツールバー内下段に検索ボックスのようなオブジェクトを含めたいような場合に、
単に別途DIVタグで実装しても表示されません。

AngularJSを使わずにons-toolbar内のコンテンツを増やす方法はあるのでしょうか?

※以下のようにタグを改修して実現できました。有難うございました。

<ons-toolbar style="height: 110px;" fixed-style>
    <div class="left" style="width: 10%;">ひだり</div>
    <div class="center" style="width: 80%;">まんなか
    <br>
    <div id="div-search" class="navigation-bar__center">
    <input type="search" id="ip-search" class="search-input" style="width: 96%; margin: 6px auto 6px auto;" placeholder="Search">
    </div>
    </div>
</ons-toolbar>

1 件の回答 1

1

Onsen UI v1.3.15onsenui.jsの20214行目にons-toolbarのコードがあります。
AngularJSで記載されており、また20259行で'left', 'center', 'right'が指定された場合という条件があるため、回答としては「ありません」となります。

ons-toolbarによって出力された内容を解析し、jQueryを使用したいなら、それに置き換えて再現すれば実現可能と思います。

追記
「ありません」と書きましたが訂正します。
このようなやり方であれば実現可能かと思います。

<ons-toolbar style="height: 90px;" fixed-style>
    <div class="left">ひだり</div>
    <div class="center">テスト<br><input type="search" class="search-input" placeholder="キーワード"></input></div>
    <div class="right">みぎ</div>
</ons-toolbar>
3
  • 早速ご回答頂き有難うございます。 やはり根本的にカスタマイズする為には本来はAngularJSが必要ですね。 しかしご提案頂いた方法で今回の要件は無事実現出来ました。重ねてお礼申し上げます。
    – user14318
    Commented 2016年2月15日 2:45
  • @user14318 ons-toolbarの高さを変更しているため、その下に隠れてしまう場合がありますので注意が必要です。
    – otak-lab
    Commented 2016年2月15日 5:14
  • はい、スタイルを少し調整する必要がありましたが難なくいけました。有難うございました。
    – user14318
    Commented 2016年2月15日 8:44

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。