Sheet

Ein Panel vom Rand, das die Liste dahinter lesbar lässt: der Anfrage-Inspektor, Details.

<Sheet
      trigger={<Button>Open request</Button>}
      title="POST /v1/messages"
      subtitle="req_01JAR4X2KQ"
      size="md"
      modal={false}
      actions={<IconButton icon={icons.copy} aria-label="Copy request id" />}
    >
      {body}
    </Sheet>

import { Sheet } from "@logicplanes/kaeso-ui";

Props

actions
ReactNode
Aktionen im Kopf vor dem Schließen-Kreis.
children
ReactNode
Der Inhalt des Sheets.
defaultOpen
boolean
Ob es anfangs geöffnet ist, wenn die Komponente ihren Zustand selbst verwaltet.
footer
ReactNode
Inhalt am unteren Rand, meist Aktionen.
inline
boolean
Ohne Portal rendern, für Dokumentation und Zustandsmatrizen.
modal
boolean
Die Seite dahinter bleibt bedienbar (nicht modal).
onOpenChange
((open: boolean) => void)
Wird aufgerufen, wenn es sich öffnet oder schließt.
open
boolean
Ob es geöffnet ist, bei gesteuertem Zustand.
side
"bottom" | "left" | "right"
Der Rand, von dem es hereingleitet.
size
"md" | "sm" | "lg"
Die Breite des Sheets oder seine Höhe, wenn es von unten kommt.
subtitle
ReactNode
Ein Untertitel in Mono für IDs: req_01J….
title
ReactNode
Die Überschrift des Sheets, zugleich sein zugänglicher Name.
trigger
ReactElement<unknown, string | JSXElementConstructor<any>>
Das Element, das es öffnet.