Modificar uma opção de design personalizado

Objeto

Exemplo:

"customStyles": { "all": { /* Todas as propriedades CSS. */ /* Por exemplo, "flexDirection": "rowReverse" */ },

"desktop": { /* Todas as propriedades CSS. */ /* Propriedades a serem aplicadas além das listadas em toda a seção */ }

, "tablet": { /* Todas as propriedades CSS. */ /* */ /* Propriedades a serem aplicadas além das listadas em toda a seção */ }

, "mobile": { /* Todas as propriedades CSS. */ /* */ /* Propriedades a serem aplicadas além das listadas em toda a seção */ },

"mobile_landscape": { /* Todas as propriedades CSS. */ /* Propriedades a serem aplicadas além das listadas em toda a seção */ }, }

Usado para aplicar o estilo CSS diretamente no elemento ou no contêiner. Observe que o nome do estilo CSS precisa estar em camel case. Por exemplo, flex-direction se tornaria flexDirection. Nenhum seletor CSS é permitido. Os estilos mencionados aqui serão aplicados diretamente como estilos CSS ao elemento HTML correspondente. Eles não são mapeados para as propriedades visuais do respectivo contêiner. Por causa dessa natureza, algumas propriedades, como "margin", podem estar fora de sincronia com as propriedades visuais, como "content-width".

Como diretriz, se algo puder ser controlado por meio de propriedades visuais, declare essas propriedades em "customProperties" e o restante em "customStyles" como propriedades CSS.

Objeto

Consulte a tabela customProperties para obter mais detalhes.

Somente propriedade do contêiner de cartão

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

Para adicionar um plano de fundo a um contêiner, use a propriedade "fill". A propriedade "fill" inclui as informações a seguir:

1. Tipo: especifica o tipo de preenchimento. Você poderá escolher entre as opções a seguir:

   • 1: Preenchimento sólido
   • 2: Preenchimento de imagem
   • 3: Gradiente linear
   • 4: Gradiante radial

2. Habilitado: um valor booleano que indica se a propriedade de preenchimento está habilitada.

3. Adereços: contêm todos os detalhes sobre o preenchimento, como cor, opacidade (alfa), interrupções de cor, pontos extremos, pontos de alça radial e imagens de plano de fundo.

Estrutura JSON de preenchimento sólido

"fill": {
"type": 1,
"props": {
"color": "<fill color>",(qualquer código hexadecimal para cor)
"alpha": <color opacity (o valor varia de 0 a 1)>
}
}

Estrutura JSON de preenchimento de imagem

"fill": {
"type": 2,
"props": {
"backgroundImage": “<image name with extension (verifique se a imagem está no mesmo diretório)>"
}
}

Estrutura JSON de gradiente linear/radial

• Paradas de cores: define a cor do gradiente em posições específicas. Cada parada tem as propriedades a seguir:
  • cor: a cor do gradiente (em formato hexadecimal).
  • alfa: a transparência da cor (o valor varia de 0 a 1).
  • scaledPosition: a posição da parada de cor (o valor varia de 0 a 1).

