Последний столбец переходит на следующий ряд в ионной сетке Ioni c 4 - PullRequest
Новая
       9

Последний столбец переходит на следующий ряд в ионной сетке Ioni c 4

1 голос
/ 13 января 2020

Я пытаюсь создать нижний колонтитул с 5 кнопками / значками. На самом деле я пытаюсь повторить вкладку, но без использования этой функции. Существует достаточно места для размещения 5 значков с меткой teir, однако по какой-то причине в Android последний значок переходит на следующий ряд. Я пытался поиграть с шириной и размерами, но не смог получить желаемый результат.

Любое предложение?

Короче говоря: я хочу, чтобы в Android нижний колонтитул был отображается как Ios

Спасибо

Ios vs Android view

<ion-footer>
 <ion-toolbar color="light">
  <ion-grid>
   <ion-row> 

    <ion-col>  
      <ion-tab-button >
        <ion-icon src="/assets/couple_on.svg"></ion-icon>
        <ion-label>Info</ion-label>
      </ion-tab-button>
    </ion-col> 

    <ion-col>  
      <ion-tab-button >
        <ion-icon src="/assets/rings_off.svg"></ion-icon>
        <ion-label>Donde</ion-label>
      </ion-tab-button>
    </ion-col> 

    <ion-col>  
      <ion-tab-button >
        <ion-icon src="/assets/church_off.svg"></ion-icon>
        <ion-label>Inicio</ion-label>
      </ion-tab-button>
    </ion-col> 

    <ion-col>
      <ion-tab-button >
        <ion-icon src="/assets/cake_off.svg"></ion-icon>
        <ion-label>Programa</ion-label>
      </ion-tab-button>
    </ion-col>

    <ion-col>
      <ion-tab-button >
        <ion-icon src="/assets/camera_off.svg"></ion-icon>
        <ion-label>Fotos</ion-label>
      </ion-tab-button>
     </ion-col>        
    </ion-row>
   </ion-grid>
  </ion-toolbar>
 </ion-footer>

Редактировать: при переводе на русский язык (более длинные слова) и используя nowrap, последний значок уходил с экрана. Я пытался уменьшить размер этикетки, но по-прежнему не по центру. Это раздражает, потому что я теперь это подходит, как это видно в Ios:

enter image description here

РЕДАКТИРОВАТЬ 2: В был видеть это в симуляторе и с вашим правильно ios было в порядке. Однако в русском варианте телефон все еще уходит от экрана, а в испанском sh не центрирован, слева больше места, чем справа. (https://i.stack.imgur.com/Y377b.jpg) enter image description here enter image description here

1 Ответ

3 голосов
/ 13 января 2020

Вы можете заставить строку не переносить:

https://ionicframework.com/docs/api/row#row -атрибуты

Но в этом случае вам нужно обрабатывать меньшие размеры экрана как столбцы не будут «уменьшаться» автоматически 

<ion-footer>
 <ion-toolbar color="light">
  <ion-grid>
   <ion-row nowrap>
     ...        
    </ion-row>
   </ion-grid>
  </ion-toolbar>
 </ion-footer>

Если вам все еще не хватает места, вы можете оптимизировать его следующим образом:

a. удаление заполнения (

  • применить атрибут no-padding к ионной сетке, ионному ряду, ионному столбцу
  • или просто добавить простое CSS правило

b. Уменьшите svg с помощью size = "small"

c. Используйте Chrome инструменты разработчика, выберите элемент и посмотрите, какой css вам нужно решить, чтобы он идеально подходил

enter image description here

...