GLUON / DOCS Playground

@gluonjs/quarks

@gluonjs/quarks / packages/quarks/src / QuarkFactory

Interface: QuarkFactory()<TagName, ElementType>

Type Parameters

TagName

TagName extends string

ElementType

ElementType extends Element = HTMLElement

QuarkFactory(props?): TemplateResult

Parameters

props?

QuarkProps<ElementType>

Returns

TemplateResult

Properties

layer

readonly layer: "quark"

tagName

readonly tagName: TagName

Example

Keep a generated tag factory tied to its exact tag name and DOM element type before using it in a template:

ts
import { html } from '@gluonjs/core';
import { Dialog, quark, type QuarkFactory, type QuarkRef } from '@gluonjs/quarks';

const Button: QuarkFactory<'button', HTMLButtonElement> = quark('button');
const closeButton: QuarkRef<HTMLButtonElement> = { value: undefined };

const dialog = Dialog({
  label: 'Shopping bag',
  children: html`${Button({ ref: closeButton, children: 'Close' })}` ,
  onDismiss: () => console.log('Bag dismissed'),
});
console.log(dialog, closeButton.value);