lundi 30 mars 2015

Onsen-UI Action buttons inside ons-bottom-toolbar

I need help on below that I am trying to solve for days.


I am trying to combine blocks fron onsen-ui framework for creating a fixed footbar that will have action buttons with icons and text below, without loads the other pages' content inside it, like the one I created in



<ons-list-item style="text-align:center;padding-top:4px;"modifier="action-buttons">
<ons-row class="action">
<ons-col class="action-col">
<div class="action-icon">
<ons-icon icon="ion-ios-calendar-outline"></ons-icon></div>
<div class="action-label">Check Now</div>
</ons-col>
....

</ons-row>
</ons-list-item>
</ons-list>


http://ift.tt/1F9lCxO


The thing on this is that it is not a fixed footer and is not showing until you get at the bottom of the page's content.


I tried to combine to simulate a different version with ons-bottom-toolbar which is for fixed footers but unsuccesfully since it does not show any text below the icons and it loads other page's content inside it (which I do not want)



<ons-bottom-toolbar>
<div class="tab-bar">
<label ng-click="menu.setMainPage('home.html')" class="tab-bar__item">
<input type="radio" name="tab-bar-b">
<button class="tab-bar__button">
<ons-icon icon="fa-twitter" fixed-width="true"></ons-icon>Home
</button>
</label>
......
</div>
</ons-bottom-toolbar>


http://ift.tt/1aaEtyd


Also it is causing the upper left slide menu to show twice when other page's content is loaded.


ons-bottom-toolbar in its pure format would be perfect for what I want but it is supposed to exist only to display different content of other pages inside the master page (I do not want this) which also makes the menu toolbar to load twice when exists


Aucun commentaire:

Enregistrer un commentaire