Accordion · Tinyrack Design System

한 번에 하나 또는 여러 섹션을 펼치는 디스클로저 항목을 쌓아요.

핵심 속성

속성	설명
선택	제어형 `value` 또는 비제어형 `defaultValue`
확장	기본값은 단일 확장이며 `multiple`로 여러 항목을 함께 열 수 있어요
사용 가능 여부	개별 `TRAccordionItem`을 비활성화할 수 있어요
수명 주기	닫힌 콘텐츠는 위젯 트리에서 제거돼요

value를 제공했다면 상호작용에 맞춰 패널이 바뀌도록 onValueChange에서 값을 갱신하세요. Tab은 일반 포커스 순서를 따르고 Enter는 즉시, Space는 키를 놓을 때 전환해요. 비활성화된 항목은 포인터와 키보드 입력을 무시해요.

설치

패키지를 추가한 뒤 공개 라이브러리를 가져오세요.

flutter pub add tinyrack_ui

import 'package:tinyrack_ui/tinyrack_ui.dart';

플레이그라운드

Flutter 미리보기를 불러오는 중이에요

사용법

import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';

TRAccordion(
  items: const [
    TRAccordionItem(
      value: 'install',
      trigger: Text('Install'),
      content: Text('Run the installer.'),
    ),
  ],
)

예시

제어형 다중 확장 고유 링크

onValueChange에서 value를 갱신하면 각 섹션을 열고 닫을 수 있고 현재 선택도 표시할 수 있어요.

Flutter 미리보기를 불러오는 중이에요

단일·다중 확장과 비활성 상태 고유 링크

서로 하나만 열어야 하는 섹션에는 기본 단일 모드를, 독립적인 섹션에는 multiple을, 사용할 수 없는 항목에는 disabled를 사용하세요.

Flutter 미리보기를 불러오는 중이에요

API

TRAccordion 속성

Prop	타입 / 기본값	용도
`items`	`List<TRAccordionItem> · required`	순서가 있는 디스클로저 항목을 정의해요.
`value`	`List<String>? · null`	열린 항목의 값을 제어해요.
`defaultValue`	`List<String> · const []`	비제어형 모드에서 처음 열 값을 지정해요.
`multiple`	`bool · false`	여러 항목을 동시에 열어 둬요.
`onValueChange`	`ValueChanged<List<String>>? · null`	항목을 전환한 뒤 다음 열린 값을 전달해요.

TRAccordionItem 속성

Prop	타입 / 기본값	용도
`value`	`String · required`	Root의 값 목록에서 항목을 식별해요.
`trigger`	`Widget · required`	상호작용하는 항목 레이블을 렌더링해요.
`content`	`Widget · required`	항목이 열려 있을 때 패널을 렌더링해요.
`disabled`	`bool · false`	포인터와 키보드 전환을 막아요.