컴포넌트

Accordion

FAQ 및 정리된 콘텐츠를 위한 접이식 섹션

Accordion 컴포넌트는 접이식 콘텐츠 섹션을 표시하며, FAQ 및 정보 정리에 유용합니다.

기본 사용법

<SimpleAccordion client:load items={[
  { title: "Barodoc이란?", content: "Barodoc은 문서화 프레임워크입니다..." },
  { title: "시작하려면?", content: "pnpm add @barodoc/core로 설치..." },
  { title: "무료인가요?", content: "네, Barodoc은 오픈소스입니다..." }
]} />

아이콘 사용

<SimpleAccordion client:load items={[
  { title: "시작하기", content: "빠른 시작 가이드를 따라...", icon: "🚀" },
  { title: "설정", content: "테마, 네비게이션, 플러그인으로...", icon: "⚙️" },
  { title: "배포", content: "Vercel, Netlify 또는...", icon: "📦" }
]} />

다중 열기

type="multiple"로 여러 항목을 동시에 열 수 있습니다:

<SimpleAccordion client:load type="multiple" items={[
  { title: "프론트엔드", content: "React, Vue, Svelte..." },
  { title: "백엔드", content: "Node.js, Python, Go..." },
  { title: "데이터베이스", content: "PostgreSQL, MySQL, MongoDB..." }
]} />

기본 열림

defaultValue로 초기에 열린 항목을 설정합니다:

<SimpleAccordion client:load defaultValue="item-1" items={[
  { title: "첫 번째 항목", content: "기본적으로 닫혀 있습니다." },
  { title: "두 번째 항목", content: "기본적으로 열려 있습니다." },
  { title: "세 번째 항목", content: "기본적으로 닫혀 있습니다." }
]} />

Props

Accordion Item

items 배열의 각 항목: