Skip to main content
.gallery(detail: (id: string) => Component): Component
.gallery(options: { zoomEnabled?: boolean }, detail: (id: string) => Component): Component
​
detail
(id: string) => Component
required
A function that receives the gallery item id and returns the detail view to display for that item in the full-screen gallery.
​
options
object
Configuration options for the gallery.

​
Support

​
Usage

Children register as gallery items using .galleryItem(id). Tapping a gallery item opens the full-screen gallery with swipe paging. 
VStack([
    Image({ url: "photo1.jpg" })
        .frame({ width: 100, height: 100 })
        .galleryItem("photo1"),
    Image({ url: "photo2.jpg" })
        .frame({ width: 100, height: 100 })
        .galleryItem("photo2")
]).gallery((id) =>
    Image({ url: id + ".jpg" })
        .resizable()
        .scaledToFit()
)

​
With zoom enabled

HStack({ spacing: 8 }, [
    Image({ url: "a.jpg" })
        .frame({ width: 80, height: 80 })
        .clipShape(RoundedRectangle(8))
        .galleryItem("a"),
    Image({ url: "b.jpg" })
        .frame({ width: 80, height: 80 })
        .clipShape(RoundedRectangle(8))
        .galleryItem("b")
]).gallery({ zoomEnabled: true }, (id) =>
    Image({ url: id + ".jpg" })
        .resizable()
        .scaledToFit()
)

​
Notes

  • Gallery items must be registered with .galleryItem(id) inside the component that has the .gallery() modifier.
  • The detail callback receives the id string from whichever .galleryItem() was tapped, and should return a full-resolution view for that item.

​
See Also