0.3.3 • Published 8 months ago
@mordech/dynamic-grid-web v0.3.3
DynamicGrid Web Component
The mrd-dynamic-grid component is a web component built with LitElement that allows for dynamic grid layouts. It uses the @mordech/dynamic-grid-core library to calculate the number of columns based on the available space and the minimum column width.
Installation
To use the mrd-dynamic-grid component, you can install it via npm:
npm install @mordech/dynamic-grid-webUsage
To use the mrd-dynamic-grid component, you can import it and use it like any other web component:
<!doctype html>
<html>
<head>
<script type="module">
import '@mordech/dynamic-grid-web';
</script>
</head>
<body>
<mrd-dynamic-grid
mincolumnwidth="200px"
gridtype="auto-fill"
gap="20px"
maxcolumns="4"
dividedby="2"
isscroll="true"
scroll-options='{"hint":100,"hideScrollbar":true,"rows":5,"scrollSnapAlign":"start"}'
>
<!-- Your grid items here -->
</mrd-dynamic-grid>
</body>
</html>Attributes
The mrd-dynamic-grid component accepts the following attributes:
minColumnWidth(required): The minimum width of each column. This can be any valid CSS length value inremorpx, such as200pxor10rem.gridType(optional): The type of grid to use. This can be eitherauto-fillorauto-fit. Defaults toauto-fill.gap(optional): The gap between each grid item. This can be any valid CSS length value, such as20pxor2rem. Defaults to0.maxColumns(optional): The maximum number of columns to display. If there is not enough space for this many columns, the grid will shrink to fit.dividedBy(optional): The number to divide the available space by to calculate the number of columns. Defaults to1.shrink(optional): Makes the grid shrink to fit below the minimum width. Defaults totrue.isScroll(optional): Whether to enable scrolling. Defaults tofalse.scrollOptions(optional): An object containing options for scrolling. This object can have the following properties:hint: The number of pixels to show before and after the visible area. Defaults to0.hideScrollbar: Whether to hide the scrollbar. Defaults tofalse.rows: The number of rows to display. Defaults to1.scrollSnapAlign: The alignment of the scroll snap points. Can be eitherstart,center,end, ornone. Defaults tostart.
License
This component is licensed under the MIT License. See the LICENSE file for details.