Reutilizar un diseño con componentes

Objetivo

Dibujar algo una vez, usarlo en todas partes y que se vea bien tanto en modo claro como en modo oscuro.

Tres cosas, que funcionan juntas: el panel Componentes desde el que se arrastra, los estados en los que se puede mostrar un componente y los colores del tema, que siguen al lector y no al autor.

El panel Componentes

El panel a la izquierda del lienzo contiene dos listas a la vez: Capas arriba, que ya conoce, y Componentes debajo. Arrastre la línea que las separa para dar más espacio a una —un árbol profundo pide un reparto, un diseño lleno de componentes pide el otro— y arrastre el borde exterior del panel para ensancharlo entero. Las dos líneas responden a las teclas de flecha además de al ratón.

Pulse el encabezado de una lista para plegarla, y la otra ocupa todo el panel; vuelva a pulsar el encabezado para recuperarla, exactamente donde dejó la línea. Una lista siempre queda abierta, así que el encabezado de la última abierta no responde.

Componentes contiene estas listas:

Grupo	Qué es
Controles	Los propios de la plataforma: un Botón, un Cuadro de texto, un Área de texto, una Casilla, una Lista desplegable, un Selector de fecha, un Selector de archivo
Elementos	De lo que está hecha una pantalla: La pantalla, Una región, Una lista, Un elemento de lista, Un encabezado, Un párrafo, Un enlace
De otras aplicaciones	Los componentes dibujados en las demás aplicaciones de la solución aparecen aquí, listos para colocar.
Componentes	Los que usted creó en este diseño

Arrastre uno al lienzo y cae donde lo soltó. O haga clic en él (o pulse Intro sobre él) y cae en el centro de lo que está viendo; conviene saberlo si trabaja sin ratón.

Arrastrar un control desde este panel es la forma rápida de obtener un control real: llega siendo ya un Cuadro de texto, con el tamaño aproximado de un cuadro de texto y pintado como tal, en lugar de llegar como un rectángulo que luego tiene que ir a clasificar en el inspector.

Arrastrar un elemento es como se construye la forma de la pantalla. Una región llega ya etiquetada, así que se convierte en una <section> real, y un encabezado se convierte en un encabezado real, que es lo que pone su pantalla en el esquema de un lector de pantalla y lo que hace que Ctrl+F encuentre su texto. Un rectángulo normal se puede etiquetar después en la pestaña Pantalla; soltar el elemento le ahorra tener que acordarse.

En este panel no hay formas

Antes las había, y volvieron a donde funcionan: el carril de herramientas del extremo izquierdo tiene todas las formas, y una herramienta es un modo: elíjala y después arrastre el tamaño que quiera, que es lo que necesita para una línea o un trazado con pluma, donde el arrastre es la forma. Este panel tiene la mitad de alto que un carril y comparte esa altura con el árbol de objetos, así que contiene lo que solo puede conseguir aquí.

nota

Los Controles y los Elementos solo aparecen cuando diseña una pantalla. En un informe o un panel ni un cuadro de texto ni una región significarían nada, así que no se ofrece ninguno de los dos.

Crear un componente

Seleccione los objetos que quiere reutilizar, haga clic con el botón derecho y elija Crear componente. Se convierten en el principal de un componente, y el principal aparece en el panel Componentes de inmediato.

Lo que seleccionó se convierte en el componente. Si seleccionó un objeto —una tarjeta que dibujó en un marco, una etiqueta de estado que dibujó como un único rectángulo, un grupo con un icono y su etiqueta—, ese objeto es el principal, en el lugar en el que ya estaba, y el componente toma su nombre. No se agrega nada encima, así que el árbol no crece un nivel y no acaba con un «Componente» encima del nombre que eligió. Seleccione varios objetos a la vez y se envuelven en un marco, porque un componente necesita una raíz y una selección suelta no la tiene.

Como el componente es el objeto, su nombre le sigue: cambie el nombre de la capa y el componente cambia de nombre con ella, en el panel Componentes y en todos los sitios donde se ofrece.

A partir de ahí:

