Block

Introduction

Name: didomi-block Component type: block

Display a div.

Object configuration

window.didomiConfig = {
...
components: {
activeComponents: [
{
id: "ID_OF_THE_COMPONENT",
type: "block",
options: {
...,
propKey: "PROP_VALUE" // Remember to use camelCase for the key
}
}
]
}
};
<didomi-block id="ID_OF_THE_COMPONENT" />

Inline configuration

<didomi-block prop-key="PROP_VALUE" .../>

Props

Name

Type

Description

display

String

CSS display property. Example: 'flex', 'inline' ...

id

String

If you decide to configure your component in the didomiConfig object, you can use this id to link your component to your configuration object. See this section for more information

style

Object

See this section for style information

For inline configuration, make sure to use kebab-case syntax. For example fontSize will become font-size.

Examples

Object configuration

window.didomiConfig = {
...
components: {
activeComponents: [
{
id: "container-block",
type: "block",
options: {
style: {
default: {
backgroundColor: "orange",
fontSize: "18px"
}
}
}
}
]
}
};
<didomi-block id="container-block">
<div>Div 1</div>
<div>Div 2</div>
</didomi-block>

Inline configuration

<didomi-block style='{"default":{"backgroundColor": "orange", "fontSize": "18px"}}'>
<div>Div 1</div>
<div>Div 2</div>
</didomi-block>