Backpack-SwiftUI/ImageGalleryGrid

Usage

You can use the grid with categories as BPKChips or Images, this style is set by the style parameter.

With Images

Day	Night

                                                
                                                @State var selectedCategory: Int = 0
                                                @State var isPresented: Bool = false
                                                
                                                BPKButton("Show Chips Image Grid") {
                                                    isPresented.toggle()
                                                }.bpkImageGalleryGrid(
                                                    isPresented: $isPresented,
                                                    selectedCategory: $selectedCategory,
                                                    style: .image(categories)
                                                    closeAccessibilityLabel: "Close Gallery",
                                                    onImageTapped: { category, image in
                                                        print("Image tapped: \(category) - \(image)")
                                                    },
                                                    onCloseTapped: {
                                                        isPresented.toggle()
                                                    },
                                                )
                                                
                                                var categories: [BPKImageGalleryImageGridStyle.ImageCategory] {
                                                    [
                                                        .init(
                                                            title: "category 1",
                                                            images: [
                                                                .init(
                                                                    title: "Image 1",
                                                                    content: image("image1")
                                                                ),
                                                            ],
                                                            categoryImage: {
                                                                image("cateogory image 1")
                                                            }
                                                        )
                                                    ]
                                                }
                                                
                                                func image(_ name: String) -> some View {
                                                    Image(name)
                                                        .resizable()
                                                        .aspectRatio(contentMode: .fill)
                                                }

With BPKChips

Day	Night

                                                
                                                @State var selectedCategory: Int = 0
                                                @State var isPresented: Bool = false
                                                
                                                BPKButton("Show Chips Image Grid") {
                                                    isPresented.toggle()
                                                }.bpkImageGalleryGrid(
                                                    isPresented: $isPresented,
                                                    selectedCategory: $selectedCategory,
                                                    style: .chip(categories)
                                                    closeAccessibilityLabel: "Close Gallery",
                                                    onImageTapped: { category, image in
                                                        print("Image tapped: \(category) - \(image)")
                                                    },
                                                    onCloseTapped: {
                                                        isPresented.toggle()
                                                    },
                                                )
                                                
                                                var categories: [BPKImageGalleryImageGridStyle.ChipCategory] {
                                                    [
                                                        .init(
                                                            title: "category 1",
                                                            images: [
                                                                .init(
                                                                    title: "Image 1",
                                                                    content: image("image1")
                                                                ),
                                                            ]
                                                        )
                                                    ]
                                                }
                                                
                                                func image(_ name: String) -> some View {
                                                    Image(name)
                                                        .resizable()
                                                        .aspectRatio(contentMode: .fill)
                                                }

Backpack-SwiftUI/ImageGalleryPreview

Default

Day	Night

Usage

You can pass in an array of Images to the BPKImageGalleryPreview and it will display them in a carousel. You can also pass in a currentIndex to control which image is displayed and an onImageClicked closure to be notified when an image is clicked.

                                                
                                                @State var currentIndex: Int = 0
                                                
                                                BPKImageGalleryPreview(
                                                    images: [image("Paris"), image("Barcelona"), image("London")],
                                                    currentIndex: $currentIndex,
                                                    onImageClicked: { selectedIndex in
                                                        print("User tapped on image number \(selectedIndex)")
                                                    }
                                                )
                                                
                                                func image(_ name: String) -> Image {
                                                    Image(name)
                                                        .resizable()
                                                        .aspectRatio(contentMode: .fill)
                                                }

Backpack-SwiftUI/ImageGallerySlideshow

Default

Day	Night

Usage

                                                
                                                @State var currentIndex: Int = 0
                                                @State var isPresented: Bool = false
                                                
                                                BPKButton("Show Slideshow") {
                                                    currentIndex = 0
                                                }.bpkImageGallerySlideshow(
                                                    isPresented: $isPresented,
                                                    images: [
                                                        BPKImageGalleryImage(
                                                            title: "London",
                                                            description: "London is the capital and largest city of England and the UK.",
                                                            credit: "John Doe",
                                                        ) {
                                                            image("London-brigde")
                                                        },
                                                    ],
                                                    closeAccessibilityLabel: "Close",
                                                    currentIndex: $currentIndex,
                                                    onCloseTapped: {
                                                        isPresented = false
                                                    }
                                                )
                                                
                                                func image(_ name: String) -> some View {
                                                    Image(name)
                                                        .resizable()
                                                        .aspectRatio(contentMode: .fill)
                                                }