@tempots/dom

@tempots/dom > attr

attr variable

The attr object allows to create any HTML attribute. Either a literal value or Signal can be passed as a value. The type of the value is inferred from the attribute name.

Signature:

attr: {
    accept: (value: NValue<string>) => Renderable;
    'accept-charset': (value: NValue<string>) => Renderable;
    accesskey: (value: NValue<string>) => Renderable;
    action: (value: NValue<string>) => Renderable;
    align: (value: NValue<string>) => Renderable;
    alt: (value: NValue<string>) => Renderable;
    async: (value: NValue<boolean>) => Renderable;
    autocomplete: (value: NValue<string>) => Renderable;
    autofocus: (value: NValue<boolean>) => Renderable;
    autoplay: (value: NValue<boolean>) => Renderable;
    bgcolor: (value: NValue<string>) => Renderable;
    border: (value: NValue<string>) => Renderable;
    charset: (value: NValue<string>) => Renderable;
    checked: (value: NValue<boolean>) => Renderable;
    cite: (value: NValue<string>) => Renderable;
    class: (value: NValue<string>) => Renderable;
    color: (value: NValue<string>) => Renderable;
    cols: (value: NValue<number>) => Renderable;
    colspan: (value: NValue<number>) => Renderable;
    content: (value: NValue<string>) => Renderable;
    contenteditable: (value: NValue<boolean>) => Renderable;
    controls: (value: NValue<string>) => Renderable;
    coords: (value: NValue<string>) => Renderable;
    data: (value: NValue<string>) => Renderable;
    datetime: (value: NValue<string>) => Renderable;
    default: (value: NValue<string>) => Renderable;
    defer: (value: NValue<string>) => Renderable;
    dir: (value: NValue<string>) => Renderable;
    dirname: (value: NValue<string>) => Renderable;
    disabled: (value: NValue<boolean>) => Renderable;
    download: (value: NValue<string>) => Renderable;
    draggable: (value: NValue<string>) => Renderable;
    dropzone: (value: NValue<string>) => Renderable;
    enctype: (value: NValue<string>) => Renderable;
    for: (value: NValue<string>) => Renderable;
    form: (value: NValue<string>) => Renderable;
    formaction: (value: NValue<string>) => Renderable;
    headers: (value: NValue<string>) => Renderable;
    height: (value: NValue<string>) => Renderable;
    hidden: (value: NValue<string>) => Renderable;
    high: (value: NValue<string>) => Renderable;
    href: (value: NValue<string>) => Renderable;
    hreflang: (value: NValue<string>) => Renderable;
    'http-equiv': (value: NValue<string>) => Renderable;
    icon: (value: NValue<string>) => Renderable;
    id: (value: NValue<string>) => Renderable;
    ismap: (value: NValue<string>) => Renderable;
    itemprop: (value: NValue<string>) => Renderable;
    keytype: (value: NValue<string>) => Renderable;
    kind: (value: NValue<string>) => Renderable;
    label: (value: NValue<string>) => Renderable;
    lang: (value: NValue<string>) => Renderable;
    language: (value: NValue<string>) => Renderable;
    list: (value: NValue<string>) => Renderable;
    loop: (value: NValue<string>) => Renderable;
    low: (value: NValue<string>) => Renderable;
    manifest: (value: NValue<string>) => Renderable;
    max: (value: NValue<number>) => Renderable;
    maxlength: (value: NValue<number>) => Renderable;
    media: (value: NValue<string>) => Renderable;
    method: (value: NValue<string>) => Renderable;
    min: (value: NValue<number>) => Renderable;
    minlength: (value: NValue<number>) => Renderable;
    multiple: (value: NValue<boolean>) => Renderable;
    name: (value: NValue<string>) => Renderable;
    novalidate: (value: NValue<string>) => Renderable;
    open: (value: NValue<string>) => Renderable;
    optimum: (value: NValue<string>) => Renderable;
    pattern: (value: NValue<string>) => Renderable;
    ping: (value: NValue<string>) => Renderable;
    placeholder: (value: NValue<string>) => Renderable;
    poster: (value: NValue<string>) => Renderable;
    preload: (value: NValue<string>) => Renderable;
    radiogroup: (value: NValue<string>) => Renderable;
    readonly: (value: NValue<boolean>) => Renderable;
    rel: (value: NValue<string>) => Renderable;
    required: (value: NValue<string>) => Renderable;
    reversed: (value: NValue<string>) => Renderable;
    role: (value: NValue<string>) => Renderable;
    rows: (value: NValue<number>) => Renderable;
    rowspan: (value: NValue<number>) => Renderable;
    sandbox: (value: NValue<string>) => Renderable;
    scope: (value: NValue<string>) => Renderable;
    scoped: (value: NValue<string>) => Renderable;
    seamless: (value: NValue<string>) => Renderable;
    selected: (value: NValue<boolean>) => Renderable;
    shape: (value: NValue<string>) => Renderable;
    size: (value: NValue<number>) => Renderable;
    sizes: (value: NValue<string>) => Renderable;
    span: (value: NValue<string>) => Renderable;
    spellcheck: (value: NValue<string>) => Renderable;
    src: (value: NValue<string>) => Renderable;
    srcdoc: (value: NValue<string>) => Renderable;
    srclang: (value: NValue<string>) => Renderable;
    srcset: (value: NValue<string>) => Renderable;
    start: (value: NValue<string>) => Renderable;
    step: (value: NValue<number>) => Renderable;
    style: (value: NValue<string>) => Renderable;
    tabindex: (value: NValue<number>) => Renderable;
    target: (value: NValue<string>) => Renderable;
    title: (value: NValue<string>) => Renderable;
    translate: (value: NValue<string>) => Renderable;
    type: (value: NValue<string>) => Renderable;
    usemap: (value: NValue<string>) => Renderable;
    value: (value: NValue<string>) => Renderable;
    valueAsNumber: (value: NValue<number>) => Renderable;
    valueAsDate: (value: NValue<Date>) => Renderable;
    width: (value: NValue<string>) => Renderable;
    wrap: (value: NValue<string>) => Renderable;
    textContent: (value: NValue<string>) => Renderable;
    innerText: (value: NValue<string>) => Renderable;
    innerHTML: (value: NValue<string>) => Renderable;
    outerHTML: (value: NValue<string>) => Renderable;
}

Example

const button = html.button(
  attr.type('button'),
  attr.disabled(disabled), // where disabled is a `Signal`
  // ...
)