sheet - OneScript

sheet(options) slides content up from the bottom while isPresented is true, and the user can swipe it down. See the overview for how the state is controlled.

import {
  Button, List, Modifier, NavigationStack, Text, ToolbarItem, useState,
} from "onescript/views"

function Inbox() {
  const [shown, setShown] = useState(false)

  return (
    <Button
      action={() => setShown(true)}
      modifier={Modifier.sheet({
        isPresented: shown,
        onDismiss: () => setShown(false),
        content: (
          <NavigationStack>
            <List modifier={Modifier
              .navigationTitle("Filter")
              .presentationDetents(["medium", "large"])
              .toolbar(
                <ToolbarItem placement="confirmationAction">
                  <Button action={() => setShown(false)}>Done</Button>
                </ToolbarItem>
              )}>
              <Text>Unread only</Text>
            </List>
          </NavigationStack>
        ),
      })}
    >
      Filter
    </Button>
  )
}

Option	Type	Description
`isPresented`	`boolean`	Whether the sheet is shown.
`onDismiss`	`() => void`	Called when the user dismisses the sheet; set `isPresented` to `false` here.
`content`	`ViewChild`	The presented content.

Wrap the content in a NavigationStack when it needs a title bar or toolbar.
Apply presentationDetents, presentationDragIndicator, presentationContentInteraction, presentationBackgroundInteraction, and interactiveDismissDisabled to views inside the content to adjust the sheet.