Ändern einer benutzerdefinierten Design-Option

Objekt

Beispiel:

"customStyles": { "all": { /* Alle CSS-Eigenschaften. */ /* z. B. "flexDirection": "rowReverse" */ },

"desktop": { /* Alle CSS-Eigenschaften. */ /* Eigenschaften, die zusätzlich zur Auflistung im gesamten Abschnitt angewendet werden sollen */ }

, "tablet": { /* Alle CSS-Eigenschaften. */ /* Eigenschaften, die zusätzlich zur Auflistung im gesamten Abschnitt angewendet werden sollen */ }

, "mobile": { /* Alle CSS-Eigenschaften. */ /* Eigenschaften, die zusätzlich zur Auflistung im gesamten Abschnitt angewendet werden sollen */ },

"mobile_landscape": { /* Alle CSS-Eigenschaften. */ /* Eigenschaften, die zusätzlich zur Auflistung im gesamten Abschnitt angewendet werden sollen */ }, }

Wird verwendet, um CSS-Stile direkt auf das Element oder den Container anzuwenden. Beachten Sie, dass der Name des CSS-Stils in Camelcase angegeben werden muss. Z. B. würde „flex-direction“ zu „flexDirection“ werden. CSS-Selektoren sind nicht zulässig. Die hier genannten Stile werden direkt als CSS-Stile auf das entsprechende HTML-Element angewendet. Diese werden nicht den visuellen Eigenschaften des jeweiligen Containers zugeordnet. Genau deshalb könnten einige Eigenschaften wie „margin“ nicht mit den visuellen Eigenschaften übereinstimmen, wie z. B. “content-width“.

Als Richtlinie: Wenn etwas über visuelle Eigenschaften gesteuert werden kann, deklarieren Sie diese Eigenschaften unter “customProperties“ als CSS-Eigenschaften und den Rest unter “customStyles".

Objekt

Weitere Informationen finden Sie in der Tabelle customProperties.

Nur Kartencontainereigenschaft

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

Um einem Container einen Hintergrund hinzuzufügen, verwenden Sie die Fülleigenschaft. Die Fülleigenschaft umfasst die folgenden nformationen:

1. Type: Gibt den Fülltyp an. Sie können unter folgenden Optionen wählen:

   • 1: Einfarbige Füllung
   • 2: Bildfüllung
   • 3: Linearer Verlauf
   • 4: Radialverlauf

2. Enabled: Ein boolescher Wert, der angibt, ob die Fülleigenschaft aktiviert ist.

3. Props: Enthält alle Details zur Füllung, z. B. Farbe, Deckkraft (Alpha), Farbregler, Endpunkte, radiale Griffpunkte und Hintergrundbilder.

JSON-Struktur für einfarbige Füllung

"fill": {
"type": 1,
"props": {
"color": "<Füllfarbe>",(beliebiger Hexadezimalcode für „color“)
"alpha": <Farbdeckkraft (Werte reichen von 0 bis 1)>
}
}

JSON-Struktur für Bildfüllung

"fill": {
"type": 2,
"props": {
"backgroundImage": "<Bildname mit Erweiterung (stellen Sie sicher, dass sich das Bild im selben Verzeichnis befindet)>"
}
}

JSON-Struktur des linearen/radialen Verlaufs

• Farbregler: Definiert die Farbe des Farbverlaufs an bestimmten Positionen. Jeder Farbregler verfügt über die folgenden Eigenschaften:
  • color: Die Verlaufsfarbe (im Hexadezimalformat).
  • alpha: Die Transparenz der Farbe (Werte reichen von 0 bis 1).
  • scaledPosition: Die Position des Farbreglers (Werte reichen von 0 bis 1).

"fill": {

"type": <Fülltyp (verwenden Sie 3 für linearen Verlauf oder 4 für radialen Verlauf)>,
"props": {
"colorStops": [
{
"color": "cp-color-c7",
"alpha": 1,
"scaledPosition": 0
},
{
"color": "cp-color-c9",
"alpha": 0.5,
"scaledPosition": 1
}
]
}
}

