Benachrichtigungsaktion

Benachrichtigungsaktion in Storybook

Verwendung

Überblick

Das ApplicationHeader-Muster verwendet die NotificationAction-Komponente. Die NotificationAction-Komponente darf nur in diesem Kontext verwendet werden.

Inhalt

Allgemeine Richtlinien fürs Schreiben

Beachten Sie beim Schreiben für diese Komponente die folgenden bewährten Verfahren:

• Verwenden Sie die Großschreibung des ersten Worts und von Substantiven für alle Aspekte der Gestaltung von Guidewire-Produktschnittstellen. Schreiben Sie nicht alles groß.
• Verwenden Sie in den meisten Situationen Verben im Präsens und im Aktiv.
• Verwenden Sie gebräuchliche Abkürzungen, um Ihrem Text einen natürlichen und informellen Ton zu verleihen.
• Verwenden Sie eine einfache Sprache. Vermeiden Sie unnötigen Jargon und komplexe Sprache.
• Halten Sie Wörter und Sätze kurz.

Verwandte Komponenten und Muster

Komponenten

• Inline-Benachrichtigung
• Toast

Code

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

Importanweisung

import { NotificationAction } from '@jutro/components';

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

iderforderlich

Typ

string

Beschreibung

Unique identifier for the component.

renderTriggererforderlich

Typ

string

Beschreibung

Function to render a trigger element. The trigger element takes three arguments: An object of props for the component; An onCLick callback function; A boolean variable to control the state of visibility, like isVisible.

align

Typ

string

Beschreibung

Popover alignment (relative to trigger element).

Standardwert

"'auto' | 'auto-end' | 'auto-start' | 'bottom' | 'bottom-end' | 'bottom-start' | 'left' | 'left-end' | 'left-start' | 'right' | 'right-end' | 'right-start' | 'top' | 'top-end' | 'top-start'"

children

Typ

node

Beschreibung

Notification popover content.

className

Typ

string

Beschreibung

CSS class name for this component.

footerLink

Typ

{ label: IntlMessageShape, onClick: () => void, href: IntlMessageShape }

href

Typ

IntlMessageShape

Beschreibung

URL or path.

label

Typ

IntlMessageShape

Beschreibung

Label to display on the link.

onClick

Typ

function (React.MouseEvent<HTMLElement>)

Beschreibung

On click event handler.

Beschreibung

Object for the footer link.

headerLink

Typ

{ label: IntlMessageShape, onClick: () => void, href: IntlMessageShape }

href

Typ

IntlMessageShape

Beschreibung

URL link text.

label

Typ

string

Beschreibung

Label to display on the link.

onClick

Typ

function (React.MouseEvent<HTMLElement>)

Beschreibung

On click event handler.

Beschreibung

Object for the header link.

isFlipEnabled

Typ

boolean

Beschreibung

If set to true, the popover flips when it is about to overflow the visible area.

Standardwert

true

onClosed

Typ

() => void

Beschreibung

Function called when the notification disappears.

title

Typ

IntlMessageShape

Beschreibung

Notification popover title.

Hooks

Für NotificationAction sind keine Hooks verfügbar.

Übersetzungsschlüssel

Es gibt keine Übersetzungen für NotificationAction.

Informationen über die Verwaltung von Übersetzungen finden Sie in unserem Abschnitt über Internationalisierung.

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.

Beispiele

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

Beispiel für eine einfache Benachrichtigungsaktion

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>

Änderungsprotokoll

10.9.0

• Es wurde eine neue Opt-in-Funktion eingeführt, die die automatische Ereignisveröffentlichung für die Komponente NotificationAction deaktiviert. Sie können diese Funktion aktivieren, indem Sie der .env-Datei im Stammverzeichnis Ihrer Jutro-Anwendung JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true hinzufügen. Wenn diese Option aktiviert ist, veröffentlichen ältere Komponenten standardmäßig keine Ereignisse mehr. Weitere Informationen zu Ereignissen und zum Einrichten neuer Ereignisse finden Sie in der Dokumentation zu Ereignissen.