CSS: tray

.instui-tray — Yon panèl kole sou kwen ki glise soti nenpòt bò; yon natif [popover] oswa <dialog>.

Pozisyon kòmansman/fen yo rezoud an rapò ak inset-inline (lojik, sans-direksyon); transfòmasyon glise-a reflete otomatikman anba yon zansèt [dir="rtl"], kidonk pa bezwen makaj anplis pou aranjman dwat-a-gòch.

Source: tray.css

Aksè

Tray la se yon dyalòg oswa yon sifas popover, kidonk nonmen li ak aria-label oswa aria-labelledby, epi kontwòl fèmen li pote yon aria-label ( .instui-close-button nan egzanp lan itilize aria-label="Close" ).

Itilizasyon

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

Egzanp

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

Estrikti

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

Modifikatè

Modifikatè	Deskripsyon
.-placement-bottom	Kole sou kwen anba a.
.-placement-end	Kole sou kwen fen an (inline-end).
.-placement-start	(default) Kole sou kwen kòmansman an (inline-start).
.-placement-top	Kole sou kwen anlè a.
.-size-large	Gwo. Alias long fòm pou -size-lg.
.-size-lg	Gwo.
.-size-md	(default) Mwayen.
.-size-medium	(default) Mwayen. Alias an fòm long pou -size-md.
.-size-regular	Depreke — use .-size-md.
.-size-sm	Ti.
.-size-small	Ti. Alias long fòm pou -size-sm.
.-size-x-large	Ekstra gwo. Alias long fòm pou -size-xl.
.-size-x-small	Ekstra piti. Alias long fòm pou -size-xs.
.-size-xl	Ekstra gwo.
.-size-xs	Ekstra piti.

Kondisyon

Tip	Rechèch	Deskripsyon
supports	(transition-behavior: allow-discrete)	—

Tokens konsome

Token	Tip	Valè
--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%

Sipò navigatè

• Louvri ak API natif [popover] ak @starting-style; glise-a chita dèyè yon gad @supports (transition-behavior: allow-discrete), konsa navigatè ki pa gen li toujou ouvri tray la, men san glise a.

Sou-konpozan

• close-button

Ki gen rapò

• modal — Menm modèl kouch-overlay ki ka fèmen, santre olye pou l kole sou kwen.
• popover — Sifas jeneral kouch anlè sou ki sa a bati.