Accordion

accordion

An element that allows to toggle between hiding and showing a large amount of content.

Usage

XelaAccordion(
    title: "Accordion 1",
    iconPosition: XelaAccordionIconPosition.RIGHT,
    openIcon: Icon(Icons.keyboard_arrow_up, size: 24, color: _isDark ? XelaColor.Gray4 : XelaColor.Gray11),
    closeIcon: Icon(Icons.keyboard_arrow_down, size: 24, color: _isDark ? XelaColor.Gray4 : XelaColor.Gray11),
    content: Column(
      children: [
        XelaDivider(color: _isDark ? XelaColor.Gray4 : XelaColor.Gray11, style: XelaDividerStyle.DOTTED,),
        SizedBox(height: 16,),
        Text("Placeholder content for this accordion. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.", style: XelaTextStyle.XelaSmallBody.apply(color: _isDark ? XelaColor.Gray3 : XelaColor.Gray3),)
      ],
    ),
  closeBackground: _isDark ? XelaColor.Yellow8 : XelaColor.Yellow12,
  openBackground: _isDark ? XelaColor.Yellow8 : XelaColor.Yellow12,
)

Properties

Name Type Default Value Required Description
title String - YES Title for accordion
isOpen bool false NO Accordion status
openIcon Widget? null NO Open Icon widget
closeIcon Widget? null NO Close Icon widget
iconPosition XelaAccordionIconPosition XelaAccordionIconPosition.RIGHT NO Icon position (LEFT, RIGHT)
openBackground Color XelaColor.Gray12 NO Background for Open accordion
closeBackground Color XelaColor.Gray12 NO Background for Close accordion
openTitleColor Color XelaColor.Gray2 NO Title Color for Open accordion
closeTitleColor Color XelaColor.Gray2 NO Title Color for Close accordion
content Widget - YES Content for accordion