Motile UI

Accordion

클릭하면 내용이 부드럽게 펼쳐지고 접히는 아코디언 컴포넌트입니다. filled와 outlined 두 가지 스타일을 제공하며, 외부 상태로 제어하거나 내부 상태로 독립적으로 동작할 수 있습니다. disabled 속성으로 비활성화 상태를 지원합니다.

미리보기

사용법

1"use client";
2
3import { Accordion } from "motile-ui";
4
5export default function PreviewExample() {
6  return (
7    <Accordion>
8      <Accordion.Header>접근성을 지원하나요?</Accordion.Header>
9      <Accordion.Content>
10        네. WAI-ARIA 표준을 따르며 키보드 내비게이션을 지원합니다.
11      </Accordion.Content>
12    </Accordion>
13  );
14}

API 레퍼런스

Accordion

아코디언의 상태를 관리하는 최상위 컴포넌트

속성타입기본값설명
variant"filled" | "outlined""filled"아코디언 스타일
defaultExpandedbooleanfalse초기 펼침 상태 (비제어 모드)
expandedboolean-펼침 상태 제어 (제어 모드)
onChange(expanded: boolean) => void-상태가 변경될 때 실행되는 함수
disabledbooleanfalse아코디언 비활성화 여부

Accordion.Header

클릭해서 아코디언을 열고 닫는 헤더 영역

속성타입기본값설명
asChildbooleanfalse버튼 요소로 직접 렌더링

기본 <code>button</code> HTML 속성을 모두 사용할 수 있습니다.

Accordion.Content

펼쳐지고 접히는 콘텐츠 영역

속성타입기본값설명
asChildbooleanfalse래퍼 없이 자식 요소만 렌더링

기본 <code>div</code> HTML 속성을 모두 사용할 수 있습니다.

예제

기본

1"use client";
2
3import { Accordion } from "motile-ui";
4
5export default function DefaultExample() {
6  return (
7    <Accordion>
8      <Accordion.Header>Motile UI가 무엇인가요?</Accordion.Header>
9      <Accordion.Content>
10        모바일 웹뷰에 최적화된 React 컴포넌트 라이브러리입니다.
11      </Accordion.Content>
12    </Accordion>
13  );
14}

윤곽선 스타일

1"use client";
2
3import { Accordion } from "motile-ui";
4
5export default function OutlinedExample() {
6  return (
7    <Accordion variant="outlined">
8      <Accordion.Header>Motile UI가 무엇인가요?</Accordion.Header>
9      <Accordion.Content>
10        모바일 웹뷰에 최적화된 React 컴포넌트 라이브러리입니다.
11      </Accordion.Content>
12    </Accordion>
13  );
14}

열린 상태로 시작

모바일 웹뷰에 최적화된 React 컴포넌트 라이브러리입니다.
1"use client";
2
3import { Accordion } from "motile-ui";
4
5export default function DefaultExpandedExample() {
6  return (
7    <Accordion defaultExpanded>
8      <Accordion.Header>Motile UI가 무엇인가요?</Accordion.Header>
9      <Accordion.Content>
10        모바일 웹뷰에 최적화된 React 컴포넌트 라이브러리입니다.
11      </Accordion.Content>
12    </Accordion>
13  );
14}

외부에서 제어

1"use client";
2
3import { Accordion, Button } from "motile-ui";
4import { useState } from "react";
5
6export default function ControlledExample() {
7  const [expanded, setExpanded] = useState(false);
8
9  return (
10    <div>
11      <Button
12        variant="ghost"
13        size="small"
14        onClick={() => setExpanded(!expanded)}
15        style={{ marginBottom: "16px" }}
16      >
17        {expanded ? "접기" : "펼치기"}
18      </Button>
19      <Accordion expanded={expanded} onChange={setExpanded}>
20        <Accordion.Header>제어형 아코디언</Accordion.Header>
21        <Accordion.Content>
22          외부 상태로 제어되는 아코디언입니다. 위 버튼으로 열고 닫을 수
23          있습니다.
24        </Accordion.Content>
25      </Accordion>
26    </div>
27  );
28}

비활성화

1"use client";
2
3import { Accordion } from "motile-ui";
4
5export default function DisabledExample() {
6  return (
7    <Accordion disabled>
8      <Accordion.Header>비활성화된 아코디언</Accordion.Header>
9      <Accordion.Content>
10        비활성화 상태에서는 내용을 볼 수 없습니다.
11      </Accordion.Content>
12    </Accordion>
13  );
14}
Accordion | Motile UI