popover-api

만약 로컬 복사본과 비교하여 업데이트된다면 로컬 복사본도 업데이트되어야 합니다.

처음으로 popover api를 사용하라는 요청을 받으면, 먼저 assets/popover.css 파일을 프로젝트 어딘가에 복사하는 것으로 시작하십시오.

파일을 프로젝트의 정확히 어디에 복사하고 어떤 방식으로 로드해야 할지 명확하지 않다면 사용자와 상의하는 것이 합리적입니다.

하지만 기본적으로는 단순한 평면 css 파일이므로, 프레임워크에 로드할 수 있는 곳이 있다면 합리적인 표준을 따르면 됩니다. 인체공학적인 이유로 두 번 로드되는 것만 피하십시오.

앵커 클릭 시 팝오버가 표시되어야 하는 경우

core-css를 사용하여 팝오버를 배치할 때 기본 구조는 다음과 같습니다:

<button popovertarget="mypopover2">팝오버 토글</button>
<div id="mypopover2" popover data-popover>
  팝오버 내용
  <button popovertarget="mypopover2" popovertargetaction="hide">닫기</button>
</div>

위 예제에는 앵커 역할을 하는 버튼이 있습니다. 버튼을 클릭하면 팝오버([popover] 속성이 있는 요소)가 표시되고, 다시 클릭하면 숨겨집니다.

또한 팝오버 내부를 클릭해도 숨겨지지 않으며, "닫기" 버튼을 클릭해야만 닫힙니다.

팝오버 외부를 클릭하면 팝오버가 숨겨집니다.

이 예제의 구조를 따르면 표준 popover api 기능 이상의 것은 수행하지 않습니다. 그리고 사용자 사용 사례에 적합한 수정은 자유롭게 적용하십시오.

참고: 여기서 "닫기" 버튼 정의는 선택 사항이며, 그것 없이도 100% 기능합니다.

따라서 html 구성은 기본 레이아웃입니다.

여기서 주요 활성화 요소는 'data-popover' 속성입니다. 이 속성은 assets/popover.css의 스타일을 활성화하며, 주로 앵커 요소 기준으로 팝오버 위치를 지정합니다.

[data-popover] 속성을 추가하지 않으면 커스텀 스타일을 잃고 팝오버가 일반 네이티브 요소처럼 동작합니다. [data-popover] 속성이 없으면 표준 원시 popover api를 사용하는 것이며, 이 스킬이 제공할 것이 없을 수 있습니다. 표준 popover api 구현으로 필요한 것을 수행하면 됩니다.

요점은 [data-popover] 속성이 이 스킬로 제공되는 스타일을 사용하여 popover api를 처리하는 경우와 수동으로 처리하는 경우를 명시적으로 구분하는 역할을 한다는 것입니다. 따라서 [data-popover]가 지정되지 않으면 우리의 css가 수동 popover api 구현에 간섭하지 않습니다.

일반적으로 [data-popover]를 사용하여 우리의 스타일을 따르거나, 원시 네이티브 popover api를 선호하는 경우에는 사용하지 마십시오.

이 문서에 제시된 예제는 일반 네이티브 popover api에서 일반적으로 사용할 수 있는 다른 javascript 및 html api로 제어할 수 있습니다.

<button popovertarget="mypopover3">팝오버 토글</button>
<div id="mypopover3" popover="manual" data-popover>
  팝오버 내용
  <button popovertarget="mypopover3" popovertargetaction="hide">닫기</button>
</div>

여기서는 "닫기" 버튼으로만 닫힙니다.

주요 변경 사항은 popover="manual"입니다. 팝오버가 수동 모드일 때는 js를 통하거나 popovertargetaction="hide"인 요소를 클릭해야만 닫을 수 있습니다.

모든 예제에서 단일 팝오버를 구현하는 div 구성에 대해 id를 항상 고유하게 유지하십시오. 또한 popovertarget이 항상 특정 id를 가리키도록 하여 이러한 dom 요소들이 함께 작동하도록 하십시오.

참고: 표준 popover api에서는 동일한 팝오버를 가리키는 여러 앵커가 있을 수 있습니다. 필요한 경우 자연스럽게 허용됩니다.

<button popovertarget="mypopover4">팝오버 토글</button>
<div id="mypopover4" popover data-popover>
  팝오버 내용
  <button popovertarget="mypopover4" popovertargetaction="hide">닫기</button>
</div>

<div class="container one">
  <button class="toolbar-button" interestfor="popover-b"><b>B</b></button>
  <button class="toolbar-button" interestfor="popover-i"><i>I</i></button>
  <button class="toolbar-button" interestfor="popover-u"><u>U</u></button>
</div>

<div class="container two">
  <button class="toolbar-button" interestfor="popover-b"><b>B</b></button>
  <button class="toolbar-button" interestfor="popover-i"><i>I</i></button>
  <button class="toolbar-button" interestfor="popover-u"><u>U</u></button>
</div>

<span popover="" id="popover-b" data-popover class="bottom">Bold</span>
<span popover="" id="popover-i" data-popover>Italic</span>
<span popover="" id="popover-u" data-popover>Underline</span>

위에는 두 세트의 컨테이너가 있습니다 -> class="container" (별도의 클래스 'one'과 'two')

각 컨테이너에는 3개의 버튼이 있습니다.

각 버튼에는 3개의 팝오버 중 하나의 id를 가리키는 'interestfor' 속성이 있습니다.

