Skip to content

Latest commit

 

History

History
174 lines (157 loc) · 4.67 KB

UIImage.md

File metadata and controls

174 lines (157 loc) · 4.67 KB
Raw

UIImage

Kind: global class
Npmpackage:

new UIImage()

This is a display object class, extending UIComponent. It is a DOM element that has default values for the background image styles. They can still be overwritten by simply changing them with Styles.setCss or the native setCss method directly on the UIImage instance.
Import from ad-ui

import { UIImage } from 'ad-ui'



By default, UIImage has these styles set:

background-repeat : no-repeat;
background-size : contain;



By extending UIComponent this has all of its native properties and methods. See UIComponent for more info.

Sample 1:

// bare minimum creation - image source is required, but can be added to anything and named later.
var myImage = new UIImage({
	source : 'template_image'
});



Sample 2:

// simple creation - no style
// Added to a container, such as Main
T.myImage = new UIImage({
	target : T,
	id : 'my-image',
	source : 'template_image'
});



Sample 3:

// simple creation using a double sized source image
var myImage = new UIImage({
	target : T,
	id : 'my-image',
	source : 'template_image',
	retina : true
});



Sample 4:

// create with assigned styles
var myImage = new UIImage({
	target : T,
	id : 'my-image',
	source : 'template_image',
	css : {
		x : 36,
		y : 14,
		width : 120,
		height: 140
	}
});



Sample 5:

// create with only a known height, but maintain the aspect ratio
var myImage = new UIImage({
	target : T,
	id : 'my-image',
	source : 'template_image',
	css : {
		width : 120
	},
	aspectRatio : true
});



Sample 6:

// create and align the image inline
var myImage = new UIImage({
	target : T,
	id : 'my-image',
	source : 'template_image',
	align : {
		x:{
			type : Align.RIGHT,
			offset : -10
		},
		y: {
			type : Align.TOP,
			offset : 10
		}
	},
	aspectRatio : true
});

UIImage.source : string

Getter|Setter : The Image element id, via ImageManager, can be changed if need be but best to just make a new UIImage if a new source is needed. Also, use this if you need to access the image for things like getting the original width or height.

Kind: static property of UIImage
Example

// get
console.log(myImage.source)

// set
myImage.source = 'template_image'

UIImage.retina : boolean

Getter|Setter : A Boolean to determine if the image source is double the size of the desired width & height. This is only relevant if when creating a new UIImage, you do not proved a width or height value. If you do, the UIImage will simply be the size provided.

Kind: static property of UIImage
Example

// get
console.log(myImage.retina)

// set
myImage.retina = false

UIImage.ratio : string

Getter|Setter : A String to set the background-size property. Use the Ratio class for constants that are easier to understand: Ratio.EXACT, Ratio.FIT, Ratio.FILL, Ratio.STRETCH

Kind: static property of UIImage
Example

// get
console.log(myImage.ratio)

// set
myImage.ratio = Ratio.FILL

UIImage.aspectRatio : boolean

Getter|Setter : A Boolean to allow for the size of the element to maintain aspect ratio when either the width or height are changed by directly setting them on the element, ie UIImage.width or UIImage.height. If using Styles.setCss() this will NOT work.

Kind: static property of UIImage
Example

// get
console.log(myImage.aspectRatio)

// set
myImage.aspectRatio = true