CSS: tray

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

Forrás: tray.css

Akadálymentesség

A tálca egy párbeszéd vagy felugró felület, ezért nevezze el aria-label vagy aria-labelledby nevet, és a bezárás vezérlő aria-label nevet hordoz (a .instui-close-button a példában aria-label="Close" használ).

Használat

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

Példák

<div class="instui-tray -size-sm" id="tray-start">
  <div>
    <strong>Filters</strong>
    <button class="instui-close-button" aria-label="Close"></button>
  </div>
  <p class="instui-text -size-sm">A tray slides in from the start edge and fills the viewport height.</p>
</div>

Filters

A tray slides in from the start edge and fills the viewport height.

Felépítés

.instui-tray
  div
    strong
    close-button (component)
  text (component)

flowchart TD n0[".instui-tray"]:::cssdoc-root n1("div"):::cssdoc-part n2("strong"):::cssdoc-part n3(["close-button"]):::cssdoc-component n4(["text"]):::cssdoc-component n1 --> n2 n1 --> n3 n0 --> n1 n0 --> n4 click n3 "/api/css/close-button.md" click n4 "/api/css/text.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ó szélhez.
.-placement-end	Rögzítés a vég (inline-end) szélhez.
.-placement-top	Rögzítés a felső szélhez.
.-size-large	Nagy. Hosszú forma alias a -size-lg.
.-size-lg	Nagy.
.-size-sm	Kicsi.
.-size-small	Kicsi. Hosszú forma alias a -size-sm.
.-size-x-large	Nagyon nagy. Hosszú forma alias a -size-xl.
.-size-x-small	Nagyon kicsi. Hosszú forma alias a -size-xs.
.-size-xl	Nagyon nagy.
.-size-xs	Nagyon kicsi.

Feltételek

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

Felhasznált tokenek

Token	Típus	Érték
--instui-component-tray-background-color	<color>	light-dark(#ffffff, #1C222B)LightDark
--instui-component-tray-border-color	<color>	light-dark(#E8EAEC, #334450)LightDark
--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	[ inset? && <length>{2,4} && <color>? ]# | none	—

Böngészőtámogatás

• Megnyitás a natív [popover] API és @starting-style segítségével; a csúszás egy @supports (transition-behavior: allow-discrete) őr mögött ül, tehát a böngészők anélkül is megnyitják a tálcát, csak csúszás nélkül.

Alkomponensek

• close-button
• text

Kapcsolódó

• modal — Az ugyanez eltávolítható rétegminta, középre helyezve szélhez rögzítés helyett.
• popover — Az általános felső réteg felület, amelyen ez építkezik.