Class

Spacer

kiss.ui.Spacer(config)

The Spacer component derives from Component.

It's a simple empty element used as a spacer in the layout. It can be useful to take advantage of the CSS flex layout system, or if you need to fill some space.

Constructor

# new Spacer(config)

The only use case is when you need to set space between elements without using margins:

const myPanel = createPanel({
  title: "My panel",
  display: "flex",
  flexFlow: column,
  items: [
      {
          type: "html",
          html: "Block 1",
          flex: 1
      },
      {
          type: "spacer",
          flex: 0.5
      },
      {
          type: "html",
          html: "Block 2",
          flex: 1
      },
      {
          type: "spacer",
          height: "32px"
      },
      {
          type: "html",
          html: "Block 3",
          flex: 1
      }
  ]
})
myPanel.render()
Parameters:
Name Type Attributes Description
config object
display string <optional>
flex string <optional>
width string | number <optional>
height string | number <optional>

View Source client/ui/elements/spacer.js, line 21

this

Generated markup

<a-spacer class="a-spacer">
</a-spacer>