[en] Data Grid Head
[en] The Data Grid Head component allows you to add a header to the data grid. This component can only be configured and used once added to a Data Grid component. Refer to the sections below to learn more.
Atención
[en] Drag and drop the Data Grid Head component within the Data Grid component.
Attributes
En el panel derecho, puedes configurar diferentes atributos para personalizar el componente. Consulta Design, Actions y Advanced a continuación para obtener más información.
Design
En la pestaña Design, puedes configurar la información básica del componente seleccionado y los atributos que determinan el aspecto que tendrá el componente en la app. Consulta las secciones a continuación para obtener más información.
Actions
En la pestaña Actions, puedes establecer animaciones para los componentes de la pantalla de tu app y determinar cómo el usuario invoca efectos y desencadena acciones mientras interactúa con la app. Consulta las secciones a continuación para obtener más información.
Advanced
[en] There are no attributes available for configuration in the Advanced tab for the Data Grid Head component.
[en] Data Grid Header Cell
[en] In this section, you can define the cell attributes related to its size, text content, style and events. Refer to the table below to learn how to configure a header cell.
[en] Width | [en] Cell border width. Type a number to set the width. To define the unit of measurement, click the arrow in the right field and select an option from the drop-down menu. | ||||||||||||||||
[en] Height | [en] Cell border width. Type a number to set the width. To define the unit of measurement, click the arrow in the right field and select an option from the drop-down menu | ||||||||||||||||
Font Size | [en] Cell text size. To set the size, click the field and type the desired value. Refer to the table below to learn more about the types of text sizes and values available.
| ||||||||||||||||
[en] Font Family | Familia de fuentes o tipo de letra del texto. Para establecer una familia de fuentes, haz clic en la flecha y selecciona una opción del menú desplegable. También puedes hacer clic en </> y escribir el código para establecer manualmente la familia de fuentes del texto. | ||||||||||||||||
Font Style | Estilo de fuente del texto. Para definir el estilo de letra, haz clic en la flecha y selecciona una opción del menú desplegable. La única opción disponible es la cursiva. | ||||||||||||||||
Font Weight | Peso de la fuente del texto. Para establecer el peso de la fuente, haz clic en la flecha y selecciona una opción del menú desplegable. La única opción disponible es la negrita. | ||||||||||||||||
Color | Color del texto. Para establecer el color, haz clic en el campo y escribe un código de color hexadecimal o haz clic en el icono cuadrado para abrir el selector de color. En el selector de color, selecciona un color o haz clic en HEXA o RGBA, luego haz clic en el campo de la izquierda y escribe un código de color HEXA o RGBA, respectivamente. | ||||||||||||||||
[en] Text Decoration | Decoración añadida al texto. Para fijar la decoración, haz clic en la flecha y selecciona una opción del menú desplegable. La única opción disponible es el subrayado. | ||||||||||||||||
Alineación del texto | [en] Cell content alignment. Click the desired text alignment option. From left to right: justified, left, centered or right, depending on whether you want the text to be aligned with both left and right edges, the left edge, centered between the two edges of the cell or aligned with the right edge. | ||||||||||||||||
[en] Vertical align | [en] Cell content position. Click the field and select an option from the drop-down menu to define the position of the content within the cell. The options available are: bottom, middle, top. | ||||||||||||||||
[en] Background Color | [en] Cell background color. To set a color, click the field and type the hex color code or click the square icon to open the color picker. In the color picker, select a color or click HEXA or RGBA, then click the field to the left and type a HEXA or RGBA color code, respectively | ||||||||||||||||
[en] Background Gradient | Haz clic en el botón de radio Gradient para establecer un gradiente de color para el fondo del componente. Haz clic en cada uno de los íconos cuadrados para abrir el selector de color. En el selector de color, selecciona un color o haz clic en HEXA o RGBA, luego haz clic en el campo de la izquierda y escribe un código de color HEXA o RGBA para formar la gradiente de color. Haz clic en Switch direction para invertir el orden de los colores seleccionados para el degradado. Haz clic en Change to horizontal direction o Change to vertical direction para definir la dirección del degradado en posición horizontal o vertical, respectivamente. | ||||||||||||||||
Background Image | Haz clic en la casilla Image para añadir una imagen al fondo del componente. Puedes utilizar una imagen de fondo con las opciones de fondo flat y gradient. Haz clic en el campo Background Image y escribe el nombre de la imagen de fondo, o haz clic en Select an image para abrir el selector de imágenes. Selecciona una de las imágenes de la lista o utiliza la barra de búsqueda para encontrar una imagen por su nombre. | ||||||||||||||||
Resource Origin | Método a través del cual se carga el recurso referenciado por el componente. Rellena este campo si el componente seleccionado hace referencia a un recurso, como una imagen o un vídeo. Haz clic en la flecha y selecciona una de las opciones disponibles en el menú desplegable: elige L (Local) para recuperar el contenido codificado de los recursos locales o elige H (HTTP) para recuperar el contenido de los recursos del Comm Server. | ||||||||||||||||
[en] Expires | Indica la forma y validez de la caché del recurso HTTP definido. Por defecto, no se define ningún valor. Si el campo permanece vacío, la imagen se descargará cada vez que se utilice. Para definir este atributo, haz clic en el campo e introduce el valor deseado. Consulta la tabla a continuación para obtener más información sobre los valores que se pueden configurar.
SugerenciaIndependientemente de este atributo, si el usuario de la app elimina la app o sus datos, las imágenes almacenadas en caché también se eliminarán. | ||||||||||||||||
Propiedades de relleno | [en] Space between the cell border and the cell content. Enter a value for each of the padding properties: Padding Top, Padding Left, Padding Bottom and Padding Right. To define the unit of measurement, click the arrow in the right field and select an option from the drop-down menu. | ||||||||||||||||
[en] On Click | [en] Attribute that defines an event or action to be triggered when clicking the cell. To learn how to set the event or action to be triggered, read the Events and Actions section in Actions. | ||||||||||||||||
[en] Position | [en] Position of the cell within the row. Click the field and enter the position number. |