GridResponsive

Configs

responsiveLevels: Object<String, (Number|String|ResponsiveLevelConfig)>= { small : 400, medium : 600, large : '*' }

"Break points" for which responsive config to use for columns and css.

Each level can be specified as:

A number representing the width threshold (e.g., 400)
The string '*' to match all sizes above other thresholds
A ResponsiveLevelConfig object with levelWidth and additional grid state properties

See the responsive guide for details and examples.

isGridResponsive: Boolean= truereadonly

Identifies an object as an instance of GridResponsive class, or subclass thereof.

isGridResponsive: Boolean= truereadonlystatic

Identifies an object as an instance of GridResponsive class, or subclass thereof.

responsiveLevel: Stringreadonly

Get currently used responsive level (as string)

Grid resize lead to a new responsive level being applied

// Adding a listener using the "on" method
gridResponsive.on('responsive', ({ grid, level, width, oldLevel, oldWidth }) => {

});

Parameter	Type	Description
`grid`	Grid	Grid that was resized
`level`	String	New responsive level (small, large, etc)
`width`	Number	New width in px
`oldLevel`	String	Old responsive level
`oldWidth`	Number	Old width in px

Grid resize lead to a new responsive level being applied

new GridResponsive({
    onResponsive({ grid, level, width, oldLevel, oldWidth }) {

    }
});

Parameter	Type	Description
`grid`	Grid	Grid that was resized
`level`	String	New responsive level (small, large, etc)
`width`	Number	New width in px
`oldLevel`	String	Old responsive level
`oldWidth`	Number	Old width in px

Configuration object for a responsive level. Contains a required levelWidth plus any GridState properties to apply when this level is active.

Parameter	Type	Description
`levelWidth`	Number \| String	The width threshold for this level, or `'*'` for all sizes above other levels