How to reuse floating labels?

Ionic Framework
1

Greetings! I’m using "@ionic/angular": "7.4.1" and need your advice.

Almost every Control in my form supports floating labels (ion-input, ion-checkbox, ion-select, etc), but I have one special/custom Control which should also blend in. How can I integrate ionic floating labels? are there some css-classes which I can reuse? or Providers? Or other API’s?

(side note: since upgrading to v7 I’m forced to use the experimental <ion-text slot="label" color="medium"> because both label and value use the same --color variable)

2

did you find a solution?

3

not a good one. I mimicked the floating label:

:host {
  .input-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
    margin-top: calc($floating-font-size * 1.2 + $padding-top);
    min-height: utils.pxToRem(34); // 18 span + 2 * 8 inner padding

    > span {
      margin-right: 4px;
    }
  }

  label {
    position: absolute;
    inset: 50% 0 auto 0;
    color: var(--ion-color-medium, #92949c);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
    pointer-events: none;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  &.has-value label, &.input-has-focus label {
    inset: $padding-top 0 auto 0;
    transform: translateY(0);
    font-size: $floating-font-size;
  }
}

it looks as desired but I would recommend to look into Ionics GitHub and take their css rules instead