• Arrástrelo desde el panel tantas veces como quiera. Cada uno es una instancia.
• Edite el principal y cada instancia cambia con él.
• Añádale una parte más tarde. Seleccione el principal, pulse Mayús+2 para traerlo a la vista y coloque dentro algo de la paleta: un texto, un enlace, un botón. Pasa a formar parte del componente y todas las instancias lo reciben.
• Elija qué puede cambiar una instancia. Seleccione una capa dentro del principal y marque las propiedades que quiere que las instancias puedan sobrescribir. Todo lo que no marque queda bloqueado al principal, y esa es la idea: un componente solo merece la pena si es realmente el mismo en todas partes.

Distinguir el principal de una instancia

En la lista Capas llevan glifos distintos, para que distinga de un vistazo cuál es cuál sin hacer clic en nada: el de cuatro rombos es el principal —la única definición— y el de un rombo hueco es una instancia, una copia de él. Pase el puntero por encima de cualquiera para leer cuál es. Solo se marca la fila más exterior de cada uno; las capas de dentro le pertenecen y no se vuelven a marcar.

Llegar al principal desde una instancia

Una instancia no se puede editar donde está, así que cuando quiera cambiarla tiene que ir a su principal. Hay dos formas, y ambas funcionan desde una capa dentro de una instancia además de desde la propia instancia:

• Haga clic con el botón derecho y elija Ir al componente principal.
• En el inspector, pulse Ir al componente principal en el panel Instancia, bajo el nombre del componente.

Cualquiera de las dos selecciona el principal y lo muestra, así que el panel describe lo que va a editar y no la copia de la que viene.

Recuperar las formas: Duplicar como marco

Duplicar en un componente hace lo que dice y no lo que quizá quería decir: en un principal crea un segundo principal, y en una instancia una segunda instancia. Ambos siguen dependiendo de algo, que es toda la gracia de un componente, y la respuesta equivocada cuando lo que quiere es «esta tarjeta casi está bien, deme una que pueda cambiar libremente».

Haga clic con el botón derecho en un componente o una instancia y elija Duplicar como marco. Lo que llega es un marco normal lleno de formas normales: el mismo dibujo, que ya no depende de nada, editable en todas partes. Conviértalo en componente más tarde si se lo gana, y como un marco se convierte en el propio componente, eso no le cuesta ningún nivel extra en el árbol.

Los estados dibujados no vienen con él. Un estado es una imagen de un componente, y una copia que ya no lo es no tiene nada de lo que esas imágenes puedan ser.

Volver ordinaria una instancia: Separar instancia

Haga clic derecho en una instancia — o en algo dentro de ella — y elija Separar instancia. Se convierte en un marco ordinario donde está: las mismas formas, el mismo sitio, ya sin seguir al maestro, y con cada parte editable. A diferencia de Duplicar como marco, no se copia nada. Un maestro no se puede separar; elimínelo en su lugar.

Dar propiedades a un componente

Un componente vale más cuando cada copia puede decir algo distinto. Eso es lo que son las propiedades, y hay dos tipos: la diferencia está en dónde vive el valor.

nota

Las propiedades y los eventos están en la pestaña Pantalla, en Interfaz del componente, no en Gráfico con los rellenos y los radios de esquina. Una propiedad es lo que una pantalla establece y un evento es lo que escucha; ninguno de los dos es un hecho del dibujo, y ambos los leen las expresiones de esa misma pestaña.

El tipo dibujado: marcar una propiedad de una capa

Seleccione una capa dentro del principal y marque una propiedad en Exponer en las instancias; esa marca está en la pestaña Gráfico, donde están las demás propiedades de la capa. Declara una propiedad con el nombre de la capa —Caption + texto se convierte en captionText— y aparece en la lista Propiedades de Interfaz del componente en la pestaña Pantalla.

Una instancia la establece editando su propia copia: haga clic dentro de la instancia, cambie las palabras o el color, y se mantiene. Lo ve en el lienzo mientras maqueta la pantalla, que es toda la gracia de este tipo.

El tipo valor: agregar una usted mismo

Seleccione el principal del componente, vaya a la pestaña Pantalla y pulse ＋ Propiedad en Interfaz del componente → Propiedades. Dele un nombre y un tipo (Texto, Número, Sí / no).

