CSS: context-view ​

.instui-context-view — 캐럿이 있는 강조된 콜아웃으로, 어느 쪽에나 위치시킬 수 있으며 네이티브 [popover]처럼 동작합니다.

캐럿은 두 겹으로 쌓인 ::before/::after 삼각형(테두리와 채움)으로 구성되어 매칭되는 표면 위에서도 올바르게 보입니다; [popover]로서 popover와 동일한 open/popovertarget 배선이 필요하지만, tooltip와 달리 외부 클릭이나 Escape 키로 닫힙니다.

Source: context-view.css

사용법 ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/context-view.css";

예제들 ​

html
<div class="instui-context-view -placement-bottom" id="cv-popover">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>

수정자 ​

수정자설명
.-color-inverse다크(반전) 색상 구성.
.-placement-bottom앵커 아래에 배치됩니다.
.-placement-end앵커의 끝(인라인-끝)에 배치됩니다.
.-placement-start앵커의 시작(인라인-시작)에 배치됩니다.
.-placement-top앵커 위에 배치됩니다.

의사 요소 ​

의사 요소설명
::after캐럿의 내부 채움 삼각형을 렌더링합니다.
::before캐럿의 외부 테두리 삼각형을 렌더링합니다.

상태 ​

상태설명
:state(open)—

조건 ​

타입쿼리설명
supports(position-area: block-end)—

사용된 토큰 ​

Token타입값
--instui-color-background-elevated-surface-base<color>LightDarklight-dark(#ffffff, #171B21)
--instui-color-background-inverse<color>LightDarklight-dark(#334450, #F2F4F5)
--instui-color-text-base<color>LightDarklight-dark(#273540, #F2F4F5)
--instui-color-text-inverse<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-context-view-arrow-background-color<color>LightDarklight-dark(#ffffff, #171B21)
--instui-component-context-view-arrow-background-color-inverse<color>LightDarklight-dark(#334450, #F2F4F5)
--instui-component-context-view-arrow-border-color<color>LightDarklight-dark(#E8EAEC, #2D3D49)
--instui-component-context-view-arrow-border-color-inverse<color>#00000000
--instui-component-context-view-arrow-border-width<length>0.0625rem
--instui-component-context-view-arrow-size<length>0.5rem
--instui-component-context-view-border-radius<length>0.75rem
--instui-elevation-abovenone | <shadow>#—
--instui-spacing-space-lg<length>1rem
--instui-spacing-space-md<length>0.75rem

브라우저 지원 ​

  • CSS 앵커 위치 지정(position-anchor, position-area, position-try-fallbacks)과 네이티브 [popover] API를 @supports 가드 뒤에서 사용합니다; 최신 Chromium 또는 Safari가 필요하며, 다른 환경에서는 사용자 에이전트 중심의 팝오버로 폴백됩니다.

관련 항목 ​

  • popover — 일반적인 최상위 레이어 팝오버입니다.
  • tooltip — 더 작은 호버 또는 포커스 콜아웃입니다.