CSS: tray

.instui-tray — Painéal greamaithe ar an imeall a sleamhnaíonn isteach ó aon thaobh; [popover] nó <dialog> dúchais.

Réitítear suíomhanna tosaigh/deiridh i gcoinne inset-inline (loighciúil, aireach treoracha); déanann an t-athrú sleamhnaithe-in macasamhail go huathoibríoch faoi [dir="rtl"] sean-athar, mar sin níl marcáil bhreise ag teastáil do leaganacha deas-go-chlé.

Source: tray.css

Inrochtaineacht

Is dromchla dialóige nó popover é an tray, mar sin ainmníoidh tú é le aria-label nó aria-labelledby, agus tá aria-label ar a rialtóir dúnadh (úsáideann an .instui-close-button sa shampla aria-label="Close").

Úsáid

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

Samplaí

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

Struchtúr

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

Modhnóirí

Modhnóir	Cur síos
.-placement-bottom	Greamaigh chuig an imeall íochtarach.
.-placement-end	Greamaigh chuig an imeall deiridh (inline-end).
.-placement-start	(réamhshocraithe) Greamaigh chuig an imeall tosaigh (inline-start).
.-placement-top	Greamaigh chuig an imeall uachtarach.
.-size-large	Mór. Ainm fhadaaistear de -size-lg.
.-size-lg	Mór.
.-size-md	(réamhshocraithe) Meánach.
.-size-medium	(réamhshocraithe) Meánach. Ailias fhada de -size-md.
.-size-regular	As dáta — use .-size-md.
.-size-sm	Beag.
.-size-small	Beag. Ainm fhadaaistear de -size-sm.
.-size-x-large	Breise-mhór. Ainm fhadaaistear de -size-xl.
.-size-x-small	Breise-beag. Ainm fhadaaistear de -size-xs.
.-size-xl	Breise-mhór.
.-size-xs	Breise-beag.

Coinníollacha

Cineál	Ceist	Cur síos
supports	(transition-behavior: allow-discrete)	—

Tóicíní a úsáideadh

Token	Cineál	Luach
--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%

Tacaíocht bhrabhsálaí

• Osclaíonn sé leis an API dúchais [popover] agus @starting-style; tá an sleamhnán suite taobh thiar de garda @supports (transition-behavior: allow-discrete), mar sin osclaíonn brabhsálaithe nach bhfuil é seo acu an tray fós, ach gan an sleamhnán.

Fo-chomhpháirteanna

• close-button

Gaolmhar

• modal — An patrún clúdach indíothaithe céanna, lárnach seachas greamaithe ar an imeall.
• popover — An dromchla sraithe uachtair ghinearálta ar a bhfuil sé bunaithe.