팝업: 다시 떠오르고 있습니다.

Jhey Tompkins

개방형 UI 이니셔티브의 목표는 개발자가 우수한 사용자 환경을 더 쉽게 만들 수 있도록 하는 것입니다. 이를 위해 개발자들이 직면하고 있는 보다 문제가 되는 패턴에 대처하고자 노력하고 있습니다. 이를 위해 더 나은 플랫폼에 내장된 API와 구성요소를 제공할 수 있습니다.

이러한 문제 영역 중 하나는 Open UI에서 '팝오버'로 설명된 팝업입니다.

팝오버는 오랫동안 양극적인 명성을 얻었습니다. 이는 부분적으로 빌드 및 배포되는 방식 때문입니다. 효과적으로 빌드하기 쉬운 패턴은 아니지만 사용자를 특정 페이지로 유도하거나 사이트의 콘텐츠를 인지하도록 유도하여 많은 가치를 창출할 수 있습니다. 특히 세련된 용도로 사용하면 더욱 효과적입니다.

팝오버를 만들 때 주로 두 가지 주요 우려사항이 있습니다.

• 콘텐츠의 나머지 부분 위에 배치되도록 적절한 위치에 배치하는 방법
• 접근성을 높이는 방법 (키보드 친화적, 포커스 가능 등)

기본 제공되는 Popover API에는 다양한 목표가 있지만 모두 개발자가 이 패턴을 쉽게 빌드할 수 있도록 하는 중요한 목표가 모두 같기 때문입니다. 주목할 만한 목표는 다음과 같습니다.

• 요소와 그 하위 요소를 문서의 나머지 부분 위에 쉽게 표시할 수 있도록 합니다.
• 제한 없는 액세스.
• 가장 일반적인 동작 (라이트 닫기, 싱글톤, 스태킹 등)에는 JavaScript가 필요하지 않습니다.

OpenUI 사이트에서 팝업의 전체 사양을 확인할 수 있습니다.

브라우저 호환성

기본 제공되는 Popover API는 현재 어디서 사용할 수 있나요? Chrome Canary의 '실험용 웹 플랫폼 기능' 뒤에 지원됩니다. 플래그를 지정합니다.

플래그를 사용 설정하려면 Chrome Canary를 열고 chrome://flags을 방문하세요. 그런 다음 '실험용 웹 플랫폼 기능'을 사용 설정합니다. 플래그.

프로덕션 환경에서 테스트하려는 개발자를 위한 오리진 트라이얼도 있습니다.

마지막으로, API용으로 개발 중인 폴리필이 있습니다. github.com/oddbird/popup-polyfill에서 저장소를 확인하세요.

다음을 사용하여 팝업 지원을 확인할 수 있습니다.

const supported = HTMLElement.prototype.hasOwnProperty("popover");

현재 솔루션

현재 내 콘텐츠를 무엇보다 홍보하려면 어떻게 해야 할까요? 이 기능이 브라우저에서 지원되는 경우 HTML 대화상자 요소를 사용할 수 있습니다. '모달'에서 양식을 작성해 주세요. 이를 사용하려면 JavaScript가 필요합니다.

Dialog.showModal();

접근성과 관련하여 고려해야 할 사항이 몇 가지 있습니다. 예를 들어 버전 15.4 미만의 Safari 사용자를 위한 경우 a11y-dialog를 사용하는 것이 좋습니다.

또한 여러 팝오버, 알림 또는 도움말 기반 라이브러리 중 하나를 사용할 수도 있습니다. 이들 중 다수는 유사한 방식으로 작동하는 경향이 있습니다.

• 팝오버를 표시하기 위해 본문에 컨테이너를 추가합니다.
• 다른 모든 항목 위에 오도록 스타일을 정합니다.
• 요소를 만들고 컨테이너에 추가하여 팝오버를 표시합니다.
• DOM에서 팝오버 요소를 삭제하여 이 탭을 숨깁니다.

이를 위해서는 추가 종속 항목과 개발자에게 더 많은 결정이 필요합니다. 필요한 모든 것을 제공하는 제품을 찾기 위해서도 연구도 필요합니다. Popover API는 도움말을 비롯한 다양한 시나리오를 지원하는 것을 목표로 합니다. 목표는 이러한 일반적인 시나리오를 모두 다루어 개발자가 또 다른 결정을 하지 않아도 되므로 환경 구축에만 집중할 수 있도록 하는 것입니다.

첫 번째 팝업

이렇게 하면 됩니다.

