modo.FlexContainer

Quicknavigation:

Constructor
- modo.FlexContainer
Properties
Methods
- add
- remove
- setFlexible
- show
- hide
- addClass
- removeClass
- addClassTemporary
Events
- add
- remove
CSS Classes

The Flex Container does align its children either horizontally or vertically. It extends the basic modo.Container with quick, basic layout capabilities.

The Flex Container can be used in two directions: horizontal, or vertical.

Horizontal layout

All child elements will get 100% height. They will maintain their width, if defined through CSS classes. Call the .setFlexible() method of any modo element child, to let it extend horizontally, until the container is filled.

Vertical layout

Same behavior as in horizontal layout, but all child elements will extend to 100% width and flexible children will stretch in their height.

Important information:

The Flex Container tries to make assumptions about the browsers css flexbox support. It tests if either the current spec, or the older, deprecated spec is available in the browser and applies one of them.

A JavaScript fallback implementation of the CSS flexbox model is planned, but not implemented right now. This breaks the Flexcontainer in older versions of Internet Explorer, that don't support any kind of css flexbox model.

Constructor

modo.FlexContainer(params)modo.FlexContainer

The following list of parameters can be used in the params object, passed to the constructor. Parameters in [brackets] are optional.

Property	Description
[direction]	Use the pre-defined constants `modo.FlexContainer.HORIZONTAL` or `modo.FlexContainer.VERTICAL` to define the containers alignment. Default: `modo.FlexContainer.HORIZONTAL`
[layout]	Define here, if contained elements should be layed out in Block (`modo.Container.NORMAL`) or Inline-Block (`modo.Container.INLINE`) mode, by default. Default: modo.Container.NORMAL
[className]	A string with custom CSS classes to apply to the generated DOM element
[dataAttributes]	A object with attributes to assign to the generated DOM element. Omit the "data-" part. So for example `{count: 1}` becomes `data-count="1"` on the DOM element.
[el]	The jQuery enhanced DOM element to be generated. If nothing is set, a standard DIV container will be created. If you want to use a different DOM element, pass a jQuery generated DOM element to this parameter.
[showEffect]	The default show effect for the element. See associated property description. Default: `null`
[hideEffect]	The default hide effect for the element. See associated property description. Default: `null`

Properties

modo.FlexContainer.HORIZONTALString

Use this property as a value for the direction parameter in the constructor, to achieve a horizontal alignment of child elements.

modo.FlexContainer.VERTICALString

Use this property as a value for the direction parameter in the constructor, to achieve a vertical alignment of child elements.

Inherited Properties from modo.Element

elObject

Contains the jQuery enhanced DOM Node of this modoJS element.

modoIdNumber

Contains a internally given, numeric ID for this element.

visibleBool

Will be set by .show() and .hide(). Access this property to check the current visibility of the element.

showEffectobject

Set a default show effect (like the options you can pass to the show() / hide() methods.

Example:

element.showEffect = {
    effect: 'slideDown',
    effectArgs: ['fast']
};

hideEffectobject

Define a default hide effect instead of a simple, instant hide.

Methods

Inherited Methods from modo.Container

add(element, ..., [options])this

Use this function to add one or more modo / jQuery / DOM elements to the container. Will trigger the Backbone Event "add", unless {silent: true} is passed as option object.

remove(element, ..., [options])this

This will remove one or more elements from the container. Either pass a modo element here, to get it removed from the container, or pass a jQuery selector to remove a DOM element.

Inherited Methods from modo.Element

setFlexible([value])this

Pass either true or false to this value to make the element stretch inside a modo.FlexContainer element.

show(options)this

Make the connected DOM object visible and trigger the Backbone Event "show".

You can control the way the element is shown by passing an object of options.

Example:

element.show({
    effect: 'slideDown',
    effectArgs: ['fast']
});

hide()this

Make the connected DOM object invisible and trigger the Backbone Event "hide".

You can control the hide effect the same way as with the show() method.

addClass(classname, doPrefix)this

Will add another class name to the DOM element. The class name will be automatically prefixed (i.e. with mdo-) if doPrefix = true (default).

removeClass(classname, doPrefix)this

Will remove a class name from the DOM element. The class name will be automatically prefixed.

addClassTemporary(classname, timeout, doPrefix)this

Helps with adding a classname temporarily to the object. Just call this method and after the specified amount of time, the added class(es) will be removed.

Note: All modoJS Objects are extended with all methods of the Backbone.Events class.

Events

Inherited Events from modo.Container

add

Triggered, when a child has been added through add()

Event Parameter	Description
childElement	Can be either a modo element, a jQuery enhanced DOM object, or a DOM object

remove

Triggered, when a child has been removed through remove()

Inherited CSS Classes from modo.Element

mdo-element

Basic class that will be applied to every element that extends modo.Element.

mdo-flexible

Will be applied to every modo element where setFlexible(true) has been called upon.

Articles

Reference