sp-grid
NPM
0.43.0
Storybook
View Storybook
Attributes and Properties #
focusableSelector
focusableSelector
string
gap
gap
`${'0' | `${number}px`}`
'0'
itemSize
itemSize
{ width: number; height: number; }
{ width: 200, height: 200, }
items
items
Record<string, unknown>[]
[]
padding
padding
`${'0' | `${number}px`}` | undefined
selected
selected
Record<string, unknown>[]
[]
Events #
change
Event
Announces that the value of `selected` has changed
Description #
An <sp-grid>
element displays a virtualized grid of elements built from its items
, a normalized array of javascript objects, applied to a supplied renderItem
, a TemplateResult
returning method. sp-grid
is a class extension of lit-virtualizer
Elements displayed in the grid can be focused via the Tab
key and then subsequent elements to be focused via the arrow keys. To inform the <sp-grid>
element what part of the DOM created by the renderItem
method can be focused, supply a value to focusableSelector
. Focus will always enter the element list at index 0 of ALL available elements, not just those currently realized to the page.
Elements rendered via renderItem
can have their width and height customized by supplying a value for itemSize
that accepts an object: { width: number, height: number }
. You can customize the space between these elements via the gap
property that accepts a value of 0
or ${number}px
.
Usage #
yarn add @spectrum-web-components/grid
Import the side effectful registration of <sp-grid>
via:
import '@spectrum-web-components/grid/sp-grid.js';
When looking to leverage the Grid
base class as a type and/or for extension purposes, do so via:
import { Grid } from '@spectrum-web-components/grid';
Example #
<sp-grid id="grid-demo" style=" margin: calc(-1 * var(--spectrum-spacing-500)) calc(-1 * var(--spectrum-spacing-600)) " ></sp-grid> <script type="module"> const initItems = (count) => { const total = count; const items = []; while (count) { count--; items.push({ name: String(total - count), date: count, }); } return items; }; const initGrid = () => { const grid = document.querySelector('#grid-demo'); grid.items = initItems(100); grid.focusableSelector = 'sp-card'; grid.gap = '10px'; grid.itemSize = { width: 200, height: 300, }; grid.renderItem = ( item, index, selected ) => { const card = document.createElement('sp-card'); const img = document.createElement('img'); const description = document.createElement('div'); const footer = document.createElement('div'); card.toggles = true; card.variant = 'quiet'; card.heading = `Card Heading ${index}` card.subheading = 'JPG Photo' card.style = 'contain: strict; padding: 1px;' card.value = `card-${index}` card.selected = selected; card.key = index; img.alt = ''; img.slot = 'preview'; img.src = `https://picsum.photos/id/${index}/200/300`; img.decoding = 'async'; description.slot = 'description'; description.textContent = '10/15/18'; footer.slot = 'footer'; footer.textContent = 'Footer'; card.append(img, description, footer); return card; } }; customElements.whenDefined('sp-grid').then(() => { initGrid(); }); </script>