Question

我的html如下所示

<ion-content padding>
  <ion-card>
    <ion-card-header>
      Header
    </ion-card-header>

    <ion-card-content>
      <form (ngSubmit)='someAction()'>

        <ion-item>
          <ion-label stacked>Some Label</ion-label>
          <ion-input name="some-input" type="text" value="some-value"></ion-input>
        </ion-item>

      </form>
    </ion-card-content>
  </ion-card>
</ion-content>

输入通常具有蓝色底部轮廓，然后在填充时变为绿色。

但是，在卡内使用时，只有在单击输入并输入值时才会出现轮廓。

即使把它放在卡片内，有没有办法让轮廓显示？

Answer 1

这是离子中的一个已知问题 https://github.com/ionic-team/ionic/issues/11640

但是，您可以通过将此代码添加到app.scss来解决此问题，直到团队修复此问题为止。

.card-md .item-md.item-block:not(:last-child) .item-inner {
  border-bottom: 1px solid #dedede;
}

.card-md .item-md.item-block:not(.item-input):not(.item-select):not(.item-radio):not(.item-checkbox) .item-inner {
  border: 0;
}

Answer 2

我做到了

ion-input {
    border-bottom: 0.5px solid map-get($colors, primary);
}

它很简单，并且显示所有输入，底部的线条像聚焦一样。这不是我想要的结果，但它比显示空白输入更好。

离子2 - 卡内的离子输入失去轮廓

2 个答案: