Modificar una opción de diseño personalizada

Objeto

Ejemplo:

"customStyles": { "all": { /* Todas las propiedades de CSS. */ /* Por ejemplo., "flexDirection": "rowReverse" */ },

"desktop": { /* Todas las propiedades de CSS. */ /* Propiedades que se aplicarán además de las enumeradas en toda la sección */ }

, "tablet": { /* Todas las propiedades de CSS. */ /* Propiedades que se aplicarán además de las enumeradas en todas las secciones */ }

, "mobile": { /* Todas las propiedades de CSS. */ /* Propiedades que se aplicarán además de las enumeradas en todas las secciones */ },

"mobile_landscape": { /* Todas las propiedades de CSS. */ /* Propiedades que se aplicarán además de las enumeradas en todas las secciones */ }, }

Se utiliza para aplicar el estilo CSS directamente en el elemento o el contenedor. Tenga en cuenta que el nombre del estilo CSS debe ir en mayúsculas. Por ejemplo, flex-direction se convertiría en flexDirection. No se permiten selectores de CSS. Los estilos mencionados aquí se aplicarán directamente como estilos CSS al elemento HTML correspondiente Estos no se asignan a las propiedades visuales del contenedor correspondiente. Debido a esta misma naturaleza, algunas propiedades, como "margin" podrían no estar sincronizadas con las propiedades visuales, como "content-width".

Como directriz, si algo puede controlarse mediante propiedades visuales, declare estas propiedades en "customProperties" y el resto en "customStyles" como propiedades de CSS.

Objeto

Consulte la tabla customProperties para obtener más información.

Solo para la propiedad de contenedor de tarjetas

"cornerRadius": { "type": 1, "value": { "topLeft": 4, "bottomLeft": 4, "bottomRight": 4, "topRight": 4 } },

Para añadir un fondo a un contenedor, utilice la propiedad de relleno. Esta incluye la siguiente información:

1. Type: especifica el tipo de relleno. Puede elegir entre las siguientes opciones:

   • 1. Relleno uniforme
   • 2. Relleno de imagen
   • 3. Degradado lineal
   • 4. Degradado radial

2. Enabled: valor booleano que indica si la propiedad de relleno está activada.

3. Props: contiene todos los detalles sobre el relleno, como el color, la opacidad (alfa), las paradas de color, los puntos finales, los puntos de control radial y las imágenes de fondo.

Estructura JSON de relleno uniforme

"fill": {
"type": 1,
"props": {
"color": "<color del relleno>",(any hex code for color)
"alpha": <opacidad del color (el valor oscila entre 0 y 1)>
}
}

Estructura JSON de relleno de imagen

"fill": {
"type": 2,
"props": {
"backgroundImage": "<nombre de la imagen con extensión (asegúrese de que la imagen se encuentre en el mismo directorio)>"
}
}

Estructura JSON de degradado lineal/radial

• Paradas de color: define el color del degradado en posiciones específicas. Cada parada presenta las siguientes propiedades:
  • color: el color del degradado (en formato hexadecimal).
  • alfa: transparencia del color (el valor oscila entre 0 y 1).
  • scaledPosition: posición de la parada de color (el valor oscila entre 0 y 1).

"fill": {

"type": <Tipo de relleno (utilice 3 para el degradado lineal o 4 para el degradado radial)>,
"props": {
"colorStops": [
{
"color": "cp-color-c7",
"alpha": 1,
"scaledPosition": 0
},
{
"color": "cp-color-c9",
"alpha": 0.5,
"scaledPosition": 1
}
]
}
}

Utilizando la propiedad de relleno y sus atributos asociados, puede definir varios estilos de fondo para los contenedores.

Se pueden añadir sombras a los elementos contenedores, como los bloques de contenido o los contenedores de tarjetas, mediante la propiedad de sombra. Los siguientes atributos definen el aspecto de la sombra:

Propiedades de sombra

• x: desplazamiento horizontal de la sombra.
• y: desplazamiento vertical de la sombra.
• blur: radio del desenfoque de la sombra.
• color: color de la sombra en formato hexadecimal.
• type: especifica el tipo de sombra. Para una sombra interna, utilice 1.
• alfa: opacidad de la sombra (el valor oscila entre 0 y 1).
• enabled: un valor booleano para activar (true) o desactivar (false) la sombra.

Sombra en el contenedor del bloque de contenido

Las siguientes propiedades se utilizan para aplicar una sombra al contenedor:

• x: desplazamiento horizontal de la sombra.
• y: desplazamiento vertical de la sombra.
• blur: radio de desenfoque de la sombra.
• color: color de la sombra (en formato hexadecimal).
• type: use 1 para sombras internas.
• alfa: opacidad de la sombra (de 0 a 1).
• enabled: valor booleano para activar o desactivar la sombra.

Ejemplo:

"shadow": { "x": 1, "y": 2, "blur": 4, "color": "#b3b3b3", "type": 1, "alpha": 0.5, "enabled": false }

Sombra en contenedor de tarjetas

Las siguientes propiedades se utilizan para agregar una sombra al contenedor de tarjetas:

• x: desplazamiento horizontal de la sombra.
• y: desplazamiento vertical de la sombra.
• blur: radio de desenfoque de la sombra.
• color: color de la sombra (en formato hexadecimal).
• enabled: valor booleano para activar o desactivar la sombra.

Ejemplo:

"shadow": { "x": 0, "y": 0, "blur": 10, "color": "#666666", "enabled": true }

