Accordion
- Web Components
- Flutter
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 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.
The contents within the tag will be the child of the open accordion. Typically, this would be list items. Custom styles are applied to <li> elements to match Zeta styles.
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-accordion--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | Typically li | text |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| accordionTitle | The title of the accordion. | string | undefined | undefined |
| contained | Creates a border around the accordion. | boolean | false |
| open | Whether the accordion is open. | 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 |
| disabled | Boolean for if component is disabled.This will apply disabled styles. | boolean | false | Interactive |
| tabIndex | The tab index of the component, used to determine the order in which elements receive focus when the user navigates through the document by pressing the Tab key. | number | 0 | Interactive |
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, required String title, Widget? child, bool contained = false, bool isOpen = false})
Properties
| Name | Description | Type | Features |
|---|---|---|---|
| child | Children displayed when component is opened. | Widget? | final |
| contained | Determines if the ZetaAccordions should be in a box. | bool | final |
| hashCode | The hash code for this object. | int | no setter inherited |
| isOpen | Whether the accordion is open or closed. | 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 |
| title | Title of Accordion. | String | 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