Accordion
Accordion 能够在页面上展开和折叠相关的内容部分。
Anatomy
NexUI 导出了 2 个 Accordion 相关组件:
Accordion: 作为根组件，用于展示多个 AccordionItem。AccordionItem: 用于展示一个可展开/折叠的内容项的组件。
import { Accordion, AccordionItem } from '@nex-ui/react'Usage
Disabled
Expand Multiple Items
将 multiple 属性设置为 true，Accordion 允许同时展开多个 items。
Default Expanded Keys
通过 defaultExpandedKeys 属性，您可以设置默认展开的 items。
Variants
Accordion 组件提供了多种变体，您可以通过 variant 属性来设置。
Outlined
Underlined
Disabled Keys
通过 disabledKeys 属性，您可以设置禁用的 items。
Custom Indicator
通过 indicator 属性，您可以设置自定义的指示器。也可以通过 hideIndicator 属性来隐藏指示器。
Controlled
Accordion 组件支持受控模式，您可以通过 expandedKeys 和 onExpandedKeysChange 属性来控制展开的 items。
Custom Motion
通过 motionProps 属性，您可以自定义内容在 visible/hidden 状态下的动画。
API
Accordion Props
Accordion 继承 as (默认为 'div') 的 Props。
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | 通常是 AccordionItem 的集合。 |
| as | ElementType | 'div' | 用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。 |
| sx | Interpolation | - | 用于根元素的 sx 属性。 |
| className | ClassValue | - | 用于根元素的 className。 |
| ref | Ref | - | 用于转发根元素。 |
| multiple | boolean | false | 是否允许同时展开多个 AccordionItems |
| defaultExpandedKeys | Key[] | - | 默认展开的 AccordionItems 的 keys。(非受控) |
| expandedKeys | Key[] | - | 展开的 AccordionItems 的 keys。(受控) |
| onExpandedKeysChange | (keys: Key[]) => void | - | 当展开的 AccordionItems 发生变化时调用的回调函数。 |
| disabledKeys | Key[] | - | 禁用的 AccordionItems 的 keys。 |
| motionProps | HTMLMotionProps | - | 所有 AccordionItems 的动画属性。 |
| indicator | ReactNode | - | 所有 AccordionItems 的自定义指示器。 |
| hideIndicator | boolean | - | 是否隐藏所有 AccordionItems 的指示器。 |
| indicatorMotionProps | HTMLMotionProps | - | 所有 AccordionItems 指示器的动画属性。 |
| variant | 'outlined'|'underlined' | 'underlined' | Accordion 的外观样式。 |
| disabled | boolean | false | 是否禁用 Accordion。 |
| keepMounted | boolean | false | 是否在折叠时保留子元素的挂载状态。 |
| disableAnimation | boolean | false | 是否禁用所有 AccordionItems 的动画。 |
AccordionItem Props
AccordionItem 继承 as (默认为 'div') 的 Props。
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | AccordionItem 的内容。 |
| className | ClassValue | - | 用于根元素的 className。 |
| ref | Ref | - | 用于转发根元素。 |
| as | ElementType | 'div' | 用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。 |
| sx | Interpolation | - | 用于根元素的 sx 属性。 |
| classNames | Partial<Record<Slots, ClassValue>> | - | AccordionItem Slots 的 className。 |
| slotProps | Partial<Record<Slots, ComponentProps>> | - | AccordionItem Slots 的 props。 |
| indicator | ReactNode | - | 自定义指示器。 |
| hideIndicator | boolean | - | 是否隐藏指示器。 |
| indicatorMotionProps | HTMLMotionProps | - | 指示器的动画属性。 |
| disabled | boolean | false | 是否禁用 AccordionItem。 |
| keepMounted | boolean | false | 是否在折叠时保留子元素的挂载状态。 |
| motionProps | HTMLMotionProps | - | 自定义 AccordionItem 的动画属性。 |
| itemKey | Key | - | AccordionItem 的唯一标识符。 |
| title | ReactNode | - | AccordionItem 的标题。 |
| disableAnimation | boolean | false | 是否禁用 AccordionItem 的动画。 |
AccordionItem Slots
| Slot Name | Class Name | Default Component | Description |
|---|---|---|---|
| heading | .nui-accordion-item-heading | 'h3' | AccordionItem 的标题。 |
| content | .nui-accordion-item-content | 'div' | AccordionItem 的内容。 |
| indicator | .nui-accordion-item-indicator | 'span' | AccordionItem 的指示器容器。 |
| trigger | .nui-accordion-item-trigger | 'button' | 控制 AccordionItem 折叠的按钮。 |
最后更新时间