Erstellen Sie ein ausgefallenes Fokus-Textfeld mit ReactJS und LESS CSS

Heute werde ich darüber sprechen, wie man ein Fokus-Textfeld-Steuerelement mit erstellt Reagiere JS und WENIGER CSS. Die Klasse sollte Eingaben vom Typ Text und Passwort ersetzen und dem Benutzer ein relativ ausgefallenes Feedback darüber geben, welche Eingabe fokussiert ist. Ich gehe davon aus, dass Sie mit diesen Tools zumindest halbwegs vertraut sind, aber wenn Sie es nicht sind, schlage ich vor, dass Sie einen Blick auf die obigen Links werfen. Wenn Sie nur an einem Beispiel interessiert sind, können Sie es sich ansehen hier.

Ich werde den Artikel in zwei Abschnitte aufteilen. Zuerst werde ich das React-Zeug durchgehen und wie ich die Klassen aufteile und was jede der Klassen tut und so weiter. Als Nächstes besprechen wir, wie das CSS verwendet wird, um die ausgefallenen Animationen zu erstellen, die anzeigen, dass das Textfeld fokussiert wurde.

Reagieren

Ich habe zwei Klassen für den React-Bereich. Das App Klasse wird ausschließlich als Container für die Aufnahme der Anwendung verwendet, während die FocusBox Klasse wird verwendet, um das Textfeld für die Fokuseingabe zu rendern.

var App = React.createClass({
  render: function() {
    return <div>
      <FocusBox placeholder="Text..." />
      <FocusBox placeholder="Error!" error="true" />
    </div>;
  }
});
var FocusBox = React.createClass({
  getInitialState: function() {
    return {
      focused: false
    };
  },
      
  focus: function() {
    this.setState({ focused: true });
  },
        
  blur: function() {
    this.setState({ focused: false });
  },
      
  render: function() {
    return <div className={"focus-box" + (this.state.focused ? " focus" : "") + (this.props.error ? " error" : "")}>
      <div>
        <input type={this.props.type || "text"} placeholder={this.props.placeholder} onFocus={this.focus} onBlur={this.blur} />
        <div className="focus">
          <div></div>
        </div>
      </div>
    </div>;
  }
});

Das App class ist ziemlich selbsterklärend, also gibt es da nicht wirklich viel zu sagen. Für die FocusBox Klasse, wir setzen unseren Anfangszustand so, dass er nur die hat fokussiert Eigenschaft auf false gesetzt. Dies verwenden wir, um zu verfolgen, wann sich der Benutzer auf das Textfeld konzentriert. Damit verwandt sind die beiden anderen Nicht-Render-Funktionen: Fokus und verwischen, die mit den entsprechenden Ereignissen im Eingabefeld in der Rendermethode verbunden sind. Wenn sich der Benutzer auf das Textfeld konzentriert, wird die Eigenschaft „Fokussierter Status“ auf „true“ aktualisiert, um dies widerzuspiegeln, und auf „false“ gesetzt, wenn der Benutzer das Textfeld verwischt (auf etwas anderes fokussiert).

Das machen -Methode wird verwendet, um zu erstellen, was der Benutzer sieht, wenn wir a hinzufügen FocusBox zu einem Elternteil. Das className Die Eigenschaft des enthaltenden div hat ein paar Bedingungen, die ein benutzerdefiniertes Styling ermöglichen. Die erste ist die Fokusklasse, die die Hervorhebungsfarbe hinzufügt, wenn die Fokuszustandseigenschaft festgelegt ist. Die zweite ist für einen Fehlerzustand, der die Hervorhebungsfarbe auf Rot ändert.

WENIGER CSS

Notiz: Es gibt ein paar Mixins im LESS CSS unten, die nicht definiert sind. Sie werden fast ausschließlich verwendet, um hässliche Anbieterpräfixe zu verbergen. Den vollständigen LESS-Code finden Sie in der Quelle der Demoseite.

div.focus-box {
  float:left;
  display:block;
  width:250px;
  border:solid 1px #AAA;
  margin-right:15px;
  margin-top:10px;

  div {
    float:left;
    width:100%;
    text-align:inherit;

    >input {
      float:left;
      width:100%;
      -webkit-appearance:none;
      text-align:inherit;
      padding:@spacing;
      border:none;
      font-size:0.875em;
      background:white;
      outline:none;
      .border-box;
      .border-radius;
      .transition(background ease 250ms);
    }

    >div.focus {
      float:left;
      width:100%;
      margin-top:-1px;
      position:relative;
      height:1px;
      background:transparent; 
      border-color:transparent;

      >div {
        position:absolute;
        z-index:2;
        width:100%;
        .transform(scale(0, 1)); 
        height:2px;
        margin-top:-1px;
        background:@select-colour;
        .transition(all ease 250ms);
      }
    }
  }

  &.focus {
    input { background:#DEE9FA !important; }
    div.focus>div { .transform(scale(1, 1)) !important; }
  }
  &.error {
    div.focus>div { background:red !important; }	
  }
  &.focus.error {
    input { background:rgba(255, 0, 0, 0.125) !important; }
  }
}

Zur Positionierung verschieben wir die Fokusleiste um ein Pixel nach oben, um den unteren Rand des Textfelds zu verdecken. Es gibt zwei Animationen, die auftreten, wenn ein Textfeld den Fokus erhält: Erstens breiten wir die Fokusleiste über den unteren Rand der Eingabe aus, und zweitens blenden wir den Hintergrund der Eingabe blau (oder rot, falls vorhanden) aus fehlerhaft). Die erste wird mit der erreicht transformieren: skalieren Regel. Die Umwandlung der Skalierung in (0, 1) gibt an, dass die Breite des Elements als Null gerendert werden sollte, während die Höhe 100 % betragen sollte, was unsere Standardeinstellung ist. Beim Fokussieren ändert sich die Skala auf (1, 1), was anzeigt, dass die Breite wieder auf 100 % springen soll. Es ist animiert, weil wir ein haben Überleitung eingestellt für die verwandeln Eigentum. Der Hintergrund wird auf die gleiche Weise ausgeblendet, indem a hinzugefügt wird Überleitung zum Hintergrund Eigenschaft des Eingabeelements.

Fazit

Und das ist es! Wie ich oben erwähnt habe, habe ich eine Demoseite zusammengestellt, die das Textfeld in seiner endgültigen Form zeigt. Du kannst es sehen hier. Danke fürs Lesen!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *