CSS: tray

.instui-tray — Egy élhez rögzített panel, amely bármely oldalról behúzódik; natív [popover] vagy <dialog>.

A start/end elhelyezések az inset-inline-hez igazodnak (logikai, irányérzékeny); a slide-in transzform automatikusan tükröződik egy felöli [dir="rtl"] alatt, így nincs szükség külön jelölésre jobb-bal irányú elrendezéshez.

Source: tray.css

Hozzáférhetőség

A tray egy dialog vagy popover felület, ezért nevezd el aria-label vagy aria-labelledby segítségével, és a bezáró vezérlője rendelkezzen aria-label-vel (a példában a .instui-close-button az aria-label="Close"-et használja).

Használat

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

Példák

<div class="instui-tray -placement-end -size-sm">
  <span class="instui-heading -level-h3">Szűrők</span>
  <p class="-size-sm">A tálca a kezdő él felől csúszik be, és kitölti a nézetablak magasságát.</p>
</div>
<button class="instui-button -toggle">tálca váltása</button>

Struktúra

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

Módosítók

Módosító	Leírás
.-placement-bottom	Rögzítés az alsó élhez.
.-placement-end	Rögzítés a vég (inline-end) élhez.
.-placement-start	(alapértelmezett) Rögzítés a kezdő (inline-start) élhez.
.-placement-top	Rögzítés a felső élhez.
.-size-large	Nagy. Hosszú forma alias az -size-lg-nak.
.-size-lg	Nagy.
.-size-md	(alapértelmezett) Közepes.
.-size-medium	(alapértelmezett) Közepes. A -size-md hosszabb formájú aliasa.
.-size-regular	Elavult — use .-size-md.
.-size-sm	Kicsi.
.-size-small	Kicsi. Hosszú forma alias az -size-sm-nak.
.-size-x-large	Extra nagy. Hosszú forma alias az -size-xl-nak.
.-size-x-small	Extra kicsi. Hosszú forma alias az -size-xs-nak.
.-size-xl	Extra nagy.
.-size-xs	Extra kicsi.

Feltételek

Típus	Lekérdezés	Leírás
supports	(transition-behavior: allow-discrete)	—

Fogyasztott tokenek

Token	Típus	Érték
--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%

Böngészőtámogatás

• Megnyílik a natív [popover] API-val és @starting-style; a slide-in egy @supports (transition-behavior: allow-discrete) őr mögött van, így azok a böngészők is megnyitják a tray-t, amelyek nem támogatják, csak a slide hiányzik.

Alkomponensek

• close-button

Kapcsolódó

• modal — Ugyanaz az elutasítható overlay minta, középre rendezve az élekhez rögzítés helyett.
• popover — A generikus felső réteg felület, amire ez épül.