Panel

Panels are useful for housing distinct areas of related content. Unlike cards these are not clickable.

Backpack-SwiftUI/Panel

Cocoapods class reference view on Github

Default

Day Night

Usage


                                                
                                                import SwiftUI
                                                import Backpack_SwiftUI
                                                
                                                struct PanelExampleView: View {
                                                    var body: some View {
                                                        VStack(alignment: .leading, spacing: .md) {
                                                            BPKText("Default", style: .heading4)
                                                            BPKPanel() {
                                                                exampleContent
                                                            }
                                                
                                                            BPKText("No padding", style: .heading4)
                                                            BPKPanel(padding: false) {
                                                                exampleContent
                                                            }
                                                            Spacer()
                                                        }
                                                        .padding(.base)
                                                    }
                                                
                                                    private var exampleContent: some View {
                                                        VStack {
                                                            BPKText("Content")
                                                                .foregroundColor(.textOnLightColor)
                                                        }
                                                        .frame(maxWidth: .greatestFiniteMagnitude)
                                                        .padding()
                                                        .background(.statusWarningFillColor)
                                                    }
                                                }