CSS: tray ​

.instui-tray — եզրին ամրացված վահանակ, որը սահում է ցանկացած կողմից; տեղական [popover] կամ <dialog>։

Սկիզբ/վերջ դիրքերն ընտրվում են ըստ inset-inline (լոգիկ, ուղղություն-գիտակից); սահելու փոխակերպումը ինքնաբերաբար արտացոլվում է նախորդ [dir="rtl"]-ի տակ, այնպես որ աջից-նամակ` աջ-ից-ձախ կառուցվածքների জন্য լրացուցիչ նշում հարկավոր չի լինում։

Source: tray.css

Մուտքականություն ​

Տրեյը երկխոսության կամ պոպօվեր մակերես է, ուստի կոչեք այն 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%

Բրաուզերի աջակցություն ​

  • Բացվում է տեղական [popover] API-ով և @starting-style-ով; սահելու էֆեկտը գտնվում է @supports (transition-behavior: allow-discrete) պաշտպանիչի հետևում, ուստի բրաուզերները, որոնք չունեն այն, նույնպես բացում են տրեյը, պարզապես առանց սահման։

Ենթակարողություններ ​

Ավելին կապված ​

  • modal — Բաժանվող նույն ծածկող օրինակը, կենտրոնացված՝ եզրին ամրացվածի փոխարեն։
  • popover — Ընդհանուր վերին-մակերեսը, որի վրա սա կառուցված է։