Zum Hauptinhalt springen

Benachrichtigungsaktion

Benachrichtigungsaktion in Storybook

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design einer NotificationAction und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Einfaches Beispiel​

Die Komponente Benachrichtigungsaktion ist ein Panel mit einer Liste von Benachrichtigungen zur Auswahl. Das Panel selbst hat eine Kopf- und eine Fußzeile und kann als Ergebnis eines Ereignisses oder beim Klicken auf eine Schaltfläche angezeigt werden. Sie können die Logik für jede Benachrichtigung und für das Panel selbst implementieren. Sie können in den Kopf- und Fußzeilen auch ein onClick-Ereignis oder eine Ziel-URL hinzufügen, um die erforderliche Navigation zu verwalten.

<NotificationAction
  renderTrigger={(toggle, ref, isShown) => (
    <Button
      onClick={toggle}
      ref={ref}
      aria-expanded={isShown}
      label="Show Example"
    />
  )}
  footerLink={{
    href: '/',
    label: 'Footer link',
  }}
  headerLink={{
    label: 'Header link',
  }}
  id="notification-action"
  title="This is a popover">
  lorem ipsum dolor sit amet
</NotificationAction>

Beispiel für das Abschneiden von Text​

Wenn der Text in der Kopfzeile, Fußzeile oder im Titelabschnitt zu lang ist, wird sein Inhalt abgeschnitten. Der Inhalt des Benachrichtigungstextes wird nicht abgeschnitten.

<NotificationAction
  renderTrigger={(toggle, ref, isShown) => (
    <Button
      onClick={toggle}
      ref={ref}
      aria-expanded={isShown}
      label="Show Example"
    />
  )}
  footerLink={{
    href: '/',
    label:
      'very long text very long text very long text very long text very long text very long text',
  }}
  headerLink={{
    label:
      'very long text very long text very long text very long text very long text very long text',
  }}
  id="notification-action"
  title="very long text very long text very long text very long text very long text very long text">
  very long text very long text very long text very long text very long text
</NotificationAction>

Beispiel für OnClick​

Die Kopf- und Fußzeilenlinks können so eingestellt werden, dass sie eine Funktion ausführen, wenn sie angeklickt werden.


function MakeToast (text: string) {
        ToastProvider.toast({
            message: text,
            autoClose: 3000,
          })
    }

<ToastProvider />
<NotificationAction
    renderTrigger={(toggle, ref, isShown) => (
        <Button
            onClick={toggle}
            ref={ref}
            aria-expanded={isShown}
            label="Show Example"
        />
    )}
    footerLink={{
        label: 'Footer link',
        onClick: () => {MakeToast("Footer clicked")}
    }}
    headerLink={{
        label: 'Header link',
        onClick: () => {MakeToast("Header clicked")}
    }}
    id="notification-action"
    title="This is a popover"
    >
    lorem ipsum dolor sit amet
</NotificationAction>