ionic 4 在离子项目中聚焦时更改离子标签颜色

Posted 2023-03-07

【中文标题】ionic 4 在离子项目中聚焦时更改离子标签颜色

【英文标题】：ionic 4 change ion label color when focused within ion item

【发布时间】：2020-06-09 02:04:50

【问题描述】：

我想在焦点集中时用ion-input 更改ion-item 内的ion-label 颜色。

我可以使用--highlight-color-focused: yellow; 更改ion-item 的突出显示颜色，但无法更改label 颜色。

它显示标签的默认颜色作为主要颜色，但我想将其更改为“警告”或如果需要任何自定义颜色。

我已经尝试了 Ionic 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.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);
    

【问题讨论】：

输入商品的代码，以便我告诉你该怎么做。

我已经更新了我的帖子。请检查一次。

loginLabel 的类在哪里。也请添加...

忽略那个，我没有使用那个类。刚刚提到。

好吧，在 ion-item.loginLabelcolor:yellow 里面，如果你喜欢它不会上色？

【参考方案1】：

在你的 page.scss 中添加这个

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

【参考方案2】：

ion-item

但由于材料封装，“--color-activated”无法正常工作。最简单的方法是直接使用 !important 定位离子标签。 这是我默认的 ion-item "scss" 文件。

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

【参考方案3】：

只需将 !important 添加到您的颜色中，它就会专注于您添加的颜色

ion-label 
    color: #fff !important;