Class Columns2

Readonlynode

after

• after(...components: NodeComponent<any>[]): this

  Insert components in the children list of this ElementComponent’s parent, just after this ElementComponent.

  Parameters

  • ...components: NodeComponent<any>[]

    Components to insert

  Returns this

append

• append(...components: NodeComponent<any>[]): this

  Insert component after the last child

  Parameters

  • ...components: NodeComponent<any>[]

  Returns this

attr

• attr(name: string, value?: string): this

  Set attribute

  Parameters

  • name: string

    attribute name
  • Optionalvalue: string

    attribute value

  Returns this

before

• before(...components: NodeComponent<any>[]): this

  Insert components in the children list of this ElementComponent’s parent, just before this ElementComponent.

  Parameters

  • ...components: NodeComponent<any>[]

    Components to insert

  Returns this

boundingClientRect

• boundingClientRect(): DOMRect

  Get a !DOMRect object providing information about the size of a component and its position relative to the viewport.

  Returns DOMRect

  See

  Element: getBoundingClientRect() - MDN

class

• class(...classes: string[]): this

  Add classes

  Parameters

  • ...classes: string[]

  Returns this

clone

• clone(deep?: boolean): SvgComponent

  Clone this component. Event listeners are not cloned.

  Parameters

  • Optionaldeep: boolean

    Whether to clone the whole subtree.

  Returns SvgComponent

  A duplicate of this component.

  See

  Node: cloneNode() - MDN

context

• context(fn: (this: this, component: this) => any): this

  Run a function in the context of this component

  Parameters

  • fn: (this: this, component: this) => any

    Provides this component as the first argument and this.

  Returns this

empty

• empty(): this

  Empty the component (remove children)

  Returns this

get

• get<K extends ReadableKeys<SVGSVGElement>>(name: K): SVGSVGElement[K]

  Get element property

  Type Parameters

  • K extends ReadableKeys<SVGSVGElement>

  Parameters

  • name: K

    property name

  Returns SVGSVGElement[K]

hasClass

• hasClass(...classes: string[]): boolean

  Check if component has class

  Parameters

  • ...classes: string[]

  Returns boolean

  true if component has all the specified classes

html

• html(strings: TemplateStringsArray, ...components: any[]): this

  Append HTML.

  Any components (provided as ${...} inside the HTML string literal) remain fully functional and are appended (not just as HTML).

  Parameters

  • strings: TemplateStringsArray
  • ...components: any[]

  Returns this

  Example

  component.html`<div>${new Component("button")
       .text("Click me")
       .on("click", () => console.log("clicked"))
  }</div>`
  // Event listeners etc. are preserved.
  // Note the lack of parentheses.
  Copy

  See

  Template literals (Template strings) - MDN

isVisible

• isVisible(): boolean

  Check whether the component is visible.

  Returns boolean

  See

  Element: checkVisibility() - MDN

on

• on<K extends keyof ElementEventMap>(
      type: K,
      listener: (ev: ElementEventMap[K], component: this) => any,
  ): Columns2

  Add event listener

  Type Parameters

  • K extends keyof ElementEventMap

  Parameters

  • type: K

    A case-sensitive string representing the event type to listen for.
  • listener: (ev: ElementEventMap[K], component: this) => any

    The function that is called when an event of the specified type occurs.

  Returns Columns2
• on<K extends keyof ElementEventMap>(
      type: K,
      listener: (ev: ElementEventMap[K], component: this) => any,
      options: AddEventListenerOptions,
  ): Columns2

  Add event listener

  Type Parameters

  • K extends keyof ElementEventMap

  Parameters

  • type: K

    A case-sensitive string representing the event type to listen for.
  • listener: (ev: ElementEventMap[K], component: this) => any

    The function that is called when an event of the specified type occurs.
  • options: AddEventListenerOptions

    An object that specifies characteristics about the event listener. See options on MDN

  Returns Columns2
• on<K extends keyof ElementEventMap>(
      type: K,
      listener: (ev: ElementEventMap[K], component: this) => any,
      useCapture: boolean,
  ): Columns2

  Add event listener

  Type Parameters

  • K extends keyof ElementEventMap

  Parameters

  • type: K

    A case-sensitive string representing the event type to listen for.
  • listener: (ev: ElementEventMap[K], component: this) => any

    The function that is called when an event of the specified type occurs.
  • useCapture: boolean

    See useCapture on MDN

  Returns Columns2

prepend

• prepend(...components: NodeComponent<any>[]): this

  Insert component before the first child

  Parameters

  • ...components: NodeComponent<any>[]

  Returns this

remove

• remove(): this

  Remove the element

  Returns this

removeAttr

• removeAttr(name: string): this

  Remove attribute

  Parameters

  • name: string

    attribute name

  Returns this

removeClass

• removeClass(...classes: string[]): this

  Remove classes

  Parameters

  • ...classes: string[]

  Returns this

replaceClass

• replaceClass(oldClasses: string | string[], newClasses: string | string[]): this

  Replace classes

  Parameters

  • oldClasses: string | string[]

    If all of these classes are present, they will be removed.
  • newClasses: string | string[]

    The classes to add if all oldClasses are present

  Returns this

set

• set<K extends WritableKeys<SVGSVGElement>>(
      name: K,
      value: SVGSVGElement[K],
  ): this

  Set element property

  Type Parameters

  • K extends WritableKeys<SVGSVGElement>

  Parameters

  • name: K

    property name
  • value: SVGSVGElement[K]

    property value

  Returns this

slot

• slot(slot: string, parent?: ParentNode): this

  Render this component in the place of a <slot name="…"></slot>.

  Parameters

  • slot: string

    The slot name
  • Optionalparent: ParentNode

    The parent element within to search for slots. Defaults to document

  Returns this

  Throws

  !DOMException When the slot is not found

text

• text(text: string): this

  Set text content

  Parameters

  • text: string

  Returns this

toggleClass

• toggleClass(...classes: string[]): this

  Toggle classes

  Parameters

  • ...classes: string[]

  Returns this

toString

• toString(): string

  Get this component's outer HTML

  Returns string

Staticfrom

• from(svg: string): SvgComponent

  Create SVG component from <svg>...</svg> code

  Parameters

  • svg: string

  Returns SvgComponent