CSS: context-view

.instui-context-view — Một callout nâng cao có caret, có thể đặt ở bất kỳ cạnh nào; hoạt động giống như một [popover] nguyên bản.

Caret là hai tam giác chồng lên nhau ::before/::after (viền rồi nền) để hiển thị đúng trên bề mặt có màu tương thích; như một [popover], nó cần cùng kết nối open/popovertarget như popover, nhưng không giống tooltip, nó sẽ đóng khi nhấp ra bên ngoài hoặc nhấn Escape.

Source: context-view.css

Sử dụng

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

Các ví dụ

<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>

Bộ sửa

Bộ sửa	Mô tả
.-color-inverse	Bảng màu tối (đảo ngược).
.-placement-bottom	Hiển thị phía dưới mốc neo.
.-placement-end	Hiển thị ở cuối (inline-end) của mốc neo.
.-placement-start	Hiển thị ở đầu (inline-start) của mốc neo.
.-placement-top	Hiển thị phía trên mốc neo.

Phần tử giả

Phần tử giả	Mô tả
::after	Kết xuất tam giác nền bên trong của caret.
::before	Kết xuất tam giác viền ngoài của caret.

Trạng thái

Trạng thái	Mô tả
:state(open)	—

Điều kiện

Kiểu	Truy vấn	Mô tả
supports	(position-area: block-end)	—

Token tiêu thụ

Token	Kiểu	Giá trị
--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-above	none | <shadow>#	—
--instui-spacing-space-lg	<length>	1rem
--instui-spacing-space-md	<length>	0.75rem

Hỗ trợ trình duyệt

• Sử dụng định vị neo bằng CSS (position-anchor, position-area, position-try-fallbacks) và API [popover] nguyên bản phía sau một bảo vệ @supports; yêu cầu Chromium hoặc Safari phiên bản gần đây, và sẽ dự phòng thành một popover căn giữa trình duyệt ở những nơi khác.

Liên quan

• popover — Popover lớp trên chung.
• tooltip — Một callout nhỏ hơn cho hover hoặc focus.