Tinyrack

Accordion

관련 콘텐츠를 점진적으로 공개하는 키보드 접근 가능 섹션이에요. Tab과 Shift+Tab으로 트리거 사이를 이동하고 Enter 또는 Space로 포커스된 섹션을 전환해요.

핵심 속성

속성값기본값
선택제어형 value 또는 비제어형 defaultValue[]
확장Root의 multiple단일
사용 가능 여부Root의 disabled 또는 Item의 disabled상호작용 가능
수명 주기마운트 해제, keepMounted 또는 hiddenUntilFound마운트 해제

설치

pnpm add @tinyrack/ui

긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.

스타일

@import '@tinyrack/ui/components/accordion.css';

긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.

가져오기

import { TRAccordion } from '@tinyrack/ui/components/accordion';

긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.

플레이그라운드

플레이그라운드에서 Root와 Item의 비활성 상태, 단일·다중 확장, 세 가지 패널 수명 주기를 다뤄 볼 수 있어요. 제어형 value는 미리 보기 조작을 그대로 따르고, 초기화하면 개요만 열려 있고 닫힌 패널은 마운트를 해제하는 기본 상태로 돌아가요.

사용법

제어형 다중 확장 고유 링크

어느 섹션이든 열고 닫으면 아래 결과에 현재 값이 반영돼요.

예시

단일·다중 확장, 비활성화, 유지되는 패널 고유 링크

API

구조

<TRAccordion.Root>
  <TRAccordion.Item value="network">
    <TRAccordion.Header>
      <TRAccordion.Trigger>네트워크</TRAccordion.Trigger>
    </TRAccordion.Header>
    <TRAccordion.Panel>온라인</TRAccordion.Panel>
  </TRAccordion.Item>
</TRAccordion.Root>

전체 구조는 Root, Item, Header, Trigger, Panel이에요. 각 파트는 TRAccordion.Part와 이름 있는 TRAccordionPart로 내보내고, 대응하는 TRAccordionPartProps와 TRAccordionPartState 타입도 함께 제공해요.

Root 속성

속성타입기본값용도
valueValue[]-열린 항목의 값을 제어해요.
defaultValueValue[][]비제어형 상태에서 처음 열 항목을 지정해요.
onValueChange(value, details) => void-다음 값과 Base UI 이벤트 세부 정보를 전달해요.
multiplebooleanfalse여러 항목을 동시에 열어 둬요.
disabledbooleanfalse모든 항목의 상호작용을 막아요.
keepMountedbooleanfalse닫힌 패널을 hidden 상태로 DOM에 유지해요.
hiddenUntilFoundbooleanfalse닫힌 패널을 hidden="until-found"로 검색 가능하게 유지하며 keepMounted보다 우선해요.
renderReactElement | function<div>동작과 ref 병합을 유지하면서 루트 요소를 바꿔요.

Item은 제어형 또는 기본 확장에 안정적인 value가 필요하며 disabled와 onOpenChange를 받아요. Header는 기본적으로 h3를 렌더링하므로 주변 제목 수준에 맞춰 render를 사용하세요. Trigger는 버튼, Panel은 연결된 영역을 렌더링해요. 모든 파트는 className, style, 네이티브 속성, 이벤트 처리기, ref, Base UI의 상태 기반 render 규약을 그대로 지켜요.

Enter 또는 Space는 포커스를 유지한 채 트리거를 전환해요. Tab과 Shift+Tab은 일반 문서 순서를 따라요. 비활성화된 트리거도 aria-disabled="true"로 포커스를 받지만 전환되지는 않아요. 더 이상 권장하지 않는 화살표 키 순환 포커스 속성은 포커스 동작에 영향을 주지 않아요.

모양

토큰대체 값용도
--tr-accordion-background--tinyrack-surface루트 표면
--tr-accordion-radius--tinyrack-radius-md바깥쪽 모서리 반지름
--tr-accordion-content-backgroundtransparent열린 패널 표면
--tr-accordion-disabled-background--tinyrack-surface-muted비활성화된 항목 표면
--tr-accordion-disabled-color--tinyrack-text-muted비활성화된 항목 텍스트
--tr-collapsible-duration--tinyrack-duration-normalCollapsible에서 상속하는 패널 전환 시간

@tinyrack/ui/components/accordion.css를 명시적으로 가져오세요. 기반 토큰이 밝은·어두운 테마 색상, 테두리, 포커스 표시기, 타이포그래피, 간격, 동작 줄이기 설정을 제공해요.