CSS: context-view ​

.instui-context-view — תיבת קריאה מוגבהת עם חץ זנב, ניתנת למיקום מכל צד; פועלת כ-[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ממוקם מעל העוגן.

פיסואו־אלמנטים ​

פיסואו־אלמנטתיאור
::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

תמיכה בדפדפן ​

  • משתמש במיקום עוגן של CSS (position-anchor, position-area, position-try-fallbacks) וב-API המקומי [popover] מאחורי מגן @supports; דורש Chromium או Safari עדכניים, ובמקומות אחרים חוזר ל-popover ממוקד ב-UA.

קשור ​

  • popover — תיבת הצפה כללית בשכבה העליונה.
  • tooltip — תיבת קריאה קטנה יותר לשעה של ריחוף או מיקוד.