That Open

https://docs.thatopen.com/
Admin
That Open provides free and open-source JavaScript/TypeScript libraries for developers to create 3D...
Tokens:493,811
Snippets:4,738
Trust Score:6.2
Update:5 days ago
Show doc for...
Tokens:
Raw
### Get and setup the FragmentIfcLoader

Source: https://docs.thatopen.com/Tutorials/UserInterface/OBC/ModelsList

Retrieves the FragmentIfcLoader from the components instance and calls setup(). This is required because functional components do not set up tools automatically; without it, the wasm path is undefined and an error occurs.

```typescript
const ifcLoader = components.get(OBC.IfcLoader);  
await ifcLoader.setup();  

```

--------------------------------

### Install @thatopen/ui with npm

Source: https://docs.thatopen.com/Tutorials/UserInterface

Install the core library from the terminal using npm.

```bash
npm i @thatopen/ui  
```

--------------------------------

### Install @thatopen/fragments

Source: https://docs.thatopen.com/fragments/getting-started

Install the Fragments library via npm.

```bash
npm i @thatopen/fragments  

```

--------------------------------

### Install Three.js

Source: https://docs.thatopen.com/components/getting-started

Install Three.js, which most thatopen libraries are based on. Ensure the version matches the one used by the libraries.

```bash
npm i three  
```

--------------------------------

### Install dependencies with yarn

Source: https://docs.thatopen.com/contributing

Install all dependencies for the library using yarn. Run this after cloning the repository and creating a branch.

```bash
yarn install
```

--------------------------------

### Install @thatopen/components

Source: https://docs.thatopen.com/components/getting-started

Install the main components library using npm. This is the primary package for building BIM applications.

```bash
npm i @thatopen/components  
```

--------------------------------

### Install dependencies for IFC to Fragment schema explorer

Source: https://docs.thatopen.com/Tutorials/Fragments/Fragments/IfcImporter/HelloWorldSchema

Install all required npm packages: @thatopen/components, @thatopen/ui, @andypf/json-viewer, stats.js, pako, flatbuffers, three, @thatopen/fragments, and web-ifc.

```bash
npm install @thatopen/components @thatopen/ui @andypf/json-viewer stats.js pako flatbuffers three @thatopen/fragments @thatopen/components @thatopen/ui web-ifc  
```

--------------------------------

### Install peer dependencies

Source: https://docs.thatopen.com/components/getting-started

Install the peer dependencies @thatopen/fragments and web-ifc. These are separate libraries not included as regular dependencies to allow flexible bundling. Ensure versions match those used by the libraries.

```bash
npm i @thatopen/fragments  
npm i web-ifc  
```

--------------------------------

### getLocalIdsByGuids(guids)

Source: https://docs.thatopen.com/api/@thatopen/fragments/classes/FragmentsModel

Get the local IDs corresponding to the specified GUIDs.

```APIDOC
## getLocalIdsByGuids(guids)

### Description
Get the local IDs corresponding to the specified GUIDs.

### Method
`getLocalIdsByGuids`

### Parameters
- `guids` (string[]) - Required - Array of GUIDs to look up.

### Returns
`Promise<(null | number)[]>`
```

--------------------------------

### setup(config?)

Source: https://docs.thatopen.com/api/@thatopen/components/interfaces/Configurable

Use the provided configuration to set up the tool. Accepts an optional partial configuration and returns void or a Promise that resolves to void.

```APIDOC
## setup(config?)

### Description
Use the provided configuration to set up the tool.

### Method
setup

### Parameters
- **config** (`Partial<U>`) - Optional - The configuration to apply.

### Returns
`void` | `Promise<void>`

```

--------------------------------

### getGuidsByLocalIds()

Source: https://docs.thatopen.com/api/@thatopen/fragments/classes/SingleThreadedFragmentsModel

Gets the GUIDs corresponding to the specified local IDs.

```APIDOC
## getGuidsByLocalIds()

### Description
Gets the GUIDs corresponding to the specified local IDs.

### Method
`getGuidsByLocalIds(localIds: number[]): (null | string)[]`

### Parameters
- **localIds** (number[]) - Required - Array of local IDs to look up.

### Returns
`(null | string)[]` - The GUIDs corresponding to the local IDs.
```

--------------------------------

### setup()

Source: https://docs.thatopen.com/api/@thatopen/components/classes/Clipper

Configures the Clipper component with optional configuration.