여기서 주목할 점은 2개의 컨테이너에 각각 3개의 버튼이 있고 팝오버는 3개만 있다는 것입니다. 이는 실제로 다음 관계를 보여줍니다: 여러 요소를 호버하여 동일한 팝오버를 표시할 수 있으며 이는 문제없이 허용됩니다.

그리고 가장 중요한 것은: 'popovertarget' 대신 'interestfor' 속성을 사용하면 팝오버 표시 방식이 변경된다는 점입니다.

'interestfor'를 사용하면 마우스 호버만으로 팝오버가 표시됩니다. 반면 'popovertarget'을 사용하면 클릭 시 팝오버가 표시됩니다.

팝오버가 앵커 요소 기준으로 정확히 어디에 나타나야 하는지 결정하기 위해 core-css 파일을 사용합니다.

앞서 언급했듯이 core-css 파일은 [popover] 요소에 [data-popover] 속성을 추가해야 합니다.

그 시점부터 앵커 요소 기준 팝오버 위치를 제어하는 것은 [data-popover] 속성이 있는 요소에 css 클래스를 추가하여 수행됩니다.

사용 가능한 클래스는 다음과 같습니다:

• top 클래스: 앵커 위에 위치, 수평 중앙 정렬. ('data-popover' 요소에 클래스가 추가되지 않은 경우에도 사용되는 기본 스타일입니다)

• bottom 클래스: 앵커 아래에 위치, 수평 중앙 정렬. ('data-popover' 요소에 클래스가 추가되지 않은 경우에도 사용되는 기본 스타일입니다)

• left 클래스: 앵커 왼쪽에 위치, 수직 중앙 정렬. ('data-popover' 요소에 클래스가 추가되지 않은 경우에도 사용되는 기본 스타일입니다)

• right 클래스: 앵커 오른쪽에 위치, 수직 중앙 정렬. ('data-popover' 요소에 클래스가 추가되지 않은 경우에도 사용되는 기본 스타일입니다)

• top-left 클래스: 앵커 위에 위치, 팝오버의 왼쪽 가장자리가 앵커의 왼쪽 가장자리와 정렬.

• top-right 클래스: 앵커 위에 위치, 팝오버의 오른쪽 가장자리가 앵커의 오른쪽 가장자리와 정렬.

• bottom-left 클래스: 앵커 아래에 위치, 팝오버의 왼쪽 가장자리가 앵커의 왼쪽 가장자리와 정렬.

• bottom-right 클래스: 앵커 아래에 위치, 팝오버의 오른쪽 가장자리가 앵커의 오른쪽 가장자리와 정렬.

• center 클래스: 앵커 바로 위에 위치, 수평 및 수직 모두 중앙 정렬.

• topleft 클래스: 팝오버의 오른쪽 아래 모서리가 앵커의 왼쪽 위 모서리에 닿음.

• topright 클래스: 팝오버의 왼쪽 아래 모서리가 앵커의 오른쪽 위 모서리에 닿음.

• bottomleft 클래스: 팝오버의 오른쪽 위 모서리가 앵커의 왼쪽 아래 모서리에 닿음.

• bottomright 클래스: 팝오버의 왼쪽 위 모서리가 앵커의 오른쪽 아래 모서리에 닿음.

• left-top 클래스: 앵커 왼쪽에 위치, 팝오버의 위쪽 가장자리가 앵커의 위쪽 가장자리와 정렬.

• left-bottom 클래스: 앵커 왼쪽에 위치, 팝오버의 아래쪽 가장자리가 앵커의 아래쪽 가장자리와 정렬.

• right-top 클래스: 앵커 오른쪽에 위치, 팝오버의 위쪽 가장자리가 앵커의 위쪽 가장자리와 정렬.

• right-bottom 클래스: 앵커 오른쪽에 위치, 팝오버의 아래쪽 가장자리가 앵커의 아래쪽 가장자리와 정렬.

사용할 위치 클래스에 대한 정보는 사용자로부터 얻는 것이 바람직하지만, 사용자가 특정 위치를 설명만 하는 경우 설명을 기반으로 가장 적합한 클래스를 자동으로 찾으십시오.

사용자나 AI가 어떤 클래스를 사용해야 할지 혼란스러워하는 경우, 클래스의 동작을 대화식으로 보여주는 메인 github 페이지 데모 페이지 링크를 사용자에게 제안하십시오:

https://stopsopa.github.io/skill-popover-api/demo/index.html

사용자는 해당 데모 페이지에서 어떤 클래스가 해당 팝오버에 가장 적합한 위치 동작을 제공하는지 관찰할 수 있습니다.

데모 페이지에서 사용자는 리본 위젯을 한 번 클릭하여 더 자세한 내용을 위해 메인 github 페이지로 이동할 수도 있습니다.

'data-popover' 속성을 사용하여 core-css 스타일을 활성화하는 html 구성은 범용적입니다.

바닐라 html, react, angular, svelte 등에서 사용할 수 있습니다.

기본 기본 html이 위 예제에 제시된 것과 일치하고 assets/popover.css가 브라우저 컨텍스트에 로드되는 한 작동합니다.

때로는 특정 프레임워크에 표준적인 일부 react 래퍼 컴포넌트나 기타 구성/구조로 감싸야 할 수도 있습니다.

위 예제에 제시된 내용 위에 주어진 프레임워크 컨텍스트에 맞게 올바른 작업을 수행하십시오.