离子4当聚焦在离子项目中时会改变离子标签的颜色 [英] ionic 4 change ion label color when focused within ion item

问题描述

我想在聚焦时用ion-input用ion-item更改ion-item内部的ion-label颜色.

I want to change ion-label color inside an ion-item with ion-input when focused.

我可以使用--highlight-color-focused: yellow;更改ion-item的突出显示颜色，但是不能更改label的颜色.

I am able to change the highlight color of ion-item using --highlight-color-focused: yellow; but unable to change the label color.

它将标签的默认颜色显示为主要颜色，但我想将其更改为警告"或需要的话，使用任何自定义颜色.

It is showing default color of label as primary but I want to change it as 'warning' or if required any custom color.

我已经尝试过以下解决方案，该解决方案在Ionic github存储库中针对相同的问题而提出，但并未解决我的问题.

I've tried the following solution which is mentioned in Ionic github repository for same problem but didn't get my problem solved.

https://github.com/ionic-team/ionic/issues/18531

以下我使用的代码

login.page.html

login.page.html

<ion-content>
  <div class="logo">
    <div class="logoCenter">
      <ion-icon name="sync"></ion-icon>
    </div>
    <h1 style="font-family: ProximaBold; color: white">Sample Application</h1>
  </div>

  <ion-grid style="margin-top: 10vh;">
    <ion-row>
      <ion-col size="12">
        <ion-item>
          <ion-label class="loginLabel" position="floating">Mobile No.</ion-label>
          <ion-input type="number"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label class="loginLabel" position="floating">Password</ion-label>
          <ion-input type="password"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-grid class="ion-padding">
    <ion-row>
      <ion-col class="ion-text-center" size="12">
        <ion-button expand="full" shape="round" [routerLink]="['/home']">Submit</ion-button>
        <p style="color: white;">Forgot Password?</p>
      </ion-col>
    </ion-row>
  </ion-grid>
  <p class="registerText">New Here? SIGN UP!</p>
</ion-content>

login.page.scss

login.page.scss

ion-content {
    --background: linear-gradient(180deg, #2ecc71, #289c59, #1a743f);

    .logo {
        margin-top: 20%;
        text-align: center;
    }

    .logoCenter {
        margin: 0 auto;
        height: 150px;
        width: 150px;
        border-radius: 50%;
        background: linear-gradient(290deg, #31da79, #29b866);
        box-shadow:  20px 20px 60px #27ad60, -20px -20px 60px #35eb82;
        display: flex;
        justify-content: center;
        align-items: center;

        ion-icon {
            zoom: 4;
            color: white;
            animation: rotating 2s linear infinite;
        }
    }

    ion-item {
        --background: transparent;
        --border-color: white;
        --color: white;
        --highlight-color-focused: yellow;
    }

    ion-button {
        --background: white;
        --color: green;
    }

    .registerText {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        color: white;
        font-size: larger;
    }
}

@keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

推荐答案

将此添加到您的page.scss

add this in your page.scss

ion-item.item-has-focus > ion-label{
  color: red !important;
}

这篇关于离子4当聚焦在离子项目中时会改变离子标签的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！