nss_libs - NssTextBox

A styled text display component with responsive sizing and a three-part visual structure (before-cap, text, after-cap). NUI

Getting Started

NssTextBox renders text inside a decorative three-part container. Load it via NssUiApi or import directly. The component requires NssResponsive to be initialized — it will warn via window.alert if missing.

import {NssUiApi} from "nui://nss_libs/ui/NssUiApi.js";

const nss_ui_api = new NssUiApi('my_resource');
nss_ui_api.load([NssUiApi.NssResponsive, NssUiApi.NssTextBox]).then((components) => {
    new components.NssResponsive();

    const text_box = new components.NssTextBox(document.getElementById('container'));
    text_box.setText('Hello World').show();
});

Constructor

new NssTextBox(target_el)

Creates a new text box instance. The DOM is created lazily on the first show() call.

Parameters

• target_el : HTMLElement — The parent element the text box will be appended to.

Example

const text_box = new NssTextBox(document.getElementById('my-container'));

Methods

show()

Creates the DOM structure (if not yet created) and makes the text box visible.

Syntax

text_box.show()

Parameters

None.

Return Value

Returns NssTextBox — the instance for chaining.

Example

text_box.setText('Welcome back').show();

---

hide()

Hides the text box by removing the visibility CSS class.

Syntax

text_box.hide()

Parameters

None.

Return Value

Returns NssTextBox — the instance for chaining.

Example

text_box.hide();

---

removeDom()

Removes the text box DOM element from the document and clears internal references.

Syntax

text_box.removeDom()

Parameters

None.

Return Value

Returns undefined.

Example

text_box.hide();
text_box.removeDom();

---

setText(value)

Sets the text content displayed in the text box.

Syntax

text_box.setText(value)

Parameters

• value : string — The text to display.

Return Value

Returns NssTextBox — the instance for chaining.

Example

text_box.setText('Press E to interact').show();

---

getText()

Returns the current text content.

Syntax

text_box.getText()

Parameters

None.

Return Value

Returns string — the current text value.

Example

const current_text = text_box.getText();

---

setNoWrap()

Prevents the text from wrapping to a new line.

Syntax

text_box.setNoWrap()

Parameters

None.

Return Value

Returns NssTextBox — the instance for chaining.

Example

text_box.setText('Single line only').setNoWrap().show();

---

setWrap()

Allows the text to wrap (default behavior).

Syntax

text_box.setWrap()

Parameters

None.

Return Value

Returns NssTextBox — the instance for chaining.

Example

text_box.setWrap();

---

setTextSizeSmall()

Sets the text size to small (0.8rem).

Syntax

text_box.setTextSizeSmall()

Parameters

None.

Return Value

Returns NssTextBox — the instance for chaining.

Example

text_box.setText('Fine print').setTextSizeSmall().show();

---

setTextSizeDefault()

Resets the text size to default (1rem).

Syntax

text_box.setTextSizeDefault()

Parameters

None.

Return Value

Returns NssTextBox — the instance for chaining.

Example

text_box.setTextSizeDefault();

---

setTextSizeMedium()

Sets the text size to medium (1.2rem).

Syntax

text_box.setTextSizeMedium()

Parameters

None.

Return Value

Returns NssTextBox — the instance for chaining.

Example

text_box.setText('Important notice').setTextSizeMedium().show();

---

setTextSizeLarge()

Sets the text size to large (1.5rem).

Syntax

text_box.setTextSizeLarge()

Parameters

None.

Return Value

Returns NssTextBox — the instance for chaining.

Example

text_box.setText('Headline').setTextSizeLarge().show();

Events / Callbacks

None. NssTextBox is a pure display component without user interaction callbacks.

CSS

Classes

Class	Description
.nss-text-box__container	Root grid container.
.nss-text-box__container--visible	Applied when show() is called.
.nss-text-box__container--small	Small text variant (0.8rem).
.nss-text-box__container--medium	Medium text variant (1.2rem).
.nss-text-box__container--large	Large text variant (1.5rem).
.nss-text-box__container--no-wrap	Prevents text wrapping.
.nss-text-box__text-before	Left decorative cap.
.nss-text-box__text	Center text area with background image.
.nss-text-box__text-after	Right decorative cap.

Custom Properties

Property	Default	Description
--font-size	1rem	Base font size, overridden by size modifiers.
--padding-tb	var(--5rpx)	Vertical padding, scales with size modifiers.

Dependencies

• NssResponsive — must be initialized before using NssTextBox. Will alert if missing.
• NssUiComponentInterface → NssUiComponent — base class chain.

Things to Know

• The DOM is created lazily on the first show() call. Calling setText() before show() stores the value and applies it when the DOM is created.
• After removeDom(), calling show() again will re-create the DOM structure.
• All setter methods can be called before or after show() — state is applied immediately if DOM exists, or queued for the next show().