Card list

Card List

Cocoapods class reference view on Github

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)")
                                                    }