1.0.1 • Published 5 years ago
@federico.moretti/grid-wall v1.0.1
Grid Wall
Straightforward package that will simply create a wall like grid moving its children it the higher position available. It tracks new children and if their height change and flow accordingly.
Features
- Lightweight (~5KB minified)
- Tracks new children
- Tracks changes in children dimensions
- Custom transitions
- Auto handle resize
- Plug and play
Installing
Import as a module
npm install --save @federico.moretti/grid-wall
# or
yarn add @federico.moretti/grid-wallor directly in the html:
<script src="grid-wall.min.js"></script>Example
Basic usage:
const grid = document.querySelector('.grid');
const gridWall = new GridWall({
container: grid,
childrenWidthInPx: 100,
});API
new GridWall(params: object)
Initialize the module.
| Parameter | Type | Description |
|---|---|---|
| container | HTMLElement | html element |
| childrenWidthInPx | number | children width in px |
| enableResize | boolean | it will track resize event and adapt the container width |
| resizeDebounceInMs | number | debounce the resize event, default is 100ms |
| margin | center | left | right | it will place the remaining space in the position defined |
| insertStyle | CSSStyleDeclaration | style of a child when added to the container |
| beforeStyle | CSSStyleDeclaration | style of a child before the first reflow |
| afterStyle | CSSStyleDeclaration | style of a child after the first reflow |
resize(containerWidthInPx: number): void
Resize container width the reflow the children.
How to use the style properties
The children will fade in when added, but then will transition when moved.
new GridWall({
container: element,
childrenWidthInPx: 200,
insertStyle: {
opacity: '0',
transition: 'opacity 0.2s ease-in, transform 0s ease-in',
},
beforeStyle: {
opacity: '1',
},
afterStyle: {
transition: 'opacity 0.2s ease-in, transform 0.2s ease-in',
},
});The children will transition to position also when added.
new GridWall({
container: element,
childrenWidthInPx: 200,
insertStyle: {
transition: 'transform 0.2s ease-in',
},
afterStyle: {
transition: 'transform 0.2s ease-in',
},
});