Grid
Table of contents
-
Installation
-
Usage
-
Styling
-
Properties
Installation
NPM
npm i @ppci-mock/grid-view
// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs
Usage
Javascript
import '@ppci-mock/grid-view'
Browser
<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/grid-view/builds/index.min.js" />
<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/grid-view/builds/legacy.min.js" />
<!-- Component -->
<grid-view
rowSize=${String}
>
<slot></slot>
</grid-view>
Styling
grid-view {
--grid-columns: 4;
--grid--column-width: 1f;
/* Responsive */
@media (max-width: 600px) {
--grid-columns: 2;
}
}
Properties
Property |
Type |
Description |
Possible Values |
rowSize |
number |
Amount of columns on a row |
0,1,2,...N |