CSS: tray

.instui-tray — Plošča pritrjena ob rob, ki se prikaže z vsake strani; nativen [popover] ali <dialog>.

Postavitve start/end se razrešijo glede na inset-inline (logično, občutljivo na smer); transformacija drsenja se samodejno zrcali pod prednikom [dir="rtl"], zato za postavitve od desne proti levi ni potrebna dodatna označba.

Source: tray.css

Dostopnost

Pladenj je površina dialoga ali popoverja, zato ga poimenujte z aria-label ali aria-labelledby, njegovo zapiralno upravljanje pa nosi aria-label (vzorčni .instui-close-button uporablja aria-label="Close").

Uporaba

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

Primeri

<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>

Struktura

.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;

Spremenljivke (modifikatorji)

Modifikator	Opis
.-placement-bottom	Pritrdi na spodnji rob.
.-placement-end	Pritrdi na konec (inline-end) roba.
.-placement-start	(privzeto) Pritrdi na začetek (inline-start) roba.
.-placement-top	Pritrdi na zgornji rob.
.-size-large	Veliko. Dolga oblika aliasa za -size-lg.
.-size-lg	Veliko.
.-size-md	(privzeto) Srednje.
.-size-medium	(privzeto) Srednje. Dolga oblika nadomestnega imena za -size-md.
.-size-regular	Zastarelo — use .-size-md.
.-size-sm	Majhno.
.-size-small	Majhno. Dolga oblika aliasa za -size-sm.
.-size-x-large	Zelo veliko. Dolga oblika aliasa za -size-xl.
.-size-x-small	Zelo majhno. Dolga oblika aliasa za -size-xs.
.-size-xl	Zelo veliko.
.-size-xs	Zelo majhno.

Pogoji

Tip	Poizvedba	Opis
supports	(transition-behavior: allow-discrete)	—

Porabljeni žetoni

Token	Tip	Vrednost
--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-topmost	none | <shadow>#	—
--tray-slide-x	—	-100%
--tray-slide-y	—	0%

Podpora brskalnika

• Odpre se z nativen [popover] API in @starting-style; drsna plošča se nahaja za varovalko @supports (transition-behavior: allow-discrete), zato brskalniki brez te varovalke še vedno odprejo pladenj, le brez drsenja.

Podkomponente

• close-button

Sorodno

• modal — Enak vzorec zapiralnega prekrivnega sloja, poravnan na sredino namesto pritrjen ob rob.
• popover — Generična površina zgornjega sloja, na kateri je to zgrajeno.