ioni c слайд фиксируется по центру - PullRequest
Новая
       10

ioni c слайд фиксируется по центру

2 голосов
/ 01 августа 2020

привет, я пробую этот код для создания слайдера 

    <ion-slide>
        <ion-row>
            <ion-col>
                <ion-card mode="ios">
                    <ion-card-header>
                        <ion-img src="https://abrito.ir/uloader/UFD/4%20(1).jpg"></ion-img>
                    </ion-card-header>
                    <ion-card-content>
                        Keep
                    </ion-card-content>
                </ion-card>
            </ion-col>
        </ion-row>
    </ion-slide>

, но проблема в том, что содержимое слайдера находится в центре страницы, а огромное пустое пространство перед ионными картами

полный код: https://paste.ubuntu.com/p/mZzJHcXc54/

введите описание изображения здесь

1 Ответ

0 голосов
/ 03 августа 2020

Я думаю, вы добьетесь того же эффекта, удалив ion-row и ion-col и добавив div с гибким дисплеем. В общем, я думаю, вы должны поставить ion-grid, как говорится в документации.

Затем

Решение 1 : Добавление ion-grid

<ion-slide>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-card mode="ios">
          <ion-card-header>
            <ion-img src="https://abrito.ir/uloader/UFD/4%20(1).jpg"></ion-img>
          </ion-card-header>
          <ion-card-content>
            Keep
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-slide>

Решение 2 : изменение на DIV

<ion-slide>
  <div class="rowofcards">
    <ion-card mode="ios">
      <ion-card-header>
        <ion-img src="https://abrito.ir/uloader/UFD/4%20(1).jpg"></ion-img>
      </ion-card-header>
      <ion-card-content>
        Keep
      </ion-card-content>
    </ion-card>
  </div>
</ion-slide>

и на page.s css: 

.rowofcards {
  display: flex;
}

.rowofcards > * {
  flex-grow: 1;
}

Обратите внимание, что вам необходимо подать заявку больше стилей для достижения того, что вам нужно.

Кроме того, почему вы помещаете изображение в заголовок ion-card?

...