vaheqelyan / svelte-grid

A responsive, draggable and resizable grid layout, for Svelte.

Home Page:https://svelte-grid.now.sh/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How did you make each tile different color?

tombohub opened this issue · comments

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

How did you do that?

commented

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() },
    };
  });
}

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

commented

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

yes you can

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

Oh cool, thank you