Popover

Ein schwebendes Panel neben seinem Auslöser; HoverCard zeigt eine Vorschau beim Überfahren, nie als einziger Zugang.

<Popover trapFocus>
      <Popover.Trigger>
        <Button>Rename</Button>
      </Popover.Trigger>
      <Popover.Content title="Rename key" className="w-320">
        <div className="flex flex-col gap-12">
          <Input aria-label="Name" defaultValue="checkout-web" />
          <div className="flex justify-end gap-8">
            <Popover.Close>
              <Button size="sm">Cancel</Button>
            </Popover.Close>
            <Button size="sm" variant="primary">
              Save
            </Button>
          </div>
        </div>
      </Popover.Content>
    </Popover>

import { Popover, HoverCard } from "@logicplanes/kaeso-ui";

Props

children
ReactNode
Der Auslöser und der Inhalt des Panels.
defaultOpen
boolean
Ob es anfangs geöffnet ist, wenn die Komponente ihren Zustand selbst verwaltet.
onOpenChange
((open: boolean) => void)
Wird aufgerufen, wenn es sich öffnet oder schließt.
open
boolean
Ob es geöffnet ist, bei gesteuertem Zustand.
trapFocus
boolean
Den Fokus nur festhalten, wenn das Popover ein Formular enthält.