CSS: tray

.instui-tray — Panel wedi’i binio ar ymyl sy’n llithro i mewn o unrhyw ochr; [popover] neu <dialog> brodorol.

Mae lleoliadau dechrau/diwedd yn cael eu datrys yn erbyn inset-inline (rhithiol, yn ymwybodol o gyfeiriad); mae’r trawsffurf llithro-i-mewn yn adlewyrchu’n awtomatig o dan rhiant [dir="rtl"], felly nid oes angen marc-up ychwanegol ar gyfer gosodiadau o dde i chwith.

Source: tray.css

Hygyrchedd

Mae’r drôr yn arwyneb deialog neu popover, felly enwch ef gyda aria-label neu aria-labelledby, a mae ei reolaeth cau yn cario aria-label (mae’r .instui-close-button yn yr enghraifft yn defnyddio aria-label="Close").

Defnydd

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

Enghreifftiau

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

Strwythur

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

Modyfiwyr

Modyfiwr	Disgrifiad
.-placement-bottom	Pinio i’r ymyl gwaelod.
.-placement-end	Pinio i’r ymyl diwedd (inline-end).
.-placement-start	(diofyn) Pinio i’r ymyl cychwyn (inline-start).
.-placement-top	Pinio i’r ymyl uchaf.
.-size-large	Mawr. Enw hir ffurf -size-lg.
.-size-lg	Mawr.
.-size-md	(diofyn) Canolig.
.-size-medium	(diofyn) Canolig. Fersiwn alias hir o -size-md.
.-size-regular	Wedi'i henffurfio — use .-size-md.
.-size-sm	Bach.
.-size-small	Bach. Enw hir ffurf -size-sm.
.-size-x-large	Eithriadol fawr. Enw hir ffurf -size-xl.
.-size-x-small	Eithriadol bach. Enw hir ffurf -size-xs.
.-size-xl	Eithriadol fawr.
.-size-xs	Eithriadol bach.

Amodau

Math	Ymchwiliad	Disgrifiad
supports	(transition-behavior: allow-discrete)	—

Tocynnau a ddefnyddiwyd

Token	Math	Gwerth
--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%

Cefnogaeth porwr

• Yn agor gyda’r API brodorol [popover] a @starting-style; mae’r llithriad-i-mewn yn sefyll tu ôl gwarchodyn @supports (transition-behavior: allow-discrete), felly mae porwyr heb hwn yn dal i agor y drôr, dim ond heb y llithriad.

Is-gydrannau

• close-button

Perthnasol

• modal — Yr un patrwm orchudd gellir ei ddiddymu, wedi’i ganoli yn hytrach na’i binio ar ymyl.
• popover — Yr arwyneb haen uchaf cyffredinol y mae hyn yn ei adeiladu arno.