Un valor predeterminado, si quiere uno, se escribe en la página de código. Con el principal todavía seleccionado, pulse Escribir código (el botón </>), elija la propiedad en la lista junto al editor y escriba la expresión: "Untitled", 0, false. Es BS, como todo lo demás en esta pantalla, así que se escribe donde está el resto del BS.

Todavía no se ve nada, porque no hay nada dibujado para ella. Enlace algo a ella: seleccione una capa dentro del principal y, en Texto (o Se muestra, o Habilitado), escriba props.title. Consulte Hacer que una pantalla reaccione para ver cómo funcionan los enlaces.

Ahora cada instancia puede recibir su propio valor: selecciónela, y el panel Instancia enumera las mismas propiedades. Una propiedad de valor acepta una expresión, así que puede ser un literal —"Standard"— o seguir a la pantalla: state.chosenPlan. Cuando cambia el estado de la pantalla, la tarjeta le sigue.

nota

Solo el tipo valor se puede leer con props. Una propiedad dibujada se establece en la propia copia de una capa de la instancia; no hay nada que una expresión pueda leer. Si quiere que el interior de un componente use un valor, agregue aquí una propiedad y enlace a ella.

Generar un evento

Un componente debe decir qué ocurrió, no decidir qué significa: eso lo decide la pantalla en la que se coloca, y cada pantalla puede decidirlo de forma distinta.

1. Seleccione el principal, vaya a la pestaña Pantalla y pulse ＋ Evento en Interfaz del componente → Eventos. Póngale nombre: chosen, submitted.
2. Dentro del componente, desde cualquier controlador, genérelo: emit("chosen", props.title). El segundo argumento es opcional.
3. Seleccione una instancia y abra su pestaña Pantalla. Su lista Eventos tiene ahora su evento, con un cuadro para lo que hace esta pantalla al respecto: código de controlador normal, en el ámbito propio de la pantalla. Lo que envió el componente es event.payload.

El mismo componente colocado dos veces en la misma pantalla puede responder de forma distinta, porque el controlador pertenece a la instancia. Esa es la diferencia entre un evento y un campo de estado compartido.

consejo

Pruébelo en el ejemplo Choose a plan: una tarjeta, colocada dos veces, con planes distintos y dos respuestas distintas al mismo evento.

Dar estados a un componente

Un componente puede tener un aspecto distinto según lo que sea: un error, una advertencia, algo seleccionado, algo que todavía se está cargando.

Los estados pertenecen al componente, y el componente es donde se declaran. Seleccione el principal del componente y el panel Componente del inspector los enumera:

• Normal encabeza la lista, y no hay nada que dibujar para él: el principal es Normal.
• Debajo, cada estado que haya agregado. Pulse uno para ir directamente a su dibujo.

Para agregar uno:

1. Seleccione el principal del componente.
2. En el panel Componente, en Estados, escriba un Estado —cualquiera que su pantalla tenga realmente: invalid, overBudget, awaitingApproval— o elija una de las sugerencias. Pulse ＋ Estado.
3. Aparece una variante justo debajo del componente, en el mismo marco en el que está el componente, con el nombre <Componente> — <estado>. Cambie sus colores. Eso es el estado.

consejo

Las variantes viven junto al componente, no en un cuadro propio. Se apilan hacia abajo en la propia columna del componente —la segunda bajo la primera, y así sucesivamente— y, si el componente está dentro de un marco, ese marco crece hacia abajo para hacer sitio; nada de lo que ya contiene se mueve.

Antes había un cuadro alrededor de ellas, llamado Variantes de <Componente>. Ha desaparecido: los estados de un componente son sus variantes, así que un cuadro entre un componente y sus propios estados era un nivel más en el árbol de capas y hacía que los estados parecieran una lista aparte guardada en otro sitio. Si tiene una pantalla que todavía tiene uno, se deshace la próxima vez que abra esa pantalla: las variantes se quedan exactamente donde están dibujadas, y el cuadro vacío desaparece.

