presentationDetents
Set the heights a sheet can rest at and the current height.
presentationDetents(detents) applies to a view inside sheet content and sets the heights the sheet can rest at. The user drags the indicator to switch between them.
import { List, Modifier, Text } from "onescript/views"
<List modifier={Modifier.presentationDetents(["medium", "large", { height: 200 }])}>
<Text>Content</Text>
</List>| Value | Height |
|---|---|
"medium" | About half the screen. |
"large" | Full height, the default. |
{ fraction: number } | A fraction of the screen height, in (0, 1]. |
{ height: number } | A fixed height in pt. |
Current height
Pass a second argument to read and control the height the sheet rests at. selection must be one of detents. When the user drags the sheet, OneScript calls onSelectionChange with the new height, which you store back in state. Changing selection from the script animates the sheet to that height.
import { Button, List, Modifier, type PresentationDetent, useState } from "onescript/views"
function Panel() {
const [detent, setDetent] = useState<PresentationDetent>("medium")
return (
<List modifier={Modifier.presentationDetents(["medium", "large"], {
selection: detent,
onSelectionChange: setDetent,
})}>
<Button action={() => setDetent("large")}>Expand</Button>
</List>
)
}| Option | Type | Description |
|---|---|---|
selection | PresentationDetent | The current height. Must be one of detents. |
onSelectionChange | (detent: PresentationDetent) => void | Called when the user drags the sheet to another height. |
How is this guide?
Last updated on