Action de notification

Action de notification dans Storybook

Utilisation

Présentation

Le modèle ApplicationHeader utilise le composant NotificationAction. Le composant NotificationAction ne doit être utilisé que dans ce contexte.

Contenu

Directives générales relatives à la rédaction

Lorsque vous écrivez pour ce composant, respectez les meilleures pratiques suivantes :

• Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
• Utilisez des verbes au présent et la forme active dans la plupart des cas.
• Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
• Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
• Utilisez des termes et des phrases concis.

Composants et modèles connexes

Composants

• Notification intégrée
• 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>

Instruction d'importation

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

Cahier des charges du composant

Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.

Propriétés

idobligatoire

Type

string

Description

Unique identifier for the component.

renderTriggerobligatoire

Type

string

Description

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

Type

string

Description

Popover alignment (relative to trigger element).

Valeur par défaut

"'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

Type

node

Description

Notification popover content.

className

Type

string

Description

CSS class name for this component.

footerLink

Type

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

href

Type

IntlMessageShape

Description

URL link text.

label

Type

IntlMessageShape

Description

Label to display on the link.

onClick

Type

function (React.MouseEvent<HTMLElement>)

Description

On click event handler.

Description

Object for the footer link.

headerLink

Type

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

href

Type

IntlMessageShape

Description

URL link text.

label

Type

string

Description

Label to display on the link.

onClick

Type

function (React.MouseEvent<HTMLElement>)

Description

On click event handler.

Description

Object for the header link.

isFlipEnabled

Type

boolean

Description

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

Valeur par défaut

true

onClosed

Type

() => void

Description

Function called when the notification disappears.

title

Type

IntlMessageShape

Description

Notification popover title.

Crochets

Aucun crochet n'est disponible pour NotificationAction.

Clés de traduction

Il n'existe aucune traduction pour NotificationAction.

Pour en savoir plus sur la gestion des traductions, reportez-vous à notre section sur l'internationalisation.

Portes de sortie

Pour en savoir plus, reportez-vous à notre documentation sur les portes de sortie.

Exemples

Consultez la section Utilisation pour découvrir comment concevoir correctement une action de notification et connaître les différentes options de configuration que nous proposons.

Exemple d’action de notification de base

Le composant action de notification est un panneau contenant une liste de notifications que vous pouvez choisir. Le panneau lui-même comporte un en-tête et un pied de page, et peut apparaître à la suite d'un événement ou d'un clic sur un bouton. Vous pouvez implémenter la logique pour chaque notification et pour le panneau lui-même. Vous pouvez également ajouter un événement onClick ou une URL cible aux en-têtes et pieds de page pour gérer la navigation nécessaire.

<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>

Exemple de troncature de texte

Si le texte de l'en-tête, du pied de page ou du titre est trop long, son contenu sera tronqué. Le contenu d'un texte de notification ne sera pas tronqué.

<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>

Exemple OnClick

Les liens d'en-tête et de pied de page peuvent être configurés pour exécuter une fonction lorsque vous cliquez dessus.

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>

Journal des modifications

10.9.0

• Une nouvelle fonctionnalité d'opt-in a été introduite pour désactiver la publication automatique des événements pour le composant NotificationAction. Vous pouvez activer cette fonctionnalité en ajoutant JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true au fichier .env dans la racine de votre application Jutro. Lorsque cette option est activée, les composants hérités ne publient plus d'événements par défaut. Pour en savoir plus sur les événements et sur la façon d'en créer de nouveaux, reportez-vous à la documentation relative aux événements.