Acción de notificación

Acción de notificación en Storybook

Uso

Descripción general

El patrón ApplicationHeader utiliza el componente NotificationAction. El componente NotificationAction solo se debe utilizar en ese contexto.

Contenido

Pautas generales de redacción

Al escribir para este componente, tenga en cuenta las siguientes prácticas recomendadas:

• En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
• Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
• Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
• Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
• Las palabras y las oraciones deben ser breves.

Componentes y patrones relacionados

Componentes

• Notificación integrada
• Notificación de sistema (toast)

Código

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

Instrucción de importación

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

Contrato de componentes

Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.

Propiedades

idobligatorio

Tipo

string

Descripción

Unique identifier for the component.

renderTriggerobligatorio

Tipo

string

Descripción

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

Tipo

string

Descripción

Popover alignment (relative to trigger element).

Valor predeterminado

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

Tipo

node

Descripción

Notification popover content.

className

Tipo

string

Descripción

CSS class name for this component.

footerLink

Tipo

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

href

Tipo

IntlMessageShape

Descripción

URL or path.

label

Tipo

IntlMessageShape

Descripción

Label to display on the link.

onClick

Tipo

function (React.MouseEvent<HTMLElement>)

Descripción

On click event handler.

Descripción

Object for the footer link.

headerLink

Tipo

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

href

Tipo

IntlMessageShape

Descripción

URL link text.

label

Tipo

string

Descripción

Label to display on the link.

onClick

Tipo

function (React.MouseEvent<HTMLElement>)

Descripción

On click event handler.

Descripción

Object for the header link.

isFlipEnabled

Tipo

boolean

Descripción

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

Valor predeterminado

true

onClosed

Tipo

() => void

Descripción

Function called when the notification disappears.

title

Tipo

IntlMessageShape

Descripción

Notification popover title.

Ganchos

No hay ganchos para NotificationAction.

Claves de traducción

No hay traducciones para NotificationAction.

Para obtener información sobre cómo gestionar las traducciones, consulte nuestra sección sobre internacionalización.

Escotillas de escape

Para obtener más información, consulte nuestra documentación sobre escotillas de escape.

Ejemplos

Consulte la sección Uso para obtener detalles sobre cómo diseñar una NotificationAction correctamente y las diferentes opciones de configuración que ofrecemos.

Ejemplo de acción de notificación básica

El componente acción de notificación es un panel con una lista de notificaciones de entre las que puede elegir. El panel en sí tiene un encabezado y un pie de página, y puede aparecer como resultado de algún evento o al hacer clic en un botón. Puede implementar la lógica para cada notificación y para el panel en sí. También puede agregar un evento onClick o una URL de destino a los encabezados y pies de página para manejar cualquier navegación necesaria.

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

Ejemplo de truncamiento de texto

Si el texto de la sección de encabezado, pie de página o título es demasiado largo, se truncará su contenido. No se truncará el contenido del texto de notificación.

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

Ejemplo de OnClick

Los enlaces del encabezado y el pie de página se pueden configurar para que ejecuten una función cuando se hace clic en ellos.

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>

Registro de cambios

10.9.0

• Se introdujo una nueva característica de opción de participación que desactiva la publicación automática de eventos para el componente NotificationAction. Puede habilitar esta función agregando JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true al archivo .env en la raíz de su aplicación de Jutro. Cuando esta acción está habilitada, los componentes heredados ya no publican eventos de forma predeterminada. Para obtener más información sobre los eventos y cómo configurar nuevos, consulte la documentación sobre eventos.