Ionic 7.8：如何将自定义格式应用于离子输入

Question

如果想要的结果是这样的：

我试图在 Ionic 中实现这一目标，却陷入了死胡同。显然，这是 vanilla css 中非常直接的格式化任务。但是，如果不付出巨大的努力，迫使离子成分看起来相同似乎是不可能的......

这就是我目前所处的位置。我意识到这很混乱，但它可以说明这种方法。到目前为止，我已经尝试了很多事情并且已经接近了，但随后又因为代码变得如此复杂而感到厌恶而再次将其拉低。

具体问题是：

1. 无法控制离子输入元件的高度。
2. 找不到令人满意的方法来居中或移动输入文本（移动单位很容易 - 它位于我可以直接访问的 div 中）。

使用此代码：

<ion-item
  [ngClass]="classes"
  class="monkey-ion-item"
  lines="none">

  <!-- Label Text -->
  <span class="label-span"> {{ label }} </span>

  <!-- User Input -->
  <ion-input
    #ionInputEl
    [value]="inputModel"
    (ionInput)="onInput($event)"
    (ionBlur)="onBlur()"
    class="monkey-ion-input right-aligned"
  >

    <!-- Label -->
    <div slot="label" class="monkey-input-label">{{ units }}</div>

  </ion-input>

</ion-item>

还有这个scss：

/** Main Styles */
.monkey-ion-item {
  --padding-start: 0;
  --inner-padding-end: 0;

  // height: 42px;

  --background: transparent;

  width: 100%;
  display: flex;
  align-items: bottom;

  .label-span {
    @extend .text-medium;

    flex: 1;
    margin-right: 8px;
    white-space: nowrap;        // prevent wrapping
    overflow: hidden;           // handle overflow
    text-overflow: ellipsis;    // show ... when text is too long
  }


  .monkey-ion-input {
    @extend .text-medium;

    --background: transparent;
    max-width: 120px;
    transition: border-color 0.2s ease;

    border-bottom: 1px solid var(--dark-gray);  // Move the border to the container

    &:focus-within {  // Change border when input is focused
      border-bottom-color: var(--lines-and-text);
    }

    .monkey-input-label {
      color: var(--gray);
      transform: translateY(7px); // moves label (units) down
    }
  }
}

我使用 ::ng-deep 取得了一些进展，然后破解了各种元素。但这不是一种可以接受的方法。我开始认为我在尝试调整离子组件上有点浪费时间。除非我错过了一些非常明显的东西......

Answer 1

我运气不好，偶然发现了答案：

.monkey-ion-input {
  @extend .text-large;

  // ** Needed to override internal min-height **
  min-height: 26px;
  height: 26px;
  text-align: right;
  ...
}

在元素内部的某个地方应用了最小高度，以防止高度更改为低于该数字。之后，高度可以很好地改变，其余的就很简单了。

注意我发现这在 Ionic 7 中是必要的，但在 Ionic 8 中不是必需的。因此，这里真正的要点是，在受支持的 CSS 变量等之外自定义 Ionic 组件是一项非常危险的事情，可能会给您带来令人讨厌的脆弱代码。