README
<rhi-ui-selectable-grid>
Custom element that allows the creation of a grid where cells can be selected by dragging. A user would be able to select a cell range using your mouse or finger, depending on the device.
Install
npm install --save @rhi-ui/selectable-grid
Use
You can import the custom element via JavaScript:
import { RhiUiSelectableGrid } from '@rhi-ui/logo/rhi-ui-selectable-grid.js';
or using a script tag:
<script type="module" src="node_modules/@rhi-ui/selectable-grid/rhi-ui-selectable-grid.js"></script>
After imported, add it to your page using HTML.
<style>
.row { display: flex; }
</style>
<rhi-ui-selectable-grid>
<div class="row">
<rhi-ui-selectable-grid-cell value="1" selected></rhi-ui-selectable-grid-cell>
<rhi-ui-selectable-grid-cell value="2" special></rhi-ui-selectable-grid-cell>
<rhi-ui-selectable-grid-cell value="3"></rhi-ui-selectable-grid-cell>
<rhi-ui-selectable-grid-cell value="4"></rhi-ui-selectable-grid-cell>
</div>
<div class="row">
<rhi-ui-selectable-grid-cell value="a"></rhi-ui-selectable-grid-cell>
<rhi-ui-selectable-grid-cell value="b"></rhi-ui-selectable-grid-cell>
<rhi-ui-selectable-grid-cell value="c"></rhi-ui-selectable-grid-cell>
<rhi-ui-selectable-grid-cell value="d"></rhi-ui-selectable-grid-cell>
</div>
<div class="row">
<rhi-ui-selectable-grid-cell value="!"></rhi-ui-selectable-grid-cell>
<rhi-ui-selectable-grid-cell value="@"></rhi-ui-selectable-grid-cell>
<rhi-ui-selectable-grid-cell value="#"></rhi-ui-selectable-grid-cell>
<rhi-ui-selectable-grid-cell value="