Zum Hauptinhalt springen

Popup

Popup in Storybook

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen darüber, wie und wann Sie die Komponente Toast verwenden können.

Einfaches Popup​

Das Popup wird angezeigt, wenn Sie auf die Schaltfläche klicken, und bleibt 5 Sekunden lang auf dem Bildschirm.

Sie können diese Dauer in Millisekunden festlegen. Es gibt keine Obergrenze, wie lange das Popup auf dem Bildschirm verbleiben kann. Der autoClose-Timer wird jedoch angehalten, wenn Sie den Mauszeiger über das Popup bewegen oder wenn die Seite den Fokus verliert.

import React from 'react';
import { Button, ToastProvider } from '@jutro/components/';

export const BasicToast = () => {
  
  const handleClick = () => {
    ToastProvider.toast({
      message: 'This is a toast message!',
      autoClose: 5000,
    });
  };

  return (
    <div>
      <ToastProvider />
      <Button
        label="Show toast"
        onClick={handleClick}
      />
    </div>
  );
};

Sie können einen Link in ein Popup einfügen, indem Sie die Eigenschaft linkProps verwenden. Er akzeptiert alle Link-Komponenteneigenschaften. Lesen Sie den Abschnitt Link-Komponente, um mehr über seine Verwendung zu erfahren.

import React from 'react';
import { Button, ToastProvider } from '@jutro/components/';

export const ToastLink = () => {
  
  const handleClick = () => {
    ToastProvider.toast({
      message: 'This is a toast message',
      linkProps: {
        children: 'This is a link inside a toast',
        href: 'https://docs.guidewire.com/jutro/documentation/latest/', 
        target: '_blank'
    },
    });
  };

  return (
    <div>
      <Button
        label="Show toast with a link"
        onClick={handleClick}
      />
    </div>
  );
};

Popup-Typen​

Die type-Eigenschaft bestimmt den visuellen Stil und die Bedeutung der Popupbenachrichtigung. Sie können sie verwenden, um die Kategorie der Popupmeldung anzugeben. Sie akzeptiert die folgenden Werte:

  • info
  • success
  • warning
  • error
import React from 'react';
import { Button, ToastProvider } from '@jutro/components/';

export const ToastTypes = () => {
  
  const showToast = (type, message) => {
    ToastProvider.toast({
      message,
      autoClose: 5000,
      type
    });
  };

  return (
    <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap'}}>
      <Button
        label="Info toast"
        onClick={() => showToast('info', 'This is an info toast message!')}
      />
      <Button
        label="Success toast"
        onClick={() => showToast('success', 'This is a success toast message!')}
      />
      <Button
        label="Warning toast"
        onClick={() => showToast('warning', 'This is a warning toast message!')}
      />
      <Button
        label="Error toast"
        onClick={() => showToast('error', 'This is an error toast message!')}
      />
    </div>
  );
};

Aktionen nach dem Schließen des Popups​

Mit der onClosed-Eigenschaft können Sie eine Funktion hinzufügen, die beim Schließen des Popups aufgerufen wird. In diesem Beispiel wird der Text der Schaltfläche geändert. Darüber hinaus wird die autoFocus-Eigenschaft verwendet, um den Fokus automatisch auf die Schaltfläche zum Schließen des Popups zu ändern.

import React, { useState } from 'react';
import { Button, ToastProvider } from '@jutro/components/';

export const CloseToast = () => {
  const [buttonLabel, setButtonLabel] = useState('Show toast');

  const handleClick = () => {
    ToastProvider.toast({
      message: 'Close this toast to change the button text',
      autoFocus: true,
      autoClose: false,
      toastId: 'errorToast',
      onClosed: () => {
        setButtonLabel('Toast closed');
        setTimeout(() => {
          setButtonLabel('Show toast');
        }, 5000); // 5 seconds delay
      }
    });
  };

  return (
    <div>
      <Button
        label={buttonLabel}
        onClick={handleClick}
      />
    </div>
  );
};