결과 화면

긴 흐름이 끝났을 때. 성공이든 실패든 다음에 무엇을 할지 알려줍니다.

코드

<div class="jt-result" role="status">
  <span class="jt-result-icon jt-result-pass">
    <span class="jt-ico-mask jt-ico-lg" style="--jt-ico-url:url(/brand/icons/task_alt.svg)" aria-hidden="true"></span>
  </span>
  <h3 class="jt-result-title">보고서를 발행했습니다</h3>
  <p class="jt-result-desc">LOT 26H21-03 자주측정 시험성적서 · 적합</p>
  <div class="jt-row" style="justify-content:center">
    <button class="jt-btn">PDF 내려받기</button>
    <button class="jt-btn-ghost">목록으로</button>
  </div>
</div>

하지 말 것

다음 행동 버튼 없이 결과만 두지 마세요. 사용자가 뒤로가기밖에 할 게 없어집니다.

접근성

role="status"로 감싸면 화면이 바뀐 것을 스크린리더가 읽습니다
아이콘은 장식이므로 aria-hidden, 의미는 제목 글자가 전달합니다

앱에서 모양 바꾸기

jt-utilities.css를 고치지 말고 아래 변수만 덮어쓰세요(컴포넌트 계약).

노브: jt-result-pass / -fail / -hold

.my-page .jt-result { jt-result-pass: …; }

결과 화면

코드

하지 말 것

접근성

앱에서 모양 바꾸기

관련