CSS: tray

.instui-tray — 모든 쪽에서 슬라이드해 들어오는 가장자리에 고정된 패널; 네이티브 [popover] 또는 <dialog>.

시작/끝 배치는 inset-inline(논리적, 방향 인식)에 따라 해석됩니다; 슬라이드 인 변환은 상위에 [dir="rtl"]이 있을 경우 자동으로 반전되므로, 오른쪽에서 왼쪽 레이아웃에 대해 추가 마크업이 필요하지 않습니다.

Source: tray.css

접근성

트레이는 대화상자 또는 팝오버 표면이므로 aria-label 또는 aria-labelledby로 이름을 지정하고, 닫기 컨트롤에는 aria-label가 있어야 합니다(예제의 .instui-close-button는 aria-label="Close"를 사용합니다).

사용법

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

예제들

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

구조

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

수정자

수정자	설명
.-placement-bottom	하단 가장자리에 고정합니다.
.-placement-end	끝(inline-end) 가장자리에 고정합니다.
.-placement-start	(기본) 시작(inline-start) 가장자리에 고정합니다.
.-placement-top	상단 가장자리에 고정합니다.
.-size-large	Large. -size-lg의 장기형 별칭.
.-size-lg	크게(Large).
.-size-md	(기본) 중간.
.-size-medium	(기본) 중간. -size-md의 긴 형식 별칭.
.-size-regular	더 이상 사용되지 않음 — use .-size-md.
.-size-sm	작음(Small).
.-size-small	작음(Small). -size-sm의 장기형 별칭.
.-size-x-large	매우 큼(Extra large). -size-xl의 장기형 별칭.
.-size-x-small	매우 작음(Extra small). -size-xs의 장기형 별칭.
.-size-xl	매우 큼(Extra large).
.-size-xs	매우 작음(Extra small).

조건

타입	쿼리	설명
supports	(transition-behavior: allow-discrete)	—

사용된 토큰

Token	타입	값
--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%

브라우저 지원

• 네이티브 [popover] API와 @starting-style로 열립니다; 슬라이드 인은 @supports (transition-behavior: allow-discrete) 가드 뒤에 위치하므로 해당 기능이 없는 브라우저도 트레이를 열지만 슬라이드는 표시되지 않습니다.

하위 컴포넌트

• close-button

관련 항목

• modal — 동일한 해제 가능한 오버레이 패턴이지만 가장자리에 고정되지 않고 가운데 정렬됩니다.
• popover — 이 컴포넌트가 기반으로 하는 일반적인 최상위 표면입니다.