CSS: modal ​

.instui-modal — یک سطح دیالوگ (روی عنصر بومی <dialog> کار می‌کند)؛ بخش‌های header/body/footer.

برای بخش‌های جداگانه به اعضای modal.header، modal.body و modal.footer مراجعه کنید.

Source: body.css

TIP

افزایش JS — CSS این مؤلفه به‌تنهایی رندر و کار می‌کند؛ آن را با @pantoken/interactions جفت کنید تا رفتار تعاملی اضافه شود. جدول مدیفایرها در پایین را ببینید.

دسترس‌پذیری ​

<dialog> بومی را با showModal() برای معنای modal و بستن با Esc باز کنید، و آن را با aria-labelledby که به .header اشاره می‌کند، نامگذاری کنید.

نحوه استفاده ​

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

نماش ​

نمونه‌ها ​

html
<dialog class="instui-modal -size-sm" id="modal-sm">
  <div class="header"><strong>Small</strong></div>
  <div class="body"><code>-size-sm</code> — a narrow modal.</div>
  <div class="footer">
    <button class="instui-button">Close</button>
  </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کروم برای پس‌زمینه تاریک (همراه با یک مدیای body). @affects modal.header @affects modal.body @affects modal.footer — هر بخش را برای ظاهر روی‌تاریک رنگ‌آمیزی می‌کند.
.-density-compactپدینگ بخش‌ها جمع‌وجورتر. @affects modal.header @affects modal.body @affects modal.footer — پدینگ هر بخش را فشرده می‌کند.
.-overflow-fitبه نمای پنجره محدود شده و محتوای body را اسکرول می‌دهد. @affects modal.body — هنگامی که مودال به نمای پنجره محدود می‌شود، body را اسکرول می‌کند.
.-size-autoاندازه براساس محتوا.
.-size-fullscreenلبه‌به‌لبه.
.-size-largeیک مودال پهن. نام بلندِ هم‌معنیِ -size-lg.
.-size-lgیک مودال پهن.
.-size-smیک مودال باریک.
.-size-smallیک مودال باریک. نام بلندِ هم‌معنیِ -size-sm.

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

نیمه‌عنصرتوضیحات
::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

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

  • استایل‌دهی به عنصر بومی <dialog> و ::backdrop آن؛ رندر لایه بالایی و استایل‌دهی پس‌زمینه نیاز به مرورگری دارد که عنصر dialog را پشتیبانی کند.

زیرمولفه‌ها ​

مرتبط ​

  • tray — یک تِرِی همان الگوی پوشش قابل‌بستن است که به لبهٔ صفحه چسبیده است.