### Install @thatopen/ui Core Library

Source: https://github.com/thatopen/engine_ui-components/blob/main/packages/core/README.md

Installs the core @thatopen/ui library using npm, which is required to use the UI components.

```Shell
npm i @thatopen/ui
```

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

### Install @thatopen/ui Core Library

Source: https://github.com/thatopen/engine_ui-components/blob/main/packages/obc/README.md

Installs the core `@thatopen/ui` package using npm, which is the first step to using the UIComponents library.

```shell
npm i @thatopen/ui
```

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

### Example HTML Structure with @thatopen/ui Components

Source: https://github.com/thatopen/engine_ui-components/blob/main/README.md

Demonstrates how to incorporate various `@thatopen/ui` components like `bim-grid`, `bim-toolbars-container`, `bim-toolbar`, `bim-button`, `bim-panel`, `bim-text-input`, `bim-number-input`, and `bim-dropdown` into an HTML file after the library has been initialized.

```html
<bim-grid id="grid">
  <bim-toolbars-container style="grid-area: header">
    <bim-toolbar label="Toolbar A" active>
      <bim-toolbar-section label="Build">
        <bim-button vertical label="My Button" icon="solar:bookmark-square-minimalistic-bold"></bim-button>
        <bim-toolbar-group>
          <bim-button icon="solar:album-bold"></bim-button>
          <bim-button icon="solar:archive-linear"></bim-button>
          <bim-button icon="solar:battery-charge-minimalistic-broken"></bim-button>
          <bim-button icon="solar:bluetooth-square-outline"></bim-button>
        </bim-toolbar-group>
      </bim-toolbar-section>
    </bim-toolbar>
    <bim-toolbar label="Toolbar B">
      <bim-toolbar-section label="Section">
        <bim-button vertical label="Button A" icon="bx:command"></bim-button>
        <bim-button vertical label="Button B" icon="bx:fast-forward-circle"></bim-button>
        <bim-button vertical label="Button C" icon="bx:support"></bim-button>
      </bim-toolbar-section>
    </bim-toolbar>
  </bim-toolbars-container>
  <div id="my-panel" style="grid-area: sidebar; background-color: var(--bim-ui_bg-base)">
    <bim-panel label="Panel A">
      <bim-panel-section label="Build">
        <bim-text-input label="Tool Name" value="BCFManager"></bim-text-input>
        <bim-input label="Position" vertical>
          <bim-number-input pref="X" min="1" value="10" max="50" suffix="m" slider></bim-number-input>
          <bim-number-input pref="X" min="1" value="20" max="50" suffix="m" slider></bim-number-input>
          <bim-number-input pref="X" min="1" value="30" max="50" suffix="m" slider></bim-number-input>
        </bim-input>
        <bim-dropdown label="IFC Entity">
          <bim-option label="IFCWALL"></bim-option>
          <bim-option label="IFCWINDOW"></bim-option>
          <bim-option label="IFCSLAB"></bim-option>
        </bim-dropdown>
      </bim-panel-section>
    </bim-panel>
  </div>
</bim-grid>
```

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

### Example @thatopen/ui HTML Structure

Source: https://github.com/thatopen/engine_ui-components/blob/main/packages/core/README.md

Demonstrates a basic layout using custom @thatopen/ui components like bim-grid, bim-toolbars-container, bim-toolbar, bim-button, bim-panel, bim-text-input, bim-number-input, and bim-dropdown.

