Alert

import {Alert} from '@gravity-ui/uikit';

§Tema

normal: Tema principal (usado por defecto).

info: Se utiliza para cualquier tipo de información regular.

success: Se usa para información positiva.

warning: Se usa para información que necesita atención.

danger: Se usa para errores críticos.

utility: Se usa para consejos útiles.

<Alert theme="normal" title="Normal" message="Normal theme" />
<Alert theme="info" title="Info" message="Info theme" />
<Alert theme="success" title="Success" message="Success theme" />
<Alert theme="warning" title="Warning" message="Warning theme" />
<Alert theme="danger" title="Danger" message="Danger theme" />
<Alert theme="utility" title="utility" message="Utility theme" />

§Ver

filled: Se usa para ajustar el color de fondo de la alerta (se usa de forma predeterminada).

outlined: Se usa para ajustar el color del borde de la alerta.

<Alert title="Filled" message="Filled view" view="filled" />
<Alert title="Outlined" message="Outlined theme" view="outlined" />

§Disposición

vertical: Se usa para dirigir a los usuarios al contenido si hay una actions propiedad con botones. Permite mostrar los botones debajo del texto (se utilizan de forma predeterminada).

horizontal: Se usa para dirigir a los usuarios al contenido si hay una actions propiedad con botones. Permite mostrar los botones a la derecha del texto.

<Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<Alert.Action>button</Alert.Action>} />
<Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<Alert.Action>button</Alert.Action>} />

§Esquinas

rounded: Activa las esquinas redondeadas de la ventana de alerta (se usa de forma predeterminada).

square: Activa las esquinas cuadradas de la ventana de alerta.

<Alert title="Rounded" message="Rounded corners" corners="rounded"  />
<Alert title="Square" message="Square corners" corners="square" />

§Título de la alerta

title: Título de la alerta. Tiene una prioridad inferior a Alert.Title.

<Alert title={<Alert.Title className={'some-class'} text="some text"></Alert.Title>} />

§Mensaje de alerta

message: Mensaje de alerta. Debe ser lo suficientemente significativo como para explicar completamente de qué se trata la alerta.

§onClose

onClose: La función de devolución de llamada se activa cuando un usuario hace clic en el botón de cierre de la alerta. Cuando se defina esta propiedad, aparecerá el botón de cierre.

<Alert onClose={() => alert('Close button pressed')} title="Alert has close" message="Alert has close" />

§Alinear

Determina cómo se alinea verticalmente el contenido del Alert componente.

baseline: Alineación predeterminada.

center: El contenido está centrado verticalmente dentro del Alert componente. Puede resultar útil si las acciones ocupan más espacio que el texto o si el icono debe estar en el centro del contenido.

<Alert align="baseline" theme="info" title="Baseline" message="Baseline align" actions={<Alert.Action>button</Alert.Action>} />
<Alert align="center" theme="info" title="Center" message="Center align" actions={<Alert.Action>button</Alert.Action>} align="center"/>

§Propiedades