도크
PC에서 오른쪽에 붙는 상세 창이에요. 폭을 끌어 바꾸고 닫을 수 있어요.
모바일PCDock
플랫폼
폰 브라우저·홈 화면 앱(767px 이하)고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- PC 오른쪽 도크.
인터페이스#
타입에서 자동으로 뽑은 표예요.
Dock#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| title* | - | string | 마우스를 올리면 뜨는 설명이에요. label이 없으면 이름으로도 써요. |
| header | - | (scrollEl: HTMLElement | null, opts: { framed: boolean; }) => React.ReactNode | framed=true면 도크가 헤더 **바깥에 테두리를 두른다**(떠 있는 폰) - 헤더는 자기 경계선을 빼야 한다. |
| scrollRef | - | RefObject<HTMLDivElement | null> | |
| width* | - | number | |
| setWidth* | - | (w: number) => void | |
| onClose* | - | () => void | 닫아야 할 때 불러요. |
| onBack | - | () => void | |
| flush | - | boolean | |
| bottomBar | - | ReactNode | |
| offsetTop | - | boolean | |
| children* | - | ReactNode | 안에 그릴 내용이에요. |
| phone | - | boolean | 데스크톱에서 '떠 있는 폰'으로 그린다(단지 상세 전용). 리스트 도크는 지금의 판 그대로. |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
접근성#
- 닫기·뒤로 버튼에 이름이 있어요.
- Esc로 닫혀요.
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요. |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |