CSS: tray ​

.instui-tray — یک پنل لبه‑پین‌شده که از هر سمت می‌لغزد؛ یک [popover] یا <dialog> بومی.

مکان‌های شروع/پایان نسبت به inset-inline حل می‌شوند (منطقی و حساس به جهت)؛ تبدیل slide-in به‌طور خودکار زیر یک اجداد [dir="rtl"] آینه می‌شود، بنابراین برای چیدمان‌های راست‑به‑چپ نیازی به نشانه‌گذاری اضافی نیست.

Source: tray.css

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

tray یک سطح دیالوگ یا پاپ‌اور است، بنابراین آن را با aria-label یا aria-labelledby نام‌گذاری کنید، و کنترل بستن آن یک aria-label حمل می‌کند (در مثال .instui-close-button از aria-label="Close" استفاده می‌کند).

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

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

نمونه‌ها ​

html
<div class="instui-tray -placement-end -size-sm">
  <span class="instui-heading -level-h3">Filters</span>
  <p class="-size-sm">A tray slides in from the start edge and fills the viewport height.</p>
</div>
<button class="instui-button -toggle">toggle tray</button>

ساختار ​

text
.instui-tray
  close-button (component, 0..1)
  ‹content›
flowchart TD n0[".instui-tray"]:::cssdoc-root n1(["close-button"]):::cssdoc-component n2[/"‹content›"/]:::cssdoc-slot n0 -.->|0..1| n1 n0 --> n2 click n1 "/api/css/close-button.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;

تعدیل‌کننده‌ها ​

تعدیل‌کنندهتوضیحات
.-placement-bottomپین به لبهٔ پایین.
.-placement-endپین به لبهٔ پایان (inline-end).
.-placement-start(پیش‌فرض) پین به لبهٔ شروع (inline-start).
.-placement-topپین به لبهٔ بالا.
.-size-largeبزرگ. نام طولانی‌ترِ -size-lg.
.-size-lgبزرگ.
.-size-md(پیش‌فرض) متوسط.
.-size-medium(پیش‌فرض) متوسط. نام مستعار طولانی‌تر برای -size-md.
.-size-regularمنسوخ — use .-size-md.
.-size-smکوچک.
.-size-smallکوچک. نام طولانی‌ترِ -size-sm.
.-size-x-largeبسیار بزرگ. نام طولانی‌ترِ -size-xl.
.-size-x-smallبسیار کوچک. نام طولانی‌ترِ -size-xs.
.-size-xlبسیار بزرگ.
.-size-xsبسیار کوچک.

شرایط ​

نوعپرس‌وجوتوضیحات
supports(transition-behavior: allow-discrete)—

توکن‌های مصرف‌شده ​

Tokenنوعمقدار
--instui-component-tray-background-color<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-tray-border-color<color>LightDarklight-dark(#E8EAEC, #334450)
--instui-component-tray-border-width<length>0.0625rem
--instui-component-tray-padding<length>1.5rem
--instui-component-tray-width-lg<length>48em
--instui-component-tray-width-md<length>30em
--instui-component-tray-width-sm<length>20em
--instui-component-tray-width-xl<length>62em
--instui-component-tray-width-xs<length>16em
--instui-component-tray-z-index<integer>9999
--instui-elevation-topmostnone | <shadow>#—
--tray-slide-x—-100%
--tray-slide-y—0%

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

  • با API بومی [popover] و @starting-style باز می‌شود؛ slide-in پشت یک نگهبان @supports (transition-behavior: allow-discrete) قرار دارد، بنابراین در مرورگرهای فاقد آن همچنان tray باز می‌شود، فقط بدون افکت لغزشی.

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

مرتبط ​

  • modal — همان الگوی پوشش قابل بسته‌شدن، اما در مرکز قرار می‌گیرد به‌جای پین‌شدن به لبه.
  • popover — سطح لایهٔ بالایی عمومی که این مورد روی آن ساخته شده است.