Nada de lo que dibuja una variante se representa en la página. Una variante es una imagen de un componente, no parte de la pantalla, y el compilador la omite dondequiera que la ponga, que es lo que permite que una esté dentro de su maquetación sin riesgo.

Hay tres marcos a los que una variante no se unirá, cada uno por un motivo: el marco de la pantalla, porque su tamaño es el tamaño de la pantalla y hacerlo crecer cambiaría el tamaño de su pantalla cada vez que dibujara un estado; un marco con diseño automático, porque se dispondría dentro de su flujo y desplazaría su dibujo; y un componente que no está en ningún marco. En los tres casos va al lienzo, debajo del componente.

El nombre que da a la variante es el nombre del estado. Eso es todo: no hay una segunda lista que mantener sincronizada con los dibujos.

Este es el único sitio donde se agrega un estado. Un objeto normal no tiene ninguno: su pestaña Pantalla lo indica y señala Crear componente. Un gesto, en un sitio, junto a la lista de los estados que ya existen; y un componente con una sola instancia es un componente perfectamente válido si todo lo que quería era un efecto al pasar el puntero sobre un botón.

El propio puntero

Un cuadro dibujado que hace algo se ve exactamente igual que un cuadro dibujado que no hace nada, y el puntero del ratón es lo único que le dice a alguien cuál es cuál antes de hacer clic.

Seleccione cualquier objeto y su pestaña Pantalla tiene un selector Puntero: Mano, Texto, Mover, Agarrar, No permitido, Ocupado o Flecha. Establézcalo en una variante y solo se aplica en ese estado, que suele ser lo que quiere: una Mano en la variante de paso del puntero es como una tarjeta dibujada dice que se puede pulsar.

No cuesta nada. El puntero forma parte del dibujo, así que va a la hoja de estilos de la pantalla con todas las demás diferencias que produce ese estado: ningún controlador, y nada se ejecuta al mover el ratón.

La opción vacía es Tal cual, y no es lo mismo que Flecha. Sin establecer significa «lo que habría sido de todos modos», que para un botón real ya es una mano; Flecha es usted pidiendo la flecha incluso ahí.

Mientras el puntero está encima

Seleccione una variante y su pestaña Pantalla tiene un selector Mientras: Siempre, o Al pasar el puntero, Al pulsar, Con el foco.

Esa es la segunda mitad de lo que es un estado, y vive en el dibujo porque ahí es donde la respuesta es evidente: esta es la imagen de Invalid, y este es el aspecto de Invalid bajo el puntero. Además se puede volver a responder: un Invalid dibujado la semana pasada se convierte en Invalid + Al pasar el puntero sin volver a escribirlo ni a dibujarlo.

Dos cosas que no hará, y ambas dicen por qué:

• No provocará colisiones. Si ya tiene un Invalid + Al pasar el puntero, el selector se niega a crear un segundo: un dibujo por estado, o nada podría decir cuál de los dos se quería.
• Su Siempre aparece atenuado en un estado que es solo una interacción. Una variante llamada hover es el estado de paso del puntero; quitarle la interacción la dejaría sin nombre. Si quiere un estado que no esté ligado a una interacción, dibuje uno con un nombre propio: overBudget.

Establecer un Mientras en un estado también desancla cualquier instancia que lo estuviera mostrando, porque solo se puede anclar un estado sin interacción: nada puede declarar algo como señalado permanentemente.

nota

No puede dibujar un estado en una instancia, y el inspector lo indica cuando selecciona una. Un estado en una copia sería un estado que solo tiene esa copia: invisible desde el componente, ausente en todas las demás instancias y perdido en cuanto se restablece la instancia. Vaya al componente principal y agréguelo ahí, y todas las instancias podrán mostrarse en él.

El nombre del estado es suyo. Invalid, Success y los demás son solo sugerencias: escriba awaitingApproval, overBudget o lo que tenga realmente esta pantalla, y se comporta exactamente como los sugeridos. Use letras, dígitos, - y _, empezando por una letra.

Las interacciones son fijas, y es el único sitio donde no puede inventar un nombre: Al pasar el puntero, Al pulsar y Con el foco son del navegador, por eso no cuestan nada y funcionan sin que usted escriba nada. Tampoco se escriben en el nombre: el selector Mientras de la variante es donde se indica cuál se aplica.

