СИТУАЦИЯ :

В моем приложении Ionic 2 мне нужно, чтобы кнопка меню состояла из двух строк: значка и текста.

Проблема в том, что каким-то образом директива ion-button заставляет кнопку находиться в одной строке.

Мне нужна директива ion-button, чтобы быть уверенным, что кнопка всегда имеет правильное форматирование и правильное позиционирование. Мне просто нужно, чтобы эта кнопка была на двух строках.

Это html и css моей попытки:

HTML :

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle="left" start>
      <ion-icon name="menu"></ion-icon> 
      <br />
      <p class="menuSubTitle">MENU</p>
    </button>
    <ion-title>
      HomePage
    </ion-title>
    <button ion-button menuToggle="right" end>
      <ion-icon name="person"></ion-icon>
      <br />
      <p lass="menuSubTitle">LOGIN</p>
    </button>
  </ion-navbar>
</ion-header>

CSS :

.menuSubTitle {   
  font-size: 0.6em;
  float:left;
  display: block;
  clear: both;
}

ВОПРОС :

Как сделать ионную кнопку на две строчки?

Спасибо!

12
FrancescoMussi 25 Ноя 2016 в 14:51

3 ответа

Лучший ответ

Вы идете в правильном направлении. Для его работы требуется небольшая модификация.

Вот моя разметка:

<button ion-button block color="menu-o">
    <div>
        <ion-icon name="flash"></ion-icon>
        <label>Flash</label>
    </div>
</button>

Внутренний <div> внутри <button> - это уловка. Единственное, что нужно для этой разметки, - установить элемент <label> на display: block.

Поскольку <p> уже является элементом уровня блока. Он может работать как есть.

22
Kurt Schwanda 11 Янв 2019 в 18:01

Это сделает свое дело:

.button-inner {
  flex-flow: column;
}

Это изменит порядок элементов с горизонтального на вертикальный.

2
Nino Škopac 7 Авг 2018 в 21:26

Вы должны изменить высоту кнопки, если хотите, чтобы она была немного красивее. (например, с полем значка)

.button-icon-top {
  height: 5em;
  .button-inner {
    flex-flow: column;

    .icon {
      margin-bottom: 10px;
      font-size: 2em;
    }
  }
}

Просто добавьте название класса к вашей кнопке.

<button ion-button full large class="button-icon-top">
  <ion-icon name="logo-twitter"></ion-icon>
  <span>Click me</span>
</button>
0
Dominik 10 Май 2019 в 13:17