"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > Créez une navigation redimensionnable avec Stimulus

Créez une navigation redimensionnable avec Stimulus

Publié le 2024-11-08
Parcourir:364

Cet article a été initialement publié sur Rails Designer : bibliothèque de composants d'interface utilisateur pour l'application Rails, construite avec ViewComponent, conçue avec Tailwind CSS et améliorée avec Hotwire.


Si votre application dispose d'une barre de navigation latérale, ce qui est assez courant, la plupart des écrans étant suffisamment larges pour être pris en charge de nos jours, la rendre redimensionnable pourrait être une fonctionnalité intéressante à ajouter. Donner cette personnalisation permet à vos utilisateurs de modifier l’écran en fonction de la tâche à accomplir. Peut-être qu'ils veulent se concentrer sur l'écriture de leur prochain gros morceau ou peut-être qu'ils divisent leur écran, ce qui rend la largeur par défaut un peu trop large.

Create a Resizable Navigation with Stimulus

Quelle que soit la raison, redimensionner la navigation de la barre latérale (ou tout autre composant) est facile avec JavaScript et donc avec Stimulus. Allons-y directement. Définissons les bases du HTML :

Content for your app here

Ci-dessus, HTML utilise les classes CSS Tailwind, mais ce n'est pas obligatoire pour cet exemple. Vous pouvez bien sûr le styliser comme bon vous semble.

Maintenant, le contrôleur de stimulus. Comme vous l'avez remarqué ci-dessus, le handler (l'élément qui peut être glissé pour redimensionner) n'est pas ajouté dans le HTML, il sera plutôt injecté avec JS.

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 `
      
    `
  }
}

Cela injectera le handler à côté de l'élément de navigation (position absolue). Il a également une action pour déclencher setup() lors de l'événement mousedown. Ajoutons-le.

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);
  }
  // …
}

Que se passe-t-il ici ? Pourquoi ne pas ajouter les #resize() et #stop() respectivement sur les événements mousemove et mouseup. Cela permet de garantir que cela fait référence à l'instance du contrôleur lorsque resize et stop sont appelés en tant qu'écouteurs d'événements, préservant ainsi l'accès aux propriétés et méthodes du contrôleur.

Ajoutons les fonctions privées #resize() et #stop().

export default class extends Controller {
  // …

  // private

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

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

    if (width 



La fonction #resize() calcule la nouvelle largeur du conteneur en fonction de la position de la souris (event.clientX) et met à jour la largeur du conteneur, en s'assurant qu'elle ne dépasse pas la largeur maximale autorisée (définie dans les valeurs). La fonction #stop() arrête le processus de redimensionnement en définissant resizingValue sur false et en supprimant les écouteurs d'événements.

Si vous accédez à votre navigateur, vous pouvez désormais redimensionner le navigateur et ne pas le rendre plus large que la valeur définie comme maxWidth (360 px par défaut).

Génial ! ? C'est tout ce dont vous avez besoin pour redimensionner un élément de votre application à l'aide de Stimulus. À partir de là, vous pouvez améliorer en stockant la valeur dans les paramètres de l'utilisateur (par exemple via Redis) pour qu'elle soit la même dans tous les navigateurs ou en la stockant dans LocalStorage du navigateur pour la stocker pour cette session (Rails Designer vous aide en fournissant des utilitaires JS pour cela).

Déclaration de sortie Cet article est reproduit sur : https://dev.to/railsdesigner/create-a-resizing-navigation-with-stimulus-mkk?1 En cas d'infraction, veuillez contacter [email protected] pour le supprimer.
Dernier tutoriel Plus>

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3