CSS: context-view ​

.instui-context-view — یک کال‌اوت برجسته با یک caret که می‌توان آن را در هر طرف قرار داد؛ همانند یک [popover] بومی عمل می‌کند.

caret از دو مثلث پشته‌شده ::before/::after تشکیل شده (لبه سپس پرکردن) تا در برابر سطح همسان به‌درستی خوانده شود؛ به‌عنوان یک [popover] نیاز به همان سیم‌کشی open/popovertarget دارد که popover دارد، اما بر خلاف 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در انتها (inline-end)ٔ لنگر قرار گیرد.
.-placement-startدر شروع (inline-start)ٔ لنگر قرار گیرد.
.-placement-topدر بالای لنگر قرار گیرد.

نیمه‌عناصر (Pseudo-elements) ​

نیمه‌عنصرتوضیحات
::afterمثلث داخلی پرشدهٔ caret را رندر می‌کند.
::beforeمثلث خارجی حاشیهٔ caret را رندر می‌کند.

حالت‌ها ​

وضعیتتوضیحات
: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

پشتیبانی مرورگر ​

  • از موقعیت‌یابی anchor در CSS (position-anchor, position-area, position-try-fallbacks) و API بومی [popover] پشت یک نگهبان @supports استفاده می‌کند؛ به یک Chromium یا Safari جدید نیاز دارد و در جاهای دیگر به‌صورت fallback به یک popover متمرکز روی UA برمی‌گردد.

مرتبط ​

  • popover — popover عمومی لایهٔ بالا.
  • tooltip — یک کال‌اوت کوچک برای hover یا focus.