groovinads-ui 1.2.52 → 1.2.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -940,21 +940,24 @@ import React from 'react';
|
|
|
940
940
|
import { ToastComponent } from 'groovinads-ui';
|
|
941
941
|
|
|
942
942
|
const ToastExample = () => {
|
|
943
|
-
|
|
944
|
-
<div>
|
|
945
|
-
<ToastComponent
|
|
946
|
-
variant='success'
|
|
947
|
-
autoClose={false}
|
|
948
|
-
position='top-end'
|
|
949
|
-
className='custom-class-toast'
|
|
950
|
-
>
|
|
951
|
-
Information saved successfully!
|
|
952
|
-
</ToastComponent>
|
|
943
|
+
const [selected, setSelected] = useState(null);
|
|
953
944
|
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
945
|
+
const pushToast = () => {
|
|
946
|
+
|
|
947
|
+
const toast = {
|
|
948
|
+
variant: 'info',
|
|
949
|
+
autoClose: true,
|
|
950
|
+
children: 'Se eliminó',
|
|
951
|
+
};
|
|
952
|
+
|
|
953
|
+
setSelected(toast);
|
|
954
|
+
};
|
|
955
|
+
|
|
956
|
+
return (
|
|
957
|
+
<>
|
|
958
|
+
<Button onClick={pushToast}>Nuevo toast</Button>
|
|
959
|
+
<ToastComponent toast={selected} position='bottom-end' />
|
|
960
|
+
</>
|
|
958
961
|
);
|
|
959
962
|
};
|
|
960
963
|
|
|
@@ -962,12 +965,15 @@ export default ToastExample;
|
|
|
962
965
|
```
|
|
963
966
|
|
|
964
967
|
| Property | Type | Required | Options | Default | Description |
|
|
965
|
-
|
|
|
966
|
-
|
|
|
967
|
-
| `
|
|
968
|
-
| `
|
|
969
|
-
| `
|
|
970
|
-
| `
|
|
968
|
+
| Propiedad | Tipo | Requerido | Valores Permitidos | Valor Predeterminado | Descripción |
|
|
969
|
+
| ----------- | ------- | --------- | ------------------------------------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|
|
970
|
+
| `position` | String | No | `top-start` `top-end` `bottom-start` `bottom-end` | `bottom-end` | Define la posición en la pantalla donde se mostrará el toast. |
|
|
971
|
+
| `toast` | Object | No | n/a | n/a | Objeto que contiene las propiedades del toast. |
|
|
972
|
+
| `toast.autoClose` | Boolean | No | `true` `false` | `true` | Si es `true`, se cierra automáticamente después de un cierto tiempo. Si es `false`, permanece en la pantalla hasta que el usuario lo cierre manualmente. |
|
|
973
|
+
| `toast.children` | Node | No | n/a | n/a | Contenido personalizado dentro del toast. |
|
|
974
|
+
| `toast.className` | String | No | n/a | n/a | Nombre de clase personalizado para el toast. |
|
|
975
|
+
| `toast.variant` | String | No | `info` `success` `warning` `error` | `info` | Define el tipo de mensaje que se mostrará. Dependiendo del valor, se muestra un icono diferente asociado con cada tipo de mensaje. |
|
|
976
|
+
|
|
971
977
|
|
|
972
978
|
### ToastProgress
|
|
973
979
|
|