# new Block(config)
Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:
Create the Web Component and call its init method:
const myBlock = document.createElement("a-block").init(config)
Or use the shorthand for it:
const myBlock = createBlock({
padding: "10px",
items: [
// Block items...
]
})
myBlock.render()
Or directly declare the config inside a container component:
const myPanel = createPanel({
items: [
{
type: "block",
title: "Foo",
items: [
// Block items...
]
}
]
})
myPanel.render()
IMPORTANT
When embedded into another container, the item type defaults to "block", which means it's not necessary to set the type property for block elements:
const myPanel = createPanel({
items: [
{
// This item has no type: KissJS will generate a block by default
title: "Foo",
items: [
// Block items...
]
}
]
})
myPanel.render()
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
||
items |
Array.<object>
|
The array of contained items |
|
multiview |
boolean
|
<optional> |
If true, the container only displays one item at a time. Useful for Tab layouts. |
fullscreen |
boolean
|
<optional> |
|
position |
string
|
<optional> |
|
top |
string
|
<optional> |
|
left |
string
|
<optional> |
|
right |
string
|
<optional> |
|
align |
string
|
<optional> |
"center" to center the block horizontally on the screen |
verticalAlign |
string
|
<optional> |
"center" to center the block vertically on the screen |
display |
string
|
<optional> |
|
flex |
string
|
<optional> |
|
flexFlow |
string
|
<optional> |
|
flexWrap |
string
|
<optional> |
|
flexGrow |
string
|
<optional> |
|
flexShrink |
string
|
<optional> |
|
alignItems |
string
|
<optional> |
|
alignContent |
string
|
<optional> |
|
justifyContent |
string
|
<optional> |
|
gap |
string
|
<optional> |
|
width |
string
|
number
|
<optional> |
|
minWidth |
string
|
number
|
<optional> |
|
maxWidth |
string
|
number
|
<optional> |
|
height |
string
|
number
|
<optional> |
|
minHeight |
string
|
number
|
<optional> |
|
maxHeight |
string
|
number
|
<optional> |
|
margin |
string
|
<optional> |
|
padding |
string
|
<optional> |
|
background |
string
|
<optional> |
|
backgroundColor |
string
|
<optional> |
|
backgroundImage |
string
|
<optional> |
|
backgroundSize |
string
|
<optional> |
|
border |
string
|
<optional> |
|
borderStyle |
string
|
<optional> |
|
borderWidth |
string
|
<optional> |
|
borderColor |
string
|
<optional> |
|
borderRadius |
string
|
<optional> |
|
boxShadow |
string
|
<optional> |
|
overflow |
string
|
<optional> |
|
overflowX |
string
|
<optional> |
|
overflowY |
string
|
<optional> |
|
zIndex |
number
|
<optional> |
|
transform |
number
|
<optional> |
|
draggable |
boolean
|
<optional> |
this
Generated markup
<a-block class="a-block">
<!-- Block items are inserted here -->
</a-block>