CSS: tray

.instui-tray — Herhangi bir kenardan kayan, kenara sabitlenmiş bir panel; yerel bir [popover] veya <dialog>.

Başlangıç/bitiş yerleşimleri inset-inline'a göre çözülür (mantıksal, yön farkındalıklı); kayma dönüşümü üst bir [dir="rtl"] altında otomatik olarak terslenir, bu yüzden sağdan sola düzenler için ek işaretleme gerekmez.

Source: tray.css

Erişilebilirlik

Tepsi bir diyalog veya popover yüzeyidir, bu yüzden adlandırması aria-label veya aria-labelledby ile yapılmalı ve kapatma denetimi bir aria-label taşır (örnekteki .instui-close-button aria-label="Close" kullanır).

Kullanım

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

Örnekler

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

Yapı

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

Değiştiriciler

Değiştirici	Açıklama
.-placement-bottom	Alt kenara sabitle.
.-placement-end	Bitiş (inline-end) kenarına sabitle.
.-placement-start	(varsayılan) Başlangıç (inline-start) kenarına sabitle.
.-placement-top	Üst kenara sabitle.
.-size-large	Büyük. -size-lg'ın uzun biçimli takma adı.
.-size-lg	Büyük.
.-size-md	(varsayılan) Orta.
.-size-medium	(varsayılan) Orta. -size-md'in uzun biçimli takma adıdır.
.-size-regular	Kullanımdan kaldırıldı — use .-size-md.
.-size-sm	Küçük.
.-size-small	Küçük. -size-sm'ın uzun biçimli takma adı.
.-size-x-large	Ekstra büyük. -size-xl'ın uzun biçimli takma adı.
.-size-x-small	Ekstra küçük. -size-xs'ın uzun biçimli takma adı.
.-size-xl	Ekstra büyük.
.-size-xs	Ekstra küçük.

Koşullar

Tür	Sorgu	Açıklama
supports	(transition-behavior: allow-discrete)	—

Tüketilen tokenler

Token	Tür	Değer
--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%

Tarayıcı desteği

• Yerel [popover] API'si ve @starting-style ile açılır; kayma, bir @supports (transition-behavior: allow-discrete) korumasının arkasında yer alır, bu yüzden koruma olmayan tarayıcılar yine tepsiyi açar, sadece kayma olmaz.

Alt bileşenler

• close-button

İlgili

• modal — Aynı kapatılabilir örtü deseni, kenara sabitlenmiş yerine ortalanmış.
• popover — Bunun üzerine inşa edildiği genel üst katman yüzey.