Accordion
Accordion 能够在页面上展开和折叠相关的内容部分。
使用
Disabled
Expand Multiple Items
将 multiple 属性设置为 true，Accordion 允许同时展开多个 items。
Default Expanded Keys
通过 defaultExpandedKeys 属性，您可以设置默认展开的 items。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
Variants
Accordion 组件提供了多种变体，您可以通过 variant 属性来设置。
Outlined
Underlined
Disabled Keys
通过 disabledKeys 属性，您可以设置禁用的 items。
Custom Indicator
通过 indicator 属性，您可以设置自定义的指示器。也可以通过 hideIndicator 属性来隐藏指示器。
Controlled
Accordion 组件支持受控模式，您可以通过 expandedKeys 属性来控制展开的 items。
API
Accordion Props
Accordion Props 继承 as (默认为 div 标签) 的 Props。
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | 通常是 AccordionItem 的集合。 |
| className | ClassValue | - | 用于根元素的 className。 |
| ref | Ref | - | 用于转发根元素。 |
| multiple | boolean | false | 是否允许同时展开多个 items。 |
| defaultExpandedKeys | Key[] | - | 默认展开的 items 的 keys。(非受控) |
| expandedKeys | Key[] | - | 展开的 items 的 keys。 |
| onExpandedKeysChange | (keys: Key[]) => void | - | 当展开的 items 发生变化时调用的回调函数。 |
| disabledKeys | Key[] | - | 禁用的 items 的 keys。 |
| MotionProps | HTMLMotionProps | - | Accordion 的动画属性。 |
| indicator | ReactNode | - | 自定义指示器。 |
| hideIndicator | boolean | - | 是否隐藏指示器。 |
| indicatorMotionProps | HTMLMotionProps | - | 指示器的动画属性。 |
| variant | 'outlined'|'underlined' | 'underlined' | Accordion 的外观样式。 |
| disabled | boolean | false | 是否禁用 Accordion。 |
| keepMounted | boolean | true | 是否在折叠时保留子元素的挂载状态。 |
| as | ElementType | 'div' | 用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。 |
| sx | SxProps<AccordionOwnerState> | - | 用于根元素的 sx 属性。 |
AccordionItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | AccordionItem 的内容。 |
| className | ClassValue | - | 用于根元素的 className。 |
| ref | Ref | - | 用于转发根元素。 |
| indicator | ReactNode | - | 自定义指示器。 |
| hideIndicator | boolean | - | 是否隐藏指示器。 |
| indicatorMotionProps | HTMLMotionProps | - | 指示器的动画属性。 |
| disabled | boolean | false | 是否禁用 AccordionItem。 |
| keepMounted | boolean | true | 是否在折叠时保留子元素的挂载状态。 |
| motionProps | HTMLMotionProps | - | AccordionItem 的动画属性。 |
| itemKey | Key | - | AccordionItem 的唯一标识符。 |
| title | ReactNode | - | AccordionItem 的标题。 |
| as | ElementType | 'div' | 用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。 |
| sx | SxProps<AccordionItemOwnerState> | - | 用于根元素的 sx 属性。 |
| classes | Partial<Record<Slots, ClassValue>> | - | AccordionItem Slots 的 className。 |
| slotProps | Partial<Record<Slots, ComponentProps>> | - | AccordionItem Slots 的 props。 |
AccordionItem Slots
AccordionItem Props 继承 as (默认为 div 标签) 的 Props。
| Slot Name | Class Name | Default Component | Description |
|---|---|---|---|
| heading | .nui-accordion-item-heading | 'h3' | accordion item 的标题。 |
| content | .nui-accordion-item-panel | 'span' | accordion item 的内容。 |
| indicator | .nui-accordion-item-indicator | 'm.span' | indicator 的容器。 |
| trigger | .nui-accordion-item-trigger | 'button' | 控制 accordion item 折叠的按钮。 |
最后更新时间