Stack
간격 토큰으로 쌓고 4·8·12열 격자로 배치.
- 출시 화면에서 사용
개요
미리보기
First
Second area
Third
예시
상태
세로
FirstSecond areaThird가로
FirstSecond areaThird가로 · 줄바꿈
FirstSecond areaThird
쓰임 예
촘촘하게
FirstSecond areaThird넉넉하게
FirstSecond areaThird양끝 배치
FirstSecond areaThird
이렇게 · 이렇게 하지 않기
- 이렇게 간격은 토큰 값만 쓴다. 읽는 순서와 초점 순서가 시각 순서와 같아야 하므로 CSS order로 순서를 바꾸지 않는다. 320px에서 가로 넘침이 없어야 한다.
- 이렇게 간격은 토큰 단계로만 정한다. 같은 묶음에는 같은 간격.
- 이렇게 하지 않기 DOM 순서 = 시각 순서. order, row-reverse, dense 배치로 순서를 바꾸지 않는다(초점 순서가 어긋난다).
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
direction? | 'column' | 'row' | column | 쌓는 방향. |
gap? | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | lg | 간격 토큰 단계: none 0 · xs 4 · sm 8 · md 12 · lg 16 · xl 24 · 2xl 32px. 임의 숫자는 받지 않는다. |
align? | 'stretch' | 'start' | 'center' | 'end' | stretch | 교차축 정렬. |
justify? | 'start' | 'center' | 'end' | 'between' | start | 주축 배치. |
wrap? | boolean | false | row에서 넘치면 다음 줄로. 320px에서 가로 스크롤을 막는다. |
as? | 'div' | 'ul' | 'ol' | div | 목록이면 ul/ol. 마커를 지우므로 role="list"를 명시한다. |
children? | ReactNode | — | 쌓을 요소. 미리보기는 표본 3개. |
| 그 밖의 속성 | — | — | id, aria-* 등 네이티브 속성은 그대로 전달된다. className·style은 받지 않는다. |
접근성
키보드: 해당 없음(배치만).
- DOM 순서 = 시각 순서. order, row-reverse, dense 배치로 순서를 바꾸지 않는다(초점 순서가 어긋난다).