CSS: tabs.tab ​

.tab — 단일 탭 버튼(InstUI Tabs.Tab, 부모 Tabs의 탭 목록으로 구성); 활성 탭은 -selected로 표시됩니다.

부모 tabs의 -variant-secondary 수정자는 이 멤버를 둥근 "폴더" 탭으로 스타일을 변경합니다 — 해당 수정자에 대한 내용은 tabs의 문서를 참조하세요.

사용법 ​

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

수정자 ​

수정자설명
.-disabled비대화형; [aria-disabled="true"]/:disabled와 동일한 스타일.
.-selected활성 탭; [aria-selected="true"]와 동일한 스타일.

상태 ​

상태설명
[aria-disabled="true"]—
[aria-selected="true"]—
:disabled—
:state(selected)—

사용된 토큰 ​

Token타입값
--instui-component-tabs-panel-border-width<length>0.0625rem
--instui-component-tabs-tab-default-hover-border-color<color>LightDarklight-dark(#8D959F, #6A7883)
--instui-component-tabs-tab-default-selected-border-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-tabs-tab-default-text-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-tabs-tab-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-tabs-tab-font-size<length>1rem
--instui-component-tabs-tab-font-weight<integer>400
--instui-component-tabs-tab-line-height<percentage>125%
--instui-component-tabs-tab-secondary-selected-background<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-tabs-tab-secondary-selected-border-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-tabs-tab-secondary-selected-text-color<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-tabs-tab-secondary-text-color<color>LightDarklight-dark(#273540, #ffffff)