Tabs
원본: projects/skill-lens/design/components/Tabs/README.md
상태: Stable, 접근성 ✓, 다크 ✓, 코드 ✗
필터 알약(8판 .chip): 흰 면 + 테, 고르면 먹색. 바탕 위 흰 알약(8판 .seg, 옛 Segmented)은 sl-tabs--seg
같은 목록을 나눠 보거나 값을 고르는 알약입니다. 원본은 8판 .chip(필터 알약)과 .seg(바탕 위 흰 알약).
쓰는 곳
목록 나눠 보기(확인 필요 45, 중복 9, 전체), 목표점수 고르기, 보기 바꾸기.
구성(화면이 넘겨줄 것)
라벨(숫자 포함 가능), 선택 값.
규칙
- 기본(
sl-tab): 흰 면 + 1px 테, 안쪽 8 14, 글자 13. 고르면 먹색 면 + 흰 글자. 호버는 연보라. - 덜 중요한 더 보기(
sl-tab--soft): 연보라 면 + 보라 글자. 아이콘만(sl-tab--icon): 36 정사각. - 바탕 위 흰 알약(
sl-tabs--seg): canvas 바탕 안쪽 4, 항목 9 18 글자 14 600, 고르면 흰 면 + 그림자. - 폰에서는 줄을 바꾸지 않고 옆으로 밀어 봅니다.
접근성
- 나눠 보기는
role="tablist"+aria-selected, 값 고르기는aria-pressed.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Navigation" height=230 width=880 subtitle="필터 알약(8판 .chip): 흰 면 + 테, 고르면 먹색. 바탕 위 흰 알약(8판 .seg, 옛 Segmented)은 sl-tabs--seg" -->
<style>body{margin:0;padding:var(--space-6);background:var(--canvas)}.stack{display:flex;flex-direction:column;gap:var(--space-6)}.w880{max-width:814px}</style><div class="sl stack">
<div class="sl-tabs" role="tablist"><button class="sl-tab" role="tab" aria-selected="true">확인 필요 45</button><button class="sl-tab" role="tab" aria-selected="false">중복 9</button><button class="sl-tab" role="tab" aria-selected="false">전체 1,248</button><button class="sl-tab sl-tab--soft" role="tab" aria-selected="false">+ 41개 직무</button><button class="sl-tab is-focus" role="tab" aria-selected="false">포커스</button><button class="sl-tab" role="tab" aria-selected="false" disabled>비활성</button></div>
<div class="sl-tabs" role="radiogroup" aria-label="목표점수"><button class="sl-tab" role="radio" aria-pressed="false">60</button><button class="sl-tab" role="radio" aria-pressed="true">75</button><button class="sl-tab" role="radio" aria-pressed="false">90</button><button class="sl-tab" role="radio" aria-pressed="false">직접 넣기</button></div>
<div class="sl-tabs sl-tabs--seg" role="tablist"><button class="sl-tab" role="tab" aria-selected="true">준비된 목적에서 고르기</button><button class="sl-tab" role="tab" aria-selected="false">직접 쓰기</button></div>
</div>이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.