CSS: context-view ​

.instui-context-view — لافتة منبّهة مرتفعة مع سهم زواية، قابلة للتموضع على أي جانب؛ تعمل كـ [popover] أصلية.

السهم مكوَّن من مثلثين متراكبين ::before/::after (الحد ثم الحشوة) حتى يظهر بشكل صحيح مقابل سطح مطابق؛ كـ [popover] يحتاج نفس توصيل الفتح/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يجلس في الطرف (نهاية السطر) من العنصر المرجعي.
.-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] خلف حماية @supports; يحتاج إلى Chromium أو Safari حديث، ويتراجع إلى نافذة منبثقة متمركزة من متصفح المستخدم في الباقي.

ذات صلة ​

  • popover — النافذة المنسدلة العامة على الطبقة العلوية.
  • tooltip — لافتة أصغر تظهر عند المرور أو التركيز.