sheet

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("筛选")
              .presentationDetents(["medium", "large"])
              .toolbar(
                <ToolbarItem placement="confirmationAction">
                  <Button action={() => setShown(false)}>完成</Button>
                </ToolbarItem>
              )}>
              <Text>仅显示未读</Text>
            </List>
          </NavigationStack>
        ),
      })}
    >
      筛选
    </Button>
  )
}