离子柱的动态宽度与含量长度的关系

Question

我有一个动态离子2网格系统

<div>
<ion-row>
  <ion-col >
    <ion-card-header class="card-header">
      {{hunt.title}}
    </ion-card-header>
  </ion-col>
  <ion-col *ngIf="!hunt.claims.length" >
    <button ion-fab mini class="new-claim">
      <ion-icon name="disc"></ion-icon>
    </button>
  </ion-col>
</ion-row>
</div>

如您所见，这里有2列，但其中一列是有条件的。 如果没有索赔，我希望标题占据整个空间。 但如果有索赔，可以容纳fab按钮。

但是通过上面的设置，如果标题很长，按钮就会超出div之外的可见性。 我可以将width-80添加到title列。 但即使声称不存在，它也只需要80％的空间。

我怎样才能确保所有内容都可见，占用整个空间，如果有溢出标题，则溢出被隐藏。

Answer 1

您可以根据hunt.claims.length有条件地为1st ion-col应用class 。 通过这种方式，如果第一个ion-col上存在类，则可以利用CSS特性重新应用新的CSS规则。

<ion-row>
  <ion-col ng-class="{'take-full-width': !hunt.claims.length}">
    <ion-card-header class="card-header">
      {{hunt.title}}
    </ion-card-header>
  </ion-col>
  <ion-col *ngIf="!hunt.claims.length" >
    <button ion-fab mini class="new-claim">
      <ion-icon name="disc"></ion-icon>
    </button>
  </ion-col>
</ion-row>

CSS

.card-header{
   /* My older CSS for card-header */
}

.take-full-width .card-header{
   /* Change width in specific case */
   width: 100%;
}