Stimulus를 사용하여 크기 조정 가능한 탐색 만들기

이 기사는 원래 Rails Designer에 게시되었습니다. 즉, ViewComponent로 구축되고 Tailwind CSS로 디자인되었으며 Hotwire로 향상된 Rails 앱용 UI 구성 요소 라이브러리입니다.

---

요즘 대부분의 화면이 지원하기에 충분히 넓은 사이드바 탐색 기능이 앱에 있는 경우 크기 조정이 가능하도록 추가하는 것이 좋은 기능일 수 있습니다. 이러한 사용자 정의를 제공하면 사용자가 현재 작업에 맞게 화면을 조정할 수 있습니다. 다음 번 큰 작품을 작성하는 데 집중하고 싶거나 화면을 분할하여 기본 너비를 너무 넓게 만들었을 수도 있습니다.

이유가 무엇이든 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 클래스를 사용하고 있지만 이 예에서는 필요하지 않습니다. 물론 원하는 대로 스타일을 지정할 수도 있습니다.

이제 자극 컨트롤러입니다. 위에서 알 수 있듯이 핸들러(드래그하여 크기를 조정할 수 있는 요소)는 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>
    `
  }
}

이렇게 하면 nav 요소(절대 위치) 옆에 핸들러가 삽입됩니다. 또한 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()을 추가해 보겠습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!