Class

Block

kiss.ui.Block(config)

The Block derives from Container.

A Block is a general purpose container for items, where items can be:

  • KissJS components (Field, Button, ...)
  • KissJS containers (Block, Form, Panel...)
  • KissJS views
  • any HTMLElement
  • any function that returns an HTMLElement

Don't forget you can use the Container's methods like update, addItem, insertItem, deleteItem, getFields, getData...

Constructor

# 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>
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>

View Source client/ui/containers/block.js, line 66

this

Generated markup

<a-block class="a-block">
 <!-- Block items are inserted here -->
</a-block>

Methods

# getInnerHtml() → {string}

Get the Html content of the block component

View Source client/ui/containers/block.js, line 182

The html content

string

# setInnerHtml(html)

Set the Html content of the block component

Parameters:
Name Type Description
html string

View Source client/ui/containers/block.js, line 172

this