Section Header

Rail

Day	Night

Rail with section header button

Day	Night

Stack

Day	Night

Stack with expand accessory

Day	Night

Stack with button accessory

Day	Night

Stack with expand accessory and section header button

Day	Night

Usage

To create a Card List component, you need to choose if you want a rail (horizontal) layout or a stack (vertical) layout.

Rail layout

                                                
                                                import Backpack_SwiftUI
                                                
                                                struct TestElement: Identifiable {
                                                    let id: Int
                                                }
                                                
                                                BPKCardList(
                                                    title: "Section title",
                                                    description: "Description about this section (optional)",
                                                    layout: .rail(),
                                                    initiallyShownCards: 2,
                                                    elements: Array(repeating: TestElement(id: 1), count: 4)) {
                                                        Text("Element \(element.id)")
                                                    }

Section header

You can also specify a button with an icon for the section header.

                                                
                                                import Backpack_SwiftUI
                                                
                                                struct TestElement: Identifiable {
                                                    let id: Int
                                                }
                                                
                                                BPKCardList(
                                                    title: "Section title",
                                                    description: "Description about this section (optional)",
                                                        layout: .rail(
                                                            sectionHeaderAction: .init(
                                                                icon: .addCircle,
                                                                accessibilityLabel: "Add item") {
                                                                    print("Tap add button")
                                                                }
                                                    ),
                                                    initiallyShownCards: 2,
                                                    elements: Array(repeating: TestElement(id: 1), count: 4)) {
                                                        Text("Element \(element.id)")
                                                    }

Stack layout

                                                
                                                import Backpack_SwiftUI
                                                
                                                struct TestElement: Identifiable {
                                                    let id: Int
                                                }
                                                
                                                BPKCardList(
                                                    title: "Section title",
                                                    description: "Description about this section (optional)",
                                                    layout: .stack(),
                                                    initiallyShownCards: 2,
                                                    elements: Array(repeating: TestElement(id: 1), count: 4)) {
                                                        Text("Element \(element.id)")
                                                    }

Accessory (optional)

Using stack layout, you can optionally choose to show an accesory option. There are currently 3 options to choose from:

** Section Header Button **

Button with an icon for the section header

                                                
                                                import Backpack_SwiftUI
                                                
                                                struct TestElement: Identifiable {
                                                    let id: Int
                                                }
                                                
                                                BPKCardList(
                                                    title: "Section title",
                                                    description: "Description about this section (optional)",
                                                        layout: .stack(
                                                        accessory: .sectionHeaderButton(
                                                            .init(
                                                                icon: .addCircle,
                                                                accessibilityLabel: "Add item") {
                                                                    print("Tap add button")
                                                            }
                                                        )
                                                    ),
                                                    initiallyShownCards: 2,
                                                    elements: Array(repeating: TestElement(id: 1), count: 4)) {
                                                        Text("Element \(element.id)")
                                                    }

** Expand **

Option with a button on the bottom to toggle between showing initiallyShownCards number of elements and the total number of elements. Text for both states of the button are required, and a section header button can be provided optionally.

Without Section Header Button

                                                
                                                import Backpack_SwiftUI
                                                
                                                struct TestElement: Identifiable {
                                                    let id: Int
                                                }
                                                
                                                BPKCardList(
                                                    title: "Section title",
                                                    description: "Description about this section (optional)",
                                                    layout: .stack(
                                                        accessory: .expand(expandText: "Show more", collapseText: "Show less"),
                                                    ),
                                                    initiallyShownCards: 2,
                                                    elements: Array(repeating: TestElement(id: 1), count: 4)) {
                                                        Text("Element \(element.id)")
                                                    }

With Section Header Button

                                                
                                                import Backpack_SwiftUI
                                                
                                                struct TestElement: Identifiable {
                                                    let id: Int
                                                }
                                                
                                                BPKCardList(
                                                    title: "Section title",
                                                    description: "Description about this section (optional)",
                                                    layout: .stack(
                                                        accessory: .expand(
                                                            expandText: "Show more",
                                                            collapseText: "Show less",
                                                            sectionHeaderButton:
                                                                .init(
                                                                    icon: .addCircle,
                                                                    accessibilityLabel: "Add item") {
                                                                        print("Tap add button")
                                                                    }
                                                        )
                                                    ),
                                                    initiallyShownCards: 2,
                                                    elements: Array(repeating: TestElement(id: 1), count: 4)) {
                                                        Text("Element \(element.id)")
                                                    }

** Footer Button **

Configurable button to be shown at the bottom

                                                
                                                import Backpack_SwiftUI
                                                
                                                struct TestElement: Identifiable {
                                                    let id: Int
                                                }
                                                
                                                BPKCardList(
                                                    title: "Section title",
                                                    description: "Description about this section (optional)",
                                                    layout: .stack(
                                                        accessory: .footerButton(
                                                            .init(
                                                                title: "Add item",
                                                                icon: .init(icon: .addCircle, position: .trailing),
                                                                accessibilityLabel: "Add item") {
                                                                    print("Tap add button")
                                                            }
                                                        )
                                                    ),
                                                    initiallyShownCards: 2,
                                                    elements: Array(repeating: TestElement(id: 1), count: 4)) {
                                                        Text("Element \(element.id)")
                                                    }