```HTML
<bim-grid id="grid">
  <bim-toolbars-container style="grid-area: header">
    <bim-toolbar label="Toolbar A" active>
      <bim-toolbar-section label="Build">
        <bim-button vertical label="My Button" icon="solar:bookmark-square-minimalistic-bold"></bim-button>
        <bim-toolbar-group>
          <bim-button icon="solar:album-bold"></bim-button>
          <bim-button icon="solar:archive-linear"></bim-button>
          <bim-button icon="solar:battery-charge-minimalistic-broken"></bim-button>
          <bim-button icon="solar:bluetooth-square-outline"></bim-button>
        </bim-toolbar-group>
      </bim-toolbar-section>
    </bim-toolbar>
    <bim-toolbar label="Toolbar B">
      <bim-toolbar-section label="Section">
        <bim-button vertical label="Button A" icon="bx:command"></bim-button>
        <bim-button vertical label="Button B" icon="bx:fast-forward-circle"></bim-button>
        <bim-button vertical label="Button C" icon="bx:support"></bim-button>
      </bim-toolbar-section>
    </bim-toolbar>
  </bim-toolbars-container>
  <div id="my-panel" style="grid-area: sidebar; background-color: var(--bim-ui_bg-base)">
    <bim-panel label="Panel A">
      <bim-panel-section label="Build">
        <bim-text-input label="Tool Name" value="BCFManager"></bim-text-input>
        <bim-input label="Position" vertical>
          <bim-number-input pref="X" min="1" value="10" max="50" suffix="m" slider></bim-number-input>
          <bim-number-input pref="X" min="1" value="20" max="50" suffix="m" slider></bim-number-input>
          <bim-number-input pref="X" min="1" value="30" max="50" suffix="m" slider></bim-number-input>
        </bim-input>
        <bim-dropdown label="IFC Entity">
          <bim-option label="IFCWALL"></bim-option>
          <bim-option label="IFCWINDOW"></bim-option>
          <bim-option label="IFCSLAB"></bim-option>
        </bim-dropdown>
      </bim-panel-section>
    </bim-panel>
  </div>
</bim-grid>
```

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

### Install @thatopen/ui Library via npm

Source: https://github.com/thatopen/engine_ui-components/blob/main/README.md

Installs the core `@thatopen/ui` library using the npm package manager. This is the first step required to use the UI components in your project.

```shell
npm i @thatopen/ui
```

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

### Example HTML Structure with @thatopen/ui Components

Source: https://github.com/thatopen/engine_ui-components/blob/main/packages/obc/README.md

Demonstrates how to use the registered UI components in an HTML file to build a layout with toolbars, panels, buttons, inputs, and dropdowns. Custom elements like `<bim-grid>`, `<bim-toolbar>`, and `<bim-panel>` are used.

```html
<bim-grid id="grid">
  <bim-toolbars-container style="grid-area: header">
    <bim-toolbar label="Toolbar A" active>
      <bim-toolbar-section label="Build">
        <bim-button vertical label="My Button" icon="solar:bookmark-square-minimalistic-bold"></bim-button>
        <bim-toolbar-group>
          <bim-button icon="solar:album-bold"></bim-button>
          <bim-button icon="solar:archive-linear"></bim-button>
          <bim-button icon="solar:battery-charge-minimalistic-broken"></bim-button>
          <bim-button icon="solar:bluetooth-square-outline"></bim-button>
        </bim-toolbar-group>
      </bim-toolbar-section>
    </bim-toolbar>
    <bim-toolbar label="Toolbar B">
      <bim-toolbar-section label="Section">
        <bim-button vertical label="Button A" icon="bx:command"></bim-button>
        <bim-button vertical label="Button B" icon="bx:fast-forward-circle"></bim-button>
        <bim-button vertical label="Button C" icon="bx:support"></bim-button>
      </bim-toolbar-section>
    </bim-toolbar>
  </bim-toolbars-container>
  <div id="my-panel" style="grid-area: sidebar; background-color: var(--bim-ui_bg-base)">
    <bim-panel label="Panel A">
      <bim-panel-section label="Build">
        <bim-text-input label="Tool Name" value="BCFManager"></bim-text-input>
        <bim-input label="Position" vertical>
          <bim-number-input pref="X" min="1" value="10" max="50" suffix="m" slider></bim-number-input>
          <bim-number-input pref="X" min="1" value="20" max="50" suffix="m" slider></bim-number-input>
          <bim-number-input pref="X" min="1" value="30" max="50" suffix="m" slider></bim-number-input>
        </bim-input>
        <bim-dropdown label="IFC Entity">
          <bim-option label="IFCWALL"></bim-option>
          <bim-option label="IFCWINDOW"></bim-option>
          <bim-option label="IFCSLAB"></bim-option>
        </bim-dropdown>
      </bim-panel-section>
    </bim-panel>
  </div>
</bim-grid>
```

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

