StepProgress
원본: projects/skill-lens/design/components/StepProgress/README.md
상태: Stable, 접근성 ✓, 다크 ✓, 코드 ✗
상단 단계 표시: 현재 점은 작은 렌즈, 전환 때 미끄러짐
흐름 위쪽의 단계 표시입니다. 원본은 8판 .stp.
쓰는 곳
온보딩 다섯 단계(Shell 위 바 가운데), 진단 흐름.
구성(화면이 넘겨줄 것)
전체 단계 수, 현재 단계, 단계 이름.
규칙
- 점 10, 선 2(최소 14), 빈 곳은
divider, 지나온 점과 선은 보라. - 현재 위치는 작은 렌즈(
sl-steps__glide, 14 + 연보라 링 4, 안쪽 흰색에서 라임으로)이고 360ms(폰 300) 동안 다음 점으로 미끄러집니다. 위치는left:calc(5px + (100% - 10px) * 단계비율). - 단계 글("1/5 회사, 목적, 목표 (2/3)")은 Shell 위 바에서는 숨기고(8판), 다른 자리에서는 보입니다.
접근성
- 점만으로 위치를 전하지 않습니다. 위 바에서도 단계 이름을 화면 읽기 도구용 글(
sl-sr)로 둡니다.
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.