如何使Ionic 4 ion-col具有相同的高度

debugcn 发表于 Dev

法乌兹

我有一个带有主卡的页面，该卡在网格内包含其他小卡。我希望所有列都具有相同的高度，这将是特定行内列之间的最大高度。

这是我的模板和样式：

<ion-card color="blue">
  <ion-card-content class="welcome-card-content">
    <ion-grid class="ion-no-padding">
      <ion-row >
        <ion-col >
            <ion-card color="white-blue"class="small-card">
                <ion-card-content class="white-text">
                  <ion-row class="ion-justify-content-center">
                    <ion-icon class="home-icons" name="flash"></ion-icon>
                  </ion-row>
                   <ion-row  class="ion-justify-content-center">
                      <ion-text >a very long text that takes a lot of vertical space</ion-text>
                   </ion-row>

                </ion-card-content>
            </ion-card>
        </ion-col>
        <ion-col>
            <ion-card color="white-blue" class="small-card">
                <ion-card-content class="white-text">
                  <ion-row class="ion-justify-content-center">
                    <ion-icon class="home-icons" name="add"></ion-icon>
                  </ion-row>
                   <ion-row  class="ion-justify-content-center">
                      <ion-text >simple text</ion-text>
                   </ion-row>

                </ion-card-content>
            </ion-card>
          </ion-col>
      </ion-row>
    </ion-grid>
 </ion-card-content>
</ion-card>

CSS文件

.small-card{
  margin: 3px;
  height: inherit;
}


 ion-col{
   margin: 0px;
   padding: 0px;
   height: 100%;
 }

 ion-row{
   width: 100%;
   height: auto;
  }

到目前为止，这是我的结果：

Vishwa Deepak Singh

所以这是您的解决方案：

  <div color="primary" class="main-card">
    <ion-row>
      <ion-col>
        <ion-card>
          <ion-card-content>
            <ion-row class="ion-justify-content-center">
              <ion-icon class="home-icons" name="flash"></ion-icon>
            </ion-row>
            <ion-row class="ion-justify-content-center">
              <ion-text>a very long text that takes a lot of vertical space</ion-text>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col>
        <ion-card>
          <ion-card-content>
            <ion-row class="ion-justify-content-center">
              <ion-icon class="home-icons" name="add"></ion-icon>
            </ion-row>
            <ion-row class="ion-justify-content-center">
              <ion-text>simple text</ion-text>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-card>
          <ion-card-content>
            <ion-row class="ion-justify-content-center">
              <ion-icon class="home-icons" name="flash"></ion-icon>
            </ion-row>
            <ion-row class="ion-justify-content-center">
              <ion-text>a very long text that takes a lot of vertical space</ion-text>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col>
        <ion-card>
          <ion-card-content>
            <ion-row class="ion-justify-content-center">
              <ion-icon class="home-icons" name="add"></ion-icon>
            </ion-row>
            <ion-row class="ion-justify-content-center">
              <ion-text>simple text</ion-text>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </div>

scss文件

 .main-card {
  background: var(--ion-color-primary);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  margin: 12px;
  overflow: hidden;
  ion-col {
    display: flex;
    justify-content: center;
    padding: 4px;
  }
  ion-card {
    background: #55bdef;
    margin-bottom: 12px;
    margin-top: 12px;
    width: 100%;
  }
  ion-card-content {
    color: #fff;
  }
}

这样可以解决您的问题。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。