"fill": {

"type": <Fill Type (use 3 para Gradiente linear ou 4 para Gradiente radial>,
"props": {
"colorStops": [
{
"color": "cp-color-c7",
"alpha": 1,
"scaledPosition": 0
},
{
"color": "cp-color-c9",
"alpha": 0.5,
"scaledPosition": 1
}
]
}
}

Usando a propriedade de preenchimento e os atributos associados, você pode definir vários estilos de plano de fundo para contêineres.

As sombras podem ser adicionadas aos elementos de contêiner, como blocos de conteúdo ou contêineres de cartão, usando a propriedade "shadow". Os seguintes atributos definem a aparência da sombra:

Propriedades da sombra

• x: deslocamento horizontal da sombra.
• y: deslocamento vertical da sombra.
• desfoque: raio do desfoque de sombra.
• cor: cor da sombra em formato hexadecimal.
• tipo: especifica o tipo de sombra. Para uma sombra interna, use 1.
• alfa: opacidade da sombra (o valor varia de 0 a 1).
• habilitado: um valor booleano para habilitar (true) ou desabilitar (false) a sombra.

Sombra no contêiner de bloco de conteúdo

As propriedades a seguir são usadas para aplicar uma sombra ao contêiner:

• x: deslocamento horizontal da sombra.
• y: deslocamento vertical da sombra.
• desfoque: raio do desfoque da sombra.
• cor: cor da sombra (em formato hexadecimal).
• tipo: use 1 para sombras internas.
• alfa: opacidade da sombra (0 a 1).
• habilitado: booleano para habilitar ou desabilitar a sombra.

Exemplo:

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

Sombra no contêiner de cartão

As propriedades a seguir são usadas para adicionar uma sombra ao contêiner de cartão:

• x: deslocamento horizontal da sombra.
• y: deslocamento vertical da sombra.
• desfoque: raio do desfoque da sombra.
• cor: cor da sombra (em formato hexadecimal).
• habilitado: booleano para habilitar ou desabilitar a sombra.

Exemplo:

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

Bordas podem ser aplicadas a elementos de contêiner, como blocos de conteúdo ou cartões, usando a propriedade "border". Os atributos a seguir definem a aparência da borda:

Propriedades da borda:

• tipo: especifica o tipo de borda. Os valores variam de 0 a 5, correspondentes às opções no menu suspenso Borda de charme.
• capType: define o tipo de limite da borda. Os valores variam de 0 a 2.
• largura: especifica a largura da borda.
• cor: define a cor da borda (em formato hexadecimal).
• alfa: determina a opacidade da borda (o valor varia de 0 a 1).
• habilitado: um booleano para habilitar (true) ou desabilitar (false) a borda.

Exemplo:

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

Propriedades da borda do contêiner de cartão

• habilitado: um booleano para habilitar (true) ou desabilitar (false) a borda.
• cor: especifica a cor da borda (em formato hexadecimal).
• largura: define a largura da borda.
• tipo: especifica o tipo de borda.

Exemplo:

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

Alteração do alinhamento de componentes

• Cada componente no bloco de conteúdo tem uma entrada na propriedade "components".
• A propriedade "alignment" especifica o alinhamento de cada componente e aceita os valores a seguir:
  • esquerda
  • right
  • centro

Controle da visibilidade do cartão

• A propriedade "card" pode ser usada para controlar a visibilidade do cartão.
• Um valor "true" ativa o cartão, enquanto "false" o desativa.

Exemplo:
Propriedades do contêiner de cartão

O contêiner de cartão retém componentes ou itens do slide, e você pode personalizar seu alinhamento e visibilidade usando a propriedade “components”.

Alteração do alinhamento de componentes

• Cada componente no bloco de conteúdo tem uma entrada na propriedade "components".
• A propriedade "alignment" especifica o alinhamento de cada componente e aceita os valores a seguir:
  • esquerda
  • right
  • centro

Controle da visibilidade do cartão

• A propriedade "card" pode ser usada para controlar a visibilidade do cartão.
• Um valor "true" ativa o cartão, enquanto "false" o desativa.

Exemplo

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

Você pode definir o preenchimento de qualquer objeto, contêiner de cartão ou bloco de conteúdo usando a propriedade "padding" na seção alignmentAndSpacing.

Propriedades de preenchimento

• esquerda: preenchimento no lado esquerdo (em pixels).
• direita: preenchimento no lado direito (em pixels).
• superior: preenchimento na parte superior (em pixels ou porcentagem, dependendo do contexto).
• inferior: preenchimento na parte inferior (em pixels ou porcentagem, dependendo do contexto).
• isDTMLinked: um valor booleano que determina se o preenchimento está vinculado em diferentes tipos de dispositivo (por exemplo, desktop, tablet, celular).
• tablet: preenchimento específico do dispositivo para tablets (por exemplo, parte superior).
• celular: preenchimento específico do dispositivo para celulares (por exemplo, parte superior).

Exemplo: 

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

Ajuste automático – aplicável somente a blocos de conteúdo. O ajuste será feito automaticamente no espaço disponível

Exemplo:

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

Aplicável somente a blocos de texto. Exemplo:

"customProperties":{

"textProps": {

        "listProps":{

          "listDepth":4,

          "listColor": "#EB2699",

          "listSize":"120%",

          "listType":"OrderedListRoman1"

        }

}

  }

"imageHeight"

"imageAspectRatio"

"imageBehavior"

Aplica-se somente a blocos de conteúdo de imagem e de conteúdo de grade de imagem. Se "imageBehavior" estiver definido como "IG_SCALE", respeitamos "imageAspectRatio" para dimensionar o objeto em diferentes janelas de exibição. Mas se estiver definido como "IG_FIXED_HEIGHT", respeitamos a propriedade "imageHeight".

Exemplo:

{

"customProperties": {

        "alignmentAndSpacing": {

        .....

        "imageHeight": 768,

        "imageAspectRatio": 3.415,

        "imageBehavior": "IG_SCALE"

      }

Aplica-se somente ao contêiner de cartão de vídeo. Isto define a altura do objeto de vídeo no bloco de conteúdo. Exemplo:

{"tag": "videoCard",

      "customStyles": {

        ...

        },

             "customProperties": {....

            "videoHeight": 400

      }

    }

Aplica-se somente a blocos de conteúdo de caracteres e cenários. 

•  "imageHeight" - altura padrão do caractere no bloco de conteúdo.
•  "minImageHeight" - ao redimensionar, esta é a altura mínima mantida para o objeto.

Veja um exemplo:

{

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

      "customStyles": {

       ......

      "customProperties": {

        "imageHeight": 600,

        "minImageHeight": 200

}

}

Aplica-se somente aos objetos de legenda dos slides de perguntas. A posição define a posição das legendas no slide de perguntas:

• Superior 
• Meio
• Inferior

Exemplo:

 {

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

      "customProperties": {

        "position": 1

      },

}