{"id":124626,"date":"2018-02-22T16:17:35","date_gmt":"2018-02-22T15:17:35","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/dynamic-panels\/"},"modified":"2025-02-03T16:45:04","modified_gmt":"2025-02-03T15:45:04","slug":"dynamic-panels","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/paneles-dinamicos","title":{"rendered":"Paneles din\u00e1micos"},"content":{"rendered":"<div class=\"embed-container\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/781862315\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>Los Paneles Din\u00e1micos son widgets que pueden contener otros elementos en tus prototipos. Son como minilienzos en los que puedes colocar elementos y alternar entre ellos cuando est\u00e9s simulando tu prototipo. Puedes utilizarlos para enmascarar elementos y mostrar distintos contenidos en la misma zona de una pantalla, como pesta\u00f1as de navegaci\u00f3n y ventanas emergentes. <video class=\"lazyload\" style=\"\" preload=\"\" loop=\"\" muted=\"\" width=\"\" height=\"\" data-autoplay=\"\" data-poster=\"\" playsinline=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" tab-nav-1.mp4=\"\" type=\"\" https:=\"\"><img decoding=\"async\" src=\"\" alt=\"\"><br \/>\nPaneles din\u00e1micos<\/video><br \/>\nCada panel din\u00e1mico contiene un panel por defecto, pero puedes a\u00f1adir m\u00e1s una vez que hayas a\u00f1adido uno al Lienzo. S\u00f3lo podr\u00e1s ver un panel a la vez. <\/p>\n<h2><a id=\"create-dynamic-panel\"><\/a>Crear un panel din\u00e1mico<\/h2>\n<p>Puedes encontrar paneles din\u00e1micos en el desplegable de la Barra de Herramientas, en \u00abContenido din\u00e1mico\u00bb, o pulsando la tecla <kbd>D<\/kbd>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43745\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Find-dynamic-panel.png\" alt=\"Un panel din\u00e1mico en el lienzo. Encu\u00e9ntralo en la Barra de Herramientas bajo contenido din\u00e1mico.\" width=\"1274\" height=\"752\"><br \/>\nCuando hayas colocado uno en el Lienzo, ver\u00e1s un men\u00fa flotante cerca de \u00e9l. Puedes a\u00f1adir m\u00e1s paneles haciendo clic en el bot\u00f3n \u00ab+\u00bb del men\u00fa. Tambi\u00e9n puedes utilizar este men\u00fa o la paleta Capas para volver a ver y editar tus otros paneles.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/floating-menu-panel.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" floating-menu-panel.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/floating-menu-panel.png\" alt=\"Panel de men\u00fa flotante\"><br \/>\nPanel de men\u00fa flotante<\/video><\/p>\n<h2><a id=\"add-move-delete-elements\"><\/a>A\u00f1adir, mover y eliminar elementos<\/h2>\n<h3>A\u00f1adir elementos a un panel<\/h3>\n<h4>Utiliza las teclas Comando\/Control<\/h4>\n<p>Puedes colocar elementos en un panel din\u00e1mico manteniendo pulsada la tecla <kbd>Comando<\/kbd> (Mac) o <kbd>Control<\/kbd> (Windows) y arrastrando un elemento o grupo de elementos al interior. Ver\u00e1s que el panel se ti\u00f1e de azul cuando a\u00f1adas un elemento a \u00e9l.   <\/p>\n<div class=\"embed-container\" style=\"padding-bottom: 59%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742273855\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<h4>Haz clic con el bot\u00f3n derecho del rat\u00f3n en<\/h4>\n<p>Selecciona un elemento o grupo de elementos, haz clic con el bot\u00f3n derecho del rat\u00f3n, ve a Agrupar y selecciona \u00abAgrupar en panel din\u00e1mico\u00bb. Todos los elementos que hayas seleccionado estar\u00e1n ahora dentro de un panel din\u00e1mico.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43753\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Right-click-group-panel.png\" alt=\"Selecciona elementos en el lienzo y haz clic con el bot\u00f3n derecho para agruparlos en un panel din\u00e1mico\" width=\"1066\" height=\"621\"><\/p>\n<h3>Mover y eliminar elementos de un panel<\/h3>\n<p>Activa la herramienta de selecci\u00f3n directa pulsando la tecla <kbd>A<\/kbd> o eligi\u00e9ndola en la Barra de Herramientas. La herramienta de selecci\u00f3n directa te permite elegir r\u00e1pidamente un elemento dentro de un panel din\u00e1mico o en un grupo. A continuaci\u00f3n, puedes mover ese elemento dentro del panel, o colocarlo fuera del \u00e1rea del panel para eliminarlo del mismo.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43751\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/08\/Direct-selection-tool-1.png\" alt=\"Utiliza la tecla A para activar la herramienta de selecci\u00f3n directa.\" width=\"1106\" height=\"644\"><br \/>\nVuelve a la selecci\u00f3n normal pulsando la tecla <kbd>V<\/kbd>.<\/p>\n<h2><a id=\"duplicate-remove-panels\"><\/a>Duplicar y eliminar paneles<\/h2>\n<p>Puedes duplicar un panel y los elementos que contiene haciendo clic con el bot\u00f3n derecho en un panel y seleccionando \u00abDuplicar panel\u00bb. Elimina un panel haciendo clic con el bot\u00f3n derecho del rat\u00f3n sobre \u00e9l y seleccionando \u00abEliminar panel\u00bb. Ten en cuenta que tambi\u00e9n se eliminar\u00e1n todos los elementos de ese panel.<\/p>\n<h2><a id=\"default-panel\"><\/a>El panel por defecto<\/h2>\n<p>Cada panel din\u00e1mico tiene un panel por defecto, el Panel 1, que se mostrar\u00e1 primero cuando simules tu prototipo. Para cambiar otro panel para que sea el panel por defecto<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/the-default-panel.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" the-default-panel.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/the-default-panel.png\" alt=\"El panel por defecto\"><br \/>\nEl panel por defecto<\/video><\/p>\n<ol>\n<li>Selecciona el panel din\u00e1mico<\/li>\n<li>Ve a la paleta Propiedades<\/li>\n<li>Selecciona un panel diferente en el desplegable \u00abPanel def. (por defecto)\u00bb.<\/li>\n<\/ol>\n<h2><a id=\"events-with-panels\"><\/a>Eventos con paneles<\/h2>\n<h3>Establecer panel activo<\/h3>\n<p>Aunque puedes utilizar el men\u00fa flotante para cambiar entre paneles mientras editas, tendr\u00e1s que utilizar una acci\u00f3n <strong>Establecer Panel<\/strong> Activo para cambiar entre ellos durante la simulaci\u00f3n. Elige un desencadenante para iniciar el evento (hacer clic en un bot\u00f3n, por ejemplo), y luego busca la acci\u00f3n <strong>Establecer Panel<\/strong> Activo en el desplegable Acciones. Una vez seleccionada, ver\u00e1s la vista previa del lienzo, donde puedes seleccionar el panel al que quieres cambiar (establecer como activo). Puede que te resulte m\u00e1s f\u00e1cil seleccionar el panel desde la paleta de di\u00e1logo Capas.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43755\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Select-active-panel.png\" alt=\"Elige la acci\u00f3n establecer panel activo y elige un panel para establecerlo como activo\" width=\"1156\" height=\"679\"><\/p>\n<h3>En Panel Activo<\/h3>\n<p>Puedes crear eventos que se activen cada vez que cambies a un panel espec\u00edfico con el activador <strong>En panel activo<\/strong>. <strong>En Panel Activo<\/strong> es \u00fatil para crear eventos repetitivos, como pases de diapositivas y temporizadores de cuenta atr\u00e1s. Por ejemplo, puedes combinar acciones de <strong>Pausa<\/strong> con eventos <strong>En Panel Activo<\/strong> + <strong>Establecer Panel Activo<\/strong> para crear una presentaci\u00f3n de diapositivas que cambie de panel autom\u00e1ticamente.<\/p>\n<h2><a id=\"common-uses-for-panels\"><\/a>Usos habituales de los paneles din\u00e1micos<\/h2>\n<p>Puedes utilizar paneles din\u00e1micos de muchas formas distintas: desde crear cuadros de di\u00e1logo de confirmaci\u00f3n y ventanas modales, \u00e1reas de desplazamiento, cabeceras flotantes, presentaciones de diapositivas y mucho m\u00e1s.  [all these will be linked]<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/panel-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" panel-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/panel-example.png\" alt=\"Usos habituales de los paneles din\u00e1micos\"><br \/>\nUsos<\/video> comunes <video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/panel-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" panel-example.mp4=\"\" type=\"video\/mp4\" https:=\"\">de los paneles din\u00e1micos<\/video><br \/>\nContin\u00faa en el siguiente art\u00edculo para aprender a construir esos casos de uso comunes.<\/p>\n<h2><a id=\"nav-tab-menu\"><\/a>Men\u00fas de las pesta\u00f1as de navegaci\u00f3n<\/h2>\n<p>En este ejemplo, aprender\u00e1s a crear pesta\u00f1as de navegaci\u00f3n y men\u00fa con paneles din\u00e1micos. Utilizar\u00e1s cada pesta\u00f1a para cambiar a distintos paneles din\u00e1micos que contienen informaci\u00f3n diferente.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/tab-nav-1.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" tab-nav-1.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/tab-nav-1.png\" alt=\"Men\u00fas de las pesta\u00f1as de navegaci\u00f3n\">Men\u00fas de las pesta\u00f1as de navegaci\u00f3n<\/video><\/p>\n<h3>Dise\u00f1a el ejemplo<\/h3>\n<ol>\n<li>Arrastra cuatro elementos Rect\u00e1ngulo al lienzo, coloc\u00e1ndolos horizontalmente en el lienzo para que coincidan con el ejemplo. \u00c9stas ser\u00e1n las pesta\u00f1as de navegaci\u00f3n entre las que cambiar\u00e1s. Dales el estilo que prefieras y n\u00f3mbralas \u00abPesta\u00f1a Uno\u00bb, \u00abPesta\u00f1a Dos\u00bb, \u00abPesta\u00f1a Tres\u00bb y \u00abPesta\u00f1a Cuatro\u00bb.El rect\u00e1ngulo de la izquierda (\u00abPesta\u00f1a Uno\u00bb) ser\u00e1 la pesta\u00f1a seleccionada por defecto. Cambia su color de fondo y de fuente para que parezca seleccionada.<\/li>\n<li>Arrastra otro rect\u00e1ngulo debajo de las pesta\u00f1as y cambia su tama\u00f1o para que sea m\u00e1s grande. Este Rect\u00e1ngulo actuar\u00e1 como capa de fondo de la ventana que muestra cada pesta\u00f1a. <\/li>\n<li>Coloca elementos encima del rect\u00e1ngulo para crear el contenido de tu primera ventana de pesta\u00f1a.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43791\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Tab-design.png\" alt=\"Dise\u00f1a el contenido de la ventana de la pesta\u00f1a\" width=\"1229\" height=\"714\"><\/li>\n<li>Selecciona el rect\u00e1ngulo y los elementos dentro de la ventana de pesta\u00f1as, haz clic con el bot\u00f3n derecho del rat\u00f3n, ve a agrupar y selecciona \u00abAgrupar en panel din\u00e1mico\u00bb. Todos los elementos, excepto las pesta\u00f1as del lienzo, deber\u00edan estar ahora dentro de un panel din\u00e1mico. <\/li>\n<li>Haz clic con el bot\u00f3n derecho en el panel y selecciona \u00abDuplicar panel\u00bb. Duplica este panel dos veces m\u00e1s hasta que haya cuatro paneles en total. <\/li>\n<li>Cambia el contenido de la ventana en cada panel como prefieras.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43793\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Tabs-four-panels.png\" alt=\"Duplica el panel tres veces y personaliza el contenido de su interior\" width=\"1434\" height=\"833\"><\/li>\n<\/ol>\n<h3>Crea los eventos<\/h3>\n<p>Tendr\u00e1s que construir algunos eventos para poder cambiar entre las ventanas de pesta\u00f1as durante la simulaci\u00f3n.<\/p>\n<ol>\n<li>Selecciona el rect\u00e1ngulo \u00abPesta\u00f1a Uno\u00bb, busca en la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.<\/li>\n<li>Crea un evento <strong>Al hacer clic<\/strong> + <strong>Establecer panel activo<\/strong>, seleccionando el Panel 1 para establecerlo como activo. Ahora, cada vez que hagas clic en \u00abPesta\u00f1a Uno\u00bb, cambiar\u00e1s al Panel 1. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43795\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Tab-event-Panel1.png\" alt=\"Crea un evento al hacer clic y establecer panel activo, estableciendo el panel 1 como activo\" width=\"1306\" height=\"760\"><\/li>\n<li>Vuelve a la paleta de eventos y haz clic en el bot\u00f3n \u00ab+\u00bb situado junto a la acci\u00f3n que acabas de crear. Crea un evento Al <strong>hacer clic<\/strong> + <strong>Cambiar estilo<\/strong>, seleccionando \u00abPesta\u00f1a Uno\u00bb como destino de la acci\u00f3n. Para que cambien los estilos, a\u00f1ade los colores de fondo y de fuente. Deja los colores por defecto.\n<div class=\"embed-container\" style=\"padding-bottom: 59%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742284426\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>Esta acci\u00f3n hace que la \u00abPesta\u00f1a uno\u00bb parezca seleccionada cuando pulsas sobre ella.<\/li>\n<li>A continuaci\u00f3n, tienes que crear un evento para cambiar el estilo de las otras pesta\u00f1as para que parezcan no seleccionadas cuando hagas clic en la \u00abPesta\u00f1a Uno\u00bb.Haz clic en el bot\u00f3n \u00ab+\u00bb junto a la acci\u00f3n que acabas de crear y crea otro evento <strong>Al hacer clic<\/strong> + <strong>Cambiar estilo<\/strong>. Selecciona las otras tres pesta\u00f1as como objetivos de la acci\u00f3n &#8211; puedes utilizar <kbd>May\u00fasculas<\/kbd> para multiseleccionar. A\u00f1ade los colores de fondo y fuente a cambiar, dejando su coloraci\u00f3n por defecto.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43798\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Tab-multi-select-style.png\" alt=\"Selecciona las pesta\u00f1as dos, tres y cuatro para cambiar el estilo y que parezcan no seleccionadas\" width=\"1136\" height=\"660\"><\/li>\n<li>Haz clic en el bot\u00f3n &#8216;copiar&#8217; de la parte superior de la paleta Eventos para copiar todas las acciones que has creado en la \u00abPesta\u00f1a Uno\u00bb. Ve a la \u00abPesta\u00f1a Dos\u00bb y haz clic en el bot\u00f3n &#8216;pegar&#8217; para pegarlas en la \u00abPesta\u00f1a Dos\u00bb. <video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/tab-copy-paste.png\" playsinline=\"&gt;&lt;source src=\" https:=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" tab-copy-paste.mp4=\"\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/tab-copy-paste.png\" alt=\"Copiar y pegar\">Copiar y pegar<\/video><\/li>\n<li>Haz doble clic en la acci\u00f3n <strong>Establecer panel activo<\/strong> y cambia el panel que est\u00e1 establecido como activo del Panel 1 al Panel 2.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/tab-change-panel.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" tab-change-panel.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/tab-change-panel.png\" alt=\"Panel de cambio de pesta\u00f1a\">Pesta\u00f1a cambiar panel<\/video><\/li>\n<li>Haz doble clic en la acci\u00f3n <strong>Cambiar estilo<\/strong> que cambia el estilo de las Pesta\u00f1as dos, tres y cuatro. Deselecciona la \u00abPesta\u00f1a dos\u00bb y selecciona la \u00abPesta\u00f1a uno\u00bb para que se incluya en la acci\u00f3n. Ahora deber\u00edas tener seleccionadas las Fichas uno, tres y cuatro para cambiarles el estilo.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43804\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Tabs-style-select.png\" alt=\"Selecciona las pesta\u00f1as uno, tres y cuatro para cambiar el estilo. Deselecciona la pesta\u00f1a dos.\" width=\"1219\" height=\"709\"><\/li>\n<li>Repite los pasos del 5 al 8 hasta que cada una de las pesta\u00f1as tenga las acciones correctas, es decir, al hacer clic en \u00abPesta\u00f1a tres\u00bb se establece el Panel 3 como activo, cambia la \u00abPesta\u00f1a tres\u00bb para que parezca seleccionada y las Pesta\u00f1as uno, dos y cuatro para que parezcan no seleccionadas.<\/li>\n<\/ol>\n<p>Haz clic en el bot\u00f3n \u00abReproducir\u00bb para simular tu prototipo. Haz clic en una de las pesta\u00f1as para cambiar de panel y ver c\u00f3mo esa pesta\u00f1a cambia de estilo para parecer seleccionada. <\/p>\n<h2><a id=\"confirmation-dialog\"><\/a>Di\u00e1logo de confirmaci\u00f3n<\/h2>\n<p>Puedes utilizar paneles din\u00e1micos para crear mensajes de advertencia y ventanas modales. En este ejemplo, aprender\u00e1s a crear un di\u00e1logo de confirmaci\u00f3n utilizando un panel din\u00e1mico y las acciones Establecer panel activo.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/confirmation-dialog-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" confirmation-dialog-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/confirmation-dialog-example.png\" alt=\"Di\u00e1logo de confirmaci\u00f3n\">Di\u00e1logo de confirmaci\u00f3n<\/video><\/p>\n<h3>Dise\u00f1a el ejemplo<\/h3>\n<ol>\n<li>Dise\u00f1a un prototipo web o m\u00f3vil. Para ajustarte al ejemplo, crea un prototipo Android y coloca algunos elementos Rect\u00e1ngulo, Texto e Imagen en la pantalla. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43770\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Confirmation-add-elements.png\" alt=\"A\u00f1ade texto, rect\u00e1ngulos e im\u00e1genes al lienzo\" width=\"1023\" height=\"593\"><\/li>\n<li>Coloca un panel din\u00e1mico en el Lienzo, que cubra toda la pantalla. Puedes encontrarlo en la secci\u00f3n Contenido Din\u00e1mico de la Barra de Herramientas o pulsando la tecla <kbd>D<\/kbd>. <\/li>\n<li>Marca el panel din\u00e1mico como oculto durante la simulaci\u00f3n pulsando el bot\u00f3n \u00abojo\u00bb de la paleta Propiedades.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43765\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Hide-dynamic-panel.png\" alt=\"Pulsa el bot\u00f3n del ojo en la paleta de propiedades para ocultar el panel\" width=\"950\" height=\"458\"><\/li>\n<li>Dale al panel din\u00e1mico un fondo negro con un 40% de opacidad. \u00c9ste ser\u00e1 el fondo de la ventana modal. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43769\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Background-modal.png\" alt=\"Cambia el panel din\u00e1mico a un fondo oscuro con un 40% de opacidad\" width=\"1024\" height=\"594\"><\/li>\n<li>Coloca los elementos Rect\u00e1ngulo y Texto dentro del panel din\u00e1mico para crear el di\u00e1logo. Puedes colocarlos en el panel manteniendo pulsado <kbd>Comando<\/kbd> (Mac) o <kbd>Control<\/kbd> (Windows) y arrastrando los elementos al interior. Para que coincidan con el ejemplo, crea los textos \u00abNo\u00bb y \u00abS\u00ed\u00bb.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43774\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Drag-elements-into-panel.png\" alt=\"Arrastra los elementos rect\u00e1ngulo y texto al panel para crear el di\u00e1logo\" width=\"878\" height=\"466\"><\/li>\n<li>Haz clic con el bot\u00f3n derecho en el panel din\u00e1mico y selecciona \u00abDuplicar panel\u00bb. Ahora deber\u00edas tener un panel din\u00e1mico con dos subpaneles: el Panel 1 y el Panel 2. <\/li>\n<li>Personaliza el di\u00e1logo de confirmaci\u00f3n en el Panel 2. Para que coincida con el ejemplo, s\u00f3lo incluye un elemento de texto: \u00abOK\u00bb<img decoding=\"async\" class=\"alignnone size-full wp-image-43772\" src=\"\" alt=\"\" width=\"\" height=\"\">. <\/li>\n<\/ol>\n<h3>Crea los eventos<\/h3>\n<ol>\n<li>Selecciona un elemento que quieras que muestre el di\u00e1logo de confirmaci\u00f3n. Para que coincida con el ejemplo, selecciona un icono \u00abX\u00bb.Ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb. Crea un evento <strong>Al Pulsar<\/strong> + <strong>Mostrar Elemento Oculto<\/strong>, seleccionando el panel din\u00e1mico en la vista previa del Lienzo para mostrarlo. A\u00f1ade un efecto de fundido y haz clic en \u00abAceptar\u00bb para terminar de crear el evento.   <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43787\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Confirmation-dialog-show.png\" alt=\"Elige mostrar elemento oculto y elige el panel din\u00e1mico que se mostrar\u00e1\" width=\"1023\" height=\"595\"><\/li>\n<\/ol>\n<div><strong>Nota:<\/strong> en los prototipos Web, <strong>On Tap<\/strong> ser\u00e1 <strong>On Click<\/strong>.<\/div>\n<ol>\n<li>Ahora necesitar\u00e1s un evento para cambiar entre los dos paneles en el di\u00e1logo de confirmaci\u00f3n. Selecciona el texto \u00abS\u00ed\u00bb en el di\u00e1logo, crea un evento <strong>On Tap<\/strong> + <strong>Establecer Panel Activo<\/strong>, y selecciona el Panel 2 para establecerlo como activo. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43789\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Confirmation-set-active-panel.png\" alt=\"Activa el panel 2\" width=\"1023\" height=\"596\"><\/li>\n<li>Como tambi\u00e9n puedes seleccionar \u00abNo\u00bb en el di\u00e1logo de confirmaci\u00f3n, necesitas crear un evento para ocultar el panel din\u00e1mico. Selecciona el texto \u00abNo\u00bb y crea un evento <strong>On Tap<\/strong> + <strong>Ocultar<\/strong>, seleccionando el panel din\u00e1mico que se ocultar\u00e1 con un efecto de fundido. <\/li>\n<li>Pasa al Panel 2. Selecciona el texto \u00abOK\u00bb y crea un evento <strong>On Tap<\/strong> + <strong>Ocultar<\/strong>, seleccionando el panel din\u00e1mico que se ocultar\u00e1 con un efecto de fundido. <\/li>\n<\/ol>\n<p>Haz clic en el bot\u00f3n \u00abReproducir\u00bb para simular tu prototipo. Haz clic en el icono \u00abX\u00bb y ver\u00e1s aparecer el di\u00e1logo de confirmaci\u00f3n. Haz clic en el texto \u00abNo\u00bb para ocultar el di\u00e1logo, o en el texto \u00abS\u00ed\u00bb para pasar al siguiente panel. A continuaci\u00f3n, haz clic en el texto \u00abAceptar\u00bb para ocultar el di\u00e1logo.   <\/p>\n<h2><a id=\"drag-and-drop\"><\/a>Arrastrar y soltar elementos<\/h2>\n<p>Adem\u00e1s de funcionar como minilienzos, los paneles din\u00e1micos tambi\u00e9n tienen propiedades especiales como contenedor. Esto significa que puedes insertar elementos en ellos mientras simulas. Puedes utilizar esta funcionalidad para arrastrar y soltar elementos entre dos paneles din\u00e1micos.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/drag-event-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" drag-event-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/drag-event-example.png\" alt=\"Arrastrar y soltar elementos\">Arrastrar y soltar elementos<\/video><\/p>\n<h3>Dise\u00f1a el ejemplo<\/h3>\n<ol>\n<li>A\u00f1ade dos Rect\u00e1ngulos al Lienzo y redimensi\u00f3nalos hasta que tengan la altura del Lienzo y aproximadamente la mitad de su anchura. Estos rect\u00e1ngulos servir\u00e1n de fondo. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43813\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Drag-background-layers.png\" alt=\"Coloca dos rect\u00e1ngulos en el lienzo para que sean el fondo  \" width=\"1248\" height=\"726\"><\/li>\n<li>Coloca un Panel Din\u00e1mico en el Lienzo. Ve a la paleta Propiedades y selecciona \u00abVertical\u00bb en el desplegable \u00abDisposici\u00f3n\u00bb. Esto dar\u00e1 al panel una disposici\u00f3n vertical, lo que significa que los elementos que coloques en \u00e9l se apilar\u00e1n unos encima y otros debajo.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43811\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Panel-vertical-layout.png\" alt=\"Cambia el panel a una disposici\u00f3n vertical en la paleta de propiedades\" width=\"1537\" height=\"902\"><\/li>\n<li>Todav\u00eda en la paleta Propiedades, cambia la alineaci\u00f3n del panel din\u00e1mico a centrado y a\u00f1ade algo de espaciado vertical.<\/li>\n<li>Duplica el panel din\u00e1mico para tener dos paneles din\u00e1micos diferentes en el lienzo. Coloca un panel a la izquierda de la pantalla y otro a la derecha. Cambia el tama\u00f1o de cada uno de ellos hasta que ambos ocupen toda la altura del lienzo y la mitad de su anchura.  <\/li>\n<li>Arrastra algunas im\u00e1genes o iconos al panel din\u00e1mico de la izquierda. Ver\u00e1s que caen en su sitio apilados unos encima y otros debajo.<video class=\"lazyload\" style=\"\" preload=\"\" loop=\"\" muted=\"\" width=\"\" height=\"\" data-autoplay=\"\" data-poster=\"\" playsinline=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" drag-images-in-panel.mp4=\"\" type=\"\" https:=\"\"><img decoding=\"async\" src=\"\" alt=\"\">Arrastra im\u00e1genes al panel<\/video> <\/li>\n<\/ol>\n<h3>Crea los eventos<\/h3>\n<ol>\n<li>Activa la herramienta de selecci\u00f3n directa <kbd>A<\/kbd> para seleccionar una de las im\u00e1genes del panel din\u00e1mico de la izquierda. Crea un evento <strong>On Arrastrar<\/strong> + <strong>Mover<\/strong>, seleccionando esa imagen como objetivo a mover.Para el movimiento, selecciona &#8216;Con cursor&#8217; tanto para la posici\u00f3n X (horizontal) como Y (vertical). Ahora, esta imagen se mover\u00e1 con el rat\u00f3n cuando la arrastres durante la simulaci\u00f3n.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43815\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Drag-move-with-cursor.png\" alt=\"Crea un evento de arrastrar + mover y mueve la imagen con el cursor\" width=\"1636\" height=\"949\"><br \/>\nHaz clic en \u00abAceptar\u00bb para terminar de crear este evento.<\/li>\n<li>Haz clic en el bot\u00f3n \u00ab+\u00bb de la parte superior del cuadro de di\u00e1logo Eventos para crear otra interacci\u00f3n para la imagen. Sigue estos pasos para crear la interacci\u00f3n:\n<div class=\"embed-container\" style=\"padding-bottom: 59%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742290981\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong> Elige un activador de <strong>Parada por Arrastre<\/strong>.<\/li>\n<li><strong>b.<\/strong>  Ver\u00e1s que aparece un nuevo campo donde puedes elegir el objetivo de soltar. Esto funciona como una minicondici\u00f3n que desencadenar\u00e1 la acci\u00f3n resultante cuando dejes de arrastrar sobre este objetivo.Haz clic en el bot\u00f3n \u00abengranaje\u00bb para abrir una vista previa del Lienzo donde puedes seleccionar el objetivo de soltar. Selecciona el panel din\u00e1mico de la derecha.  <\/li>\n<li><strong>c.<\/strong> Ahora puedes seleccionar una acci\u00f3n <strong>Insertar elemento en contenedor<\/strong>. Ver\u00e1s que aparecen dos vistas previas del lienzo. En la vista previa superior, selecciona la imagen.En la vista previa inferior, selecciona el Panel 1 del panel din\u00e1mico de la derecha.   Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.<\/li>\n<\/ul>\n<\/li>\n<li>Haz clic de nuevo en el bot\u00f3n \u00ab+\u00bb para crear otra interacci\u00f3n. Crea otro evento <strong>On Drag Stop<\/strong> + <strong>Insertar elemento en contenedor<\/strong>. Esta vez, selecciona el panel din\u00e1mico de la izquierda como destino de la parada de arrastre, as\u00ed como el contenedor en el que insertar la imagen.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43834\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Drag-stop-left-panel.png\" alt=\"Crea otro evento de parada al arrastrar, insertando la imagen en el panel de la izquierda\" width=\"1280\" height=\"755\"><br \/>\nAhora deber\u00edas tener tres interacciones diferentes en tu paleta de eventos.<\/li>\n<li>Ahora, puedes copiar esos eventos en las otras im\u00e1genes del panel din\u00e1mico. Haz clic en el bot\u00f3n \u00abcopiar\u00bb de la paleta Eventos. Selecciona otra imagen en el panel din\u00e1mico y haz clic en el bot\u00f3n \u00abpegar\u00bb de la paleta Eventos. Repite esta operaci\u00f3n hasta que hayas pegado los eventos en todas las im\u00e1genes.   <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43836\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/08\/Drag-events-1.png\" alt=\"Deber\u00eda haber tres eventos en la paleta de eventos para cada imagen\" width=\"1116\" height=\"814\"><\/li>\n<\/ol>\n<p>Haz clic en el bot\u00f3n \u00abReproducir\u00bb para simular tu prototipo. Arrastra las im\u00e1genes entre los paneles y ver\u00e1s c\u00f3mo se colocan en el panel, mientras que el resto de im\u00e1genes de cada panel se mover\u00e1n autom\u00e1ticamente para quedar centradas. <\/p>\n<h2><a id=\"mask-images\"><\/a>Im\u00e1genes de m\u00e1scaras<\/h2>\n<p>Puedes utilizar paneles din\u00e1micos para enmascarar im\u00e1genes en tus prototipos. Aqu\u00ed te explicamos c\u00f3mo: <\/p>\n<ol>\n<li>Selecciona una imagen en el lienzo.<\/li>\n<li>Haz clic con el bot\u00f3n derecho del rat\u00f3n, ve a Agrupar y selecciona \u00abAgrupar en Panel Din\u00e1mico\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43824\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Group-image-in-panel.png\" alt=\"Haz clic con el bot\u00f3n derecho en una imagen y agr\u00fapala en un panel din\u00e1mico para enmascararla\" width=\"1007\" height=\"586\"><\/li>\n<li>Ver\u00e1s que la imagen est\u00e1 ahora dentro de un panel din\u00e1mico, y puedes utilizar los indicadores para cambiar el tama\u00f1o del panel alrededor de la imagen. Tambi\u00e9n puedes mover la imagen dentro del panel. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43826\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Mask-image-indicators.png\" alt=\"Agrupa la imagen en un panel din\u00e1mico y utiliza los indicadores de cada lado para redimensionar el panel alrededor de la imagen\" width=\"1024\" height=\"596\"><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Los Paneles Din\u00e1micos son widgets que pueden contener otros elementos en tus prototipos. Son como minilienzos en los que puedes colocar elementos y alternar entre ellos&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8418,8421],"tags":[],"class_list":["post-124626","post","type-post","status-publish","format-standard","hentry","category-formacion","category-interacciones-web-y-moviles"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124626"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124626"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124626\/revisions"}],"predecessor-version":[{"id":126220,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124626\/revisions\/126220"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}