CSS: tray

.instui-tray — Un pannello ancorato al bordo che scorre da qualsiasi lato; un [popover] o <dialog> nativo.

Le posizioni start/end si risolvono rispetto a inset-inline (logico, sensibile alla direzione); la trasformazione di scorrimento si specchia automaticamente sotto un antenato [dir="rtl"], quindi non è necessario markup aggiuntivo per layout da destra a sinistra.

Source: tray.css

Accessibilità

Il tray è una superficie di dialogo o popover, quindi denominalo con aria-label o aria-labelledby, e il suo controllo di chiusura porta un aria-label (l'esempio usa aria-label="Close" per .instui-close-button).

Uso

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

Esempi

<div class="instui-tray -placement-end -size-sm">
  <span class="instui-heading -level-h3">Filtri</span>
  <p class="-size-sm">Un pannello scivola dal bordo iniziale e riempie l'altezza della viewport.</p>
</div>
<button class="instui-button -toggle">attiva/disattiva pannello</button>

Struttura

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

Modificatori

Modificatore	Descrizione
.-placement-bottom	Ancorare al bordo inferiore.
.-placement-end	Ancorare al bordo di end (inline-end).
.-placement-start	(predefinito) Ancorare al bordo di start (inline-start).
.-placement-top	Ancorare al bordo superiore.
.-size-large	Grande. Alias esteso di -size-lg.
.-size-lg	Grande.
.-size-md	(predefinito) Medio.
.-size-medium	(predefinito) Medio. Alias esteso di -size-md.
.-size-regular	Deprecato — use .-size-md.
.-size-sm	Piccolo.
.-size-small	Piccolo. Alias esteso di -size-sm.
.-size-x-large	Extra large. Alias esteso di -size-xl.
.-size-x-small	Extra small. Alias esteso di -size-xs.
.-size-xl	Extra grande.
.-size-xs	Extra piccolo.

Condizioni

Tipo	Query	Descrizione
supports	(transition-behavior: allow-discrete)	—

Token consumati

Token	Tipo	Valore
--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%

Supporto browser

• Si apre con le API native [popover] e @starting-style; l'effetto di scorrimento è protetto da un guard @supports (transition-behavior: allow-discrete), quindi i browser che non lo supportano aprono comunque il tray, ma senza lo scorrimento.

Sottocomponenti

• close-button

Correlati

• modal — Lo stesso pattern di sovrapposizione dismissible, centrato invece che ancorato al bordo.
• popover — La superficie generica di livello superiore su cui si basa questo componente.