Иконка открытый/закрытый глаз для видимый/невидимый пароль

Question

как можно изменить иконку, чтоб она менялась при нажатии ?

я нашла состояние active, но оно не подходит тут,,, там только когда нажимаешь при состоянии active меняется, а как можно присвоить значение например в фунцкии-onclick, которая показывает текс/пароль, или можно может в самом css менять состояние при других атрибутах ?

.e-input-eye:before {
  content: '\e721';
  font-family: e-icons;
  font-size: 13px;
  color: green;
}

.e-input-eye:active:before {
  content: '\e345';
}

<link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-icons/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-icons/styles/material.css" rel="stylesheet" />

<span class='e-icons e-input-eye input-group-text' @onclick="ShowPasswordOnClick"></span>

public void ShowPasswordOnClick()
{
    if (this.typeMdpBtn == "password")
    {
        this.typeMdpBtn = "text";
        //content: '\e345';       
    }
    else
    {
        this.typeMdpBtn = "password";
        //content: '\e721';
    }
}

Answer 1

можно вместо названия класса css дать

class='@eye'

имя переменной типа string, которой присвоить название класса в зависимости от типа кнопки.

Менять название классов в функции onClick где мы и меняем собственно сам тип кнопки

в данном примере я использую переменную eye

.e-input-eye-open:before {
  content: '\e345';
  font-family: e-icons;
  font-size: 13px;
  color: green;
}

.e-input-eye-close:active:before {
  content: '\e721';
  font-family: e-icons;
  font-size: 13px;
  color: green;
}

<link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-icons/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-icons/styles/material.css" rel="stylesheet" />

<input type="@typeMdpBtn" name="" class="someClass" @bind-value="someValue" placeholder="somePlaceholder" />
<span class='someClass @eye' @onclick="ShowPasswordOnClick"></span>


@code{
public string eye { get; set; } = "e-input-eye-open";
public string typeMdpBtn { get; set; } = "password";

  public void ShowPasswordOnClick()
  {
      if (this.typeMdpBtn == "password")
      {
          this.typeMdpBtn = "text";
          this.eye = "e-input-eye-close";       
      }
      else
      {
          this.typeMdpBtn = "password";
          this.eye = "e-input-eye-open";
      }
  }
}

БЛОГ НА HUSL

Иконка открытый/закрытый глаз для видимый/невидимый пароль

Ответы (1 шт):