CSS: segmented-control

.instui-segmented-control — 단일 선택 행(컴팩트 보기 또는 필터 옵션).

선택된 세그먼트는 별도의 active-item 그림자(섀도우)를 사용합니다; 기존 --instui-elevation-* 복합체와 일치하지 않습니다. 오버플로우 버튼은 업스트림 elevation3 컴포넌트 토큰을 사용합니다.

TIP

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

접근성

레이블이 있는 fieldset과 하나의 공용 라디오 이름을 사용하고 기본으로 체크된 항목을 지정하세요. 네이티브 라디오 는 자신의 체크 상태를 알립니다; 오버플로우 버튼에는 스크롤 방향을 설명하는 레이블이 필요합니다.

사용법

@import "@pantoken/plugin-custom-components/custom-components.css";

구조

fieldset.instui-segmented-control
  .viewport
    button.overflow-start (0..1)
    .track
      segmented-control.segment (component, 1..n)
    button.overflow-end (0..1)

flowchart TD n0["fieldset.instui-segmented-control"]:::cssdoc-root n1(".viewport"):::cssdoc-part n2("button.overflow-start"):::cssdoc-part n3(".track"):::cssdoc-part n4(["segmented-control.segment"]):::cssdoc-component n5("button.overflow-end"):::cssdoc-part n1 -.->|0..1| n2 n3 -->|1..n| n4 n1 --> n3 n1 -.->|0..1| n5 n0 --> n1 click n4 "/api/css/segmented-control.segment.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;

수정자

수정자	설명
.-size-lg	큰 세그먼트.
.-size-md	중간 세그먼트 (기본값).
.-size-sm	작은 세그먼트.

부분

부분	설명
.overflow-end	다음 숨겨진 세그먼트로 스크롤.
.overflow-start	이전 숨겨진 세그먼트로 스크롤.
.track	선택 가능한 세그먼트를 포함하는 스크롤 가능한 행.
.viewport	세그먼트 행을 클립하고 오버플로우 컨트롤을 고정합니다.

의사 요소

의사 요소	설명
::before	—

상태

상태	설명
:disabled	—

사용된 토큰

Token	타입	값
--instui-border-width-sm	<length>	0.0625rem
--instui-color-background-interactive-action-primary-base	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-drop-shadow-shadow-color1	<color>	LightDarklight-dark(rgba(35,68,101,0.15), rgba(0,0,0,0.3))
--instui-color-drop-shadow-shadow-color2	<color>	LightDarklight-dark(rgba(35,68,101,0.1), rgba(0,0,0,0.15))
--instui-color-stroke-interactive-action-primary-base	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-text-interactive-action-primary-base	<color>	LightDarklight-dark(#ffffff, #1D354F)
--instui-component-base-button-border-radius	<length>	0.75rem
--instui-component-base-button-medium-height	<length>	2.5rem
--instui-component-segmented-control-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-segmented-control-font-size-lg	<length>	1.125rem
--instui-component-segmented-control-font-size-md	<length>	1rem
--instui-component-segmented-control-font-size-sm	<length>	0.875rem
--instui-component-segmented-control-font-weight	<integer>	500
--instui-component-segmented-control-height-lg	<length>	3rem
--instui-component-segmented-control-height-md	<length>	2.5rem
--instui-component-segmented-control-height-sm	<length>	2rem
--instui-component-segmented-control-item-gap-lg	<length>	0.75rem
--instui-component-segmented-control-item-gap-md	<length>	0.5rem
--instui-component-segmented-control-item-gap-sm	<length>	0.25rem
--instui-component-segmented-control-item-padding-horizontal-lg	<length>	1.25rem
--instui-component-segmented-control-item-padding-horizontal-md	<length>	1rem
--instui-component-segmented-control-item-padding-horizontal-sm	<length>	0.75rem
--instui-component-segmented-control-line-height	<percentage>	125%
--instui-component-segmented-control-track-background-color	<color>	LightDarklight-dark(#44709f33, #86a8d54d)
--instui-component-segmented-control-track-background-disabled-color	<color>	LightDarklight-dark(#DFE1E3, #334450)
--instui-component-segmented-control-track-border-radius	<length>	1rem
--instui-component-segmented-control-track-gap	<length>	0.125rem
--instui-component-segmented-control-track-padding	<length>	0.25rem
--instui-drop-shadow-blur-elevation3-dropshadow1	<length>	10px
--instui-drop-shadow-blur-elevation3-dropshadow2	<length>	3px
--instui-drop-shadow-spread-elevation3-dropshadow1	<length>	4px
--instui-drop-shadow-spread-elevation3-dropshadow2	<length>	0px
--instui-drop-shadow-y-elevation3-dropshadow1	<length>	6px
--instui-drop-shadow-y-elevation3-dropshadow2	<length>	2px
--instui-icon-chevron-left	<image>	url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%2018-6-6%206-6%22%2F%3E%3C%2Fsvg%3E')
--instui-icon-chevron-right	<image>	url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3C%2Fsvg%3E')
--pantoken-segmented-end-reserve	—	—
--pantoken-segmented-font-size	<length>	1rem
--pantoken-segmented-overflow-shadow	<color>	0 2px 3px 0px light-dark(rgba(35,68,101,0.15), rgba(0,0,0,0.3)), 0 6px 10px 4px light-dark(rgba(35,68,101,0.1), rgba(0,0,0,0.15))
--pantoken-segmented-start-reserve	—	—

하위 컴포넌트

• segmented-control.segment