Mithilfe der Fülleigenschaft und der zugehörigen Attribute können Sie verschiedene Hintergrundstile für Container definieren.

Schatten können Containerelementen wie Inhaltsblöcken oder Kartencontainern mit der Schatteneigenschaft hinzugefügt werden. Die folgenden Attribute definieren das Erscheinungsbild des Schattens:

Schatteneigenschaften

• x: Horizontaler Versatz des Schattens.
• y: Vertikaler Versatz des Schattens.
• blur: Radius des Schattenweichzeichners.
• color: Schattenfarbe im Hexadezimalformat.
• type: Gibt den Schattentyp an. Verwenden Sie für einen inneren Schatten 1.
• alpha: Schattendeckkraft (Werte reichen von 0 bis 1).
• enabled: Ein boolescher Wert, um den Schatten zu aktivieren (true) oder zu deaktivieren (false).

Schatten auf Inhaltsblock-Container

Die folgenden Eigenschaften werden verwendet, um einen Schatten auf den Container anzuwenden:

• x: Horizontaler Versatz des Schattens.
• y: Vertikaler Versatz des Schattens.
• blur: Radius des Schattenweichzeichners.
• color: Schattenfarbe (Hexadezimalformat).
• type: Verwenden Sie 1 für innere Schatten.
• alpha: Schattendeckkraft (0 bis 1).
• enabled: Boolescher Wert zum Aktivieren oder Deaktivieren des Schattens.

Beispiel :

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

Schatten auf dem Kartencontainer

Die folgenden Eigenschaften werden verwendet, um dem Kartencontainer einen Schatten hinzuzufügen:

• x: Horizontaler Versatz des Schattens.
• y: Vertikaler Versatz des Schattens.
• blur: Radius des Schattenweichzeichners.
• color: Schattenfarbe (Hexadezimalformat).
• enabled: Boolescher Wert zum Aktivieren oder Deaktivieren des Schattens.

Beispiel :

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

Rahmen können mithilfe der Rahmeneigenschaft auf Containerelemente wie Inhaltsblöcke oder Karten angewendet werden. Die folgenden Attribute definieren das Erscheinungsbild des Rahmens:

Rahmeneigenschaften:

• type: Gibt den Rahmentyp an. Die Werte reichen von 0 bis 5 und entsprechen den Optionen in der Dropdown-Liste “Charmanter Rahmen“.
• capType: Definiert den Rahmenbegrenzungstyp. Die Werte reichen von 0 bis 2.
• width: Gibt die Rahmenbreite an.
• color: Legt die Rahmenfarbe (im Hexadezimalformat) fest.
• alpha: Bestimmt die Deckkraft des Rahmens (Werte reichen von 0 bis 1).
• enabled: Ein boolescher Wert, um den Rahmen zu aktivieren (true) oder zu deaktivieren (false).

Beispiel:

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

Rahmeneigenschaften für Kartencontainer

• enabled: Ein boolescher Wert, um den Rahmen zu aktivieren (true) oder zu deaktivieren (false).
• color: Legt die Rahmenfarbe (im Hexadezimalformat) fest.
• width: Definiert die Rahmenbreite.
• type: Gibt den Rahmentyp an.

Beispiel:

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

Ändern der Komponentenausrichtung

• Jede Komponente innerhalb des Inhaltsblocks hat einen Eintrag in der Komponenteneigenschaft.
• Die Ausrichtungseigenschaft gibt die Ausrichtung jeder Komponente an und akzeptiert die folgenden Werte:
  • left
  • right
  • center

Steuern der Sichtbarkeit von Karten

• Die Karteneigenschaft kann verwendet werden, um die Sichtbarkeit der Karte zu steuern.
• Der Wert „true“ aktiviert die Karte, „false“ deaktiviert sie.