<div id="my-first-popover" popover>Popover Content!</div>
<button popovertoggletarget="my-first-popover">Toggle Popover</button>

그런데, 여기서 무슨 일이 일어날까요?

• 팝오버 요소는 컨테이너나 다른 항목에 넣지 않아도 됩니다. 팝오버 요소는 기본적으로 숨겨져 있습니다.
• 광고 표시를 위해 JavaScript를 작성할 필요가 없습니다. popovertoggletarget 속성에서 처리합니다.
• 아이콘이 표시되면 최상위 레이어로 승격됩니다. 즉, 표시 영역에서 document 위로 이동합니다. z-index를 관리하거나 DOM에서 팝오버의 위치를 걱정하지 않아도 됩니다. 상위 항목 클리핑과 함께 DOM에 깊이 중첩되어 있을 수 있습니다. 또한 DevTools를 통해 현재 최상위 레이어에 어떤 요소가 있는지 확인할 수 있습니다. 상단 레이어에 대한 자세한 내용은 이 도움말을 확인하세요.

• '조명 닫기'가 표시됩니다. 즉시 사용할 수 있습니다. 즉, 팝오버 외부를 클릭하거나, 다른 요소로 키보드로 이동하거나, Esc 키를 눌러 닫기 신호로 팝오버를 닫을 수 있습니다. 다시 열어서 사용해 보세요.

팝오버로 이용할 수 있는 또 다른 기능은 무엇인가요? 예를 더 살펴보겠습니다. 페이지의 일부 콘텐츠가 포함된 이 데모를 살펴보겠습니다.

플로팅 작업 버튼의 위치가 높은 z-index로 고정되어 있습니다.

.fab {
  position: fixed;
  z-index: 99999;
}

팝오버 콘텐츠는 DOM에 중첩되어 있지만, 팝오버를 열면 고정 위치 요소 위로 올라갑니다. 스타일을 설정할 필요가 없습니다.

이제 팝오버에 ::backdrop pseudo-element가 있는 것을 볼 수도 있습니다. 최상위 레이어에 있는 모든 요소는 스타일을 지정할 수 있는 ::backdrop 의사 요소를 얻습니다. 이 예에서는 축소된 알파 배경 색상과 기본 콘텐츠를 블러 처리하는 배경 필터로 ::backdrop의 스타일을 지정합니다.

팝오버 스타일 지정

이제 팝오버의 스타일 지정을 살펴보겠습니다. 기본적으로 팝오버는 위치가 고정되어 있고 일부 패딩이 적용되어 있습니다. display: none도 있습니다. 이를 재정의하여 팝오버를 표시할 수 있습니다. 하지만 이렇게 하면 최상위 레이어로 승격되지 않습니다.

[popover] { display: block; }

팝오버를 홍보하는 방법에 관계없이, 팝오버를 최상위 레이어로 승격한 후에는 배치하거나 배치해야 할 수 있습니다. 상단 레이어를 대상으로 하거나

:open {
  display: grid;
  place-items: center;
}

기본적으로 팝오버는 margin: auto를 사용하여 표시 영역의 중앙에 배치됩니다. 그러나 경우에 따라 포지셔닝에 대해 명확히 하고 싶을 수도 있습니다. 예를 들면 다음과 같습니다.

[popover] {
  top: 50%;
  left: 50%;
  translate: -50%;
}

CSS 그리드 또는 Flexbox를 사용하여 팝오버 내에 콘텐츠를 배치하려는 경우 요소에 이를 래핑하는 것이 좋습니다. 그러지 않으면 팝오버가 최상위 레이어에 배치되면 display를 변경하는 별도의 규칙을 선언해야 합니다. 기본값으로 설정하면 기본적으로 display: none를 재정의하여 표시됩니다.

[popover]:open {
 display: flex;
}

데모를 실행해 보면 이제 팝오버가 안팎으로 전환되는 것을 확인할 수 있습니다. :open 의사 선택기를 사용하여 팝오버를 안팎으로 전환할 수 있습니다. :open 의사 선택기는 표시되는 (따라서 최상위 레이어에 있는) 팝오버와 일치합니다.

이 예에서는 맞춤 속성을 사용하여 전환을 유도합니다. 팝오버의 ::backdrop에도 전환을 적용할 수 있습니다.

[popover] {
  --hide: 1;
  transition: transform 0.2s;
  transform: translateY(calc(var(--hide) * -100vh))
            scale(calc(1 - var(--hide)));
}

