使用 Stimulus 建立可調整大小的導航

本文最初發佈於 Rails Designer——Rails 應用程式的 UI 元件庫，使用 ViewComponent 構建，使用 Tailwind CSS 設計並使用 Hotwire 增強。

---

如果您的應用程式有側邊欄導航（這在大多數螢幕足夠寬的情況下很常見），那麼調整其大小可能是一個很好的添加功能。進行此自訂可讓您的使用者根據手邊的任務調整畫面。也許他們想專注於編寫下一個大作品，或者也許他們分割了螢幕，使預設寬度有點太寬。

無論什麼原因，使用 JavaScript 以及 Stimulus 都可以輕鬆調整側邊欄導航（或任何其他元件）的大小。讓我們開始吧。讓我們在 HTML 中設定基礎知識：

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

上面的 HTML 使用的是 Tailwind CSS 類，但這對於這個範例來說不是必需的。當然，你可以隨心所欲地設計它。

現在是刺激控制器。正如您從上面注意到的，handler（可以拖曳調整大小的元素）沒有添加到 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 `
      <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>
    `
  }
}

這將在導航元素（絕對定位）旁邊注入處理程序。它還具有在 mousedown 事件上觸發 setup() 的操作。讓我們添加它。

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

這是怎麼回事？為什麼不分別在 mousemove 和 mouseup 事件上加上 #resize() 和 #stop() 呢？這是為了確保當 resize 和 stop 作為事件偵聽器呼叫時 this 引用控制器實例，保留對控制器屬性和方法的存取。

讓我們新增私有函數#resize() 和#stop()。

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

  // …
}

#resize() 函數根據滑鼠位置 (event.clientX) 計算容器的新寬度並更新容器的寬度，確保其不超過允許的最大寬度（在值中設定）。 #stop() 函數透過將 resizingValue 設為 false 並刪除事件偵聽器來停止調整大小程序。

如果您轉到瀏覽器，您現在可以調整瀏覽器的大小，並且不會使其比設定的 maxWidth 值（預設為 360px）更寬。

太棒了！ ？這就是使用 Stimulus 調整應用程式中元素大小所需的全部內容。從這裡，您可以透過將值儲存在使用者設定中（例如透過Redis）來改進，以便在瀏覽器之間保持相同，或者將其儲存在瀏覽器的LocalStorage 中以儲存該會話（Rails Designer 透過為此提供JS 實用程式來幫助您）。

以上是使用 Stimulus 建立可調整大小的導航的詳細內容。更多資訊請關注PHP中文網其他相關文章！