離子添加在ion-footer-bar中的兩個按鈕

我想在ion-footer-bar圖片中添加兩個按鈕，但是我的代碼無法正常工作。離子添加在ion-footer-bar中的兩個按鈕

<ion-footer-bar class="bar-positive" padding="false"> 
    <h1 class="title col col-50 no-padding remove-filter"> 
     Button 333333333 
    </h1> 
    <h1 class="title col col-50 no-padding remove-filter"> 
     Button 333333333 
    </h1> 
</ion-footer-bar>

來源

2016-01-12 Mohammad Akbari

你有沒有嘗試在html標籤之前添加離子內容和離子窗格？將看起來像這樣'<離子頁腳杆類= 「巴陽性」填充= 「假」> \t \t \t \t \t \t \t按鈕333333333 \t \t \t \t \t \t按鈕333333333 \t \t \t \t ' –

是的，我做。只有以上的代碼是目標 –

你弄清楚如何做到這一點？ –

你可以嘗試這樣的...希望它可以幫助

<ion-footer-bar align-title="left" class="bar-assertive"> 
     <ion-tabs class="tabs-positive tabs-icon-top"> 

      <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline"> 
      <!-- Tab 1 content --> 
      </ion-tab> 

      <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline"> 
      <!-- Tab 2 content --> 
      </ion-tab> 

      <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline"> 
      <!-- Tab 3 content --> 
      </ion-tab> 

     </ion-tabs> 
</ion-footer-bar>

來源

2016-01-12 16:41:00

我想要頁腳分裂兩個部分像圖片， –

這是我是如何實現它。

<ion-footer-bar class="bar button-bar-footer" style="height: auto;"> 
    <div class="button-bar" style="position: absolute;bottom: 0;" > 
     <a style="min-width: 50%;border-radius: 0px;" class="button button-dark icon-left ion-close">Cancel</a> 
     <a style="min-width: 50%;border-radius: 0px;" class="button button-balanced icon-left ion-checkmark">Save</a> 
    </div> 
    </ion-footer-bar>

編輯： 這並沒有Android設備上正常運行，因此刪除<ionic-footer>。新的代碼是

<div id="footer" class="button-bar" > 
    <a style="min-width: 50%;border-radius: 0px;" class="button button-lite icon-left ion-close">Cancel</a> 
    <a style="min-width: 50%;border-radius: 0px;" class="button button-calm icon-left ion-checkmark">Save</a> 
</div>

CSS

/*Footer*/ 
#footer { 
    position : absolute; 
    bottom : 0; 
    height : 40px; 
    margin-top : 40px; 
}

來源

2016-06-22 16:53:18

您可以實施下面的代碼在頁腳中添加兩個按鈕。
在離子內容和離子窗格內使用這些代碼。

<div style="position: absolute; background-color: transparent; bottom: 0px; width: 100%"> 
     <div class="row"> 
     <button style="color: black; background-color: wheat;" class="col col-50 button button-block">button 1</button> 
     <button style="color: black; background-color: blue;" class="col col-50 button button-block">button 2</button> 
     </div> 
</div>

來源

2017-04-30 08:55:21 Nithya

任何方式，我可以把那些在一個頂部的其他形成？ –

如果有人碰到這個問題就來了。

在頁腳中顯示離子按鈕的替代解決方案。

Ionic footbar with two buttons

<ion-footer-bar class = "bar-assertive"> 
    <div class = "buttons"> 
    <button class = "button">Button</button> 
    </div> 

    <h1 class = "title">Footer</h1> 

    <div class = "buttons"> 
    <button class = "button icon ion-home"></button> 
    </div> 
</ion-footer-bar>

注：上面的代碼需要進行下面去<ion-content></ion-content>標籤

來源

2017-09-04 05:08:28

在ionic2 +，你可以做這樣的事情..

<ion-header> 
    <ion-navbar> 
     <ion-title>My Page</ion-title> 
    </ion-navbar> 
</ion-header> 
<ion-content> 
</ion-content> 
<ion-footer> 
    <ion-row> 
     <ion-col no-padding> 
      <button no-margin ion-button full large color="primary">Update</button> 
     </ion-col> 
     <ion-col no-padding> 
      <button no-margin ion-button full large color="danger">Cancel</button> 
     </ion-col> 
    </ion-row> 
</ion-footer>

來源

2017-11-06 20:37:12 Hairus

離子添加在ion-footer-bar中的兩個按鈕

回答

相關問題