Un comentario del lugar de trabajo es un elemento gráfico en el que puedes ingresar texto. Por lo general, se usa para documentar aspectos de tu código, al igual que los comentarios en un lenguaje de programación basado en texto.
Habilitar los comentarios del espacio de trabajo
Para habilitar los comentarios del espacio de trabajo en tu aplicación, debes brindarles a los usuarios alguna forma de crearlos. Una forma de hacerlo es agregar un elemento de menú contextual que cree un comentario del lugar de trabajo. Puedes registrar elementos predeterminados del menú contextual para crear, borrar y duplicar comentarios del lugar de trabajo con el siguiente código:
// This should be called on page load. It can be called before or after
// you inject your workspace.
Blockly.ContextMenuItems.registerCommentOptions();
También puedes crear tus propias opciones de menú contextual o agregar otra forma para que el usuario agregue comentarios al lugar de trabajo. Para obtener más información sobre las opciones del menú contextual, consulta Menús contextuales.
Personaliza visualmente los comentarios
Existen varias formas de personalizar el aspecto de los comentarios del espacio de trabajo. Usan CSS, no temas. Se puede controlar la mayoría de los colores y tamaños de las diferentes partes del comentario, pero no su posicionamiento.
Variables de CSS de color
Puedes configurar la variable CSS commentFillColour para cambiar el color de fondo del área de texto. Puedes configurar la variable CSS commentBorderColour para cambiar el color de la barra superior y el borde del comentario.
.blocklyWorkspace {
--commentFillColour: blue;
--commentBorderColour: red;
}
Clases de CSS
Hay diferentes clases CSS asignadas a distintos elementos de la vista de comentario, lo que te permite modificar el estilo de los elementos.
| Clases de CSS | De imagen |
|---|---|
| blocklyComentario, blocklyDraggable | 
|
| blocklySelected, blocklycommentHighlight |  
|
| blocklyCollapsed |  |
| blocklyCommentTopbar |  |
| blocklyFoldoutIcon |  |
| blocklycommentPreview y blocklyText | 
|
| blocklyDeleteIcon |  |
| blocklyText |  |
| blocklyResizeHandle |  |
Uso básico de CSS
En la mayoría de los casos, puedes aplicar tus atributos personalizados con la clase de CSS adecuada:
.blocklyCommentTopbarBackground {
height: 50px;
}
CSS para texto
Sin embargo, en el caso del texto, debes ser más específico para anular el CSS que genera el procesador.
/* Modifies the preview text. */
.blocklyComment .blocklyCommentPreview.blocklyText {
fill: blue;
}
/* Modifies the input text. */
.blocklyComment .blocklyText {
color: blue;
}
CSS para el contenido destacado seleccionado
Y para destacar el comentario cuando está seleccionado, el objeto se debe aplicar a los cambios en función de si el comentario está contraído o no. Cuando se contrae, aplica el CSS a blocklyCommentTopbarBackground; de lo contrario, aplícalo a blocklyCommentHighlight.
/* Highlight when expanded. */
.blocklySelected .blocklyCommentHighlight {
stroke: #fc3;
stroke-width: 3px;
}
/* Hide normal highlight when collapsed. */
.blocklyCollapsed.blocklySelected .blocklyCommentHighlight {
stroke: none;
}
/* Instead apply the collapsed highlight to the top bar. */
.blocklyCollapsed.blocklySelected .blocklyCommentTopbarBackground {
stroke: #fc3;
stroke-width: 3px;
}
Íconos
Las clases blocklyFoldoutIcon, blocklyDeleteIcon y blocklyResizeHandle se aplican a elementos <image>. Eso significa que, si quieres cambiar el color o la forma de un ícono, puedes incluir una imagen diferente en la carpeta de contenido multimedia.
| Nombre de la imagen | De imagen |
|---|---|
| flecha-plegado.svg | |
| borrar-ícono.svg | |
| resize-handle.svg | |
Ícono Borrar
El ícono de borrar está oculto de forma predeterminada. Si deseas habilitarla, debes usar CSS para que sea visible:
.blocklyDeleteIcon {
display: block;
}