nota

Disabled es un nombre, no un Mientras. Antes era una cuarta entrada de ese selector, y no le corresponde estar ahí: los tres de arriba son cosas que alguien está haciendo, y cada uno termina en cuanto deja de hacerlo. Disabled es lo que el control es —lo decidió su pantalla—, así que es un nombre de estado normal, escrito como disabled.

También es el único nombre para el que nunca tiene que decir cuándo está activo. La pantalla ya lo sabe, por la marca Deshabilitado del control o por su expresión Habilitado. Llame disabled a una variante y un control que no se puede usar la lleva, sin ninguna expresión que escribir.

Ahora, en cualquier instancia de ese componente, el inspector ofrece Se muestra en el estado. Elija Invalid y esa instancia se dibuja como el error, ahí mismo en el lienzo, mientras maqueta la pantalla. Las demás siguen en Normal.

Normal es el principal. No hay nada que dibujar para él, ni nada que elegir: dejar Se muestra en el estado en Normal significa «tal como lo dibujó».

Solo se puede mostrar la lista de la izquierda. Se muestra en el estado ofrece Invalid, Success y los demás, pero no Al pasar el puntero: eso lo decide el navegador, y una pantalla que afirmara que algo tiene el puntero encima permanentemente sería una pantalla que miente. Dibuje el estado de paso del puntero y seguirá funcionando; simplemente no lo elige usted.

Dos cosas más que conviene saber:

• Solo se guardan las diferencias. Cambie el color del borde de la copia y el color del borde es lo que significa el estado. Cambie después el tamaño del principal y cada estado le sigue, porque un estado nunca cambia de tamaño ni de posición.
• Las combinaciones recurren por sí solas. Si dibuja Success y Success + Al pasar el puntero, un usuario que lo señala obtiene el segundo y uno que no lo señala obtiene el primero. Si solo dibujó Success, señalarlo sigue mostrando Success. Nunca tiene que dibujar todas las combinaciones.

Activar un estado desde el código

Elegir un estado mientras diseña es una mitad. La otra es que la pantalla en ejecución lo cambie, y eso es una línea en un controlador:

setVisualState("invalid");

setVisualState("") lo devuelve a Normal. Escríbalo donde la pantalla se entere —el clic de un botón, el cambio de un cuadro—, en la página Código, el mismo sitio donde se escribe cualquier otro controlador. Consulte Hacer que una pantalla reaccione para ver lo que puede hacer un controlador.

No nombra ningún objeto, y no le hace falta. El estado que cambia es el de lo más cercano, en el controlador o por encima de él, que tenga un estado dibujado. Dibuje un estado de una tarjeta, conecte un controlador a un botón dentro de esa tarjeta, y la llamada se refiere a la tarjeta, que es la respuesta en todos los dibujos, porque un estado se dibuja en el objeto que cambia y el controlador se conecta a algo que está dentro de él.

El estado pertenece al objeto en el que se dibujó, y llega dentro de él: dibuje un estado de una tarjeta y la etiqueta, el borde y todo lo demás que cambió en la copia le siguen juntos. Una llamada, un sitio donde mirar cuando un estado está activo y no debería.

Los estados de interacción no se establecen desde el código, y el panel lo indica: el navegador ya decide cuándo algo está señalado, pulsado o tiene el foco.

Un estado que nada establece nunca sigue funcionando: es aquello a lo que Se muestra en el estado ancla una instancia mientras maqueta una pantalla. El código, cuando habla, sustituye al anclaje.

nota

Aquí había un botón Agregar una condición y ya no lo hay. Aceptaba una expresión que la pantalla volvía a comprobar constantemente, lo que significaba que una pantalla tenía dos formas de decidir el aspecto de algo: una variante que se activaba sola, junto a controladores que no podían tocarla, y nada en el lienzo que indicara cuál de las dos usaba una variante concreta. Ahora una pantalla decide las cosas en un solo sitio.

El coste es real y conviene conocerlo: una condición se activaba sola en cuanto se cargaba la pantalla, mientras que un controlador solo se ejecuta cuando ocurre algo. Si un estado debe estar activo antes de que nadie haya hecho nada, áncelo con Se muestra en el estado: para eso ha servido siempre un anclaje, y el código lo sustituye la primera vez que habla un controlador.

Colores del tema

Bajo los selectores de color de Relleno y Trazo hay una fila de muestras redondas. Son los colores del tema de la plataforma: Fondo, Superficie, Texto, Texto secundario, Borde, Primario, Error, Correcto.

Elija uno en lugar de un color y el objeto deja de ser ese color y pasa a ser ese rol. Lo cual importa porque:

• Sigue el tema del lector. Quien usa Parsware en modo oscuro ve su pantalla en oscuro: las superficies se oscurecen, el texto se aclara, los bordes se ajustan. No lo dibuja dos veces.
• Sigue el color de acento del inquilino. Primario es el color de acento que se haya elegido, no un azul que usted eligió en 2026.

Pulse la luna de la barra de herramientas para ver su dibujo en oscuro, y el sol para volver. Ese interruptor cambia solo lo que usted está viendo: no cambia el tema propio de la aplicación, que está en Configuración.

Hacer clic en la muestra que ya está elegida la desvincula, y deja el color que mostraba como un color normal. Esa es la forma de volver atrás si decide que al final quería exactamente ese gris.

consejo

El marco Estilos de un diseño nuevo ya está construido con colores del tema. Dirija sus formas a esas muestras y todo seguirá al tema sin esfuerzo.

Estilos compartidos

Un estilo compartido es una forma que las demás siguen. Seleccione una forma y pulse Guardar como color (su relleno) o Guardar como forma (relleno, borde, radio de esquina, opacidad y sombra); un texto tiene Guardar como texto. La forma se queda en el lienzo, y su sección Estilo indica cuántas formas la siguen.

Para seguir uno, abra la lista que hay sobre Sólido, Lineal y Radial en la sección Relleno, la lista Estilo de arriba para un estilo de forma, o la lista Estilo de texto en la sección Texto. Cambie la forma del propio estilo y cambia todo lo que lo sigue. Dé a una forma que lo sigue un valor propio y deja de seguirlo; Desmarcar devuelve el estilo a una forma corriente, y las formas que lo seguían conservan sus valores. Insertar → Estilos predeterminados añade un conjunto listo.

Las listas funcionan con el teclado: Intro o Espacio la abre, las flechas se mueven por ella y Esc la cierra.

Requisitos previos

• Una pantalla en la que dibujar; consulte Crear una aplicación de Studio.

Pasos

1. Dibuje lo que quiere reutilizar: una etiqueta de estado, un campo con su etiqueta, una tarjeta.
2. Selecciónelo, haga clic con el botón derecho, Crear componente.
3. Arrástrelo dos veces desde la lista Componentes.
4. Seleccione el principal y, en Estados, escriba invalid y después pulse ＋ Estado.
5. Cambie el borde de la variante al color del tema Error.
6. Seleccione la segunda instancia y establezca Se muestra en el estado en Invalid. Cambia en el lienzo.
7. Pulse la luna de la barra de herramientas. Todo lo pintado con un color del tema le sigue.
8. Pulse Guardar.

Solución de problemas