[popover]::backdrop {
  transition: opacity 0.2s;
  opacity: calc(1 - var(--hide, 1));
}


[popover]:open::backdrop  {
  --hide: 0;
}

여기서 한 가지 팁은 모션을 위해 미디어 쿼리 아래에 전환 및 애니메이션을 그룹화하는 것입니다. 이렇게 하면 타이밍을 유지하는 데도 도움이 됩니다. 맞춤 속성을 통해 popover와 ::backdrop 간에 값을 공유할 수 없기 때문입니다.

@media(prefers-reduced-motion: no-preference) {
  [popover] { transition: transform 0.2s; }
  [popover]::backdrop { transition: opacity 0.2s; }
}

지금까지 popovertoggletarget를 사용하여 팝오버를 표시하는 방법을 살펴보았습니다. 알림을 닫으려면 '가볍게 닫기'를 사용하세요. 그러나 popovershowtarget 및 popoverhidetarget 속성도 사용할 수 있습니다. 버튼을 숨기는 팝오버에 버튼을 추가하고 popovershowtarget를 사용하도록 전환 버튼을 변경해 보겠습니다.

<div id="code-popover" popover>
  <button popoverhidetarget="code-popover">Hide Code</button>
</div>
<button popovershowtarget="code-popover">Reveal Code</button>

앞서 언급했듯이 Popover API는 기존의 팝업 개념 이외에도 더 많은 기능을 제공합니다. 알림, 메뉴, 도움말 등 모든 유형의 시나리오에 맞게 빌드할 수 있습니다.

이러한 시나리오 중 일부에는 다른 상호작용 패턴이 필요합니다. 마우스 오버와 같은 상호작용 popoverhovertarget 속성의 사용을 실험해 봤지만 현재 구현되지 않았습니다.

<div popoverhovertarget="hover-popover">Hover for Code</div>

요소에 마우스를 가져가면 타겟을 표시하는 것입니다. 이 동작은 CSS 속성을 통해 구성할 수 있습니다. 이러한 CSS 속성은 팝오버가 반응하는 요소 위에 마우스를 올리거나 내릴 수 있는 시간 범위를 정의합니다. 실험된 기본 동작에서 :hover의 명시적인 0.5s 뒤에 팝오버 표시가 있었습니다. 그런 다음 닫으려면 가볍게 닫거나 다른 팝오버를 열어야 합니다 (자세한 내용은 추후에 제공될 예정). 팝오버 숨기기 시간이 Infinity(으)로 설정되었기 때문입니다.

그때까지는 JavaScript를 사용하여 이 기능에 폴리필할 수 있습니다.

let hoverTimer;
const HOVER_TRIGGERS = document.querySelectorAll("[popoverhovertarget]");
const tearDown = () => {
  if (hoverTimer) clearTimeout(hoverTimer);
};
HOVER_TRIGGERS.forEach((trigger) => {
  const popover = document.querySelector(
    `#${trigger.getAttribute("popoverhovertarget")}`
  );
  trigger.addEventListener("pointerenter", () => {
    hoverTimer = setTimeout(() => {
      if (!popover.matches(":open")) popover.showPopOver();
    }, 500);
    trigger.addEventListener("pointerleave", tearDown);
  });
});

명시적인 마우스 오버 창을 설정하면 사용자의 작업이 의도적임을 확인할 수 있다는 이점이 있습니다 (예: 사용자가 포인터를 타겟 위로 전달). 사용자가 의도한 것이 아니라면 팝업을 표시하고 싶지 않습니다.

창을 0.5s로 설정한 상태에서 타겟에 마우스를 가져가는 이 데모를 사용해 보세요.

몇 가지 일반적인 사용 사례와 예를 살펴보기 전에 몇 가지 사항을 살펴보겠습니다.

팝오버 유형

JavaScript 이외의 상호작용 동작을 다루었습니다. 하지만 팝오버 동작 전체는 어떨까요? '가볍게 닫기'를 사용하지 않으려면 어떻게 해야 하나요? 아니면 팝오버에 싱글톤 패턴을 적용하고 싶으신가요?

Popover API를 사용하면 동작이 다른 세 가지 유형의 팝오버를 지정할 수 있습니다.

[popover=auto]/[popover]:

• 수습 기간 지원. 이는 DOM에도 중첩된다는 것을 의미하지 않습니다. 기존 팝오버의 정의는 다음과 같습니다. <ph type="x-smartling-placeholder">
  </ph>
  • DOM 위치 (하위 요소)와 관련됩니다.
  • popovertoggletarget, popovershowtarget 등의 하위 요소에서 속성을 트리거하여 관련된 속성을 나타냅니다.
  • anchor 속성과 관련되어 있습니다 (개발 중 CSS Anchoring API).