Beispiel:
Eigenschaften des Kartencontainers

Der Kartencontainer enthält Komponenten oder Folienelemente, und Sie können ihre Ausrichtung und Sichtbarkeit mithilfe der Komponenteneigenschaft anpassen.

Ändern der Komponentenausrichtung

• Jede Komponente innerhalb des Inhaltsblocks hat einen Eintrag in der Komponenteneigenschaft.
• Die Ausrichtungseigenschaft gibt die Ausrichtung jeder Komponente an und akzeptiert die folgenden Werte:
  • left
  • right
  • center

Steuern der Sichtbarkeit von Karten

• Die Karteneigenschaft kann verwendet werden, um die Sichtbarkeit der Karte zu steuern.
• Der Wert „true“ aktiviert die Karte, „false“ deaktiviert sie.

Beispiel

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

Sie können die Auffüllung für ein beliebiges Objekt, einen Kartencontainer oder Inhaltsblock definieren, indem Sie die Auffüllungseigenschaft im Abschnitt alignAndSpacing verwenden.

Auffüllungseigenschaften

• left: Auffüllung auf der linken Seite (in Pixeln).
• right: Auffüllung auf der rechten Seite (in Pixeln).
• top: Auffüllung oben (in Pixel oder Prozent, je nach Kontext).
• bottom: Auffüllung am unteren Rand (in Pixeln oder Prozent, je nach Kontext).
• isDTMLinked: Ein boolescher Wert, der bestimmt, ob die Auffüllung verschiedene Gerätetypen (z. B. Desktop, Tablet, Mobilgerät) übergreifend verknüpft ist.
• tablet: Gerätespezifische Auffüllung für Tablets (z. B. “top“).
• mobile: Gerätespezifische Auffüllung für mobile Geräte (z. B. “top“).

Beispiel: 

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

Autofit – gilt nur für Inhaltsblöcke. Passt sie automatisch in den verfügbaren Platz ein.

Beispiel:

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

Gilt nur für Textblöcke. Beispiel:

"customProperties":{

"textProps": {

        "listProps":{

          "listDepth":4,

          "listColor": "#EB2699",

          "listSize":"120 %",

          "listType":"OrderedListRoman1"

        }

}

  }

"imageHeight"

"imageAspectRatio"

"imageBehavior"

Gilt nur für Bildinhaltsblock und Bildrasterinhaltsblock. Wenn "imageBehavior" auf "IG_SCALE" festgelegt ist, wird das Objekt gemäß "imageAspectRatio" in verschiedenen Ansichtsports skaliert. Bei Festlegung auf "IG_FIXED_HEIGHT" wird jedoch die Eigenschaft "imageHeight" berücksichtigt.

Beispiel:

{

"customProperties": {

        "alignAndSpacing": {

        .....

        "imageHeight": 768,

        "imageAspectRatio": 3.415,

        "imageBehavior": "IG_SCALE"

      }

Gilt nur für Grafikkartencontainer. Dadurch wird die Höhe des Videoobjekts im Inhaltsblock definiert. Beispiel:

{"tag": "videoCard",

      "customStyles": {

        ...

        },

             "customProperties": {....

            "videoHeight": 400

      }

    }

Gilt nur für Inhaltsblöcke für Zeichen und Szenarien. 

•  "imageHeight" – Standardhöhe des Zeichens im Inhaltsblock.
•  "minImageHeight" – Beim Skalieren ist dies die minimale Höhe, die für das Objekt beibehalten wird.

Beispiel:

{

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

      "customStyles": {

       ......

      "customProperties": {

        "imageHeight": 600,

        "minImageHeight": 200

}

}

Gilt nur für Beschriftungsobjekte in Fragenfolien. „Position“ definiert die Position der Beschriftungen in der Fragenfolie:

• Oben 
• Mitte
• Unten

Beispiel:

 {

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

      "customProperties": {

        "Position

      },

}