Onsen-UI Boutons d'action à l'intérieur de la barre d'outils en-dessous

Question

J'ai besoin d'aide ci-dessous que j'essaie de résoudre depuis des jours.

Je suis en train de combiner des blocs Fron cadre onsen-ui pour créer un footbar fixe qui aura des boutons d'action avec des icônes et du texte ci-dessous, sans charges de contenu des autres pages à l'intérieur, comme celui que je créé dans

<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://codepen.io/Cadmos/pen/BybqpR/

la chose à ce sujet est qu'il n'y a pas un pied de page fixe et ne montre pas jusqu'à ce que vous obtenez au bas du contenu de la page. J'ai essayé de combiner pour simuler une version différente avec la barre d'outils ons-bottom qui est pour les pieds de page fixes mais sans heurt car elle n'affiche aucun texte sous les icônes et charge le contenu des autres pages à l'intérieur (ce que je ne veux pas)

<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://codepen.io/Cadmos/pen/JozmEQ/

en outre, il est à l'origine du menu coulissant en haut à gauche pour afficher deux fois lorsque le contenu d'autres page est chargée.

ons-bottom-barre d'outils dans son format pur serait parfait pour ce que je veux mais il est censé n'exister que pour afficher le contenu différent des autres pages à l'intérieur de la page maître (je ne veux pas) qui fait également le menu Barre d'outils à charger deux fois lorsqu'il existe

Answer 1

Dans le dernier exemple, vous utilisez le CSS pour la barre d'onglets, pas la barre d'outils inférieure. Et la barre d'outils doit être à l'intérieur du <ons-page>. Si vous utilisez un <ons-bottom-toolbar> cela fonctionne bien, vous avez juste besoin de changer la hauteur. Je pense que vous pensiez qu'il ne montre pas les noms parce que ... les noms tombent en dehors de l'écran (la barre d'outils n'était pas assez grande). Vous pouvez utiliser ce CSS:

.bottom-toolbar { 
height: 95px; 
} 

Maintenant, nous devons changer la taille du contenu de la page ou l'élément fixe au fond couvrira une partie du contenu:

.page__bottom-bar-fill ~ .page__content { 
bottom: 95px; 
} 

Vérifiez ici: http://codepen.io/frankdiox/pen/myoggy

Espérons que ça aide!