• 가볍게 닫습니다.
• 열면 상위 팝오버가 아닌 다른 팝오버가 닫힙니다. 기존의 팝오버를 사용한 중첩의 작동 방식을 보여주는 아래 데모를 확인해 보세요. popoverhidetarget/popovershowtarget 인스턴스를 popovertoggletarget로 변경하면 어떤 점이 바뀌는지 확인하세요.
• 하나를 닫으면 모두 닫히지만 스택에서 하나를 닫으면 스택에서 위에 있는 항목만 닫습니다.

[popover=manual]:

• 다른 팝오버를 닫지 않습니다.
• 표시등 닫기가 없습니다.
• 트리거 요소 또는 JavaScript를 통해 명시적으로 닫아야 합니다.

JavaScript API

팝오버를 더욱 세밀하게 제어해야 하는 경우 JavaScript를 사용하여 처리할 수 있습니다. showPopover 및 hidePopover 메서드를 모두 가져옵니다. 수신 대기할 popovershow 및 popoverhide 이벤트도 있습니다.

팝오버 표시 js popoverElement.showPopover() 팝오버 숨기기:

popoverElement.hidePopover()

표시되는 팝오버를 듣습니다.

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

표시되는 팝오버를 듣고 취소합니다.

popoverElement.addEventListener('popovershow',event => {
  event.preventDefault();
  console.warn(‘We blocked a popover from being shown’);
})

팝오버가 숨겨지는지 듣기:

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

팝오버 숨기기를 취소할 수 없습니다.

popoverElement.addEventListener('popoverhide',event => {
  event.preventDefault();
  console.warn("You aren't allowed to cancel the hiding of a popover");
})

팝오버가 최상위 레이어에 있는지 확인합니다.

popoverElement.matches(':open')

이는 일반적이지 않은 시나리오에 추가 성능을 제공합니다. 예를 들어 일정 시간 동안 활동이 없으면 팝오버를 표시할 수 있습니다.

이 데모에는 팝오버가 들리는 팝오버가 있으므로 오디오를 재생하려면 JavaScript가 필요합니다. 클릭하면 팝오버를 숨기고 오디오를 재생한 다음 다시 표시합니다.

접근성

Popover API에서 가장 먼저 접근성을 생각하고 있습니다. 접근성 매핑은 필요에 따라 팝오버를 트리거 요소와 연결합니다. 즉, popovertoggletarget와 같은 트리거 속성 중 하나를 사용한다고 가정하면 aria-haspopup와 같은 aria-* 속성을 선언할 필요가 없습니다.

포커스 관리를 위해 autofocus 속성을 사용하여 팝오버 내의 요소로 포커스를 이동할 수 있습니다. 대화상자와 동일하지만 포커스를 반환할 때 차이가 발생합니다. 이는 라이트 닫기 때문입니다. 대부분의 경우 팝오버를 닫으면 이전에 포커스가 맞춰진 요소로 포커스가 반환됩니다. 하지만 포커스를 받을 수 있는 경우 가볍게 닫을 때 포커스가 클릭된 요소로 이동됩니다. 설명의 포커스 관리에 관한 섹션을 확인하세요.

'전체 화면 버전'을 열어야 합니다. 확인해 보겠습니다.

이 데모에서는 포커스가 맞춰진 요소에 녹색 윤곽선이 표시됩니다. 키보드로 인터페이스 주변을 이동해 보세요. 팝오버가 닫힐 때 포커스가 반환되는 위치를 확인합니다. 또한 탭을 누르면 팝오버가 닫혔을 수도 있습니다. 처음부터 그렇게 설계되어 있습니다. 팝오버에는 포커스 관리 기능이 있지만 포커스를 트랩하지 않습니다. 또한 키보드 탐색은 포커스가 팝오버 밖으로 이동할 때 닫기 신호를 식별합니다.

앵커링 (개발 중)

팝오버의 경우 요소를 트리거에 고정하는 까다로운 패턴에 대응해야 합니다. 예를 들어 도움말이 트리거 위에 표시되도록 설정되어 있지만 문서가 스크롤되는 경우입니다. 해당 도움말이 표시 영역에서 잘릴 수 있습니다. 현재 이 문제를 처리할 수 있는 '플로팅 UI'와 같은 JavaScript 제품이 있습니다. 이러한 상황을 중단하고 원하는 위치 순서에 따라 도움말 위치를 변경할 수 있습니다.

