Accordion

Usage (React)

Single

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@gbgr/react"
import "@gbgr/react/styles.css"

export function Example() {
  return (
    <Accordion type="single" defaultValue="item-1" collapsible>
      <AccordionHeader>자주 묻는 질문</AccordionHeader>
      <AccordionItem value="item-1">
        <AccordionTrigger>웹캠을 사용하는데 보안이나 사생활 침해 걱정은 없나요?</AccordionTrigger>
        <AccordionContent>컨텐츠</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Multiple

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@gbgr/react"
import "@gbgr/react/styles.css"

export function Example() {
  return (
    <Accordion type="multiple" defaultValue={["item-1", "item-3"]}>
      <AccordionHeader size="md">자주 묻는 질문</AccordionHeader>
      <AccordionItem value="item-1">
        <AccordionTrigger>Item 1</AccordionTrigger>
        <AccordionContent>Content 1</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Item 2</AccordionTrigger>
        <AccordionContent>Content 2</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Item 3</AccordionTrigger>
        <AccordionContent>Content 3</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Demo

자주 묻는 질문

value: null