```APIDOC
## setup()

### Description
Configures the Clipper component with optional configuration.

### Method
`setup`

### Parameters
- **config** (`Partial<ClipperConfig>`, optional) - The configuration to apply.

### Returns
`void`
```

--------------------------------

### Example of GuidsItems indexation data

Source: https://docs.thatopen.com/fragments/schema

Shows a sample data structure for the GuidsItems indexation, matching localIds indices with guids. This example is used to illustrate how the guidsItems array works.

```json
{  
  "localIds": [34, 35, 36],  
  "guids": ["guid-abc", "guid-xyz"],  
  "guidsItems": [2, 1],  
  ...  
}  
```

--------------------------------

### setup(config?)

Source: https://docs.thatopen.com/api/@thatopen/components-front/classes/Highlighter

Sets up the Highlighter with the provided configuration.

```APIDOC
## setup(config?)

### Description
Sets up the Highlighter with the provided configuration.

### Method
setup

### Parameters
- `config`? (Partial<HighlighterConfig>) - Optional - Optional configuration for the Highlighter. If not provided, the Highlighter will use the default configuration.

### Returns
`void`

### Throws
Will throw an error if the world or a required component is not found.
Will throw an error if the selection already exists.
Will throw an error if the fragment or its geometry is not found.
Will throw an error if the item ID is not found.
Will throw an error if the fragment does not belong to a FragmentsGroup.
```

--------------------------------

### SimpleGrid.setup(config?)

Source: https://docs.thatopen.com/api/@thatopen/components/classes/SimpleGrid

Sets up the grid with optional configuration.

```APIDOC
## SimpleGrid.setup(config?)

### Description
Sets up the grid with optional configuration.

### Method
`setup(config?)`

### Parameters
- **config** (`Partial<SimpleGridConfig>`) - Optional - Configuration for the grid.

### Returns
`void`

### Implementation of
`Configurable.setup`
```

--------------------------------

### Get VertexPicker config

Source: https://docs.thatopen.com/api/@thatopen/components/classes/VertexPicker

Retrieves the current configuration object. The example logs the snapDistance property, which defaults to 0.25.

```typescript
const currentConfig = vertexPicker.config;  
console.log(currentConfig.snapDistance); // Output: 0.25  
```

--------------------------------

### Setting Up Fragments Library

Source: https://docs.thatopen.com/Tutorials/Fragments/Fragments/FragmentsModels/SteelDetailing

Initializes the Fragments manager with a worker URL fetched from unpkg, and enables postproduction with COLOR_PEN style.

```typescript
// `FragmentsModels.getWorker()` fetches the matching worker for this library version from unpkg and returns a blob URL.  
// You can also pass your own URL to `fragments.init(...)` if you'd rather host the worker yourself.  
const workerUrl = await FRAGS.FragmentsModels.getWorker();  
const fragments = components.get(OBC.FragmentsManager);  
fragments.init(workerUrl);  
  
world.renderer.postproduction.enabled = true;  
world.renderer.postproduction.style = OBF.PostproductionAspect.COLOR_PEN;  

```

--------------------------------

### HTML example for getting panel value

Source: https://docs.thatopen.com/api/@thatopen/ui/classes/Panel

HTML markup for a bim-panel element, used to access its value via JavaScript.

```html
<bim-panel></bim-panel> <!-- Access via JavaScript to get value -->  
```

--------------------------------

### setup(config?)

Source: https://docs.thatopen.com/api/@thatopen/components/classes/SimpleScene

Configures the SimpleScene component with optional configuration settings.

```APIDOC
## setup(config?)

### Description
Configures the SimpleScene component with optional configuration settings.

### Method
setup

### Parameters
- **config** (Partial<SimpleSceneConfig>) - Optional - Configuration settings for the scene.

### Returns
void

### Implementation
Configurable.setup
```

--------------------------------

### JavaScript example for getting panel value

Source: https://docs.thatopen.com/api/@thatopen/ui/classes/Panel

Creates a bim-panel element, appends it to the document body, and logs its current value object.

```javascript
const panel = document.createElement('bim-panel');  
document.body.appendChild(panel);  
console.log(panel.value); // Logs the current value object of the panel  
```

--------------------------------

### Get Fragments Worker URL

Source: https://docs.thatopen.com/api/@thatopen/components/classes/FragmentsManager

Returns a blob URL for the fragments worker matching the installed @thatopen/fragments version. This is the recommended way to obtain the URL passed to FragmentsManager.init.

