CSS: tray

.instui-tray — Un panell fixat a la vora que llisca des de qualsevol costat; un [popover] o <dialog> natiu.

Les posicions d'inici/fi es resolen respecte a inset-inline (lògica, conscient de la direcció); la transformació de lliscament es reflecteix automàticament sota un ancestre [dir="rtl"], així que no cal marcatge addicional per a dissenys dret-a-esquerra.

Source: tray.css

Accessibilitat

La safata és una superfície de diàleg o popover, així que anomena-la amb aria-label o aria-labelledby, i el seu control de tancament porta un aria-label (el .instui-close-button a l'exemple fa servir aria-label="Close").

Ús

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

Exemples

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

Estructura

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

Modificadors

Modificador	Descripció
.-placement-bottom	Fixar a la vora inferior.
.-placement-end	Fixar a la vora final (inline-end).
.-placement-start	(per defecte) Fixar a la vora d'inici (inline-start).
.-placement-top	Fixar a la vora superior.
.-size-large	Gran. Àlies en forma llarga de -size-lg.
.-size-lg	Gran.
.-size-md	(per defecte) Mitjà.
.-size-medium	(per defecte) Mitjà. Àlies en forma llarga de -size-md.
.-size-regular	Deprecat — use .-size-md.
.-size-sm	Petit.
.-size-small	Petit. Àlies en forma llarga de -size-sm.
.-size-x-large	Extra gran. Àlies en forma llarga de -size-xl.
.-size-x-small	Extra petit. Àlies en forma llarga de -size-xs.
.-size-xl	Extra gran.
.-size-xs	Extra petit.

Condicions

Tipus	Consulta	Descripció
supports	(transition-behavior: allow-discrete)	—

Tokens consumits

Token	Tipus	Valor
--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%

Suport del navegador

• S'obre amb l'API nativa [popover] i @starting-style; el lliscament queda darrere d'una protecció @supports (transition-behavior: allow-discrete), així que els navegadors que no la tinguin encara obren la safata, però sense el lliscament.

Subcomponents

• close-button

Relacionat

• modal — El mateix patró de superposició descartable, centrat en lloc d'estar fixat a la vora.
• popover — La superfície genèrica de capa superior sobre la qual es construeix això.