Los bordes pueden aplicarse a elementos contenedores, como bloques de contenido o tarjetas, mediante la propiedad de borde. Los siguientes atributos definen el aspecto del borde:

Propiedades de borde:

• type: especifica el tipo de borde. Los valores van de 0 a 5, correspondientes a las opciones del menú desplegable de borde resaltado.
• capType: define el tipo de límite del borde. Los valores oscilan entre 0 y 2.
• width: especifica la anchura del borde.
• color: establece el color del borde (en formato hexadecimal).
• alfa: determina la opacidad del borde (el valor oscila entre 0 y 1).
• enabled: valor booleano para activar (true) o desactivar (false) el borde.

Ejemplo:

"border": { "enabled": false, "color": "cp-color-c4", "width": 8, "type": 0 }

Propiedades de borde para el contenedor de tarjetas

• enabled: valor booleano para activar (true) o desactivar (false) el borde.
• color: especifica el color del borde (en formato hexadecimal).
• width: define la anchura del borde.
• type: especifica el tipo de borde.

Ejemplo:

"border": { "enabled": true, "color": "#666666", "width": 5, "type": 1 }

Cambiar la alineación de los componentes

• Cada componente del bloque de contenido presenta una entrada en la propiedad de componentes.
• La propiedad de alineación especifica la alineación de cada componente y acepta los siguientes valores:
  • izquierda
  • derecha
  • centro

Controlar la visibilidad de la tarjeta

• La propiedad de tarjeta permite controlar la visibilidad de la tarjeta.
• El valor "true" activa la tarjeta, mientras que "false" la desactiva.

Ejemplo:
Propiedades del contenedor de tarjetas

El contenedor de tarjetas almacena componentes o elementos deslizantes, y puede personalizar su alineación y visibilidad mediante la propiedad de componentes.

Cambiar la alineación de los componentes

• Cada componente del bloque de contenido presenta una entrada en la propiedad de componentes.
• La propiedad de alineación especifica la alineación de cada componente y acepta los siguientes valores:
  • izquierda
  • derecha
  • centro

Controlar la visibilidad de la tarjeta

• La propiedad de tarjeta permite controlar la visibilidad de la tarjeta.
• El valor "true" activa la tarjeta, mientras que "false" la desactiva.

Ejemplo

"components": {
"label": {
"alignment": "left"
},
"checkbox": {
"alignment": "left"
},
"buttons": {
"alignment": "left"
},
"card": false
}

Puede definir el relleno para cualquier objeto, contenedor de tarjetas o bloque de contenido mediante la propiedad de relleno de la sección "alignmentAndSpacing".

Propiedades de relleno

• left: relleno en el lado izquierdo (en píxeles).
• right: relleno en el lado derecho (en píxeles).
• top: relleno en la parte superior (en píxeles o porcentaje en función del contexto).
• bottom: relleno en la parte inferior (en píxeles o porcentaje en función del contexto).
• isDTMLinked: valor booleano que determina si el relleno está vinculado a distintos tipos de dispositivos (por ejemplo, ordenador de sobremesa, tableta o móvil).
• tablet: relleno específico para tabletas (por ejemplo, "top").
• mobile: relleno específico para dispositivos móviles (por ejemplo, "top").

Ejemplo: 

"alignmentAndSpacing": { "padding": { "left": 10, "right": 10, "top": 50, "bottom": 50, "isDTMLinked": false, "tablet": { "top": 80 }, "mobile": { "top": 80 } } }

El ajuste automático solo es aplicable a los bloques de contenido. Se ajustará automáticamente al espacio disponible.

Ejemplo:

"alignmentAndSpacing": { "autoFit": false, "padding": { "left": 10, .... } },

Aplicable solo a bloques de texto. Ejemplo:

"customProperties":{

"textProps": {

        "listProps":{

          "listDepth":4,

          "listColor": "#EB2699",

          "listSize":"120%",

          "listType":"OrderedListRoman1"

        }

}

  }

"imageHeight"

"imageAspectRatio"

"imageBehavior"

Solo se aplica al bloque de contenido de imagen y al de cuadrícula de imagen. Si "imageBehavior" se ha establecido en "IG_SCALE", respetamos "imageAspectRatio" para ajustar la escala del objeto en diferentes ventanas gráficas. Sin embargo, si se establece en "IG_FIXED_HEIGHT", se respeta la propiedad "imageHeight".

Ejemplo:

{

"customProperties": {

        "alignmentAndSpacing": {

        .....

        "imageHeight": 768,

        "imageAspectRatio": 3.415,

        "imageBehavior": "IG_SCALE"

      }

Se aplica solo al contenedor de tarjetas de vídeo. Define la altura del objeto de vídeo en el bloque de contenido. Ejemplo:

{"tag": "videoCard",

      "customStyles": {

        ...

        },

             "customProperties": {....

            "videoHeight": 400

      }

    }

Se aplica solo a bloques de contenido de caracteres y escenarios. 

•  "imageHeight": altura predeterminada del carácter en el bloque de contenido.
•  "minImageHeight": al cambiar el tamaño, es la altura mínima que se mantiene para el objeto.

A continuación, se muestra un ejemplo:

{

"tag": "character-block-container",

      "customStyles": {

       ......

      "customProperties": {

        "imageHeight": 600,

        "minImageHeight": 200

}

}

Se aplica solo a objetos de subtítulos de diapositivas de preguntas. "position" define la posición de los subtítulos en la diapositiva de pregunta:

• Superior 
• Medio
• Inferior

Ejemplo:

 {

      "tag": "slide-item-question-caption",

      "customProperties": {

        "position": 1

      },

}