Erstellen Sie mit Stimulus eine skalierbare Navigation

Dieser Artikel wurde ursprünglich auf Rails Designer veröffentlicht – UI-Komponentenbibliothek für die Rails-App, erstellt mit ViewComponent, entworfen mit Tailwind CSS und erweitert mit Hotwire.

---

Wenn Ihre App über eine Seitenleisten-Navigation verfügt, was bei den meisten Bildschirmen, die heutzutage breit genug sind, um sie zu unterstützen, durchaus üblich ist, kann es eine großartige Funktion sein, die Größe der App zu ändern. Durch diese Anpassung können Ihre Benutzer den Bildschirm an die jeweilige Aufgabe anpassen. Vielleicht möchten sie sich auf das Schreiben ihres nächsten großen Stücks konzentrieren oder vielleicht teilen sie ihren Bildschirm, sodass die Standardbreite etwas zu breit ist.

Was auch immer der Grund sein mag, die Größenänderung der Seitenleistennavigation (oder einer anderen Komponente) ist mit JavaScript und damit mit Stimulus einfach. Lassen Sie uns gleich eintauchen. Lassen Sie uns die Grundlagen in HTML einrichten:

<main data-controller="resizer" class="flex">
  <nav data-resizer-target="container" class="relative w-1/6">
    <!-- Imagine some nav items here -->
  </nav>

  <div class="w-5/6">
    <p>Content for your app here</p>
  </div>
</main>

Oben verwendet HTML Tailwind-CSS-Klassen, aber das ist für dieses Beispiel nicht erforderlich. Du kannst es natürlich nach Belieben stylen.

Jetzt der Stimulus-Controller. Wie Sie oben gesehen haben, wird der Handler (das Element, dessen Größe durch Ziehen geändert werden kann) nicht in den HTML-Code eingefügt, sondern stattdessen mit JS eingefügt.

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="resizer"
export default class extends Controller {
  static targets = ["container"];
  static values = {
    resizing: { type: Boolean, default: false },
    maxWidth: { type: Number, default: 360 } // in px
  };

  connect() {
    this.containerTarget.insertAdjacentHTML("beforeend", this.#handler);
  }

  // private

  get #handler() {
    return `
      <span
        data-action="mousedown->resizer#setup"
        class="absolute top-0 w-1 h-full bg-gray-200 -right-px cursor-col-resize hover:bg-gray-300"
      ></span>
    `
  }
}

Dadurch wird der Handler neben dem Navigationselement (absolut positioniert) eingefügt. Es gibt auch eine Aktion zum Auslösen von setup() beim Mousedown-Ereignis. Fügen wir es hinzu.

export default class extends Controller {
  // …
  connect() {
    this.containerTarget.insertAdjacentHTML("beforeend", this.#handler);

    this.resize = this.#resize.bind(this);
    this.stop = this.#stop.bind(this);
  }

  setup() {
      this.resizingValue = true;

      document.addEventListener('mousemove', this.resize);
      document.addEventListener('mouseup', this.stop);
  }
  // …
}

Was ist hier los? Warum nicht #resize() und #stop() zu den Ereignissen „Mousemove“ und „Mouseup“ hinzufügen? Damit soll sichergestellt werden, dass sich dies auf die Controller-Instanz bezieht, wenn resize und stop als Ereignis-Listener aufgerufen werden, wodurch der Zugriff auf Controller-Eigenschaften und -Methoden erhalten bleibt.

Fügen wir die privaten Funktionen #resize() und #stop() hinzu.

export default class extends Controller {
  // …

  // private

  #resize(event) {
    if (!this.resizingValue) return;

    const width = event.clientX - this.containerTarget.offsetLeft;

    if (width <= this.maxWidthValue) {
      this.containerTarget.style.width = `${width}px`;
    } else {
      this.containerTarget.style.width = `${this.maxWidthValue}px`;
    }
  }

  #stop() {
    this.resizingValue = false;

    document.removeEventListener('mousemove', this.resize);
    document.removeEventListener('mouseup', this.stop);
  }

  // …
}

Die Funktion #resize() berechnet die neue Breite des Containers basierend auf der Mausposition (event.clientX) und aktualisiert die Breite des Containers, um sicherzustellen, dass er die maximal zulässige Breite (in Werten festgelegt) nicht überschreitet. Die Funktion #stop() stoppt den Größenänderungsprozess, indem sie den resizingValue auf false setzt und die Ereignis-Listener entfernt.

Wenn Sie zu Ihrem Browser gehen, können Sie jetzt die Größe des Browsers ändern und ihn nicht breiter als den als maxWidth festgelegten Wert (standardmäßig 360 Pixel) machen.

Super! ? Das ist alles, was Sie brauchen, um mit Stimulus die Größe eines Elements in Ihrer App zu ändern. Von hier aus können Sie Verbesserungen erzielen, indem Sie den Wert in den Einstellungen des Benutzers (z. B. über Redis) speichern, damit er in allen Browsern gleich ist, oder ihn im LocalStorage des Browsers speichern, um ihn für diese Sitzung zu speichern (Rails Designer hilft Ihnen, indem er hierfür JS-Dienstprogramme bereitstellt).

Das obige ist der detaillierte Inhalt vonErstellen Sie mit Stimulus eine skalierbare Navigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!