@gluonjs/quarks / packages/quarks/src / QuarkCommonProps

Interface: QuarkCommonProps<ElementType>

Type Parameters

ElementType

ElementType extends Element = HTMLElement

Properties

aria?

readonly optional aria?: Readonly<Partial<Record<AriaAttributeName, QuarkAttributeValue>>>

children?

readonly optional children?: TemplateValue

class?

readonly optional class?: ClassValue

className?

readonly optional className?: ClassValue

data?

readonly optional data?: Readonly<Record<string, QuarkAttributeValue>>

dataset?

readonly optional dataset?: Readonly<Record<string, QuarkAttributeValue>>

hidden?

readonly optional hidden?: boolean

id?

readonly optional id?: string

part?

readonly optional part?: string

ref?

readonly optional ref?: QuarkRef<ElementType>

role?

readonly optional role?: string

slot?

readonly optional slot?: string

style?

readonly optional style?: StyleValue

tabIndex?

readonly optional tabIndex?: number

title?

readonly optional title?: string

Example

Share typed children, class, style, semantics, ARIA, data, and ref bindings across every native-element Quark:

import { html } from '@gluonjs/core';
import {
  fragment,
  htmlTagNames,
  q,
  quark,
  unsafeQuarkProps,
  type AriaAttributeName,
  type QuarkAriaProps,
  type QuarkAttributeValue,
  type QuarkCommonProps,
  type QuarkDataProps,
  type QuarkMap,
  type QuarkProps,
  type UnsafeQuarkProps,
} from '@gluonjs/quarks';

const ariaName: AriaAttributeName = 'label';
const attributeValue: QuarkAttributeValue = 'Add to bag';
const aria = { [ariaName]: attributeValue } satisfies QuarkAriaProps;
const data = { analyticsAction: 'purchase' } satisfies QuarkDataProps;
const common = { id: 'add-to-bag', class: 'primary' } satisfies QuarkCommonProps<HTMLButtonElement>;
const props = { ...common, type: 'button', aria, data, children: 'Add to bag' } satisfies QuarkProps<HTMLButtonElement>;
const future = unsafeQuarkProps<HTMLButtonElement>({ 'vendor-future-key': true });
const unsafe: UnsafeQuarkProps<HTMLButtonElement> = future;
const Button = quark('button');
const tags: QuarkMap = q;
const actions = fragment([Button(props), Button(unsafe), tags.a({ href: '/bag', children: html`View bag` })]);
console.log(Button.tagName, htmlTagNames.includes('button'), actions);