Copy
.sheet(props: {
isPresented: boolean;
setIsPresented: (value: boolean) => void;
content: () => Component;
onDismiss?: () => void;
}): Component
Show properties
Show properties
Controls whether the sheet is visible. Set to
true to present, false to dismiss.Callback to update the presentation state. Called with
false when the user dismisses the sheet by swiping down or tapping outside.A function that returns the sheet’s content. Called lazily when the sheet is presented.
Callback fired after the sheet has been fully dismissed.
Support
Usage
Basic sheet
Copy
const body = () => {
const [showSheet, setShowSheet] = useState(false)
return VStack([
Button("Show Sheet", () => setShowSheet(true))
]).sheet({
isPresented: showSheet,
setIsPresented: setShowSheet,
content: () => VStack([
Text("Sheet Content")
.font("title"),
Button("Close", () => setShowSheet(false))
]).padding(16)
})
}
Sheet with dismiss callback
Copy
const body = () => {
const [showSheet, setShowSheet] = useState(false)
return VStack([
Button("Edit", () => setShowSheet(true))
]).sheet({
isPresented: showSheet,
setIsPresented: setShowSheet,
content: () => Text("Editor").padding(16),
onDismiss: () => {
console.log("Sheet dismissed")
}
})
}
Sheet with detents
Combine with.presentationDetents() to control the sheet’s available heights.
Copy
const body = () => {
const [showSheet, setShowSheet] = useState(false)
return VStack([
Button("Open", () => setShowSheet(true))
]).sheet({
isPresented: showSheet,
setIsPresented: setShowSheet,
content: () => VStack([
Text("Half sheet")
.font("headline"),
Spacer()
]).padding(16)
}).presentationDetents([Detent.medium, Detent.large])
}