@wix/design-system
Version:
@wix/design-system
64 lines (61 loc) • 1.95 kB
Markdown
### dataHook
- type: string
- description: Applied as data-hook HTML attribute that can be used to create driver in testing.
### hideShadow
- type: boolean
- description: Hide Accordion shadow effect
- default: false
### contentPadding
- type: "none"
- description: Targets Accordion Item content padding. When not provided, uses default paddings.
### horizontalPadding
- type: "none" | "xxTiny" | "xTiny" | "tiny" | "small" | "medium" | "large"
- description: Change horizontal padding
### items
- type: AccordionItemType[]
- description: Provide items
- Available items props:
```javascript
{
render?: func;
title?: React.ReactNode;
subtitle?: React.ReactNode;
icon?: React.ReactNode;
children?: React.ReactNode;
expandLabel?: React.ReactNode;
collapseLabel?: React.ReactNode;
showLabel?: 'hover' | 'always';
buttonType?: 'textButton' | 'button' | 'node';
disabled?: boolean;
onToggle?: React.MouseEventHandler<HTMLElement>;
onMouseEnter?: React.MouseEventHandler<HTMLElement>;
onMouseLeave?: React.MouseEventHandler<HTMLElement>;
open?: boolean;
initiallyOpen?: boolean;
}
```
### multiple
- type: boolean
- description: allow multiple rows to be opened simultaneously
- default: false
### onAnimationEnter
- type: () => void
- description: Callback fired immediately after the animation is started
### onAnimationExit
- type: () => void
- description: Callback fired immediately after the animation is ended
### size
- type: "xxTiny" | "xTiny" | "tiny" | "small" | "medium" | "large"
- description: Change items size
- default: 'small'
### skin
- type: "standard" | "light" | "neutral"
- description: Accordion skin color
### transitionSpeed
- type: "medium" | "slow" | "fast"
- description: Change expand and collapse animation speed
- default: 'medium'
### titleSize
- type: "small" | "medium"
- description: Accordion title and subtitle size
- default: 'medium'