그러나 Google은 개발자가 자신의 스타일로 이를 정의할 수 있도록 하고자 합니다. 이 문제를 해결하기 위해 Popover API와 함께 컴패니언 API를 개발 중입니다. 'CSS 앵커 포지셔닝' API를 사용하면 요소를 다른 요소에 테더링할 수 있으며, 표시 영역에서 잘리지 않도록 요소의 위치를 다시 지정하는 방식으로 이 작업을 수행할 수 있습니다.

이 데모에서는 현재 상태의 Anchoring API를 사용합니다. 보트의 위치는 표시 영역의 앵커 위치에 따라 반응합니다.

다음은 이 데모를 실행하는 CSS의 스니펫입니다. JavaScript가 필요하지 않습니다.

.anchor {
  --anchor-name: --anchor;
}
.anchored {
  position: absolute;
  position-fallback: --compass;
}
@position-fallback --compass {
  @try {
    bottom: anchor(--anchor top);
    left: anchor(--anchor right);
  }
  @try {
    top: anchor(--anchor bottom);
    left: anchor(--anchor right);
  }
}

여기에서 사양을 확인하세요. 이 API에 대한 폴리필도 있습니다.

예

이제 팝오버에서 제공하는 내용과 그 방식을 알게 되었으니 몇 가지 예를 살펴보겠습니다.

알림

이 데모는 '클립보드에 복사'를 보여줍니다. 있습니다.

• [popover=manual]을 사용합니다.
• showPopover 동작 시 프로그램 팝오버
• 2000ms 제한 시간이 지나면 hidePopover를 사용하여 숨깁니다.

토스트 메시지

이 데모에서는 상단 레이어를 사용하여 토스트 스타일 알림을 표시합니다.

• 유형이 manual인 팝오버 하나가 컨테이너 역할을 합니다.
• 새 알림이 팝오버에 추가되고 팝오버가 표시됩니다.
• 클릭 시 웹 애니메이션 API를 사용하여 제거되고 DOM에서 삭제됩니다.
• 표시할 토스트 메시지가 없으면 팝오버가 숨겨집니다.

중첩 메뉴

이 데모는 중첩된 탐색 메뉴의 작동 방식을 보여줍니다.

• 중첩된 팝오버를 허용하는 [popover=auto]를 사용합니다.
• 키보드로 이동하려면 각 드롭다운의 첫 번째 링크에서 autofocus를 사용합니다.
• 이는 CSS Anchoring API에 가장 적합한 옵션입니다. 그러나 이 데모에서는 약간의 자바스크립트를 사용하여 맞춤 속성을 사용하여 위치를 업데이트할 수 있습니다.

const ANCHOR = (anchor, anchored) => () => {
  const { top, bottom, left, right } = anchor.getBoundingClientRect();
  anchored.style.setProperty("--top", top);
  anchored.style.setProperty("--right", right);
  anchored.style.setProperty("--bottom", bottom);
  anchored.style.setProperty("--left", left);
};

PRODUCTS_MENU.addEventListener("popovershow", ANCHOR(PRODUCT_TARGET, PRODUCTS_MENU));

이 데모에서는 autofocus를 사용하므로 '전체 화면 보기'로 열어야 합니다. 키보드 탐색의 두 가지 역할을 합니다.

미디어 팝오버

이 데모는 미디어를 팝업하는 방법을 보여줍니다.

• 가볍게 닫는 데 [popover=auto]를 사용합니다.
• JavaScript가 동영상의 play 이벤트를 수신 대기하고 동영상을 표시합니다.
• 팝오버 popoverhide 이벤트는 동영상을 일시중지합니다.

위키 스타일 팝오버

이 데모는 미디어가 포함된 인라인 콘텐츠 도움말을 만드는 방법을 보여줍니다.

• [popover=auto]을 사용합니다. 하나가 보여주면 다른 하나가 조상이 아니기 때문에 숨겨집니다.
• JavaScript와 함께 pointerenter에 표시됩니다.
• CSS 앵커링 API의 또 다른 완벽한 후보입니다.

탐색 창

이 데모에서는 팝오버를 사용하여 탐색 창을 만듭니다.

• 가볍게 닫는 데 [popover=auto]를 사용합니다.
• autofocus를 사용하여 첫 번째 탐색 항목에 포커스를 둡니다.