```typescript
const fragments = components.get(OBC.FragmentsManager);  
fragments.init(await OBC.FragmentsManager.getWorker());  
```

--------------------------------

### Run local development server

Source: https://docs.thatopen.com/contributing

Start a local server to see changes made in the corresponding example.ts files. Use this during development.

```bash
yarn dev
```

--------------------------------

### Configure IfcLoader with web-ifc setup

Source: https://docs.thatopen.com/Tutorials/Components/Core/IfcLoader

Configures the IfcLoader by setting up web-ifc, the core library for reading IFC files. The example uses autoSetWasm: false and specifies a wasm path from unpkg.

```javascript
await ifcLoader.setup({  
  autoSetWasm: false,  
  wasm: {  
    path: "https://unpkg.com/web-ifc@0.0.77/",  
    absolute: true,  
  },  
});  
```

--------------------------------

### Set up the scene with lights

Source: https://docs.thatopen.com/Tutorials/Components/Core/Worlds

Calls the setup method on the scene to automatically add lights, simplifying the process.

```javascript
world.scene.setup();  

```

--------------------------------

### Create two viewports with different areas

Source: https://docs.thatopen.com/Tutorials/Components/Core/TechnicalDrawings/MultiDrawingViewports

Creates two viewports on the drawing, each defined by a bounding rectangle and a scale. Both start at 1:100 scale, framing different areas of the plan. The library handles camera setup and anchors viewports to the drawing.

```typescript
const viewportA = drawing.viewports.create({  
  left:   -0.996,  
  right:  16.493,  
  top:    -57.877,  
  bottom: -64.375,  
  scale:   100,  
});  
  
const viewportB = drawing.viewports.create({  
  left:   -5.040,  
  right:  -1.434,  
  top:     0.568,  
  bottom: -5.934,  
  scale:   100,  
});  
```

--------------------------------

### setupEvents(active: boolean): void

Source: https://docs.thatopen.com/api/@thatopen/components/classes/SimpleRenderer

Sets up and manages the event listeners for the renderer.

```APIDOC
## setupEvents(active: boolean): void

### Description
Sets up and manages the event listeners for the renderer.

### Method
setupEvents

### Parameters
- **active** (boolean) - Required - A boolean indicating whether to activate or deactivate the event listeners.

### Returns
void

### Throws
Will throw an error if the renderer does not have an HTML container.
```

--------------------------------

### start setter

Source: https://docs.thatopen.com/api/@thatopen/components-front/classes/DimensionLine

Setter for the start point of the dimension line. Updates the line geometry and position of the start point marker.

```APIDOC
## set start(point: Vector3): void

### Description
Setter for the start point of the dimension line. Updates the line geometry and position of the start point marker.

### Parameters
- `point` (Vector3) - Required - The new start point.

### Returns
`void`

```

--------------------------------

### Set up scene with PostproductionRenderer

Source: https://docs.thatopen.com/Tutorials/Components/Front/PostproductionRenderer

Creates a world with a SimpleScene, OrthoPerspectiveCamera, and PostproductionRenderer. Sets up the renderer, camera, grid, and initializes components. The background is set to null for transparency.

```javascript
const components = new OBC.Components();  
  
const worlds = components.get(OBC.Worlds);  
const world = worlds.create<  
  OBC.SimpleScene,  
  OBC.OrthoPerspectiveCamera,  
  OBF.PostproductionRenderer  
>();  
  
world.scene = new OBC.SimpleScene(components);  
world.scene.setup();  
world.scene.three.background = null;  
  
const container = document.getElementById("container")!;  
world.renderer = new OBF.PostproductionRenderer(components, container);  
world.camera = new OBC.OrthoPerspectiveCamera(components);  
await world.camera.controls.setLookAt(68, 23, -8.5, 21.5, -5.5, 23);  
  
components.init();  
  
const grids = components.get(OBC.Grids);  
const grid = grids.create(world);  
grid.config.color.set(0x666666);  

```

--------------------------------

### modelId (get)

Source: https://docs.thatopen.com/api/@thatopen/fragments/classes/FragmentsModel

Gets the ID of the model.

```APIDOC
## modelId (get)

### Description
Returns the ID of the model.

### Returns
`string`
```

--------------------------------

### SimpleGrid.material (get)

Source: https://docs.thatopen.com/api/@thatopen/components/classes/SimpleGrid

Gets the material of the grid.

