Accordion

accordion

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

Usage

accordion

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