Class

Icon

kiss.ui.Icon(config)

The icon field allows to pick an icon and display its Font Awesome code.

Constructor

# new Icon(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 myIconField = document.createElement("a-icon").init(config)

Or use the shorthand for it:

const myIconField = createIconField({
 value: "fas fa-check",
 height: "32px"
})

myIconField.render()
myIconField.getValue() // fas fa-check
myIconField.setValue("fas fa-circle")
myIconField.getValue() // fas fa-circle

Or directly declare the config inside a container component:

const myPanel = createPanel({
  title: "My panel",
  items: [
      {
          type: "icon",
          value: "fas fa-check",
          width: "32px"
          height: "32px",
          hideCode: true
      }
  ]
})
myPanel.render()
Parameters:
Name Type Attributes Description
config object
value string <optional>

Initial icon value

label string <optional>

Field label

labelWidth string <optional>

A number (in pixels) or any valid CSS value

labelPosition string <optional>

"left" (default) | "right" | "top" | "bottom"

labelFontSize string <optional>

Any valid CSS value

labelFontWeight string <optional>

Any valid CSS value

labelColor string <optional>

Any valid CSS value

icons Array.<string> <optional>

Optional array of icon classes to use. Ex: ["fas fa-check", "fas fa-user"]

iconColor string <optional>

Icon color. Ex: "#ffffff"

iconBackground string

Icon background. Ex: "#00aaee"

iconSize string <optional>

Icon size. Ex: "16px"

iconAlign string <optional>

Ex: "center"

iconPadding string <optional>

Ex: "3px"

hideCode boolean <optional>

Set to true to hide the Font Awesome code

display string <optional>
width number | string <optional>

A number (in pixels) or any valid CSS value

minWidth string <optional>

A number (in pixels) or any valid CSS value

height number | string <optional>

A number (in pixels) or any valid CSS value

padding number | string <optional>

A number (in pixels) or any valid CSS value

margin number | string <optional>

A number (in pixels) or any valid CSS value

border string <optional>
borderStyle string <optional>
borderWidth number | string <optional>

A number (in pixels) or any valid CSS value

borderColor string <optional>
borderRadius string <optional>
boxShadow string <optional>
readOnly boolean <optional>
record object <optional>

The record to bind the field to. This will automatically update the record when the field value changes, and the field will listen to database changes on the record.

View Source client/ui/fields/icon.js, line 47

this

Generated markup

<a-icon class="a-icon">
 <label class="field-label"></label>
 <div class="field-icon-container">
     <div class="field-icon-palette"></div>
     <div class="field-icon-input"></div>
 </div>
</a-icon

Methods

# clearValue()

Clear the field value

View Source client/ui/fields/icon.js, line 304

this

# getLabel() → {string}

Get the field label

View Source client/ui/fields/icon.js, line 416

string

# getLabelPosition() → {string}

Get the label position

View Source client/ui/fields/icon.js, line 461

"left" | "right" | "top"

string

# getValue() → {string}

Get the field value

View Source client/ui/fields/icon.js, line 393

Font Awesome icon code like "fas fa-check"

string

# setFieldWidth(width)

Set the icon selector field width

Parameters:
Name Type Description
width *

View Source client/ui/fields/icon.js, line 438

this

# setInvalid()

Change the style when the field is invalid

View Source client/ui/fields/icon.js, line 365

this

# setLabel(newLabel)

Set the field label

Parameters:
Name Type Description
newLabel string

View Source client/ui/fields/icon.js, line 403

this

# setLabelPosition(position)

Set label position

Parameters:
Name Type Description
position string

"left" (default) | "right" | "top" | "bottom"

View Source client/ui/fields/icon.js, line 471

this

# setLabelWidth(width)

Set the label width

Parameters:
Name Type Description
width *

View Source client/ui/fields/icon.js, line 450

this

# setValid()

Remove the invalid style

View Source client/ui/fields/icon.js, line 354

this

# setValue(icon, rawUpdateopt)

Set the fieldl value

Parameters:
Name Type Attributes Description
icon string

Font Awesome icon code like "fas fa-check"

rawUpdate boolean <optional>

If true, it doesn't update the associated record and doesn't trigger "change" event

View Source client/ui/fields/icon.js, line 273

this

# setWidth(width)

Set the field width

Parameters:
Name Type Description
width *

View Source client/ui/fields/icon.js, line 426

this

# validate() → {boolean}

Validate the field value against validation rules

View Source client/ui/fields/icon.js, line 336

boolean