Skip to main content
.presentationDetents(detents: PresentationDetents): Component;

​
Parameters

​
detents
PresentationDetent[]
An array of presentation detents that define the available sheet sizes. Use Detent.medium, Detent.large, Detent.height(number), or Detent.fraction(number).

​
Support

​
Usage

​
Basic sheet with medium and large detents

VStack([
    Button("Show Sheet", () => {
        showingSheet = true;
    })
]).sheet(isPresented: $showingSheet, content: () =>
    VStack([
        Text("Sheet Content"),
        Button("Dismiss", () => {
            showingSheet = false;
        })
    ]).presentationDetents([Detent.medium, Detent.large])
)

​
Sheet with custom height

VStack([
    Text("Sheet with custom size")
]).presentationDetents([Detent.height(300), Detent.large])

​
Sheet with only medium detent

VStack([
    Text("This sheet only shows at medium height")
]).presentationDetents([Detent.medium])

​
Full screen sheet

VStack([
    Text("Full screen content")
]).presentationDetents([Detent.large])

​
Multiple custom detents

VStack([
    Text("Multiple size options")
]).presentationDetents([
    Detent.height(200),
    Detent.height(400),
    Detent.large
])

​
Settings sheet with medium default

List([
    NavigationLink("Account", destination: AccountView()),
    NavigationLink("Privacy", destination: PrivacyView()),
    NavigationLink("Notifications", destination: NotificationsView())
]).presentationDetents([Detent.medium, Detent.large])

​
Photo picker with custom sizes

LazyVGrid(columns: gridColumns, content: () => [
    ForEach(photos, (photo) =>
        Image(photo.thumbnail)
    )
]).presentationDetents([
    Detent.height(300),
    Detent.height(500),
    Detent.large
])

​
Filter sheet

const [minPrice, setMinPrice] = useState("")
const [maxPrice, setMaxPrice] = useState("")

Form([
    Section("Price Range", content: () => [
        TextField({ placeholder: "Min", text: minPrice, setText: setMinPrice }),
        TextField({ placeholder: "Max", text: maxPrice, setText: setMaxPrice })
    ]),
    Section("Category", content: () => [
        Picker("Category", selection: $selectedCategory, content: () =>
            ForEach(categories, (category) =>
                Text(category.name).tag(category.id)
            )
        )
    ])
]).presentationDetents([Detent.height(350)])