Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface VNodeProperties

Object containing attributes, properties, event handlers and more that can be put on DOM nodes.

For your convenience, all common attributes, properties and event handlers are listed here and are type-checked when using Typescript.

Hierarchy

  • VNodeProperties

Indexable

[index: string]: any

Everything that is not explicitly listed (properties and attributes that are either uncommon or custom).

For your convenience, all common attributes, properties and event handlers are listed here and are type-checked when using Typescript.

Index

Properties

Optional accessKey

accessKey: string

Optional action

action: string

Optional alt

alt: string

Optional autocomplete

autocomplete: string

Optional bind

bind: object

When specified, the event handlers will be invoked with 'this' pointing to the value. This is useful when using the prototype/class based implementation of MaquetteComponents.

When no key is present, this object is also used to uniquely identify a DOM node.

Optional checked

checked: boolean

Optional class

class: string

Optional className

className: never | "Hint: do not use `className`, use `class` instead"

Do not use className, use class instead

Optional classes

classes: object

An object literal like {important:true} which allows css classes, like important to be added and removed dynamically.

Type declaration

  • [index: string]: boolean | null | undefined

Optional disabled

disabled: boolean

Optional encoding

encoding: string

Optional enctype

enctype: string

Optional enterAnimation

enterAnimation: function

The animation to perform when this node is added to an already existing parent. More about animations.

param

Element that was just added to the DOM.

param

The properties object that was supplied to the h method

Type declaration

Optional href

href: string

Optional id

id: string

Optional innerHTML

innerHTML: string

Puts a non-interactive string of html inside the DOM node.

Note: if you use innerHTML, maquette cannot protect you from XSS vulnerabilities and you must make sure that the innerHTML value is safe.

Optional key

key: Object

Used to uniquely identify a DOM node among siblings. A key is required when there are more children with the same selector and these children are added or removed dynamically. NOTE: this does not have to be a string or number, a MaquetteComponent Object for instance is also common.

Optional method

method: string

Optional name

name: string

Optional placeholder

placeholder: string

Optional readOnly

readOnly: boolean

Optional rel

rel: string

Optional spellcheck

spellcheck: boolean

Optional src

src: string

Optional srcset

srcset: string

Optional styles

styles: Partial<CSSStyleDeclaration>

An object literal like {height:'100px'} which allows styles to be changed dynamically. All values must be strings.

Optional tabIndex

tabIndex: number

Optional target

target: string

Optional title

title: string

Optional type

type: string

Optional value

value: string

Methods

Optional afterCreate

  • Callback that is executed after this node is added to the DOM. Child nodes and properties have already been applied.

    Parameters

    • element: Element

      The element that was added to the DOM.

    • projectionOptions: ProjectionOptions

      The projection options that were used, see createProjector.

    • vnodeSelector: string

      The selector passed to the h function.

    • properties: VNodeProperties

      The properties passed to the h function.

    • children: VNode[]

      The children that were created.

    Returns void

Optional afterRemoved

  • afterRemoved(element: Element): void
  • Callback that is called when a node has been removed from the tree. The callback is called during idle state or after a timeout (fallback). More info

    Parameters

    • element: Element

      The element that has been removed from the DOM.

    Returns void

Optional afterUpdate

  • Callback that is executed every time this node may have been updated. Child nodes and properties have already been updated.

    Parameters

    • element: Element

      The element that may have been updated in the DOM.

    • projectionOptions: ProjectionOptions

      The projection options that were used, see createProjector.

    • vnodeSelector: string

      The selector passed to the h function.

    • properties: VNodeProperties

      The properties passed to the h function.

    • children: VNode[]

      The children for this node.

    Returns void

Optional exitAnimation

  • exitAnimation(element: Element, removeElement: function, properties?: VNodeProperties): void
  • The animation to perform when this node is removed while its parent remains.

    Parameters

    • element: Element

      Element that ought to be removed from to the DOM.

    • removeElement: function

      Function that removes the element from the DOM. This argument is provided purely for convenience. You may use this function to remove the element when the animation is done.

        • (): void
        • Returns void

    • Optional properties: VNodeProperties

      The properties object that was supplied to the h method that rendered this VNode the previous time.

    Returns void

Optional onblur

  • onblur(ev: FocusEvent): boolean | void

Optional onchange

  • onchange(ev: Event): boolean | void

Optional onclick

  • onclick(ev: MouseEvent): boolean | void

Optional ondblclick

  • ondblclick(ev: MouseEvent): boolean | void

Optional onfocus

  • onfocus(ev: FocusEvent): boolean | void

Optional oninput

  • oninput(ev: Event): boolean | void

Optional onkeydown

  • onkeydown(ev: KeyboardEvent): boolean | void

Optional onkeypress

  • onkeypress(ev: KeyboardEvent): boolean | void

Optional onkeyup

  • onkeyup(ev: KeyboardEvent): boolean | void

Optional onload

  • onload(ev: Event): boolean | void

Optional onmousedown

  • onmousedown(ev: MouseEvent): boolean | void

Optional onmouseenter

  • onmouseenter(ev: MouseEvent): boolean | void

Optional onmouseleave

  • onmouseleave(ev: MouseEvent): boolean | void

Optional onmousemove

  • onmousemove(ev: MouseEvent): boolean | void

Optional onmouseout

  • onmouseout(ev: MouseEvent): boolean | void

Optional onmouseover

  • onmouseover(ev: MouseEvent): boolean | void

Optional onmouseup

  • onmouseup(ev: MouseEvent): boolean | void

Optional onmousewheel

  • onmousewheel(ev: WheelEvent | MouseWheelEvent): boolean | void
  • Parameters

    • ev: WheelEvent | MouseWheelEvent

    Returns boolean | void

Optional onscroll

  • onscroll(ev: UIEvent): boolean | void

Optional onsubmit

  • onsubmit(ev: Event): boolean | void

Optional ontouchcancel

  • ontouchcancel(ev: TouchEvent): boolean | void

Optional ontouchend

  • ontouchend(ev: TouchEvent): boolean | void

Optional ontouchmove

  • ontouchmove(ev: TouchEvent): boolean | void

Optional ontouchstart

  • ontouchstart(ev: TouchEvent): boolean | void

Optional updateAnimation

  • The animation to perform when the properties of this node change. This also includes attributes, styles, css classes. This callback is also invoked when node contains only text and that text changes. More about animations.

    Parameters

    • element: Element

      Element that was modified in the DOM.

    • Optional properties: VNodeProperties

      The last properties object that was supplied to the h method

    • Optional previousProperties: VNodeProperties

      The previous properties object that was supplied to the h method

    Returns void

Generated using TypeDoc