Zum Hauptinhalt springen

Inline-Benachrichtigung

Inline-Benachrichtigung in Storybook
Note:

Die @jutro/router Abhängigkeit und ihre Peer-Abhängigkeiten wie history und react-router-dom sind jetzt optional für Komponentenpakete. Allerdings erfordert InlineNotification die Komponente, dass die Abhängigkeit zu Ihren App-Abhängigkeiten hinzuzufügen, um verwendet werden zu können.

Beispiele​

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

Einfaches Beispiel​

Ein einfaches Beispiel für eine Inline-Benachrichtigung, mit der eine Funktion ausgeführt wird, wenn Sie die Benachrichtigung schließen.


<InlineNotification
  message="Message"
  messageProps={{
    success: 'Hello',
  }}
  onClosed={function () {
    console.log('Closed');
  }}
  isDismissable={false}
  type="success"
/>

Über die Eigenschaft linkProp ist es möglich, am Ende des Benachrichtigungstexts einen spezifischen Link hinzuzufügen.


<InlineNotification
  message="Message"
  messageProps={{
    warning: 'Hello',
  }}
  linkProps={{
    children: 'More Details',
    to: '/inline-notification',
  }}
  isDismissable={false}
  type="warning"
/>

Bündel-Benachrichtigung​

Die Komponente InlineNotification umfasst einen Mechanismus zum Anzeigen eines Bündels mit mehreren Meldungen. Anhand des über die Eigenschaft message erhaltenen Objekttyps wird die Anzeigeoption bestimmt: einzelne Meldung oder gebündelte Meldungen.

Im Bundle-Modul wird der Benachrichtigungsstil per Nachricht mit type mit dem höchsten Schweregrad festgelegt: Fehler, Warnung, Erfolg und Info. Das Bündel zeigt alle von der Komponente empfangenen Nachrichten gruppiert nach type an.


<InlineNotification
  message={{
    error: {
      MyField: [
        {
          fieldId: 'MyField1',
          message: 'This is a required field',
          type: 'error',
        },
      ],
      AnotherField: [
        {
          fieldId: 'MyField2',
          message: 'Value is below minimum allowed',
          type: 'error',
        },
      ],
    },
    info: {
      'Process due date': [
        { message: 'The process due date is on 7 days', type: 'info' },
      ],
    },
    success: {
      'Claim data loaded': [
        {
          message: 'Claim information successfully retrieved',
          type: 'success',
        },
      ],
      'Personal details are correct': [
        {
          message: 'Personal information successfully validated',
          type: 'success',
        },
      ],
    },
    warning: {
      'Address not found': [
        {
          message:
            'Please review the address details and confirm it is correct.',
          type: 'warning',
        },
      ],
      'Validate starting date': [
        {
          message: 'Please confirm that the starting date is correct',
          type: 'warning',
        },
      ],
      'Unable to validate financial details': [
        { message: 'No financial record found', type: 'warning' },
      ],
    },
  }}
  isBundleOpenByDefault={true}
  isDismissable={false}
/>