godown v2.7.5

Godown

Simple, stylized, semantic web components.

Install

npm i godown

Usages

HTML

<g-alert title="Alert"></g-alert>

Can't use a single tag.

<g-alert title="Alert"/>
<!-- ERROR -->

JS

import { Alert } from "godown"; // import all
// import Alert from "godown/alert"; // import one

const alert = new Alert();
alert.title = "Alert";
/*
const alert = new Alert({
  title: "Alert"
});
 */
document.body.appendChild(alert);

deno

import { Alert } from "npm:godown";

React

import { Alert } from "godown/react"; // import all

export default function () {
  return <Alert title="Alert" />;
}

Custom

Custom element tag name

The name must contain -.

import { defineConfig } from "godown/conf";

const newNames = {
  "old-name": "new-name",
};

function getName(constructorDashName: string) {
  return newNames[constructorDashName];
}

defineConfig({
  tag: getName,
  prefix: "prefix-",
  suffix: "",
});

The element will be renamed to ${prefix} + ${tag( ${constructorDashName} )} + ${suffix}

<prefix-new-name title="Alert"></prefix-new-name>

Custom element styles

Font color and background

* {
  --godown--background-rgb: 12 12 12;
  --godown--foreground-rgb: 240 240 240;
}

See With CSS.

Custom element CSS variable prefix

import { defineConfig } from "godown/conf";

defineConfig({
  cssvar: "ge",
});

The CSS variable of the element will be ${cssvar} + element name + description.

The following CSS variables now affect element styles.

<g-button style="--ge--g-button--focus-scale: .95;"></g-button>

Custom initial property

All element.

import { defineConfig } from "godown/conf";
defineConfig({
  assign: {
    classList: ["godown-element", "custom-element"],
    color: "blue", // button property
  },
});

Assign when elements are connected.

<g-button class="godown-element custom-element" color="blue">Button</g-button>

<g-input class="godown-element custom-element" color="blue"></g-input>

One element.

const RedGhostButton = new Button({
  // ...
  color: "red", // overwrite
  ghost: true, // button property
});

With CSS

It can be used to set CSS variables.

.godown-element {
  --ge--foreground-rgb: 0 0 0;
  --ge--background-rgb: 255 255 255;
}

Compatibility

import { defineConfig } from "godown/conf";
defineConfig({
  naming: "legacy", // default is "latest"
});

Legacy names can now be used.

<base-button>legacy</base-button>