CSS: tabs

.instui-tabs — 탭형 패널 세트: 탭 목록, 선택 가능한 탭들, 그리고 각 탭의 패널입니다.

개별 탭 버튼과 해당 콘텐츠 패널은 tabs.tab 및 tabs.panel 멤버를 참조하세요.

Source: panel.css

TIP

JS 향상 — 이 컴포넌트의 CSS는 자체적으로 렌더링되고 동작합니다; 상호작용 동작을 추가하려면 @pantoken/interactions와 짝지으세요. 아래 수정자 표를 참고하세요.

접근성

탭 목록에는 role="tablist"를, 각 탭에는 role="tab"와 aria-selected를, 각 패널에는 role="tabpanel"을 연결하세요.

사용법

@import "@pantoken/components/components.css";
@import "@pantoken/components/tabs.css";

예제들

<div class="instui-tabs -variant-secondary">
  <div class="list" role="tablist" aria-label="Project views">
    <button class="tab -selected" role="tab" aria-selected="true">개요</button>
    <button class="tab" role="tab" aria-selected="false">활동</button>
  </div>
  <div class="panel" role="tabpanel">프로젝트 개요</div>
</div>

구조

.instui-tabs
  list (component)
    tabs.tab (component, 0..n)
  tabs.panel (component, 0..n)

flowchart TD n0[".instui-tabs"]:::cssdoc-root n1(["list"]):::cssdoc-component n2(["tabs.tab"]):::cssdoc-component n3(["tabs.panel"]):::cssdoc-component n1 -->|0..n| n2 n0 --> n1 n0 -->|0..n| n3 click n1 "/api/css/list.md" click n2 "/api/css/tabs.tab.md" click n3 "/api/css/tabs.panel.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

수정자

수정자	설명
.-overflow-scroll	탭 목록을 한 줄에 유지하고 줄 바꿈 대신 수평으로 스크롤하도록 하여 스크롤바를 숨기세요.
.-variant-secondary	선택된 탭이 아래 패널과 시각적으로 연결되는 둥근 "폴더" 탭 스타일입니다. @affects tabs.tab — 탭 버튼을 둥근 "폴더" 모양으로 다시 스타일링합니다.

부분

부분	설명
.list	탭들의 한 줄.

사용된 토큰

Token	타입	값
--instui-component-tabs-default-background	<color>	#00000000

하위 컴포넌트

• list
• tabs.panel
• tabs.tab