모바일 하단 탭바

모바일 주요 메뉴. 화면이 커지면서 엄지가 상단에 닿지 않기 때문입니다.

코드

<nav class="jt-tabbar" aria-label="주요 메뉴">
  <a class="jt-tabbar-item" href="/items" aria-current="page">
    <span class="jt-ico-mask" style="--jt-ico-url:url(/brand/icons/inventory_2.svg)" aria-hidden="true"></span>
    <span class="jt-tabbar-label">품목</span>
  </a>
  <a class="jt-tabbar-item" href="/load">
    <span class="jt-ico-mask" style="--jt-ico-url:url(/brand/icons/scale.svg)" aria-hidden="true"></span>
    <span class="jt-tabbar-label">적재</span>
  </a>
</nav>

하지 말 것

메뉴를 6개 이상 넣지 마세요. 5개가 한계입니다. 넘으면 4개 + ‘더보기’ 드로어로 나눕니다.
라벨 없이 아이콘만 두지 마세요. 아이콘만으로 뜻이 통하는 경우는 생각보다 적습니다.

접근성

아이콘은 SVG 방식(.jt-ico-mask)을 쓰세요 — CDN이 막혀도 항상 보입니다. 주요 내비게이션이 안 보이면 앱을 쓸 수 없습니다.
env(safe-area-inset-bottom)으로 iPhone 홈바를 피합니다
탭바가 있으면 본문 하단 여백이 자동으로 생깁니다 — 앱이 계산할 필요 없습니다

앱에서 모양 바꾸기

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

노브: --jt-tabbar-h(56px)

.my-page .jt-tabbar { --jt-tabbar-h`(56px): …; }

모바일 하단 탭바

코드

하지 말 것

접근성

앱에서 모양 바꾸기

관련