```APIDOC
## SimpleGrid.material (get)

### Description
Gets the material of the grid.

### Accessor
`get material(): ShaderMaterial`

### Returns
`ShaderMaterial` - The material of the grid.
```

--------------------------------

### Initialize DrawingEditor and set up tools

Source: https://docs.thatopen.com/api/@thatopen/components-front/classes/DrawingEditor

Shows how to get the DrawingEditor instance, load fonts, set the active drawing and source, activate a tool, and handle click and Escape key events.

```typescript
const editor = components.get(DrawingEditor);  
await editor.fonts.load("https://thatopen.github.io/engine_components/resources/fonts/PlusJakartaSans-Medium.ttf");  
  
editor.activeDrawing = drawing;  
editor.setSource(world);  
  
editor.activeTool = LinearAnnotationsTool;  
const dimTool = editor.use(LinearAnnotationsTool);  
  
canvas.addEventListener("click", () => editor.step());  
document.addEventListener("keydown", (e) => { if (e.key === "Escape") editor.cancel(); });  
```

--------------------------------

### Set up a simple scene with camera and renderer

Source: https://docs.thatopen.com/Tutorials/UserInterface/OBC/ModelsList

Creates a world with a simple scene, camera, and renderer, and adds a viewport element. Also sets up a grid and initializes the components.

```typescript
const components = new OBC.Components();  
  
const worlds = components.get(OBC.Worlds);  
const world = worlds.create<  
  OBC.SimpleScene,  
  OBC.SimpleCamera,  
  OBC.SimpleRenderer  
>();  
world.name = "main";  
  
const sceneComponent = new OBC.SimpleScene(components);  
sceneComponent.setup();  
world.scene = sceneComponent;  
  
const viewport = document.createElement("bim-viewport");  
const rendererComponent = new OBC.SimpleRenderer(components, viewport);  
world.renderer = rendererComponent;  
  
const cameraComponent = new OBC.SimpleCamera(components);  
world.camera = cameraComponent;  
  
viewport.addEventListener("resize", () => {  
  rendererComponent.resize();  
  cameraComponent.updateAspect();  
});  
  
const viewerGrids = components.get(OBC.Grids);  
viewerGrids.create(world);  
  
components.init();  

```

--------------------------------

### comment (get)

Source: https://docs.thatopen.com/api/@thatopen/components/classes/Comment

Gets the comment text.

```APIDOC
## comment (get)

### Description
Gets the comment text.

### Returns
`string` - The comment text.
```

--------------------------------

### Initialize UI and set up World

Source: https://docs.thatopen.com/Tutorials/UserInterface/OBC/TopicsUI

Initializes the core UI library and sets up @thatopen/components with a World, scene, renderer, camera, and grid. This is the minimum setup to load models.

```javascript
BUI.Manager.init();  
  
const viewport = document.createElement("bim-viewport");  
  
const components = new OBC.Components();  
  
const worlds = components.get(OBC.Worlds);  
  
const world = worlds.create<  
  OBC.SimpleScene,  
  OBC.OrthoPerspectiveCamera,  
  OBC.SimpleRenderer  
>();  
const sceneComponent = new OBC.SimpleScene(components);  
sceneComponent.setup();  
world.scene = sceneComponent;  
  
const rendererComponent = new OBC.SimpleRenderer(components, viewport);  
world.renderer = rendererComponent;  
  
const cameraComponent = new OBC.OrthoPerspectiveCamera(components);  
world.camera = cameraComponent;  
cameraComponent.controls.setLookAt(10, 5.5, 5, -4, -1, -6.5);  
  
viewport.addEventListener("resize", () => {  
  rendererComponent.resize();  
  cameraComponent.updateAspect();  
});  
  
components.init();  
  
const grids = components.get(OBC.Grids);  
grids.create(world);  

```

--------------------------------

### box (get)

Source: https://docs.thatopen.com/api/@thatopen/fragments/classes/FragmentsModel

Gets the bounding box of the whole model.

```APIDOC
## box (get)

### Description
Returns the bounding box of the whole model.

### Returns
`Box3`
```

--------------------------------

### Create a 3D scene with a cube using Open BIM Components

Source: https://docs.thatopen.com/Tutorials/Components

This example shows how to set up a basic 3D scene with a cube using the Open BIM Components library. It requires familiarity with the Three.js API. The code creates a Components instance, a world with a SimpleScene, SimpleCamera, and SimpleRenderer, adds a cube mesh, and sets the camera controls.

