SwipeRow
행을 왼쪽으로 밀면 뒤에서 행동 하나(삭제 등)가 나타나고, 끝까지 밀면 그 행동이 실행되는 행이다.
- 분류
- 면과 목록
- 가져오기
import { SwipeRow } from '@/ui/SwipeRow'- 코드 위치
apps/mobile/src/ui/SwipeRow.tsx:12
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
영어 단어장자료 4개
언제 쓰는가#
쓴다
- 목록 행에서 자주 쓰는 행동 하나(삭제, 보관)를 빠르게 하게 할 때 쓴다.
- 밀어서 하는 행동은 반드시 다른 방법(메뉴, 상세 화면의 버튼)으로도 할 수 있게 한다.
쓰지 않는다
- 밀기가 유일한 방법인 행동에 쓰지 않는다. 손을 쓰기 어려운 사용자가 할 수 없다.
- 되돌릴 수 없는 삭제를 확인 없이 실행하지 않는다.
onAction에서dialog.confirm이나 되돌리기 토스트를 쓴다. - 가로로 스크롤되는 목록 안에서 쓰지 않는다. 제스처가 겹친다.
종류#
종류가 없다. 행동의 색은 tint(기본 danger)로 바꾼다.
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 밀기 기준 110 | 왼쪽으로 110 넘게 밀고 놓으면 실행한다. 모서리는 18. |
상태#
| 상태 | 모습과 동작 |
|---|---|
| 쉬는 중 | 행동 면이 보이지 않는다(가장자리에 색이 비치지 않는다). |
| 미는 중 | 뒤에서 tint 색 면과 아이콘·글자가 나타난다. 기준(110)을 넘는 순간 선택 진동이 난다. |
| 놓음 | 기준을 넘었으면 200ms 동안 화면 밖으로 사라지며 onAction을 부른다. 못 넘었으면 스프링(damping 18)으로 제자리로 돌아온다. |
사용 방법#
기본
기본
import { SwipeRow } from '@/ui/SwipeRow';
<SwipeRow label="삭제" icon={<Trash2 size={20} color={color.white} />} onAction={() => void removeWithUndo(item)}>
<WellRow title={item.name} />
</SwipeRow>속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
children | ReactNode | — | 필수 | 밀리는 행. |
label | string | — | 필수 | 뒤에 나타나는 행동 이름. |
icon | ReactNode | — | 필수 | 뒤에 나타나는 행동 아이콘. |
tint | string | color.danger | 선택 | 뒤 면의 색. 기본 color.danger. |
onAction | () => void | — | 필수 | 끝까지 밀고 놓았을 때 실행할 함수. |
치수와 토큰#
- 기준
- 왼쪽으로 110 이상 밀면 실행
- 뒤 면
tint면, 모서리 18, 오른쪽 안쪽 22, 아이콘과 글자(smallStrong, white) 세로로- 제스처
- 가로 18 이상 움직여야 시작, 세로 12 넘게 움직이면 취소(목록 스크롤을 방해하지 않는다)
접근성#
- 밀기 제스처에는 화면 읽기 프로그램용 대체 동작이 없다. 같은 행동을 상세 화면이나 메뉴에서도 제공해야 한다.
- 뒤 면의 행동은 색과 글자로 나타난다.
글자 색 대비
글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.
| 쓰임 | 글자색 | 바탕 | 대비 | 기준 |
|---|---|---|---|---|
| 뒤 면 글자 (13px 굵게) | white | danger | 4.55:1 통과3.02:1 미달5.15:1 통과1.99:1 미달 | 4.5:1 (작은 글자) |
잘한 예와 잘못한 예#
영어 단어장자료 4개
영어 단어장밀어서만 삭제할 수 있음