{"id":644,"date":"2026-04-06T09:53:20","date_gmt":"2026-04-06T12:53:20","guid":{"rendered":"https:\/\/wiki.gobiernoriocuarto.gob.ar\/?p=644"},"modified":"2026-04-06T11:55:07","modified_gmt":"2026-04-06T14:55:07","slug":"nuevo-componente-toast-para-notificaciones","status":"publish","type":"post","link":"https:\/\/wiki.gobiernoriocuarto.gob.ar\/?p=644","title":{"rendered":"Nuevo componente Toast para notificaciones"},"content":{"rendered":"<p>Documentaci\u00f3n de como usar el componente Toast para mostrar mensajes y notificaciones.<\/p>\n<hr class=\"border-border-200 border-t-0.5 my-3 mx-1.5\" \/>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>M\u00e9todos disponibles<\/strong><\/p>\n<ul class=\"[li_&amp;]:mb-0 [li_&amp;]:mt-1 [li_&amp;]:gap-1 [&amp;:not(:last-child)_ul]:pb-1 [&amp;:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\">\n<li class=\"whitespace-normal break-words pl-2\"><code class=\"bg-text-200\/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">Toast.Success(title, msg, duration, size)<\/code><\/li>\n<li class=\"whitespace-normal break-words pl-2\"><code class=\"bg-text-200\/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">Toast.Error(title, msg, duration, size)<\/code><\/li>\n<li class=\"whitespace-normal break-words pl-2\"><code class=\"bg-text-200\/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">Toast.Warn(title, msg, duration, size)<\/code><\/li>\n<li class=\"whitespace-normal break-words pl-2\"><code class=\"bg-text-200\/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">Toast.Info(title, msg, duration, size)<\/code><\/li>\n<\/ul>\n<hr class=\"border-border-200 border-t-0.5 my-3 mx-1.5\" \/>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>Par\u00e1metros<\/strong><\/p>\n<div class=\"overflow-x-auto w-full px-2 mb-6\">\n<table class=\"min-w-full border-collapse text-sm leading-[1.7] whitespace-normal\">\n<thead class=\"text-left\">\n<tr>\n<th class=\"text-text-100 border-b-0.5 border-border-300\/60 py-2 pr-4 align-top font-bold\" scope=\"col\">Par\u00e1metro<\/th>\n<th class=\"text-text-100 border-b-0.5 border-border-300\/60 py-2 pr-4 align-top font-bold\" scope=\"col\">Tipo<\/th>\n<th class=\"text-text-100 border-b-0.5 border-border-300\/60 py-2 pr-4 align-top font-bold\" scope=\"col\">Descripci\u00f3n<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"border-b-0.5 border-border-300\/30 py-2 pr-4 align-top\"><code class=\"bg-text-200\/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">title<\/code><\/td>\n<td class=\"border-b-0.5 border-border-300\/30 py-2 pr-4 align-top\">varchar (100)<\/td>\n<td class=\"border-b-0.5 border-border-300\/30 py-2 pr-4 align-top\">Texto principal del toast<\/td>\n<\/tr>\n<tr>\n<td class=\"border-b-0.5 border-border-300\/30 py-2 pr-4 align-top\"><code class=\"bg-text-200\/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">msg<\/code><\/td>\n<td class=\"border-b-0.5 border-border-300\/30 py-2 pr-4 align-top\">varchar (200)\u00a0<\/td>\n<td class=\"border-b-0.5 border-border-300\/30 py-2 pr-4 align-top\">Descripci\u00f3n o detalle <em>(opcional)<\/em><\/td>\n<\/tr>\n<tr>\n<td class=\"border-b-0.5 border-border-300\/30 py-2 pr-4 align-top\"><code class=\"bg-text-200\/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">duration<\/code><\/td>\n<td class=\"border-b-0.5 border-border-300\/30 py-2 pr-4 align-top\">numeric (6,0)<\/td>\n<td class=\"border-b-0.5 border-border-300\/30 py-2 pr-4 align-top\">Duraci\u00f3n en ms. Default: <code class=\"bg-text-200\/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">3000<\/code> <em>(opcional)<\/em><\/td>\n<\/tr>\n<tr>\n<td class=\"border-b-0.5 border-border-300\/30 py-2 pr-4 align-top\"><code class=\"bg-text-200\/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">size<\/code><\/td>\n<td class=\"border-b-0.5 border-border-300\/30 py-2 pr-4 align-top\">varchar (2)<\/td>\n<td class=\"border-b-0.5 border-border-300\/30 py-2 pr-4 align-top\"><code class=\"bg-text-200\/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">sm<\/code> \/ <code class=\"bg-text-200\/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">md<\/code> \/ <code class=\"bg-text-200\/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">lg<\/code>. Default: <code class=\"bg-text-200\/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">md<\/code> <em>(opcional)<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<hr class=\"border-border-200 border-t-0.5 my-3 mx-1.5\" \/>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>Tama\u00f1os<\/strong><\/p>\n<div class=\"overflow-x-auto w-full px-2 mb-6\">\n<table class=\"min-w-full border-collapse text-sm leading-[1.7] whitespace-normal\">\n<thead class=\"text-left\">\n<tr>\n<th class=\"text-text-100 border-b-0.5 border-border-300\/60 py-2 pr-4 align-top font-bold\" scope=\"col\">Clave<\/th>\n<th class=\"text-text-100 border-b-0.5 border-border-300\/60 py-2 pr-4 align-top font-bold\" scope=\"col\">Ancho<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"border-b-0.5 border-border-300\/30 py-2 pr-4 align-top\"><code class=\"bg-text-200\/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">sm<\/code><\/td>\n<td class=\"border-b-0.5 border-border-300\/30 py-2 pr-4 align-top\">180 \u2013 260 px<\/td>\n<\/tr>\n<tr>\n<td class=\"border-b-0.5 border-border-300\/30 py-2 pr-4 align-top\"><code class=\"bg-text-200\/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">md<\/code><\/td>\n<td class=\"border-b-0.5 border-border-300\/30 py-2 pr-4 align-top\">240 \u2013 340 px <em>(default)<\/em><\/td>\n<\/tr>\n<tr>\n<td class=\"border-b-0.5 border-border-300\/30 py-2 pr-4 align-top\"><code class=\"bg-text-200\/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">lg<\/code><\/td>\n<td class=\"border-b-0.5 border-border-300\/30 py-2 pr-4 align-top\">320 \u2013 460 px<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<hr class=\"border-border-200 border-t-0.5 my-3 mx-1.5\" \/>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>Ejemplos<\/strong><\/p>\n<div class=\"relative group\/copy bg-bg-000\/50 border-0.5 border-border-400 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-100\" role=\"group\" aria-label=\"C\u00f3digo javascript\">\n<div class=\"overflow-x-auto\">\n<pre class=\"code-block__code !my-0 !rounded-lg !text-sm !leading-relaxed p-3.5\"><code class=\"language-javascript\"><span class=\"token token\">\/\/ m\u00ednimo<\/span>\r\n<span class=\"token token\">Toast<\/span><span class=\"token token\">.<\/span><span class=\"token token property-access\">Success<\/span><span class=\"token token\">(<\/span><span class=\"token token\">\"Guardado\"<\/span><span class=\"token token\">,<\/span> <span class=\"token token\">\"El registro fue guardado.\", 0, \"\"<\/span><span class=\"token token\">)<\/span><br \/> <img decoding=\"async\" class=\"alignnone size-medium wp-image-647\" src=\"https:\/\/wiki.gobiernoriocuarto.gob.ar\/wp-content\/uploads\/2026\/04\/Captura-de-pantalla-2026-04-06-095856.png\" alt=\"\" width=\"241\" height=\"69\" \/>  <br \/><span class=\"token token\">\/\/ con duraci\u00f3n personalizada<\/span>\r\n<span class=\"token token\">Toast<\/span><span class=\"token token\">.<\/span><span class=\"token token known-class-name\">Error<\/span><span class=\"token token\">(<\/span><span class=\"token token\">\"Error\"<\/span><span class=\"token token\">,<\/span> <span class=\"token token\">\"No se pudo conectar.\"<\/span><span class=\"token token\">,<\/span> <span class=\"token token\">5000, \"\"<\/span><span class=\"token token\">)<br \/><\/span><\/code><\/pre>\n<pre class=\"code-block__code !my-0 !rounded-lg !text-sm !leading-relaxed p-3.5\" style=\"color: #333333;background-color: #ffffff\"><code class=\"language-javascript\"><img decoding=\"async\" class=\"alignnone size-full wp-image-646\" src=\"https:\/\/wiki.gobiernoriocuarto.gob.ar\/wp-content\/uploads\/2026\/04\/Captura-de-pantalla-2026-04-06-095847.png\" alt=\"\" width=\"241\" height=\"69\" \/><\/code><\/pre>\n<pre class=\"code-block__code !my-0 !rounded-lg !text-sm !leading-relaxed p-3.5\"><code class=\"language-javascript\"><span class=\"token token\">\/\/ tama\u00f1o peque\u00f1o<\/span> <span class=\"token token\">Toast<\/span><span class=\"token token\">.<\/span><span class=\"token token property-access\">Warn<\/span><span class=\"token token\">(<\/span><span class=\"token token\">\"Atenci\u00f3n\"<\/span><span class=\"token token\">,<\/span> <span class=\"token token\">\"Revis\u00e1 los datos.\"<\/span><span class=\"token token\">,<\/span> <span class=\"token token\">3000<\/span><span class=\"token token\">,<\/span> <span class=\"token token\">\"sm\"<\/span><span class=\"token token\">)<br \/><\/span><\/code><\/pre>\n<pre class=\"code-block__code !my-0 !rounded-lg !text-sm !leading-relaxed p-3.5\" style=\"color: #333333;background-color: #ffffff\"><code class=\"language-javascript\"><img decoding=\"async\" class=\"alignnone size-medium wp-image-648\" src=\"https:\/\/wiki.gobiernoriocuarto.gob.ar\/wp-content\/uploads\/2026\/04\/Captura-de-pantalla-2026-04-06-095901.png\" alt=\"\" width=\"190\" height=\"57\" \/><\/code><\/pre>\n<pre class=\"code-block__code !my-0 !rounded-lg !text-sm !leading-relaxed p-3.5\"><code class=\"language-javascript\"><span class=\"token token\">\/\/ tama\u00f1o grande, sin mensaje<\/span> <span class=\"token token\">Toast<\/span><span class=\"token token\">.<\/span><span class=\"token token property-access\">Info<\/span><span class=\"token token\">(<\/span><span class=\"token token\">\"Proceso iniciado.\"<\/span><span class=\"token token\">,<\/span> <span class=\"token token\">\"\"<\/span><span class=\"token token\">,<\/span> <span class=\"token token\">4000<\/span><span class=\"token token\">,<\/span> <span class=\"token token\">\"lg\"<\/span><span class=\"token token\">)<br \/><\/span><\/code><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-649\" style=\"color: #222222\" src=\"https:\/\/wiki.gobiernoriocuarto.gob.ar\/wp-content\/uploads\/2026\/04\/Captura-de-pantalla-2026-04-06-095907-300x54.png\" alt=\"\" width=\"300\" height=\"54\" srcset=\"https:\/\/wiki.gobiernoriocuarto.gob.ar\/wp-content\/uploads\/2026\/04\/Captura-de-pantalla-2026-04-06-095907-300x54.png 300w, https:\/\/wiki.gobiernoriocuarto.gob.ar\/wp-content\/uploads\/2026\/04\/Captura-de-pantalla-2026-04-06-095907.png 327w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/pre>\n<\/div>\n<\/div>\n<hr class=\"border-border-200 border-t-0.5 my-3 mx-1.5\" \/>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>Comportamiento<\/strong><\/p>\n<ul class=\"[li_&amp;]:mb-0 [li_&amp;]:mt-1 [li_&amp;]:gap-1 [&amp;:not(:last-child)_ul]:pb-1 [&amp;:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\">\n<li class=\"whitespace-normal break-words pl-2\">Se apilan verticalmente en la esquina superior derecha.<\/li>\n<li class=\"whitespace-normal break-words pl-2\">La barra inferior se sincroniza con la duraci\u00f3n del toast.<\/li>\n<li class=\"whitespace-normal break-words pl-2\">Clic en el toast lo cierra inmediatamente.<\/li>\n<li class=\"whitespace-normal break-words pl-2\">Se elimina del DOM al cerrarse.<\/li>\n<\/ul>\n<hr class=\"border-border-200 border-t-0.5 my-3 mx-1.5\" \/>\n<p><strong>Pasos para instalacion<\/strong><\/p>\n<blockquote>\n<p>https:\/\/drive.google.com\/file\/d\/1Iinrk_rjBE3PfVruoltHCisjpp4YvYSQ\/view?usp=sharing<\/p>\n<\/blockquote>\n<ol>\n<li>Descargar el archivo JavaScript y moverlo a la siguiente ubicaci\u00f3n.<\/li>\n<\/ol>\n<blockquote>\n<p>\u00a0C:\\Program Files\\Apache Software Foundation\\Tomcat 10.1_Tomcat10.1\\webapps\\GX18_GesRec_Prd1JavaDB2iSeries\\static\\js<\/p>\n<\/blockquote>\n<p>\u00a0 \u00a0 \u00a0 \u00a02. Si no existe la carpeta js\/ crearla.<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a03. Ejecutar Build<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Documentaci\u00f3n de como usar el componente Toast para mostrar mensajes y notificaciones. M\u00e9todos disponibles Toast.Success(title, msg, duration, size) Toast.Error(title, msg, duration, size) Toast.Warn(title, msg, duration, size) Toast.Info(title, msg, duration, size) Par\u00e1metros Par\u00e1metro Tipo Descripci\u00f3n title varchar (100) Texto principal del toast msg varchar (200)\u00a0 Descripci\u00f3n o detalle (opcional) duration numeric (6,0) Duraci\u00f3n en ms. Default: [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":645,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[],"class_list":["post-644","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-docs"],"_links":{"self":[{"href":"https:\/\/wiki.gobiernoriocuarto.gob.ar\/index.php?rest_route=\/wp\/v2\/posts\/644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wiki.gobiernoriocuarto.gob.ar\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wiki.gobiernoriocuarto.gob.ar\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wiki.gobiernoriocuarto.gob.ar\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/wiki.gobiernoriocuarto.gob.ar\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=644"}],"version-history":[{"count":4,"href":"https:\/\/wiki.gobiernoriocuarto.gob.ar\/index.php?rest_route=\/wp\/v2\/posts\/644\/revisions"}],"predecessor-version":[{"id":655,"href":"https:\/\/wiki.gobiernoriocuarto.gob.ar\/index.php?rest_route=\/wp\/v2\/posts\/644\/revisions\/655"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wiki.gobiernoriocuarto.gob.ar\/index.php?rest_route=\/wp\/v2\/media\/645"}],"wp:attachment":[{"href":"https:\/\/wiki.gobiernoriocuarto.gob.ar\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wiki.gobiernoriocuarto.gob.ar\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wiki.gobiernoriocuarto.gob.ar\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}