Как установить цвет фона на странице пользовательского интерфейса Onsen

Я хочу установить цвет фона страницы onsen ui на синий или другой цвет. Я пытался обновить стиль на онсен-странице, но, похоже, это не сработало.


user-interface html css styles onsen-ui
person Nakket    schedule 16.04.2014    source источник

Ответы (5)


arrow_upward
3
arrow_downward

Можешь попробовать

html

  <ons-page class="red">

    <h1>Page 1</h1>

  </ons-page>

CSS

 .red {
    background-color: red;
 }

Вот плунжер. http://plnkr.co/edit/jWTrYz?p=preview

person Tamura    schedule 17.04.2014
comment
но когда я поместил ons-page внутри ons-navigator, это не сработало! - person Nakket; 18.04.2014
comment
фон будет изменен на значение по умолчанию, когда я добавлю некоторые элементы onsen - person lngs; 13.05.2014
comment
я вижу, что единственный способ установить цвет фона страницы - это переопределить unsen файл css в .page - person lngs; 13.05.2014

arrow_upward
0
arrow_downward

Для v2 позвольте мне процитировать @frandiox, который предоставил эту информацию о Gitter:

укажите элемент <div class="background"></div> в вашем v-ons-page, и он будет использоваться в качестве фона. Вы можете стилизовать его, как хотите. Подробнее здесь: https://onsen.io/v2/guide/compilation.html#page-compilation

person robro    schedule 09.08.2017

arrow_upward
0
arrow_downward

Попробуйте это, Javascript:

document.addEventListener("init",function(event){
  if(event.target.id == "trn")
    {
      $("#trn .page__background").css("background","#ffffff");
    }
});

онсэн тег:

<ons-page id="trn">
</ons-page>
person malu ugo    schedule 17.10.2017
comment
Может быть, вы могли бы объяснить, почему это сработает? Это может сделать ваш ответ более ясным. - person Casper Spruit; 17.10.2017

arrow_upward
0
arrow_downward

Объяснение приведенного выше ответа от malu ugo

ons-page компилируется следующим образом: автоматически добавляет .page, div.page__background и div.page__content

<ons-page class="page">
  <ons-toolbar></ons-toolbar>
  <div class="page__background"></div>
  <div class="page__content">
    Some content here
    <ons-input></ons-input>
    <div>More content</div>
  </div>
  <ons-fab></ons-fab>
</ons-page>

использование javascript для изменения фона

JavaScript:

document.addEventListener("init",function(event){
  if(event.target.id == "trn")
    {
      $("#trn .page__background").css("background","#ffffff");
    }
});

тег onsen:

<ons-page id="trn">
</ons-page>
person subramanya46    schedule 30.10.2019

arrow_upward
0
arrow_downward 

<ons-template id="tab1.html">
    <ons-page id="first-page" >
        <div class="background"></div>
            <p style="text-align: center;">
                My Text
            </p>    
     <style>
       .background{
             background-color: black;
                 }
    </style>
  </ons-page> 
</ons-template>

Добавление div фона класса должно помочь стилизовать фон

person Bandna Kalra    schedule 14.11.2020