```javascript
/* eslint import/no-extraneous-dependencies: 0 */  
  
import * as THREE from "three";  
import * as OBC from "../..";  
  
const container = document.getElementById("container")!;  
  
const components = new OBC.Components();  
  
const worlds = components.get(OBC.Worlds);  
  
const world = worlds.create<  
  OBC.SimpleScene,  
  OBC.SimpleCamera,  
  OBC.SimpleRenderer  
>();  
  
world.scene = new OBC.SimpleScene(components);  
world.renderer = new OBC.SimpleRenderer(components, container);  
world.camera = new OBC.SimpleCamera(components);  
  
components.init();  
  
const material = new THREE.MeshLambertMaterial({ color: "#6528D7" });  
const geometry = new THREE.BoxGeometry();  
const cube = new THREE.Mesh(geometry, material);  
world.scene.three.add(cube);  
  
world.scene.setup();  
  
world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);  

```

--------------------------------

### isBusy (get)

Source: https://docs.thatopen.com/api/@thatopen/fragments/classes/FragmentsModel

Gets whether the model is busy loading data.

```APIDOC
## isBusy (get)

### Description
Returns whether the model is busy loading data.

### Returns
`boolean`
```

--------------------------------

### Setting up a Simple Scene

Source: https://docs.thatopen.com/Tutorials/Components/Front/AreaMeasurement

Creates a basic Three.js scene with a world, renderer, and camera, and initializes the components.

```javascript
const components = new OBC.Components();  
  
const worlds = components.get(OBC.Worlds);  
const world = worlds.create<  
  OBC.SimpleScene,  
  OBC.OrthoPerspectiveCamera,  
  OBF.PostproductionRenderer  
>();  
  
world.scene = new OBC.SimpleScene(components);  
world.scene.setup();  
world.scene.three.background = null;  
  
const container = document.getElementById("container")!;  
world.renderer = new OBF.PostproductionRenderer(components, container);  
world.camera = new OBC.OrthoPerspectiveCamera(components);  
await world.camera.controls.setLookAt(68, 23, -8.5, 21.5, -5.5, 23);  
  
components.init();  

```

--------------------------------

### activeDrawing (get)

Source: https://docs.thatopen.com/api/@thatopen/components-front/classes/DrawingEditor

Gets the currently active drawing, or null if none has been set.

```APIDOC
## activeDrawing (get)

### Description
Returns the currently active drawing, or null if none has been set.

### Method
GET

### Endpoint
`editor.activeDrawing`

### Returns
- `null` | `TechnicalDrawing` - The active drawing or null.

```

--------------------------------

### Set up a simple 3D scene with camera, renderer, and stats

Source: https://docs.thatopen.com/Tutorials/Fragments/Fragments/IfcImporter/HelloWorldSchema

Creates a world with SimpleScene, SimpleCamera, and SimpleRenderer, initializes components, and adds a stats panel to monitor performance.

```typescript
const components = new OBC.Components();  
const worlds = components.get(OBC.Worlds);  
const container = document.getElementById("viewer") as HTMLDivElement;  
  
const world = worlds.create<  
  OBC.SimpleScene,  
  OBC.SimpleCamera,  
  OBC.SimpleRenderer  
>();  
  
world.scene = new OBC.SimpleScene(components);  
world.renderer = new OBC.SimpleRenderer(components, container);  
world.camera = new OBC.SimpleCamera(components);  
  
components.init();  
  
world.scene.setup();  
  
const stats = new Stats();  
stats.showPanel(2);  
document.body.append(stats.dom);  
stats.dom.style.left = "0px";  
stats.dom.style.zIndex = "unset";  
world.renderer.onBeforeUpdate.add(() => stats.begin());  
world.renderer.onAfterUpdate.add(() => stats.end());  
```

--------------------------------

### distanceRenderer (get)

Source: https://docs.thatopen.com/api/@thatopen/components/classes/ShadowedScene

Gets the renderer used to determine the farthest distance from the camera.

```APIDOC
## distanceRenderer (get)

### Description
Gets the renderer used to determine the farthest distance from the camera.

### Property
`distanceRenderer`: `DistanceRenderer`

### Accessors
- **get** `distanceRenderer()`: `DistanceRenderer` - Returns the distance renderer.

### Returns
`DistanceRenderer` - The distance renderer instance.
```

--------------------------------

### Set up a 3D world with scene, camera, and renderer

Source: https://docs.thatopen.com/Tutorials/UserInterface/OBC/Attributes

