embed an image in ons-toolbar

I'd like to embed an image in the ons-toolbar, but how can I embed it?
If you are familiar with this, please take good care of me.

monaca onsen-ui

2022-09-30 14:07

2 Answers

How about putting background-image: url('url') in the div tag?

<ons-toolbar>
    <div class="center" style="background-image:url('http://cdn.sstatic.net/ja/img/sprites.png?v=b55eefad6ab0')"></div>
    <div class="right">
      <ons-toolbar-button>
        <ons-iconion="ion-navicon" style="font-size:32px;width:1em">
      </ons-toolbar-button>
    </div>
  </ons-toolbar>

2022-09-30 14:07

You can also customize it with the modifier attribute.

<ons-toolbar modifier="hogehoge">
  <div class="center">Center Area</div>
</ons-toolbar>

The CSS specifies a class of navigation-bar--(modifier attribute value) for ons-toolbar.

.navigation-bar --hogehoge{
  background: url('http://placehold.jp/150x50.png') no-repeat center center;
}

2022-09-30 14:07

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