Я хочу добавить две кнопки в виде иконок, например, картинка, но мой код работает неправильно.ionic add two button in 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>

EDIT: Это не хорошо работать на устройстве 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

ionic add two button in ion-footer-bar

\t \t Кнопка 333333333 \t \t

\t \t Кнопка 333333333 \t \t

ответ

Смежные вопросы