Creates a 3D world with a scene, camera, and renderer. It sets up a viewport, adds a grid, and initializes the components. The camera is positioned to look at the model.

```javascript
const components = new OBC.Components();  
  
const worlds = components.get(OBC.Worlds);  
const world = worlds.create<  
  OBC.SimpleScene,  
  OBC.SimpleCamera,  
  OBC.SimpleRenderer  
>();  
world.name = "main";  
  
const sceneComponent = new OBC.SimpleScene(components);  
sceneComponent.setup();  
world.scene = sceneComponent;  
  
const viewport = document.createElement("bim-viewport");  
const rendererComponent = new OBC.SimpleRenderer(components, viewport);  
world.renderer = rendererComponent;  
  
const cameraComponent = new OBC.SimpleCamera(components);  
world.camera = cameraComponent;  
await world.camera.controls.setLookAt(65, 19, -27, 12.6, -5, -1.4);  
  
viewport.addEventListener("resize", () => {  
  rendererComponent.resize();  
  cameraComponent.updateAspect();  
});  
  
const grids = components.get(OBC.Grids);  
grids.create(world);  
  
components.init();  

```

--------------------------------

### Set up the 3D scene with camera and renderer

Source: https://docs.thatopen.com/Tutorials/Components/Core/TechnicalDrawings/DrawingLayers

Creates a world with SimpleScene, SimpleCamera, and SimpleRenderer. Sets camera controls to a specific lookAt position and initializes components.

```javascript
const components = new OBC.Components();  
  
const worlds = components.get(OBC.Worlds);  
const world = worlds.create<  
  OBC.SimpleScene,  
  OBC.SimpleCamera,  
  OBC.SimpleRenderer  
>();  
  
world.scene = new OBC.SimpleScene(components);  
world.scene.setup();  
world.scene.three.background = null;  
  
const container = document.getElementById("container")!;  
world.renderer = new OBC.SimpleRenderer(components, container);  
world.camera = new OBC.SimpleCamera(components);  
await world.camera.controls.setLookAt(48.213, 33.495, -5.062, 13.117, -1.205, 22.223);  
  
components.init();  
```

--------------------------------

### value (get)

Source: https://docs.thatopen.com/api/@thatopen/components-front/classes/Angle

Gets the angle converted to the current units and rounded to rounding decimal places.

```APIDOC
## value (get)

### Description
Gets the angle converted to the current units and rounded to rounding decimal places.

### Accessor
`get value()`

### Returns
`number`
```

--------------------------------

### vertical property HTML example

Source: https://docs.thatopen.com/api/@thatopen/ui/classes/NumberInput

HTML example enabling the vertical orientation on a bim-number-input element.

```html
<bim-number-input vertical></bim-number-input>  
```

--------------------------------

### Set up the Geometry Engine

Source: https://docs.thatopen.com/Tutorials/Fragments/Fragments/FragmentsModels/SteelDetailing

Initializes the WebIFC API and creates a GeometryEngine instance for generating steel structure geometries parametrically.

```javascript
const api = new WEBIFC.IfcAPI();  
api.SetWasmPath("https://unpkg.com/web-ifc@0.0.77/", true);  
await api.Init();  
  
const geometryEngine = new FRAGS.GeometryEngine(api);  

```

--------------------------------

### suffix property JavaScript example

Source: https://docs.thatopen.com/api/@thatopen/ui/classes/NumberInput

JavaScript example setting the suffix property to '%' on a bim-number-input element.

```javascript
const numberInput = document.createElement('bim-number-input');  
numberInput.suffix = '%';  
document.body.appendChild(numberInput);  
```

--------------------------------

### suffix property HTML example

Source: https://docs.thatopen.com/api/@thatopen/ui/classes/NumberInput

HTML example setting the suffix attribute to '%' on a bim-number-input element.

```html
<bim-number-input suffix="%"></bim-number-input>  
```

--------------------------------

### slider property HTML example

Source: https://docs.thatopen.com/api/@thatopen/ui/classes/NumberInput

HTML example enabling the slider interface on a bim-number-input element.

```html
<bim-number-input slider></bim-number-input>  
```

--------------------------------

### Get and set value

Source: https://docs.thatopen.com/api/@thatopen/ui/classes/TextInput

Shows how to get the current value and set a new value on the TextInput component.

```javascript
// Get the current value  
const currentValue = textInput.value;  
  
// Set a new value  
textInput.value = "New Value";
```
Tokens:
Raw