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

您可以根据class有条件地对第一个ion-col应用hunt.claims.length。如果类出现在第一个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%;
}

离子柱的动态宽度与内容长度的关系

1 个答案: