Pero en este caso, no solo queremos tener un texto fijo. Queremos conectarlo a una data que proviene de una fuente externa. Necesitamos que el usuario vea el número real de conexiones. Por lo tanto, en este caso, vamos a exponer una propiedad para esta interfaz del componente.
Ahora, esto es algo que actualmente no cubrimos en Codecs desde los paneles visuales. Estamos trabajando en algunos de estos aspectos y nos encantaría recibir tus comentarios. Así que todavía sucede en el código. Solo quiero mostrarte cómo puedo pasar a VS Code para implementar el cambio que quiero hacer y volver a Codecs.
Voy a llamar a esta propiedad 'count' y voy a usar un número. Lo agregaré a la estructura de este componente, y reemplazaré este texto con la propiedad 'count'. Ahora, una vez que guardo y vuelvo a Codecs, veo aquí que ya no veo el texto, pero veo en el árbol de elementos que tengo una expresión. Ahora, puedes ver que también se cambió en el código aquí. Básicamente, todo funciona en conjunto.
Ahora volveré al tablero y veré las props de este componente. Puedes ver que ahora tenemos una nueva propiedad agregada, la propiedad 'count'. Y una vez que le pase cualquier valor, lo veré renderizado como queremos que se vea. También puedes verlo aquí. El tablero es solo un archivo en tu repositorio. Puedes hacer lo que quieras. Si quieres gestionar las cosas con código, está bien. También puedes hacerlo desde VS Code. Los tableros se agregan a tu proyecto, y puedes colocarlos donde quieras y gestionarlos desde VS Code o desde donde desees, si así lo deseas. Bien. Eso es más o menos lo que queríamos, ¿verdad? Vemos que tenemos un problema de diseño, pero antes de arreglarlo, solo quiero asegurarme de que todo se vea bien en esta composición, ¿de acuerdo? Esta es la tarea que hemos recibido.
Voy a hacer clic en agregar panel nuevamente, y ahora veré este nuevo componente, el componente 'connections' aquí mismo, ¿verdad? Y lo agregaré en la parte inferior donde el diseñador lo ha indicado. Y ya puedo ver que tengo esta data que no se muestra, ¿verdad? Entonces, en este caso, quiero conectarlo a la data que proviene de la interfaz de 'Toppar'. Entonces, lo que acabo de hacer aquí fue exponerlo a la interfaz de usuario que este componente 'Toppar' está pasando. Ahora, una vez que lo he conectado, puedes ver que se muestra un número. Este es el número que proviene del tablero de este componente 'Toppar'. Y ahí es donde quería que estuviera conectado. Ahora, una vez que hemos cubierto eso, podemos hacer la última cosa, que sería arreglar el diseño aquí mismo.
Comments