跳到正文
QuickGUI

浮层与对话框

应用内样式的内容用 QuickGUI 浮层；选文件和系统提示用系统对话框。

#Popover

<Popover.Root open={open()} onOpenChange={setOpen}>
  <Popover.Trigger><Text>Account</Text></Popover.Trigger>
  <Popover.Portal>
    <Popover.Positioner side="bottom" sideOffset={8}>
      <Popover.Popup style={{ width: 240, padding: 16 }}>
        <Popover.Title><Text>Account</Text></Popover.Title>
        <Popover.Close><Text>Done</Text></Popover.Close>
      </Popover.Popup>
    </Popover.Positioner>
  </Popover.Portal>
</Popover.Root>

side 只是偏好；如果会溢出，位置会翻转。

#Dialog

<Dialog.Root open={open()} onOpenChange={setOpen}>
  <Dialog.Trigger><Text>Edit profile</Text></Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Backdrop />
    <Dialog.Viewport>
      <Dialog.Popup>
        <Dialog.Title><Text>Edit profile</Text></Dialog.Title>
        <Dialog.Description><Text>Changes are saved immediately.</Text></Dialog.Description>
        <Dialog.Close><Text>Done</Text></Dialog.Close>
      </Dialog.Popup>
    </Dialog.Viewport>
  </Dialog.Portal>
</Dialog.Root>

确认操作用 AlertDialog。

#系统浮窗

SystemPopover 打开原生子窗口，可以延伸到所属窗口边缘之外。请给内容指定宽度和高度。

#原生对话框

import { Dialog } from "@quickgui/native";

const choice = await Dialog.showAlertDialog({
  message: "Save changes?",
  buttons: [{ label: "Save" }, { label: "Cancel", role: "cancel" }],
});
const result = await Dialog.showOpenDialog({ properties: ["openFile", "multiSelections"] });