Stacking items in columns
All samples are using
Ink.requireModules, please read how to use it at Ink.requireModules section
This module combines several stacks of items together, in smaller screen sizes.
The purpose is to have several stacks of items which may have different heights and as such cannot be used because of
float: left quirks.
For example, when you have three different columns of information:
[col. A: 1] [col. B: 1] [col. C: 1] [col. B: 2] [col. C: 2] [col. C: 2]
and the screen resizes and you need a layout of 2 columns, Stacker reorders the stacks so that you get:
[col. A: 1] [col. B: 1] [col. C: 1] [col. A: 2] [col. B: 2] [col. C: 2]
Note: If you just want to use a different amount of columns for your items in several viewports, but these items are guaranteed to have a fixed height, don't use this module. Use the
large-* classes instead.
|new Stacker_1([container], [options])||Constructor|
|.addItem(item)||Adds an item to the end of your stacks.|
|.reloadItems()||Updates the layout of your items.|
containerElement which contains the stacks (identified by the options.column selector)
options.columnSelector for the the columns inside the container element. Defaults to '.stacker-column'.
options.itemSelector for the items in your stack. Defaults to '.stacker-item'.
options.customBreakPointsOptions for each breakpoint name. Use this if you have more breakpoints than Ink by default (`large`, `medium`, `small`)
options.customBreakpoints.BREAKPOINT_NAMECustom breakpoints object.
options.customBreakpoints.BREAKPOINT_NAME.maxMaximum screen size as seen in your media query
options.customBreakpoints.BREAKPOINT_NAME.minMinimum screen size as seen in your media query
options.customBreakpoints.BREAKPOINT_NAME.colsColumn count for this size.
options.largeMaxUpper bound of `large` breakpoint
options.largeMinLower bound of `large` breakpoint. Defaults to 961.
options.mediumMaxUpper bound of `medium` breakpoint. Defaults to 960.
options.mediumMinLower bound of `medium` breakpoint. Defaults to 651.
options.smallMaxUpper bound of `small` breakpoint. Defaults to 650.
options.smallMinLower bound of `small` breakpoint
options.largeColsNumber of columns in the `large` viewport. Defaults to 3.
options.mediumColsNumber of columns in the `medium` viewport. Defaults to 2.
options.smallColsNumber of columns in the `small` viewport. Defaults to 1.
options.isOrderedWhen false, doesn't reorder stacks when combining them.
options.onRunCallbackCalled when instantiated.
options.onResizeCallbackCalled when the window resizes.
options.onAPIReloadCallbackCalled when the reload function executes.
The below stacks are reorganized into a smaller number of stacks as the viewport gets smaller. The example also shows how you can add more elements to the stack.
Adds an item to the end of your stacks.
reloadItems() when you are done adding items.
Updates the layout of your items.
Call this method after adding items or changing their dimensions. This method is automatically called when the window resizes.