### Initialize @thatopen/ui UIManager

Source: https://github.com/thatopen/engine_ui-components/blob/main/packages/obc/README.md

Imports the `UIManager` and calls its `init()` method to register the UI components, making them available for use in HTML. This should be done in your main JavaScript or TypeScript entry file.

```ts
import { UIManager } from "@thatopen/ui"

UIManager.init()
```

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

### Initialize @thatopen/ui in TypeScript

Source: https://github.com/thatopen/engine_ui-components/blob/main/packages/core/README.md

Imports the UIManager and calls its init method to register the custom UI components, making them available for use in HTML.

```TypeScript
import { UIManager } from "@thatopen/ui"

UIManager.init()
```

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

### Initialize @thatopen/ui UIManager in TypeScript

Source: https://github.com/thatopen/engine_ui-components/blob/main/README.md

Imports the `UIManager` from the `@thatopen/ui` library and calls its `init()` method. This crucial step registers all the custom UI components, making them available for use in your HTML.

```ts
import { UIManager } from "@thatopen/ui"

UIManager.init()
```

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

### Configure @thatopen/ui Grid Layout in JavaScript

Source: https://github.com/thatopen/engine_ui-components/blob/main/packages/obc/README.md

Retrieves the `<bim-grid>` element by its ID and assigns a layout configuration object to its `layouts` property, then applies a specific layout using `setLayout()`. This defines the grid areas and column/row sizing.

```js
const grid = document.getElementById("grid")

grid.layouts = {
  main: `
    "header header" auto
    "sidebar content" 1fr
    "sidebar content" 1fr
    / auto 1fr
  `
}

grid.setLayout("main")
```

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

### Using a Web Component Tag in HTML

Source: https://github.com/thatopen/engine_ui-components/blob/main/README.md

This snippet demonstrates how a custom Web Component, represented by a unique tag like `<unknown-tag />`, appears when used directly within an HTML document. It illustrates the framework-agnostic nature of Web Components.

```html
<div>
  <unknown-tag />
</div>
```

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

### Using a Web Component in HTML

Source: https://github.com/thatopen/engine_ui-components/blob/main/packages/obc/README.md

This HTML snippet demonstrates how a custom Web Component, represented by a custom tag like `<unknown-tag>`, can be directly included and used within a standard HTML document, similar to built-in HTML elements.

```HTML
<div>
  <unknown-tag />
</div>
```

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

### Using a Custom Web Component Tag in HTML

Source: https://github.com/thatopen/engine_ui-components/blob/main/packages/core/README.md

This HTML snippet demonstrates how a custom HTML tag, representing a Web Component, can be used directly within an HTML document, illustrating the framework-agnostic nature of Web Components.

```HTML
<div>
  <unknown-tag />
</div>
```

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

### Configure bim-grid Layout in JavaScript

Source: https://github.com/thatopen/engine_ui-components/blob/main/README.md

Selects the `bim-grid` element from the DOM and defines a CSS grid layout structure using a template literal string. It then applies this defined layout to the grid element.

```js
const grid = document.getElementById("grid")

grid.layouts = {
  main: `
    "header header" auto
    "sidebar content" 1fr
    "sidebar content" 1fr
    / auto 1fr
  `
}

grid.setLayout("main")
```

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

### Configure @thatopen/ui Grid Layout in JavaScript

Source: https://github.com/thatopen/engine_ui-components/blob/main/packages/core/README.md

Retrieves the bim-grid element by its ID and sets its layout property using a CSS Grid template literal string, then applies the layout.

```JavaScript
const grid = document.getElementById("grid")

grid.layouts = {
  main: `
    "header header" auto
    "sidebar content" 1fr
    "sidebar content" 1fr
    / auto 1fr
  `
}

grid.setLayout("main")
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.