44 lines
1 KiB
TypeScript
44 lines
1 KiB
TypeScript
import { provide } from "@lit/context";
|
|
import { css, html, LitElement } from "lit";
|
|
import { customElement, property } from "lit/decorators.js";
|
|
|
|
import { gridSizePxContext } from "./grid-size-context.ts";
|
|
|
|
@customElement("my-grid")
|
|
export class MyGrid extends LitElement {
|
|
@provide({ context: gridSizePxContext })
|
|
@property({ attribute: "grid-size-px", type: Number })
|
|
gridSizePx = 32;
|
|
|
|
@property()
|
|
gridColor = "#ddd";
|
|
|
|
@property()
|
|
width = "100%";
|
|
|
|
@property()
|
|
height = "100%";
|
|
|
|
static override styles = css`
|
|
:host {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
`;
|
|
|
|
protected override render() {
|
|
return html`
|
|
<style>
|
|
:host {
|
|
/* Dotted grid CSS inspired by: https://stackoverflow.com/a/55364821 */
|
|
background-image: radial-gradient(circle at 1px 1px, ${this
|
|
.gridColor} 1px, transparent 0);
|
|
background-size: ${this.gridSizePx}px ${this.gridSizePx}px;
|
|
height: ${this.height};
|
|
width: ${this.width};
|
|
}
|
|
</style>
|
|
<slot></slot>
|
|
`;
|
|
}
|
|
}
|