Flow
원본: projects/skill-lens/design/components/Flow/README.md
상태: Experimental, 접근성 △(데모), 다크 ✓, 코드 ✗
단계 이동 데모: 옆으로 24px 밀며 들어옴(흐림 없음, 360ms), 진행 점 렌즈가 같은 시간 동안 미끄러짐, 내용은 아래에서 12px 떠오름
다섯 단계가 실제로 넘어가는 데모입니다. 단계 이동 규칙을 한 장에서 보여 줍니다.
쓰는 곳
부품 보기와 검토. 제품 화면에는 이동 규칙만 가져갑니다.
구성(화면이 넘겨줄 것)
각 단계의 내용.
규칙
- 단계 이동은 옆으로: 다음은 오른쪽 24px에서, 이전은 왼쪽 24px에서 밀며 들어옵니다. 흐림 없음, 360ms(폰 300),
ease-scene(8판 .pg-fw, .pg-bk에서 흐림만 뺌). - 진행 점의 현재 위치는 작은 렌즈이고 같은 시간 동안 다음 점으로 미끄러집니다.
- 새 화면의 내용은 아래에서 12px 떠오르며 시차를 두고 등장합니다.
접근성
- 움직임 줄이기에서는 전환 없이 바로 바뀝니다.
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.