Дизайн материалов Monaca Onsen 2.0 на вкладках

Я делаю приложение для дизайна материалов с новым Monaca Onsen 2.0, я использовал панель инструментов ons и работает нормально, но я не могу понять, как использовать панель ons-tab с материалом, какой-то трюк?

<ons-toolbar modifier="material"> WORKS FINE </ons-toolbar>

<ons-tabbar modifier="material"> NOT WORKING WITH MATERIAL </ons-tabbar>

cordova material-design monaca onsen-ui
person Federico González Brizzio    schedule 07.01.2016    source источник
comment
Я видел только вкладку материала, используемую с переключателями, например, в справке по css ниже, но я не уверен, как сделать ее такой же плавной, как вкладка 1.x. onsen.io/2/reference/css.html   -  person John Gonzalez    schedule 07.01.2016
comment
Вероятно, вам следует перефразировать свой вопрос. Мне любопытно понять, как заставить модификатор материала отображаться. Другие компоненты материала работают, но по какой-то причине эта вкладка не открывается.   -  person John Gonzalez    schedule 08.01.2016

Ответы (2)


arrow_upward
0
arrow_downward

Ваш код неверен, потому что ons-tabbar всегда должен содержать хотя бы один ons-tab.

Взгляните на этот пример CodePen, все работает нормально.

Вот код:

<ons-tabbar modifier="material">
  <ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working"></ons-tab>
  <ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag"></ons-tab>
  <ons-tab page="settings.html" label="Settings" icon="ion-ios-cog"></ons-tab>
</ons-tabbar>

<ons-template id="home.html">
  <ons-toolbar>
    <div class="center">Home</div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="comments.html">
  <ons-toolbar>
    <div class="center">Comments</div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="tags.html">
  <ons-toolbar>
    <div class="center">Tags</div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="feed.html">
  <ons-toolbar>
    <div class="center">Feed</div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="settings.html">
  <ons-toolbar>
    <div class="center">Settings</div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>
person Andi Pavllo    schedule 08.01.2016

arrow_upward
0
arrow_downward

Проверьте свой onsenui.js
Я действительно думаю, что страница проекта в Монаке могла не быть обновлена ​​до последней версии onsen ui 2.0. Так оказалось и у меня. В первой строке может быть сказано:

/*! onsenui v2.0.0-beta - 2015-11-11 */

Вам, вероятно, нужен обновленный, такой как тот, который использовал Энди Павлло.

/*! onsenui v2.0.0-beta.2 - 2015-12-01 */

Однако последний Onsen UI 2.0 на Github на самом деле

/*! onsenui v2.0.0-beta.5 - 2016-01-08 */

И вы не можете просто заменить js, который вам понадобится для установки всего пакета.

* Изменить: я заметил, что после установки нового пакета все работает правильно, но когда я попробовал тематический ролик, он вернулся к старой панели вкладок. Так что вполне вероятно, что тематический ролик может не обновляться.

person John Gonzalez    schedule 08.01.2016