Documentation

Class

Image

kiss.ui.Image(config)

The Image component derives from Component.

Constructor

# new Image(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 myImage = document.createElement("a-image").init(config)

Or use the shorthand for it:

const myImage = createImage({
 src: "./logo.png",
 alt: "Company logo"
})

myImage.render()

Or directly declare the config inside a container component:

const myPanel = createPanel({
  title: "My panel",
  items: [
      {
          type: "image",
          src: "./logo.png",
          alt: "Company logo"
      }
  ]
})
myPanel.render()
Parameters:
Name Type Attributes Description
config object
src string
alt string <optional>
objectFit string <optional>

fill (default) | contain | cover | scale-down | none
position string <optional>
top string <optional>
left string <optional>
right string <optional>
float string <optional>
display string <optional>
width string | number <optional>
height string | number <optional>
margin string <optional>
padding string <optional>
border string <optional>
borderStyle string <optional>
borderWidth string <optional>
borderColor string <optional>
borderRadius string <optional>
boxShadow string <optional>
zIndex number <optional>
draggable boolean <optional>
cursor string <optional>

View Source client/ui/elements/image.js, line 37

this

Generated markup

<a-image class="a-image">
 <img class="image-content">
</a-image>

Methods

# getValue() → {string}

Get the src of the Image component

View Source client/ui/elements/image.js, line 131

The image src

string

# setHeight(height)

Set the image's height

Parameters:
Name Type Description
height *

A valid CSS height value

View Source client/ui/elements/image.js, line 153

this

# setValue(src)

Set the src of the Image component

Parameters:
Name Type Description
src string

View Source client/ui/elements/image.js, line 120

this

# setWidth(width)

Set the image's width

Parameters:
Name Type Description
width *

A valid CSS width value

View Source client/ui/elements/image.js, line 141

this