Information on customizing ons-toolbar

I think the structure of ons-toolbar is basic, but

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

If you want to include an object like a search box at the bottom of the toolbar,
It does not appear when implemented with a separate DIV tag.

Is there a way to increase the content in ons-toolbar without using AngularJS?

*The tag has been modified as follows.Thank you.

<ons-toolbar style="height:110px;"fixed-style>
    <div class="left" style="width:10%;">Leave</div>
    <div class="center" style="width:80%;">in the middle
    <br>
    <divid="div-search" class="navigation-bar__center">
    <input type="search" id="ip-search" class="search-input" style="width:96%;margin:6px auto6px auto;"placeholder="Search">
    </div>
    </div>
</ons-toolbar>

jquery onsen-ui

2022-09-30 20:14

1 Answers

ons-toolbar is located on line 20214 of onsenui.js in Onsen UI v1.3.15.
AngularJS and 'left', 'center', 'right' is specified in line 20259, so the answer is "None".

If you want to analyze the output of ons-toolbar and use jQuery, you can replace it and reproduce it.

Additional
"I wrote ""None"", but I will correct it."
I think this is possible.

<ons-toolbar style="height:90px;"fixed-style>
    <div class="left">Leave</div>
    <div class="center">Test<br>>input type="search" class="search-input" placeholder="keyword"></input></div>;
    <div class="right">Migi</div>
</ons-toolbar>

2022-09-30 20:14

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656