アコーディオン

属性	型	説明	デフォルト
children	`ReactNode` \| `ReactNode[]`	コレクションの内容。通常は`AccordionItem`の配列。
variant	`light` \| `shadow` \| `bordered` \| `splitted`	アコーディオンの外観スタイル。	`light`
selectionMode	`none` \| `single` \| `multiple`	コレクションで許可される選択の種類。
selectionBehavior	`toggle` \| `replace`	アコーディオンの選択動作。	`toggle`
isCompact	`boolean`	すべてのアコーディオンアイテムを小さくするかどうか。	`false`
isDisabled	`boolean`	アコーディオンアイテムを無効にするかどうか。
showDivider	`boolean`	各アコーディオンアイテムの下部に区切り線を表示するかどうか。	`true`
dividerProps	DividerProps	区切り線コンポーネントのprops。	-
hideIndicator	`boolean`	アコーディオンアイテムのインジケーターを非表示にするかどうか。
disableAnimation	`boolean`	アコーディオンアイテムの開閉アニメーションを無効にするかどうか。
disableIndicatorAnimation	`boolean`	アコーディオンアイテムのインジケーターアニメーションを無効にするかどうか。
disallowEmptySelection	`boolean`	コレクションで空の選択を許可するかどうか。
keepContentMounted	`boolean`	アコーディオンアイテムのコンテンツを常にマウントしておくかどうか。	`false`
fullWidth	`boolean`	アコーディオンを親コンテナの全幅にするかどうか。	`true`
motionProps	`MotionProps`	アコーディオンのモーションプロパティ。
disabledKeys	`React.Key[]`	無効になっているアイテムのキー。これらのアイテムは選択、フォーカス、またはその他の操作を行うことはできません。
itemClasses	Classnames	アコーディオンアイテムのclassNames。
selectedKeys	`all` \| `React.Key[]`	コレクション内で現在選択されているキー (制御付き)。
defaultSelectedKeys	`all` \| `React.Key[]`	コレクション内で最初に選択されているキー (非制御)。
disabledKeys	`React.Key[]`	コレクション内で現在無効になっているキー (制御付き)。

アコーディオンのイベント

属性	型	説明
onSelectionChange	`(keys: "all" ｜ Set<React.Key>) => any`	選択が変更されたときに呼び出されるハンドラー。

アコーディオンアイテムのProps

属性	型	説明	デフォルト
children	`ReactNode` \| `string`	コンポーネントの内容。
title	`ReactNode` \| `string`	アコーディオンアイテムのタイトル。
subtitle	`ReactNode` \| `string`	アコーディオンアイテムのサブタイトル。
indicator	IndicatorProps	アコーディオンアイテムの`expanded`インジケーター。通常は矢印アイコン。
startContent	`ReactNode`	アコーディオンアイテムの開始コンテンツ。通常はアイコンまたはアバター。
motionProps	MotionProps	framer motionアニメーションを修正するためのプロパティ。`variants` APIを使用して独自のアニメーションを作成します。
isCompact	`boolean`	AccordionItemがコンパクトかどうか。	`false`
isDisabled	`boolean`	現在の無効状態。	`false`
keepContentMounted	`boolean`	AccordionItemのコンテンツを閉じるときにマウントしておくかどうか。	`false`
hideIndicator	`boolean`	AccordionItemのインジケーターを非表示にするかどうか。	`false`
disableAnimation	`boolean`	AccordionItemのアニメーションを無効にするかどうか。	`false`
disableIndicatorAnimation	`boolean`	AccordionItemのインジケーターアニメーションを無効にするかどうか。	`false`
HeadingComponent	`React.ElementType`	Webアクセシビリティのためのカスタマイズ可能な見出しタグ。見出しを使用してコンテンツを説明し、一貫性があり、セマンティックに使用します。	`h2`
classNames	Classnames	アコーディオンアイテムのスロットにカスタムクラス名を設定できます。	-

アコーディオンアイテムのイベント

属性	型	説明
onFocus	`(e: FocusEvent) => void`	要素がフォーカスを受け取ったときに呼び出されるハンドラー。
onBlur	`(e: FocusEvent) => void`	要素がフォーカスを失ったときに呼び出されるハンドラー。
onFocusChange	`(isFocused: boolean) => void`	要素のフォーカス状態が変化したときに呼び出されるハンドラー。
onKeyDown	`(e: KeyboardEvent) => void`	キーが押されたときに呼び出されるハンドラー。
onKeyUp	`(e: KeyboardEvent) => void`	キーが離されたときに呼び出されるハンドラー。
onPress	`(e: PressEvent) => void`	プレスがターゲット上でリリースされたときに呼び出されるハンドラー。
onPressStart	`(e: PressEvent) => void`	プレスインタラクションが開始されたときに呼び出されるハンドラー。
onPressEnd	`(e: PressEvent) => void`	プレスインタラクションがターゲット上で終了したとき、またはポインターがターゲットを離れたときに呼び出されるハンドラー。
onPressChange	`(isPressed: boolean) => void`	プレス状態が変化したときに呼び出されるハンドラー。
onPressUp	`(e: PressEvent) => void`	プレスがターゲット上でリリースされたときに呼び出されるハンドラー。ターゲットで開始されたかどうかは関係ありません。
onClick	`MouseEventHandler`	ネイティブボタンのクリックイベントハンドラー(非推奨)代わりにonPressを使用してください。

型

アコーディオンアイテムのインジケーターProps

export type AccordionItemIndicatorProps = {
  /**
   * The current indicator, usually an arrow icon.
   */
  indicator?: ReactNode;
  /**
   * The current open status.
   */
  isOpen?: boolean;
  /**
   * The current disabled status.
   * @default false
   */
  isDisabled?: boolean;
};

type indicator?: ReactNode | ((props: AccordionItemIndicatorProps) => ReactNode) | null;

アコーディオンアイテムのclassNames

export type AccordionItemClassnames = {
  base?: string;
  heading?: string;
  trigger?: string;
  titleWrapper?: string;
  title?: string;
  subtitle?: string;
  startContent?: string;
  indicator?: string;
  content?: string;
};

モーションProps

export type MotionProps = {
  /**
   * If `true`, the opacity of the content will be animated
   * @default true
   */
  animateOpacity?: boolean;
  /**
   * The height you want the content in its collapsed state.
   * @default 0
   */
  startingHeight?: number;
  /**
   * The height you want the content in its expanded state.
   * @default "auto"
   */
  endingHeight?: number | string;
  /**
   * The y-axis offset you want the content in its collapsed state.
   * @default 10
   */
  startingY?: number;
  /**
   * The y-axis offset you want the content in its expanded state.
   * @default 0
   */
  endingY?: number;
} & HTMLMotionProps;