아코디언

아코디언 (Accordion)

페이지에서 관련된 콘텐츠 섹션을 보이거나 숨길 때 사용하는 컴포넌트예요. 여러 섹션을 접고 펼치며 공간을 효율적으로 관리할 수 있어요.

출처: 문서

본문

사용법 (Usage)

import { Accordion } from "@chakra-ui/react"

<Accordion.Root>
  <Accordion.Item>
    <Accordion.ItemTrigger>
      <Accordion.ItemIndicator />
    </Accordion.ItemTrigger>
    <Accordion.ItemContent>
      <Accordion.ItemBody />
    </Accordion.ItemContent>
  </Accordion.Item>
</Accordion.Root>

예제 (Examples)

제어 (Controlled)

기본적으로 펼쳐져 보일 아코디언을 설정할 수 있어요.

아이콘과 함께 (With Icon)

각 아코디언 항목에 커스텀 아이콘을 렌더링하는 예시예요.

여러 항목 펼치기 (Expand Multiple Items)

multiple prop을 사용하면 여러 항목을 동시에 펼칠 수 있어요.

크기 (Sizes)

size prop을 사용해 아코디언의 크기를 바꿀 수 있어요.

변형 (Variants)

variant prop을 사용해 아코디언의 시각적 스타일을 바꿀 수 있어요. 값은 outline, subtle, enclosed, plain 중 하나를 쓸 수 있어요.

비활성 항목 (Disabled Item)

아무 Accordion.Item에 disabled prop을 전달하면 그 항목이 펼쳐지거나 접히는 것을 막을 수 있어요.

아바타와 함께 (With Avatar)

아코디언을 아바타와 함께 조합하는 예시예요.

보조 텍스트와 함께 (With Subtext)

아코디언 항목에 보조 텍스트(subtext)를 추가하는 예시예요.

동작과 함께 (With Actions)

아코디언 항목 트리거에 동작(actions)을 추가하는 예시예요.

펼쳐진 스타일 지정 (Styling Expanded Style)

Accordion.ItemTrigger 또는 Accordion.Item에 _open 의사 선택자를 전달해, 펼쳐졌을 때 적용할 스타일을 붙일 수 있어요.

가이드 (Guides)

루트 상태 접근하기 (Accessing Root State)

useAccordionContext를 사용해 루트 레벨에서 아코디언 상태에 접근할 수 있어요:

import { useAccordionContext } from "@chakra-ui/react"

const AccordionValueText = () => {
  const accordion = useAccordionContext()
  return <Box>Opened: {accordion.value.join(", ")}</Box>
}

// Usage
const Demo = () => (
  <Accordion.Root>
    <AccordionValueText />
    {/* ... accordion items */}
  </Accordion.Root>
)

항목 상태 접근하기 (Accessing Item State)

useAccordionItemContext를 사용해 특정 아코디언 항목의 상태에 접근할 수 있어요:

import { useAccordionItemContext } from "@chakra-ui/react"

const AccordionItemStatus = () => {
  const item = useAccordionItemContext()
  return (
    <Box color={item.open ? "green.500" : "gray.500"}>
      {item.open ? "Expanded" : "Collapsed"}
    </Box>
  )
}

// Usage
const Demo = () => (
  <Accordion.Root>
    <Accordion.Item value="item-1">
      <Accordion.ItemTrigger>
        <AccordionItemStatus />
      </Accordion.ItemTrigger>
      <Accordion.ItemContent>
        <Accordion.ItemBody>Content</Accordion.ItemBody>
      </Accordion.ItemContent>
    </Accordion.Item>
  </Accordion.Root>
)

Props

Root

Item

탐색기 (Explorer)

Accordion 컴포넌트의 파트들을 인터랙티브하게 탐색해 보세요. 사이드바에서 파트를 클릭하면 미리보기에서 해당 파트가 강조 표시돼요.

더 알아보기 (Learn more)

Ark UI 아코디언 — 아코디언의 동작 로직