Style
Style directives allow a user to set style properties like a background color that will then be written to the style attribute on the given tag.

Example

1
module.exports = {
2
"name": "article-header",
3
"label": "Artikelkopf",
4
"directives": [{
5
"name": "background",
6
"type": "style",
7
"properties": ["css-background-color"]
8
}, {
9
"name": "title",
10
"type": "editable",
11
"plainText": true
12
}],
13
"html": dedent`
14
<header class="articleheader">
15
<section class="articleheader__textsection" doc-style="background">
16
<h1 class="headline headline--h1 articleheader__headline articleheader__headline--h1" doc-editable="title">Artikel Headline</h1>
17
</section>
18
</header>
19
`
20
}
Copied!

Config Option

  • properties: array of strings, set of referenced component properties that are set when the user enters content. E.g. in the example below a user could set a hex-code for a color that uses the component property css-background-color that in turn sets the style attribute to style="background-color:user-value".
Last modified 1yr ago
Copy link