ioni c 4 меняет цвет ионной метки, когда фокусируется внутри элемента - PullRequest
Новая
       7

ioni c 4 меняет цвет ионной метки, когда фокусируется внутри элемента

0 голосов
/ 25 февраля 2020

Я хочу изменить ion-label цвет внутри ion-item с ion-input в фокусе.

img 1

Я могу изменить выделите цвет ion-item, используя --highlight-color-focused: yellow;, но не можете изменить цвет label.

img 2

Цвет метки по умолчанию отображается как основной но я хочу изменить его как «предупреждение» или, если требуется, любой другой цвет.

Я пробовал следующее решение, упомянутое в репозитории Ioni c github для той же проблемы, но не получило мою проблему решено.

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

Следующий код, который я использовал

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.s css

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);
    }
}

Ответы [ 2 ]

2 голосов
/ 25 февраля 2020

добавьте это на свою страницу.s css

ion-item.item-has-focus > ion-label{
  color: red !important;
}
0 голосов
/ 18 апреля 2020

ion-item

Но из-за инкапсуляции материала "--color-Activated" не будет работать должным образом. Самый простой способ - нацелить ионную метку напрямую с помощью! Important. Это мой файл по умолчанию "s css". 

.ion-item{
    --ripple-color: transparent;
    &.item-has-focus ion-label {
        color: gray !important;
    }
    ion-input {
        --padding-bottom: 0 !important;
        --padding-top: 0 !important;
    }
}
...