Accordion

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

제목 아래에서 관련 세부 정보를 펼치세요. 단일 항목 모드에서는 닫히는 패널과 열리는 패널이 높이 및 페이드 전환으로 교체됩니다. 닫히는 패널은 inert가 되어 전환 중에 입력을 사용할 수 없습니다. reduced motion에서는 패널이 즉시 전환됩니다.

접힌 패널에 필수 정보를 모두 숨기지 마세요. 핵심 사실은 바깥에 보이게 유지하세요. Trigger 안에 버튼이나 링크를 중첩하지 마세요. 대신 Panel에 배치하세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Root → Item → Header(Trigger + SVG) + Panel(content body)

키보드와 접근성

Tab과 Shift+Tab은 각 Trigger와 열린 패널의 입력을 이동합니다. Enter나 Space는 패널을 펼칩니다. Base UI 1.9는 Accordion의 화살표 키 로빙 포커스를 제거했습니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Accordion } from '@surflane/ui'

<Accordion.Root defaultValue={['identity']}>
  <Accordion.Item value='identity'>
    <Accordion.Header>
      <Accordion.Trigger>Identity controls</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>Deployment details</Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