CSS: tray

.instui-tray — Reunakiinnitetty paneeli, joka liukuu sisään mistä tahansa sivusta; natiivinen [popover] tai <dialog>.

Alku-/loppuasettelut määräytyvät inset-inline-kontekstissa (looginen, suuntatietoinen); liukuvan transformin peilaus tapahtuu automaattisesti yläpuolisessa [dir="rtl"]:ssä, joten oikealta vasemmalle -asetteluihin ei tarvita ylimääräistä merkintää.

Source: tray.css

Saavutettavuus

Tarjotin on dialogi- tai popover-pintaelementti, joten nimeä se aria-label:lla tai aria-labelledby:llä, ja sen sulkemiskontrollissa on aria-label (esimerkin .instui-close-button käyttää aria-label="Close").

Käyttö

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

Esimerkit

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

Rakenne

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

Muokkaajat

Muokkaaja	Kuvaus
.-placement-bottom	Kiinnitä alareunaan.
.-placement-end	Kiinnitä loppuun (inline-end).
.-placement-start	(oletus) Kiinnitä alkuun (inline-start).
.-placement-top	Kiinnitä yläreunaan.
.-size-large	Suuri. -size-lg:n pitkämuotoinen alias.
.-size-lg	Suuri.
.-size-md	(oletus) Keskikokoinen.
.-size-medium	(oletus) Keskikokoinen. Pitkämuotoinen alias -size-md:lle.
.-size-regular	Vanhentunut — use .-size-md.
.-size-sm	Pieni.
.-size-small	Pieni. -size-sm:n pitkämuotoinen alias.
.-size-x-large	Erittäin suuri. -size-xl:n pitkämuotoinen alias.
.-size-x-small	Erittäin pieni. -size-xs:n pitkämuotoinen alias.
.-size-xl	Erittäin suuri.
.-size-xs	Erittäin pieni.

Ehdot

Tyyppi	Kysely	Kuvaus
supports	(transition-behavior: allow-discrete)	—

Käytetyt tokenit

Token	Tyyppi	Arvo
--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%

Selaintuki

• Avautuu natiivilla [popover]-API:lla ja @starting-style:llä; liukuva osa on @supports (transition-behavior: allow-discrete)-suojaimen takana, joten selaimet ilman sitä avaavat tarjottimen silti, mutta ilman liukuefektiä.

Alikomponentit

• close-button

Liittyvät

• modal — Sama suljettava peitto-malli, keskitetty reunakiinnityksen sijaan.
• popover — Yleinen ylimmän tason pinta, johon tämä perustuu.