CSS: modal ​

.instui-modal — משטח דיאלוג (עובד על native <dialog>); חלקי כותרת/גוף/כותרת תחתונה.

ראה את החברים modal.header, modal.body ו־modal.footer עבור החלקים השונים.

Source: body.css

TIP

הרחבת JS — ה-CSS של הרכיב הזה מגדיר את העיצוב ועובד בעצמו; שלבו אותו עם @pantoken/interactions להוספת ההתנהגות האינטראקטיבית. ראו את טבלת המודיפיירים למטה.

נגישות ​

פתח את ה־native <dialog> עם showModal() עבור סמנטיקת מודל וחיבור Esc לסגירה, ותן לו שם בעזרת aria-labelledby שמצביע על .header.

שימוש ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/modal.css";

דמו ​

html
-docs
<dialog class="instui-modal -size-lg" aria-labelledby="details-title">
  <div class="header" id="details-title"><strong>מידע נוסף</strong></div>
  <div class="body">דוגמה זו מראה את משטח המודאל הגדול.</div>
</dialog>

מבנה ​

text
.instui-modal
  modal.header (component)
  modal.body (component)
  modal.footer (component)
flowchart TD n0[".instui-modal"]:::cssdoc-root n1(["modal.header"]):::cssdoc-component n2(["modal.body"]):::cssdoc-component n3(["modal.footer"]):::cssdoc-component n0 --> n1 n0 --> n2 n0 --> n3 click n1 "/api/css/modal.header.md" click n2 "/api/css/modal.body.md" click n3 "/api/css/modal.footer.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

מחליפים ​

מחליףתיאור
.-blurטשטש את הרקע שמאחורי המודל.
.-color-inverseכרום על־כהה (משולב עם גוף מדיה). @affects modal.header @affects modal.body @affects modal.footer — משנה את צבעי כל חלק למראה על־כהה.
.-density-compactריפוד חלקים הדוק יותר. @affects modal.header @affects modal.body @affects modal.footer — מצמצם את הריפוד של כל חלק.
.-overflow-fitמגביל אל חלון התצוגה ומגלגל את הגוף. @affects modal.body — מגלגל את הגוף כאשר המודל מוגבל לחלון התצוגה.
.-size-autoמיועד לפי גודל התוכן.
.-size-fullscreenקצה־לקצה.
.-size-largeמודל רחב. שם ארוך לצלב של -size-lg.
.-size-lgמודל רחב.
.-size-smמודל צר.
.-size-smallמודל צר. שם ארוך לצלב של -size-sm.

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

פיסואו־אלמנטתיאור
::backdropמכהה את הדף מאחורי הדיאלוג כמסיכה, ומאפיר אותו מתחת ל־-blur.

אסימוני צריכה ​

Tokenסוגערך
--instui-component-mask-background-color<color>LightDarklight-dark(rgba(255,255,255,0.75), rgba(28,34,43,0.75))
--instui-component-modal-auto-min-width<length>16em
--instui-component-modal-background-color<color>LightDarklight-dark(#ffffff, #171B21)
--instui-component-modal-border-color<color>LightDarklight-dark(#E8EAEC, #334450)
--instui-component-modal-border-radius<length>1rem
--instui-component-modal-border-width<length>0.0625rem
--instui-component-modal-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-modal-inverse-background-color<color>LightDarklight-dark(#273540, #1C222B)
--instui-component-modal-inverse-border-color<color>#334450
--instui-component-modal-inverse-text-color<color>#ffffff
--instui-component-modal-large-max-width<length>62em
--instui-component-modal-medium-max-width<length>48em
--instui-component-modal-small-max-width<length>30em
--instui-component-modal-text-color<color>LightDarklight-dark(#273540, #F2F4F5)
--instui-elevation-topmostnone | <shadow>#—
--instui-spacing-space-xl<length>1.5rem

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

  • מעצב native <dialog> ואת ה־::backdrop; הצביעה בשכבה העליונה ועיצוב הרקע תלויים בדפדפן שתומך ב־dialog.

תת־רכיבים ​

קשור ​

  • tray — טריי הוא אותה תבנית שכבה ניתנת לסגירה, העוגנת לקצה המסך.