यह लेख मूल रूप से रेल्स डिज़ाइनर पर प्रकाशित हुआ था - रेल्स ऐप के लिए यूआई घटक लाइब्रेरी, व्यूकंपोनेंट के साथ बनाया गया, टेलविंड सीएसएस के साथ डिज़ाइन किया गया और हॉटवायर के साथ बढ़ाया गया।

यदि आपके ऐप में साइडबार नेविगेशन है, जो इन दिनों अधिकांश स्क्रीन के समर्थन के लिए पर्याप्त चौड़ा होने के साथ काफी आम है, तो इसे आकार बदलने योग्य बनाना एक शानदार सुविधा हो सकती है। यह अनुकूलन देने से आपके उपयोगकर्ताओं को मौजूदा कार्य के लिए स्क्रीन में बदलाव करने की अनुमति मिलती है। हो सकता है कि वे अपना अगला बड़ा लेख लिखने पर ध्यान केंद्रित करना चाहते हों या हो सकता है कि उन्होंने अपनी स्क्रीन को विभाजित कर दिया हो, जिससे डिफ़ॉल्ट चौड़ाई थोड़ी अधिक चौड़ी हो गई हो।

कारण जो भी हो, जावास्क्रिप्ट और इस प्रकार स्टिमुलस के साथ साइडबार नेविगेशन (या किसी अन्य घटक) का आकार बदलना आसान है। आइए सीधे गहराई से जानें। आइए HTML में मूल बातें सेट करें:

  

  

    
Content for your app here
  

उपरोक्त HTML टेलविंड सीएसएस कक्षाओं का उपयोग कर रहा है, लेकिन इस उदाहरण के लिए यह आवश्यक नहीं है। बेशक आप इसे अपनी पसंद के अनुसार स्टाइल कर सकते हैं।

अब उत्तेजना नियंत्रक। जैसा कि आपने ऊपर देखा, हैंडलर (वह तत्व जिसे आकार बदलने के लिए खींचा जा सकता है) HTML में नहीं जोड़ा गया है, इसके बजाय इसे 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 `
      
    `
  }
}

यह नेव-तत्व (पूर्ण स्थिति) के बगल में हैंडलर को इंजेक्ट करेगा। इसमें माउसडाउन इवेंट पर सेटअप() को फ़ायर करने की एक क्रिया भी है। चलिए इसे जोड़ते हैं।

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

यहाँ क्या हो रहा है? माउसमूव और माउसअप ईवेंट पर क्रमशः #resize() और #stop() क्यों न जोड़ें। यह सुनिश्चित करना है कि यह नियंत्रक उदाहरण को संदर्भित करता है जब आकार बदलने और रोकने को ईवेंट श्रोता कहा जाता है, जो नियंत्रक गुणों और विधियों तक पहुंच को संरक्षित करता है।

आइए निजी फ़ंक्शन #resize() और #stop() जोड़ें।

export default class extends Controller {
  // …

  // private

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

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

    if (width 



 #resize() फ़ंक्शन माउस स्थिति (event.clientX) के आधार पर कंटेनर की नई चौड़ाई की गणना करता है और कंटेनर की चौड़ाई को अपडेट करता है, यह सुनिश्चित करते हुए कि यह अधिकतम अनुमत चौड़ाई (मानों में सेट) से अधिक नहीं है। #stop() फ़ंक्शन रिसाइज़िंग वैल्यू को ग़लत पर सेट करके और ईवेंट श्रोताओं को हटाकर आकार बदलने की प्रक्रिया को रोक देता है।

यदि आप अपने ब्राउज़र पर जाते हैं, तो अब आप ब्राउज़र का आकार बदल सकते हैं और इसे maxWidth (डिफ़ॉल्ट रूप से 360px) के रूप में निर्धारित मान से अधिक चौड़ा नहीं कर सकते हैं।

बहुत बढ़िया! ? स्टिमुलस का उपयोग करके आपको अपने ऐप में एक तत्व का आकार बदलने की आवश्यकता है। यहां से आप उपयोगकर्ता की सेटिंग्स में मूल्य को संग्रहीत करके सुधार कर सकते हैं (उदाहरण के लिए रेडिस के माध्यम से) सभी ब्राउज़रों में समान होने के लिए या इसे उस सत्र के लिए संग्रहीत करने के लिए ब्राउज़र के लोकलस्टोरेज में संग्रहीत करके (रेल डिज़ाइनर इसके लिए जेएस उपयोगिता प्रदान करके आपकी सहायता करता है)।