UIComponent.md

UIComponent

Kind: global class
Npmpackage:

• UIComponent
  • new UIComponent()
  • .x : number
  • .y : number
  • .enabled : boolean
  • .showing : boolean
  • .width : number
  • .height : number
  • .hide()
  • .show()
  • .setCss()
  • .addChild()
  • .inspect()
  • .toString()

new UIComponent()

This is a display object class, which is an extension of a DOM element <div> with extra base functionality. There are inherited properties and methods for enabling, show, hide, etc. It is a base class that can be extended for custom UI elements.
Import from ad-ui

import { UIComponent } from 'ad-ui'

Sample 1:

// bare minimum creation - can be added to anything and named later.
var myBase = new UIComponent();

Sample 2:

// simple creation - no style
var myBase = new UIComponent({
	target: View.main,
	id: 'my-component'
})

Sample 3:

// create with assigned styles
var myBase = new UIComponent({
	target: View.main,
	id: 'my-component',
	css: {
		x: 36,
		y: 14,
		width: 120,
		height: 140
	}
})

Sample 4:

// create and align the image inline
var myImage = new UIComponent({
	target: View.main,
	id: 'my-component',
	align: {
		x:{
			type: Align.RIGHT,
			offset: -10
		},
		y: {
			type: Align.TOP,
			offset: 10
		}
	}
})

UIComponent.x : number

Getter|Setter : A Number representing the x position. Directly gets/sets the css transform x.

Kind: static property of UIComponent
Example

// get
console.log(myComponent.x)

// set
myComponent.x = 7

UIComponent.y : number

Getter|Setter : A Number representing the y position. Directly gets/sets the css transform y.

Kind: static property of UIComponent
Example

// get
console.log(myComponent.y)

// set
myComponent.y = 14

UIComponent.enabled : boolean

Getter|Setter : A Boolean to toggle if the Gesture events are active.

Kind: static property of UIComponent
Example

// get
console.log(myComponent.enabled)

// set
myComponent.enabled = true

UIComponent.showing : boolean

Getter|Setter : A Boolean to check if the component is currently showing. Can NOT be set.

Kind: static property of UIComponent
Example

// get
console.log(myComponent.showing)

UIComponent.width : number

Getter|Setter : A Number representing the width of the div. Directly gets/sets the style css width.

Kind: static property of UIComponent
Example

// get
console.log(myComponent.width)

// set
myComponent.width = 140

UIComponent.height : number

Getter|Setter : A Number representing the height of the div. Directly gets/sets the style css height.

Kind: static property of UIComponent
Example

// get
console.log(myComponent.height)

// set
myComponent.height = 140

UIComponent.hide()

Visually removes the component from the DOM by setting its display property to none

Kind: static method of UIComponent
Example

myComponent.hide()

UIComponent.show()

Visually displays the component in the DOM

Kind: static method of UIComponent
Example

myComponent.show()

UIComponent.setCss()

Set any of the style properites of the component. A direct link to Styles.setCss() for convience.

Kind: static method of UIComponent
Example

myComponent.setCss({
	width : 300,
	height : 150
})

UIComponent.addChild()

Add a DOM element to the component.

Kind: static method of UIComponent
Example

myComponent.addChild(myChild)

UIComponent.inspect()

Traces out an object of all the public properties and methods of the component.

Kind: static method of UIComponent
Example

myComponent.inspect()

UIComponent.toString()

A String to represet the object type.

Kind: static method of UIComponent
Example

myComponent.toString()