Skip to content

Latest commit

 

History

History
112 lines (99 loc) · 3.38 KB

UIFlex.md

File metadata and controls

112 lines (99 loc) · 3.38 KB

UIFlex

Kind: global class
Npmpackage:

new UIFlex()

This is a display object class, extending UIComponent. It is a DOM element that has default values for css flexbox. All children's position is set to relative, to allow the flexbox to work. The default setup of UIFlex is to make a row, with the content evenly spread with no buffers on the outside, aka space-around. There are setters for the primary orientation css keys. They can be passed in to the constructor or using the seeters. They can still be overwritten by simply changing them with Styles.setCss

By default, UIFlex has these styles set:

display: flex;
flex-wrap: nowrap;
justify-content: space-around;



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

For all flexbox options, see https://www.w3schools.com/css/css3_flexbox.asp

Import from ad-ui 

// importing into an ES6 class
import { UIFlex } from 'ad-ui'

Sample 1:

var myFlexContainer = new UIFlex({
	target: T,
	css: {
		width: 350,
		height: 100,
		backgroundColor: 'rgba(255,0,0,0.3)'
	},
	// optional
	flexDirection: 'column',
	justifyContent: 'space-between',
	flexWrap: 'wrap'
})

Sample 2:Replace EndFrame UIComponent with a UIFlex

function EndFrame() {
	var T = new UIFlex({
		id: 'endframe-container',
		target: View.main,
		css: {
			width: 'inherit',
			height: 'inherit'
		}
	})
	return T
}

UIFlex.flexDirection : string

Setter : Changes the direction of the flexbox. Options: 'row', 'column'. Default: 'row'

Kind: static property of UIFlex
Example

// set
myFlexContainer.flexDirection = 'column'

UIFlex.justifyContent : string

Setter : Changes the justify layout of the flexbox. Options: 'center', 'flex-start', 'flex-end', 'space-around', 'space-between'. Default: 'space-around'

Kind: static property of UIFlex
Example

// set
myFlexContainer.justifyContent = 'space-between'

UIFlex.flexWrap : string

Setter : Changes the justify layout of the flexbox. Options: 'nowrap', 'wrap'. Default: 'nowrap'

Kind: static property of UIFlex
Example

// set
myFlexContainer.flexWrap = 'wrap'

UIFlex.alignItems : string

Setter : Changes the item alignment of the flexbox. Options: 'flex-start', 'flex-end', 'center', 'baseline', 'stretch'.

Kind: static property of UIFlex
Example

// set
myFlexContainer.alignItems = 'flex-end'