Accordion
- Web Components
- Flutter
Demo
zeta-web v0.9.0
Web Components
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.
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
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 revealthe 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.
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 |
Methods
| Name | Description | Type | Features |
|---|---|---|---|
| createElement() | Creates a StatefulElement to manage this widget's location in the tree. | StatefulElement | inherited |
| createState() | Creates the mutable state for this widget at a given location in the tree. | State<ZetaAccordion> | override |
| debugDescribeChildren() | Returns a list of DiagnosticsNode objects describing this node's children. | List<DiagnosticsNode> | inherited |
| debugFillProperties(DiagnosticPropertiesBuilder properties) | Add additional properties associated with the node. | void | override |
| noSuchMethod(Invocation invocation) | Invoked when a nonexistent method or property is accessed. | dynamic | inherited |
| paddingAll(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingBottom(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingEnd(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingHorizontal(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingStart(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingTop(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingVertical(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) | Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. | DiagnosticsNode | inherited |
| toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) | A string representation of this object. | String | inherited |
| toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) | Returns a string representation of this node and its descendants. | String | inherited |
| toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) | Returns a one-line detailed description of the object. | String | inherited |
| toStringShort() | A short, textual description of this widget. | String | inherited |
Figma
https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=2315-72864