svelte-square-grid v0.0.1

Svelte Square Grid

A simple square based grid for Svelte. Can help you to easily create an image gallery like Artstation's, Windows 8 start menu, Android's photo gallery and more.

See the demo

Installation

npm install svelte-square-grid

Usage

<script>
import SquareGrid from 'svelte-square-grid';
</script>

<SquareGrid itemCount={50}>
  <div 
    slot="item" 
    let:index 
    let:itemSize
    style="border: 1px solid red;">
    {index}: {itemSize}
  </div>
</SquareGrid>

Component Props

interface Breakpoint {
	colCount: number;
	gap: number;
	width: number;
}
  
/** MUST be sorted by width in ascending order */
export let breakpoints = [
	{
		colCount: 2,
		gap: 0,
		width: 600 // 600px and below
	},
	{
		colCount: 3,
		gap: 0,
		width: 768 // between 601px and 768px
	},
	{
		colCount: 5,
		gap: 10,
		width: 992
	},
	{
		colCount: 6,
		gap: 10,
		width: 1200
	},
	{
		colCount: 8,
		gap: 10,
		width: Infinity // more than 1200px
	}
];

Slot props

Spanning

A span action is available to set column and row spanning, takes direction and amount as parameters

<script>
import SquareGrid, { span } from "svelte-square-grid";
</script>

<SquareGrid itemCount={50}>
  <div 
    slot="item"
    let:index
    use:span={{ direction: index % 3 === 0 ? "row" : "", amount: 2 }}
    use:span={{ direction: index % 5 === 0 ? "col" : "", amount: 2 }}
    style="border: 1px solid red;">
    {index}: {itemSize}
  </div>
</SquareGrid>

Example

See the REPL

License

Distributed under the MIT License.