vaheqelyan / svelte-grid

A responsive, draggable and resizable grid layout, for Svelte.
https://svelte-grid.now.sh/
MIT License
948 stars 57 forks source link

How did you make each tile different color? #115

Closed tombohub closed 2 years ago

tombohub commented 2 years ago

On a front page you have each tile different color: https://svelte-grid.vercel.app/

How did you do that?

vaheqelyan commented 2 years ago

https://github.com/vaheqelyan/svelte-grid/blob/master/www/src/routes/index.svelte

<Grid bind:items {cols} rowHeight={100} let:dataItem fillSpace={true}>
  <div class="content" style="background-image: linear-gradient({dataItem.data.start}, {dataItem.data.end});" />
</Grid>
const randomHexColorCode = () => {
  let n = (Math.random() * 0xfffff * 1000000).toString(16);
  return "#" + n.slice(0, 6);
}

function generateLayout(col) {
  return new Array(10).fill(null).map(function (item, i) {
    const y = Math.ceil(Math.random() * 4) + 1;
    return {
      16: gridHelp.item({ x: (i * 2) % col, y: Math.floor(i / 6) * y, w: 2, h: y }),
      id: id(),
      data: { start: randomHexColorCode(), end: randomHexColorCode() },
    };
  });
}
tombohub commented 2 years ago

I see thank you, it's not possible to chose color individually for each tile?

vaheqelyan commented 2 years ago

it's not possible to chose color individually for each tile?

yes you can

https://svelte.dev/repl/ae5f94d0bb16486ebd6a2c64db2c9957?version=3.45.0

tombohub commented 2 years ago

Oh cool, thank you