• La lista Componentes está vacía. — nada de este diseño es todavía un componente. Seleccione algunos objetos y elija Crear componente.
• No se ofrece Se muestra en el estado. — o bien el objeto seleccionado no es una instancia (seleccione su cuadro más exterior), o bien su componente todavía no tiene estados: seleccione el principal y agregue uno en Estados.
• No hay botón ＋ Estado. — el objeto seleccionado no es el principal de un componente. Seleccione el cuadro más exterior del componente, o pulse su nombre en una instancia para ir ahí.
• Ya no hay botón ＋ Instancia. — colocar otra es trabajo de la lista Componentes: arrastre el componente exactamente hasta donde lo quiere. Clic derecho → Instancia también sigue funcionando.
• Anclé una instancia a un estado y no cambió nada. — la copia del estado es idéntica al principal. Cambie un color en la copia.
• Arrastrar no hace nada. — suéltelo en el propio lienzo, no en un panel. O simplemente haga clic en la fila: cae en el centro de la vista.
• La vista previa oscura se ve igual. — el dibujo usa colores normales en lugar de colores del tema. Elija entre las muestras redondas bajo el selector de color.
• Mi control ignora el color del tema que le di. — el aspecto de un control es de la plataforma, así que ya sigue al tema; solo su posición y su tamaño vienen de su dibujo.
• Edité una instancia y volvió a su estado anterior. — esa propiedad está bloqueada al principal. Seleccione la capa correspondiente dentro del principal y márquela en Exponer en las instancias.
• Agregué una propiedad y no cambió nada. — una propiedad de valor no tiene nada dibujado para ella. Enlace algo dentro del principal a props.<name>, o será un valor que nadie lee.
• props.something está vacío en una expresión. — o bien el componente no tiene ninguna propiedad con ese nombre, o bien la que tiene es del tipo dibujado, que una expresión no puede leer. Agregue una propiedad de valor y enlace a ella.
• Mi evento no hace nada. — compruebe tres cosas: que el componente lo declara (Eventos, en el principal), que un controlador dentro del componente llama realmente a emit("name") y que la instancia tiene un controlador para él. Un componente que genera un evento al que nadie responde no es un error.
• Eliminé un estado y las instancias que lo usaban vuelven a verse normales. — es deliberado, y la confirmación lo decía: una instancia anclada a un estado que ya no existe vuelve a Normal en lugar de desaparecer.
• Arrastré el rótulo dentro de un botón y salió del componente. — corregido. Una parte de un componente ya no se puede sacar arrastrándola; el rótulo se mueve adonde lo ponga, incluso más allá del borde del botón, y sigue formando parte del botón. Solo el propio marco del componente entra y sale de los marcos que lo rodean.
• Eliminé un componente y se fueron con él dibujos de otras partes de la pantalla. — también es deliberado, y también estaba en la confirmación: una instancia es una copia del componente, así que un componente que ya no existe no tiene copias. El recuento del cuadro de diálogo es cuántas había.

Quitar un estado, o un componente entero

Ambas cosas preguntan antes, y solo cuando hay algo que perder.

• Quitar un estado (la ✕ junto a él en la lista Estados) elimina su dibujo, y cualquier instancia que se muestre en ese estado vuelve a Normal. Si no había nada anclado a él, se quita sin preguntar.
• Quitar un componente (seleccione su principal y pulse Suprimir) se lleva consigo sus instancias y todos los estados dibujados para él, y el cuadro de diálogo cuenta ambos. Es el que merece la pena leer: las instancias pueden estar en otra parte de la pantalla distinta del principal que seleccionó, y los estados dibujados están aparte, a su lado. Un componente sin ninguna de las dos cosas se quita sin preguntar.
• Eliminar algo dentro de lo que se dibujó un componente —un marco que contiene una tarjeta que convirtió en componente— también quita ese componente, y pregunta antes, indicando cuántos se van. Esta es la pérdida que no se ve venir a partir de lo que seleccionó: el marco parece un marco.

Lo último antes ocurría sin avisar, y mereció una corrección propia. El componente se quitaba del lienzo y su definición se quedaba, apuntando a un dibujo que ya no existía; así que la paleta seguía enumerándolo y arrastrarlo no hacía nada en absoluto. Si tiene un componente en ese estado, abrir ahora la aplicación elimina el fantasma, y verá con honestidad que no hay nada en él que colocar.

No aparece ningún cuadro de diálogo para un gesto que solo afecta a lo que seleccionó, porque una confirmación que pregunta si quería hacer lo que acaba de hacer es un clic que le enseña a dejar de leer.

Una eliminación sí pregunta, y lo hace al Guardar: un componente que colocan otras aplicaciones. Sus componentes se ofrecen a todas las demás aplicaciones del entorno, así que eliminar uno es un cambio en las suyas: la pregunta las nombra, y cancelar deja su lienzo exactamente como está. Consulte Usar un componente en otra aplicación.

Escenarios relacionados

• Usar un componente en otra aplicación.
• Dibujar una aplicación de Studio.
• Crear una aplicación de Studio.