Component Model
A component model is the model of a component. You edit a livingdoc by creating, updating and removing componentModels in a componentTree.

Properties

id

Every component has a unique id that allows Livingdocs to always identify a component no matter if it was moved to a different place somewhere else in a document.

componentName

The name of your component. E.g. a title component could have the name 'title'. Normally you use the name when creating a new component of the same type querying for component of a certain type.

​directives​

The content of a component is managed through directives. For different content types like text and images there exists different directive types.
Quick examples:
1
const textDirective = paragraph.directives.get('text')
2
textDirective.setContent('Lorem Ipsum dolorem...')
3
const content = textDirective.getContent()
4
​
5
// Test if a directive contains content
6
textDirective.isEmpty() // false
7
​
8
// Set the content of a directive directly from the componentModel
9
paragraph.setContent({text: 'Lorem Ipsum dolorem...'})
Copied!
For more information see the detailed directive documentation.

componentProperties

Component properties let you define css classes or styles that can be set on the root element of a component.
Component Properties definition in the design:
1
componentProperties: {
2
'css-background-color': {
3
type: 'style',
4
label: 'Background Color',
5
cssProperty: 'background-color'
6
}
7
'css-class': {
8
type: 'option'
9
value: 'capitalize'
10
}
11
'css-class-selection': {
12
type: 'select'
13
options: [
14
caption: 'Default'
15
,
16
caption: 'Red'
17
value: 'color--red'
18
]
19
}
20
}
Copied!
Component definition:
1
<script type="ld-conf">
2
{
3
name: 'header',
4
properties: ['css-background-color', 'css-class', 'css-class-selection'],
5
"iconUrl": "https://livingdocs.io/images/building_blocks_magazine.svg",
6
"description": "A header with multiple colors"
7
}
8
</script>
9
<header>...</header>
Copied!
Setting the style on the componentModel:
1
header.setStyle('css-background-color', '#29b96f')
2
header.setStyle('css-class', 'capitalize')
3
header.setStyle('css-class-selection', 'color--red')
Copied!

template

The Template from which your component was created.

componentTree

A referenc to the componentTree a component is part of. If empty a component is not yet part of a document just like a detached DOM node.

Methods

ComponentTree operations

1
const title = componentTree.createComponent('title')
2
​
3
// Insert the title component before this one
4
component.before(title)
5
​
6
// Insert a component after this one
7
component.after(title)
8
​
9
// Append a component to a container of this component
10
component.append(containerName, title)
11
​
12
// Prepend a component to a container of this component
13
component.prepend(containerName, title)
14
​
15
// Move this component up
16
component.up()
17
​
18
// Move this component down
19
component.down()
20
​
21
// Remove this component from its componentTree
22
component.remove()
Copied!

Traverse the componentTree relative to a component

1
// Get the parent component if the component is nested
2
component.getParent()
3
​
4
// Iterate through all parents
5
component.parents((component) => {
6
// your code
7
})
8
​
9
// Iterate through all direct children
10
component.children((component) => {
11
// your code
12
})
13
​
14
// Iterate through oneself and all direct children
15
component.childrenAndSelf((component) => {
16
// your code
17
})
18
​
19
// Iterate through all descendants (children and their children and so on...)
20
component.descendants((component) => {
21
// your code
22
})
23
​
24
// Iterate through oneself, and all descendants
25
component.descendantsAndSelf((component) => {
26
// your code
27
})
Copied!
Last modified 1yr ago