Ионная сетка

Question

Ионная сетка

<ion-grid>

  <ion-row wrap style="background-color: #25dfc3">
    <ion-col>
      <ion-slides pager>
          <ion-slide>
            <h1>Slide 1</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 2</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 3</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 4</h1>
            </ion-slide>
        </ion-slides>
      </ion-col>
  </ion-row>

  <ion-row style="background-color: #ffffff;">
    <ion-col>Amethyst!</ion-col>
  </ion-row>

</ion-grid>

Есть ли способ сделать мой первый ряд больше второго? Я смотрел много уроков, но кажется, что решения flexbox мне не помогают.

-1

ionic-framework flexbox ionic2 row ion-grid

Источник

user5099052 05 фев '18 в 06:16

2 ответа

Другие вопросы по тегам ionic-framework flexbox ionic2 row ion-grid

user5099052 20 фев '18 в 05:52 2018-02-20 05:52 · Answer 1 · 2018-02-20 05:52

Я решил проблему с Flex следующим образом:

<ion-grid>

  <ion-row class="top">
    <ion-col>
      <ion-slides pager>
          <ion-slide>
            <div class="sprite">

            </div>
          </ion-slide>
          <ion-slide>
            <h1>Slide 2</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 3</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 4</h1>
            </ion-slide>
        </ion-slides>
      </ion-col>
  </ion-row>


  <ion-row style="background-color: #ffffff;">
    <ion-col col-1></ion-col>
    <ion-col col-10>
        <button ion-button block (click)="login()"  >Inicia sesión con Facebook</button>
        <p></p>
        <button ion-button block  color="secondary" (click)="pushPage()" >Accesa con tu teléfono</button>
        <p></p>
        <a href="#">Términos y condiciones</a>
    </ion-col>
    <ion-col col-1></ion-col>
  </ion-row>

</ion-grid>

login-tutorial{
.top {
    flex: 4;
    background-color: #e8343b;
}

.button-block{
    margin-top: 14px;
}

a {
    text-align: center;
    font-size: .7em;

    float: left;
    margin-left: 30%;
    margin-top: 18%;

}

h1  {
    color: #fbb034;
}

.swiper-pagination-bullet-active {
    background: #fbb034;
    opacity: 1;
}

.sprite {
    width: 47.25px;
    height: 51px;

    /*margin-left: 42%;*/
    margin: auto;
    background-image: url("../../assets/imgs/babyL.png");

    animation: luigui 1s steps(11, end) infinite;
}

@keyframes luigui {
    from {
        background-position: 0px;
    }
    to{
        background-position: -549.25px;
    }
}
}

скриншот 1

Затем я скопировал тот же код в другое приложение, однако результат был другим. Кажется, что Flex не работает...

скриншот 2

user5866781 05 фев '18 в 09:23 2018-02-05 09:23 · Answer 2 · 2018-02-05 09:23

На самом деле вы можете просто добавить высоту в первом ряду.

<ion-grid>

    <ion-row wrap style="background-color: #25dfc3; height: 300px;">
        <ion-col>
            <ion-slides pager>
                <ion-slide>
                    <h1>Slide 1</h1>
                </ion-slide>
                <ion-slide>
                    <h1>Slide 2</h1>
                </ion-slide>
                <ion-slide>
                    <h1>Slide 3</h1>
                </ion-slide>
                <ion-slide>
                    <h1>Slide 4</h1>
                </ion-slide>
            </ion-slides>
        </ion-col>
    </ion-row>

    <ion-row style="background-color: #ffffff;">
        <ion-col>Amethyst!</ion-col>
    </ion-row>

</ion-grid>

Посмотреть его здесь: https://stackblitz.com/edit/ionic-rhdvzq