Backpack-SwiftUI/Card

Default

BPKCard

BPKDividedCard

BPKCardWrapper

Usage

BPKCard

Basic card

                                                
                                                import Backpack_SwiftUI
                                                BPKCard {
                                                    BPKText("Hello World")
                                                }

Set padding

Set the padding to:

• .small
• .none

                                                
                                                BPKCard(padding: .none) {
                                                    BPKText("Hello World")
                                                }

Set elevation

Set the elevation to:

• .default
• .focus
• .none

                                                
                                                BPKCard(elevation: .focus) {
                                                    BPKText("Hello World")
                                                }

Set corner radius

Set the corner radius to:

• .small
• .large

                                                
                                                /// Set it's corner radius
                                                BPKCard(cornerStyle: .large) {
                                                    BPKText("Hello World")
                                                }

Set tap gesture

                                                
                                                BPKCard {
                                                    BPKText("You can tap me!")
                                                }.onTapGesture {
                                                    print("Card tapped!")
                                                }

BPKDividedCard

Default

                                                
                                                BPKDividedCard {
                                                    BPKText("PrimaryContent")
                                                } secondaryContent: {
                                                    BPKText("SecondaryContent")
                                                }.onTapGesture {
                                                    print("Card tapped!")
                                                }

Elevation The same as BPKCard

                                                
                                                BPKDividedCard(elevation: .focus) {
                                                    BPKText("PrimaryContent")
                                                } secondaryContent: {
                                                    BPKText("SecondaryContent")
                                                }

Padded

                                                
                                                BPKDividedCard {
                                                    BPKText("PrimaryContent")
                                                        .padding()
                                                } secondaryContent: {
                                                    BPKText("SecondaryContent")
                                                        .padding()
                                                }

BPKCardWrapper

Wrap a card

                                                
                                                BPKCardWrapper(backgroundColor: .coreAccentColor) {
                                                    BPKText("Header")
                                                } card: {
                                                    BPKCard(elevation: .none) {
                                                        Text("Card Content")
                                                    }
                                                }

Wrap a divided card

                                                
                                                BPKCardWrapper(backgroundColor: .coreAccentColor) {
                                                    BPKText("Header")
                                                } card: {
                                                    BPKDividedCard {
                                                        Text("Primary Content")
                                                    } secondaryContent: {
                                                        Text("Secondary Content")
                                                    }
                                                }