Accordion

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

Usage

import SwiftUI

struct ExampleView: View {

    @State var isAccordionOpen:Bool = false

    var body: some View {
        XelaAccordion(
            title: "Accordion 1",
            isOpen: $isAccordionOpen
        ) {
            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.")
                .xelaSmallBody()
        }
    }
}

Properties

Name	Type	Default Value	Required	Description
title	String	-	YES	Title for accordion
isOpen	Binding < Bool >	-	YES	Binding value for open or close accordion
content	@ViewBuilder @escaping () -> Content	-	YES	Content for accordion
leftIconClose	String		NO	Left Close Icon name from Assets
leftIconOpen	String		NO	Left Open Icon name from Assets
rightIconClose	String		NO	Right Close Icon name from Assets
rightIconOpen	String		NO	Right Open Icon name from Assets
systemIconOpen	String	minus.circle.fill	NO	Left System Open Icon name from SF Symbols
systemIconClose	String	plus.circle.fill	NO	Left System Close Icon name from SF Symbols
backgroundOpen	Color	Color(xelaColor: .Gray12)	NO	Background for Open accordion
backgroundClose	Color	Color(xelaColor: .Gray12)	NO	Background for Close accordion
titleColorClose	Color	Color(xelaColor: .Gray2)	NO	Title Color for Close accordion
titleColorOpen	Color	Color(xelaColor: .Gray2)	NO	Title Color for Open accordion
dividerColor	Color	Color(xelaColor: .Gray11)	NO	Divider Color for accordion
iconsSize	CGFloat	24	NO	Size for open and close icon