세부 정보 메뉴 웹 구성 요소가 있는 Tailwind CSS 드롭다운

아직 알지 못했다면 GitHub에서 점점 더 많은 오픈 소스 목록을 유지 관리하고 있습니다Web Components.

하나는 사용하는 사랑입니다 details-menu-element . <details-menu> 및 <details>와 함께 사용하여 드롭다운을 생성할 수 있는 <summary> 요소를 추가합니다. 가장 좋은 점은 JavaScript를 작동시키기 위해 추가로 JavaScript를 작성할 필요가 없다는 것입니다. 모든 것이 내부에 번들되어 있습니다<details-menu>.

Vue.js 또는 React와 같은 무거운 JavaScript 프레임워크를 포함하고 싶지 않지만 여전히 액세스 가능한 드롭다운이 필요한 웹 사이트에서 이것을 사용합니다.

CodePen의 this example에서 Tailwind UI dropdown example을 <detail-menu> 사용하도록 조정했습니다.

또한 사용자가 드롭다운 외부의 아무 곳이나 클릭하면 드롭다운을 닫기 위해 일부Alpine.js를 뿌렸습니다.

소스 코드 #

Tailwind CSS 클래스 또는 Alpine.js 속성이 없는 HTML은 다음과 같습니다.

<details open>
  <summary>
    <div>
        Options
        <!-- Heroicon name: solid/chevron-down -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
    </div>
  </summary>
  <details-menu role="menu">
    <div role="none">
      <a href="#" role="menuitem">Account settings</a>
      <a href="#" role="menuitem">Support</a>
      <a href="#" role="menuitem">License</a>
      <form method="POST" action="#" role="none">
        <button type="submit" role="menuitem">
          Sign out
        </button>
      </form>
    </div>
  </details-menu>
</details>

다음으로 Alpine.js 속성을 추가했습니다. <details> -요소에서 Alpine.js를 초기화하고 $ref 를 지정합니다. 그런 다음 @click.away 이벤트를 수신하고 open 속성을 제거하여 드롭다운을 닫거나 숨깁니다.

<details
  x-data 
  x-ref="dropdown" 
  @click.away="$refs.dropdown.removeAttribute('open');" 
  open
  >
  <summary>
    <div>
        Options
        <!-- Heroicon name: solid/chevron-down -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
    </div>
  </summary>
  <details-menu role="menu">
    <div role="none">
      <a href="#" role="menuitem">Account settings</a>
      <a href="#" role="menuitem">Support</a>
      <a href="#" role="menuitem">License</a>
      <form method="POST" action="#" role="none">
        <button type="submit" role="menuitem">
          Sign out
        </button>
      </form>
    </div>
  </details-menu>
</details>

그리고 여기에 Tailwind CSS 클래스가 추가된 최종 구성 요소가 있습니다.

<!-- https://tailwindui.com/components/application-ui/elements/dropdowns#component-f8a14da22f26a67757b19f2fe3ca00ed -->

<details open x-data x-ref="dropdown" @click.away="$refs.dropdown.removeAttribute('open');" class="relative inline-block text-left">

  <summary>
    <div class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500">
      Options
      <!-- Heroicon name: solid/chevron-down -->
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </div>
  </summary>

  <details-menu role="menu" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">

    <div class="py-1" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Account settings</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Support</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">License</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">
          Sign out
        </button>
      </form>
    </div>
  </details-menu>
</details>

JavaScript 측에서는 모든 것이 작동하도록 두 개의 라이브러리만 가져와야 합니다.

import '@github/details-menu-element'

import 'alpinejs'

아웃트로 #

웹 구성 요소는 주류 웹 개발에서(또는 적어도 내 거품에서는) 따라잡지 못했지만 많은 잠재력을 보고 있습니다.

특히 "머리가 없는"<details-menu> 구성 요소와 스타일이 첨부되지 않은 구성 요소는 밝은 미래를 가지고 있습니다.
예를 들어 Tailwind Labs의 팀은 이미 Headless UI 작업을 하고 있습니다. 접근 가능하고 스타일이 지정되지 않고 React 또는 Vue에서 사용할 수 있는 UI 구성 요소 집합입니다.

유틸리티 CSS 프레임워크의 인기가 높아짐에 따라 웹 구성 요소가 웹 구성 요소로 확산되고 주류 웹 개발 프로젝트에서 웹 구성 요소가 더 많이 사용되는 것을 볼 수 있습니다.


처음에 언급했듯이 GitHub는 github.com에서 사용하는 꽤 많은 웹 구성 요소를 오픈 소스로 제공합니다. 다음은 일부 프로젝트에서 사용하기 시작한 구성 요소의 빠른 목록입니다.

github/clipboard-copy-element

github/tab-container-element

github/auto-complete-element

github/details-dialog-element

github/time-elements

한번 봐봐. 프로젝트의 기존 구성 요소를 해당 구성 요소로 교체하고 번들의 크기를 줄일 수 있습니다.