배경화면 관리

이 데모는 하나의 ::backdrop만 표시하려는 여러 팝오버의 배경화면을 관리하는 방법을 보여줍니다.

• 표시되는 팝오버 목록을 관리하려면 자바스크립트를 사용합니다.
• 상단 레이어의 가장 낮은 팝오버에 클래스 이름을 적용합니다.

맞춤 커서 팝오버

이 데모는 popover를 사용하여 canvas를 최상위 레이어로 승격하고 이를 사용하여 맞춤 커서를 표시하는 방법을 보여줍니다.

• showPopover 및 [popover=manual]를 사용하여 canvas을(를) 최상위 레이어로 승격합니다.
• 다른 팝오버가 열리면 canvas 팝오버를 숨기거나 표시하여 맨 위에 표시되도록 합니다.

작업 시트 팝오버

이 데모는 팝오버를 작업 시트로 사용하는 방법을 보여줍니다.

• 기본적으로 display를 재정의하여 팝오버가 표시되도록 합니다.
• 팝오버 트리거로 작업 시트가 열렸습니다.
• 팝오버가 표시되면 최상위 레이어로 승격되어 보기로 변환됩니다.
• 가볍게 닫기를 사용하여 반환할 수 있습니다.

키보드가 활성화된 팝오버

이 데모는 명령 팔레트 스타일 UI에 팝오버를 사용하는 방법을 보여줍니다.

• 팝오버를 표시하려면 cmd + j를 사용하세요.
• input는 autofocus로 포커스가 있습니다.
• 콤보 상자는 기본 입력 아래에 배치된 두 번째 popover입니다.
• 드롭다운이 없는 경우 라이트 닫기는 팔레트를 닫습니다.
• Anchoring API의 또 다른 후보

시간이 지정된 팝오버

이 데모는 4초 후에 비활성 팝오버를 보여줍니다. 로그아웃 모달을 표시하기 위해 사용자에 관한 보안 정보를 보유하는 앱에서 자주 사용되는 UI 패턴입니다.

• 일정 시간 동안 활동이 없으면 JavaScript를 사용하여 팝오버를 표시합니다.
• 팝오버 프로그램에서 타이머를 재설정합니다.

화면 보호기

이전 데모와 마찬가지로 사이트에 기발한 콘텐츠를 추가하고 화면 보호기를 추가할 수 있습니다.

• 일정 시간 동안 활동이 없으면 JavaScript를 사용하여 팝오버를 표시합니다.
• 타이머를 숨기고 재설정하려면 가벼운 해제를 누릅니다.

캐럿 팔로우

이 데모는 입력 캐럿 뒤에 팝오버를 사용하는 방법을 보여줍니다.

• 선택 항목, 주요 이벤트 또는 특수문자 입력을 기반으로 팝오버를 표시합니다.
• JavaScript를 사용하여 범위가 지정된 맞춤 속성으로 팝오버 위치를 업데이트합니다.
• 이러한 패턴에는 표시되는 콘텐츠와 접근성에 대한 사려 깊은 생각이 필요합니다.
• 일반적으로 텍스트 편집 UI와 태그를 지정할 수 있는 앱에서 표시됩니다.

플로팅 작업 버튼 메뉴

이 데모는 팝오버를 사용하여 JavaScript 없이 플로팅 작업 버튼 메뉴를 구현하는 방법을 보여줍니다.

• showPopover 메서드를 사용하여 manual 유형 팝오버를 승격합니다. 이것이 기본 버튼입니다.
• 메뉴는 기본 버튼의 대상인 또 다른 팝오버입니다.
• popovertoggletarget 앱으로 메뉴가 열렸습니다.
• autofocus를 사용하여 표시되는 첫 번째 메뉴 항목에 포커스를 맞춥니다.
• 표시등 닫기는 메뉴를 닫습니다.
• 트위스트 아이콘은 :has()를 사용합니다. :has()에 대한 자세한 내용은 이 도움말을 참조하세요.

작업이 끝났습니다.

지금까지 Open UI 이니셔티브의 일환으로 곧 출시될 팝오버에 대해 말씀드렸습니다. 합리적으로 사용하면 웹 플랫폼에 큰 도움이 될 것입니다.

UI 열기를 확인하세요. 팝오버 설명은 API가 발전함에 따라 최신 상태로 유지됩니다. 여기에는 모든 데모가 포함된 컬렉션이 있습니다.

'깜빡'해 주셔서 감사합니다.

사진: Madison Oren, Unsplash