Class TextElement

Represents a generic text-containing element.

Hierarchy (View Summary)

BaseElement
- TextElement

Index

Constructors

constructor

Methods

add applyMagic attr class css each on render renderToString style text with

Constructors

constructor

new TextElement(tagName: string, text?: string): TextElement
Creates a new TextElement.
Parameters
- tagName: string
  The HTML tag name.
- Optionaltext: string
  Optional initial text content.
Returns TextElement
Overrides BaseElement.constructor
- Defined in elements/text-elements.ts:14

Methods

add

add(...children: (BaseElement | BaseElement[])[]): this
Alias for .with(). Adds child elements.
Parameters
- ...children: (BaseElement | BaseElement[])[]
  Child elements.
Returns this
The element instance for chaining.
Inherited from BaseElement.add
- Defined in elements/base-element.ts:163

applyMagic

applyMagic(args: any[]): this
Applies "Magic" argument processing. Infers intent based on argument types.
Parameters
- args: any[]
  Variadic arguments.
Returns this
The element instance.
Inherited from BaseElement.applyMagic
- Defined in elements/base-element.ts:43

attr

attr(name: string, value: string): this
Sets an HTML attribute.
Parameters
- name: string
  The attribute name.
- value: string
  The attribute value.
Returns this
The element instance for chaining.
Inherited from BaseElement.attr
- Defined in elements/base-element.ts:295

class

class(className: string): this
Adds a CSS class name to the element.
Parameters
- className: string
  The class name(s) to add.
Returns this
The element instance for chaining.
Inherited from BaseElement.class
- Defined in elements/base-element.ts:281

css

css(styles: StyleObject): this
Applies CSS classes using the CSS-in-JS style manager. Generates a unique class name and injects styles.
Parameters
- styles: StyleObject
  StyleObject defining the styles.
Returns this
The element instance for chaining.
Inherited from BaseElement.css
- Defined in elements/base-element.ts:267

each

each<T>(
dataSource: State<T[]> | (() => T[]),
renderer: (item: T, index: number) => BaseElement,
): this
Renders a list of items reactively.
Type Parameters
- T
Parameters
- dataSource: State<T[]> | (() => T[])
  A State array or a function returning an array.
- renderer: (item: T, index: number) => BaseElement
  Function to create a BaseElement for each item.
Returns this
The element instance for chaining.
Example
```
ul().each(tasksState, (task) => li(task));
```
Inherited from BaseElement.each
- Defined in elements/base-element.ts:212

on

on<K extends keyof HTMLElementEventMap>(
eventName: K,
handler: (event: HTMLElementEventMap[K]) => void,
): this
Attaches an event listener to the element.
Type Parameters
- K extends keyof HTMLElementEventMap
Parameters
- eventName: K
  The event name (e.g., "click").
- handler: (event: HTMLElementEventMap[K]) => void
  The event handler function.
Returns this
The element instance for chaining.
Inherited from BaseElement.on
- Defined in elements/base-element.ts:306

render

render(): HTMLElement
Renders the element into a DOM node.

Returns HTMLElement
The created HTMLElement.

Throws
Error if called outside of a browser environment.
Inherited from BaseElement.render
- Defined in elements/base-element.ts:419

renderToString

renderToString(): string
Renders the element to an HTML string.

Returns string
The HTML string.
Inherited from BaseElement.renderToString
- Defined in elements/base-element.ts:430

style

style(styles: Partial<CSSStyleDeclaration>): this
Applies inline styles to the element.
Parameters
- styles: Partial<CSSStyleDeclaration>
  Object containing CSS properties.
Returns this
The element instance for chaining.
Example
```
div().style({ color: "red", fontSize: "16px" });
```
Inherited from BaseElement.style
- Defined in elements/base-element.ts:249

text

text(
    content:
        | string
        | number
        | State<string | number>
        | (() => string | number),
): this
Sets the text content of the element. Supports reactive state binding.
Parameters
- content: string | number | State<string | number> | (() => string | number)
  String, number, reactive State, or getter function.
Returns this
The element instance for chaining.
Example
```
div().text("Static Text");
div().text(myState); // Updates automatically
```
Inherited from BaseElement.text
- Defined in elements/base-element.ts:176

with

with(...children: (BaseElement | BaseElement[])[]): this
Adds child elements to this element.
Parameters
- ...children: (BaseElement | BaseElement[])[]
  Child elements (variadic or array).
Returns this
The element instance for chaining.
Example
```
div().with(span("Hello"), span("World"));
```
Inherited from BaseElement.with
- Defined in elements/base-element.ts:147

Class TextElement

Hierarchy (View Summary)

Index

Constructors

Methods

Constructors

constructor

Parameters

Returns TextElement

Methods

add

Parameters

Returns this

applyMagic

Parameters

Returns this

attr

Parameters

Returns this

class

Parameters

Returns this

css

Parameters

Returns this

each

Type Parameters

Parameters

Returns this

Example

on

Type Parameters

Parameters

Returns this

render

Returns HTMLElement

Throws

renderToString

Returns string

style

Parameters

Returns this

Example

text

Parameters

Returns this

Example

with

Parameters

Returns this

Example

Settings

On This Page