Komponenten / Framework

Dialoge & Fehler

Bestätigen, Eingeben und Informieren als Promise-Dialog, Wischen zum Schliessen und Fehlergrenzen.

ConfirmDialog

Bestätigen, Eingabe und Hinweis als Promise. Bei Bestätigungen liegt der Fokus zuerst auf «Abbrechen», bei Eingaben im Feld.

Noch keine Entscheidung getroffen.

import { ConfirmDialogProvider, useConfirm } from '@rapold/framework-core'

// einmal im Layout
<ConfirmDialogProvider>{children}</ConfirmDialogProvider>

// in einer Komponente
const confirm = useConfirm()
if (await confirm({ message: 'Projekt löschen?', tone: 'destructive' })) {
  await deleteProject()
}

Sheet mit Wischen zum Schliessen

Auf Touch-Geräten zeigt das untere Sheet einen Griff und lässt sich nach unten wegwischen. Escape und die Schliessen-Schaltfläche funktionieren weiterhin.

import { Sheet, SheetContent, SheetTrigger } from '@rapold/framework-core'

<Sheet>
  <SheetTrigger asChild><Button>Filter öffnen</Button></SheetTrigger>
  <SheetContent side="bottom" swipeToClose closeLabel="Filter schliessen">
    …
  </SheetContent>
</Sheet>

// eigenes Element: useSwipeToDismiss(element, { enabled, onDismiss })

ErrorBoundary

Fängt Renderfehler eines Bereichs ab, statt die ganze Seite zu verlieren.

Umsatz Q3: CHF 1,24 Mio. (+8 % gegenüber Vorjahr)

import { ErrorBoundary } from '@rapold/framework-core'

<ErrorBoundary scope="kennzahlen" resetKey={pathname} onError={(error) => log(error)}>
  <Kennzahlen />
</ErrorBoundary>

Komponenten werden geladen …