Erstellen Sie ein Dropdown mit React JS, Font Awesome und LESS CSS

Heute werde ich darüber sprechen, wie man ein Dropdown-Steuerelement mit erstellt Reagiere JS, WENIGER CSSund Schriftart genial. 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.

Das Dropdown selbst ist eine React JS-Klasse, die mit LESS CSS gestaltet ist, um einige ausgefallene Animationen zum Öffnen und Schließen bereitzustellen. Du kannst es sehen hier.
Ich werde den Artikel in mehrere Abschnitte unterteilen. Zuerst gehen wir die Dropdown-React-Klasse durch, einschließlich der Ansicht und der Event-Handler, und dann bespreche ich das CSS, das verwendet wird, um die ausgefallenen Animationen für das Dropdown-Menü zu erstellen. Diese Beschreibung ist keineswegs für den Produktionseinsatz gedacht; Es ist hier eher ein Tutorial, das zeigt, wie man eine React-Klasse erstellt, anstatt irgendeine Art von produktionsbereitem Steuerelement.

Notiz: Das hier gezeigte CSS stimmt möglicherweise nicht genau mit dem überein, was Sie auf der Demoseite sehen, da ich möchte, dass die Demo mit einem hübschen Styling zumindest halbwegs anständig aussieht. Größtenteils werde ich jedoch versuchen, das CSS im Tutorial so einfach wie möglich zu halten.

Reagieren

var Dropdown = React.createClass({
  getInitialState: function() {
    return {
      listVisible: false
    };
  },
  
  select: function(item) {
    this.props.selected = item;
  },
        
  show: function() {
    this.setState({ listVisible: true });
    document.addEventListener("click", this.hide);
  },
        
  hide: function() {
    this.setState({ listVisible: false });
    document.removeEventListener("click", this.hide);
  },
      
  render: function() {
    return <div className={"dropdown-container" + (this.state.listVisible ? " show" : "")}>
      <div className={"dropdown-display" + (this.state.listVisible ? " clicked": "")} onClick={this.show}>
        <span style={{ color: this.props.selected.hex }}>{this.props.selected.name}</span>
        <i className="fa fa-angle-down"></i>
      </div>
      <div className="dropdown-list">
        <div>
          {this.renderListItems()}
        </div>
      </div>
    </div>;
  },
        
  renderListItems: function() {
    var items = [];
    for (var i = 0; i < this.props.list.length; i++) {
      var item = this.props.list[i];
      items.push(<div onClick={this.select.bind(null, item)}>
        <span style={{ color: item.hex }}>{item.name}</span>
      </div>);
    }
    return items;
  }
});
      
var colours = [{
  name: "Red",
  hex: "#F21B1B"
}, {
  name: "Blue",
  hex: "#1B66F2"
}, {
  name: "Green",
  hex: "#07BA16"
}];

React.render(<Dropdown list={colours} selected={colours[0]} />, document.getElementById("container"));

Als erstes erstellen wir hier die Dropdown Klasse durch Aufrufen von React’s createClass Methode. Das getInitialState Die Funktion richtet den Status des Dropdown-Menüs ein, wenn es zum ersten Mal erstellt wird, nämlich dass der Listenteil derzeit nicht sichtbar ist. Die Klasse nimmt zwei verschiedene Requisiten, wenn sie erstellt wird: aufführen und ausgewählt. Ersteres ist die Liste der Elemente, die angezeigt werden sollen, wenn der Benutzer das Dropdown-Menü öffnet, und letzteres ist das aktuell ausgewählte Element.

Danach gibt es drei Methoden zur Ereignisbehandlung: auswählen, Show und ausblenden. Die select-Methode verarbeitet, wenn der Benutzer auf ein Listenelement klickt und setzt die selected Stütze. Show und Hide sind für das Ein- bzw. Ausblenden der Liste der Elemente verantwortlich.

Das machen -Methode ist eine erforderliche Funktion für eine React-Klasse und für die Erstellung des HTML-Codes verantwortlich, der dem Client angezeigt wird. Hier setzen wir verschiedene CSS-Klassen (auf die ich später noch eingehen werde), um sowohl den verborgenen als auch den angezeigten Status für die Dropdown-Liste zu gestalten. Der Click-Handler wird auf dem Label-Container eingerichtet. Das renderListItems -Methode ist für das Rendern jedes einzelnen Listenelements verantwortlich div. Das Label für jedes Element hat auch seine Farbe CSS-Eigenschaft festgelegt, um zusätzliches Feedback zu geben, für welches Element der Benutzer auswählen kann.

Schließlich rendern wir die Dropdown-Klasse mit React render -Methode, während Sie die Liste der vorgefertigten Farben und die ausgewählte Farbe als Requisiten angeben.

WENIGER CSS

@height:40px;
@spacing:10px;
@select-colour:#2875C7;
@font-size:14px;
@border-colour:#DDD;
      
div.dropdown-container {
  &.show>div.dropdown-list {
    .transform(scale(1, 1));
  }

  @icon-width:14px;
        
  >div.dropdown-display {
    float:left;
    width:100%;
    background:white;
    height:@height;
    cursor:pointer;
    border:solid 1px @border-colour;
    .border-box;

    >* {
      float:left;
      height:100%;
      .vertical-centre(@height);
    }
    
    >span {
      font-size:@font-size;
      width:100%;
      position:relative;
      .border-box;
      padding-right:@icon-width+@spacing*2;
      padding-left:@spacing;
    }
    
    >i {
      position:relative;
      width:@icon-width;
      margin-left:(@spacing+@icon-width)*-1;
      font-size:1.125em;
      font-weight:bold;
      padding-right:@spacing;
      text-align:right;
    }
  }

  >div.dropdown-list {
    float:left;
    width:100%;
    position:relative;
    width:100%;
    .transform(scale(1, 0));
    .transition(-webkit-transform ease 250ms);
    .transition(transform ease 250ms);

    >div {
      position:absolute;
      width:100%;
      z-index:2;
      cursor:pointer;
      background:white;

      >div {
        float:left;
        width:100%;
        padding:0 @spacing;
        font-size:@font-size;
        .border-box;
        border:solid 1px @border-colour;
        border-top:none;

        @icon-width:20px;

        &:hover {
          background:#F0F0F0;
        }

        &.selected {
          background:@select-colour;
          color:white;
        }

        >* {
          .vertical-centre(@height);
        }

        >span {
          float:left;
          width:100%;
        }
      }
    }
  }
}

Im CSS-Bereich richten wir nur das Erscheinungsbild des Dropdown-Menüs ein. Das Dropdown-Liste Klasse zeigt, wie ich die Animation mache, um die Dropdown-Liste anzuzeigen und auszublenden, die a ist Skala Betrieb. Aufgrund der Kompatibilität mit Mobilgeräten animiere ich die Transformation anstelle der Höhe. Ein Browser ist wirklich gut darin, zwei Dinge zu animieren: Deckkraft und Transformationen (wie zum Beispiel Skalierung). Auf einem mobilen Gerät führt die Verwendung von Übergang mit Höhe zu einer schlechten Leistung, aber die Transformationsskalierung funktioniert viel, viel besser.

Fazit

Und das ist es! Ähnlich wie oben habe ich auch eine Angular-Demoseite zusammengestellt, die das Dropdown 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 *