手风琴

属性	类型	说明	默认值
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	分隔符组件属性。	-
hideIndicator	`boolean`	是否隐藏手风琴项指示器。
disableAnimation	`boolean`	是否禁用手风琴项打开/关闭动画。
disableIndicatorAnimation	`boolean`	是否禁用手风琴项指示器动画。
disallowEmptySelection	`boolean`	集合是否允许空选择。
keepContentMounted	`boolean`	手风琴项内容是否应始终挂载。	`false`
fullWidth	`boolean`	手风琴是否应占据其父容器的全部宽度。	`true`
motionProps	`MotionProps`	手风琴的运动属性。
disabledKeys	`React.Key[]`	已禁用的项键。这些项无法选择、聚焦或与之交互。
itemClasses	类名	手风琴项类名。
selectedKeys	`all` \| `React.Key[]`	集合中当前选定的键（受控）。
defaultSelectedKeys	`all` \| `React.Key[]`	集合中最初选定的键（不受控）。
disabledKeys	`React.Key[]`	集合中当前禁用的键（受控）。

手风琴事件

属性	类型	说明
onSelectionChange	`(keys: "all" ｜ Set<React.Key>) => any`	在选择发生更改时调用的处理程序。

手风琴项属性

属性	类型	说明	默认值
children	`ReactNode` \| `string`	组件的内容。
title	`ReactNode` \| `string`	手风琴项标题。
副标题	`ReactNode` \| `string`	手风琴项目副标题。
指示器	IndicatorProps	手风琴项目 `expanded` 指示器，通常为箭头图标。
startContent	`ReactNode`	手风琴项目开始内容，通常为图标或头像。
motionProps	MotionProps	用于修改 framer 运动动画的属性。使用 `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	类名	允许为手风琴项目槽设置自定义类名。	-

手风琴项目事件

属性	类型	说明
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 代替。

类型

手风琴项目指示器属性

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;

手风琴项目类名

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

运动属性

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;