Как центрировать кнопку в нижнем колонтитуле в ionic 3?

Я хочу реализовать три ion-button в ion-footer, каждый из которых расположен слева, посередине и справа соответственно. Кажется, ion-button с start и end могут делать налево и направо.

Как насчет среднего? Я проверил API и ионный компонент, кажется, ion-title по умолчанию центрирован, но нет стандартного способа получить кнопку посередине?


ionic-framework ionic3 ionic2
person Xi Xiao    schedule 27.07.2017    source источник

Ответы (2)


arrow_upward
4
arrow_downward

В элементе ion-footer попробуйте использовать ion-grid, а затем удалите отступы из сетки.

<ion-footer>
    <ion-grid>
        <ion-row no-padding no-margin>
            <ion-col col-4 no-padding>
                <button ion-button full>Button 1</button>
            </ion-col>
            <ion-col col-4 no-padding>
                <button ion-button full>Button 2</button>
            </ion-col>
            <ion-col col-4 no-padding>
                <button ion-button full>Button 3</button>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-footer>
person Extrix    schedule 27.07.2017
comment
Это решение кажется более ионным, не касаясь css, хотя использование сетки для миссии с одной кнопкой по центру кажется немного излишним. - person Xi Xiao; 27.07.2017

arrow_upward
1
arrow_downward

Вы можете добавить float-start и float-end к первой и третьей кнопке соответственно. При использовании float-[start|end] вместо float-[left|right] ваши кнопки изменят положение в направлении приложения.

HTML:

<ion-footer>
  <div class="btn-wrapper">
    <button ion-button float-start>Button1</button>
    <button ion-button>Button2</button>
    <button ion-button float-end>Button3</button>
  </div>
</ion-footer>

CSS:

.btn-wrapper {
    text-align: center;
}

РЕДАКТИРОВАТЬ: добавил обертку <div> для кнопок и придал ей стиль text-align: center;, потому что я испытывал странное поведение анимации без обертки <div>.

person robbannn    schedule 27.07.2017