Backpack-SwiftUI/NavigationView

Default

Day	Night

Transparent

Day	Night

Surface Contrast

Day	Night

Usage

Similar to SwiftUI's native NavigationView, BPKNavigationView is used to manage the navigation of a view hierarchy. You can set a title and an array of leading and trailing items.

Leading and Trailing Items

An enum is defined with the different types of items that can be used as leading or trailing items. The available types are:

• icon
• title
• backButton
• closeButton

                                                
                                                BPKNavigationView(
                                                    title: "Title",
                                                    leadingItems: [.init(type: .backButton("Back"), action: {})]
                                                ) {
                                                    Text("Content")
                                                }
                                                
                                                BPKNavigationView(
                                                    title: "Title",
                                                    leadingItems: [.init(type: .closeButton("Close"), action: {})],
                                                    trailingItems: [
                                                        .init(type: .icon(.ai, "AI"), action: {},
                                                        .init(type: .icon(.calendar, "Calendar"), action: {})
                                                    ]
                                                ) {
                                                    Text("Content")
                                                }

Customising the Navigation Bar

You can customise the navigation bar by setting the style property. All except for surfaceContrast support setting a TitleDisplayMode.

• default(TitleDisplayMode)
• transparent(TitleDisplayMode)
• surfaceContrast (only supports inline style)

Default

                                                
                                                BPKNavigationView(
                                                    title: "Title",
                                                    style: .default(.large)
                                                ) {
                                                    Text("Content")
                                                }

Transparent

                                                
                                                BPKNavigationView(
                                                    title: "Title",
                                                    style: .transparent(.automatic)
                                                ) {
                                                    Text("Content")
                                                }

Surface Contrast

                                                
                                                BPKNavigationView(
                                                    title: "Title",
                                                    style: .surfaceContrast
                                                ) {
                                                    Text("Content")
                                                }