Accordion
The accordion is a control element comprising a vertically stacked list of items, such as labels or thumbnails. Each item can be "expanded" or "collapsed" to reveal the content associated with that item. There can be zero expanded items, exactly one, or more than one item expanded at a time, depending on the configuration.
Figma Link
https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=2315-72864
- Web Components
- Flutter
Demo
zeta-web v0.12.1
Web Components
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-accordion--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | children should be zeta-accordion-item elements. | text |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| inCard | Determines if the ZetaAccordion should be in a card container. | boolean | false |
| expandMultiple | Determines if multiple items can be open at the same time.When false, only one accordion item can be open at a time. | boolean | false |
| selectMultiple | Determines if multiple accordion items can be selected. | boolean | false |
Inherited Attributes
| Name | Description | Type | Default | Inherited From |
|---|---|---|---|---|
| rounded | Whether the component is rounded or sharp.When true, rounded will set the border radius of the first child, and any children with class 'contourable-target' to --radius-minimal.Otherwise, this value will be --radius-none. | boolean | undefined | true | Contourable |
Demo
Widgetbook
Inheritance
Object > DiagnosticableTree > Widget > StatefulWidget > ZetaStatefulWidget
Constructors
The constructor of the component ZetaAccordion.
ZetaAccordion.new({Key? key, bool? rounded, List<ZetaAccordionItem>? children, bool inCard = false, bool expandMultiple = false, bool selectMultiple = false})
Properties
| Name | Description | Type | Features |
|---|---|---|---|
| children | Items to be displayed in the accordion. | List<ZetaAccordionItem>? | final |
| expandMultiple | Determines if multiple items can be open at the same time. | bool | final |
| hashCode | The hash code for this object. | int | no setter inherited |
| inCard | Determines if the ZetaAccordion should be in a card container. | bool | final |
| key | Controls how one widget replaces another widget in the tree. | Key? | final inherited |
| rounded | Sets rounded or sharp border of the containing box and the icon style. | bool? | final inherited |
| runtimeType | A representation of the runtime type of the object. | Type | no setter inherited |
| selectMultiple | Determines if multiple accordion items can be selected. | bool | final |