Fluent GUI Library

Fluent GUI is a TypeScript library for creating fluent and dynamic user interfaces using Babylon.js GUI components.

Installation

To install the library, run:

npm install

Building the Project

To build the project, run:

npm run build

To watch for changes and rebuild automatically, run:

npm run watch

Usage

Here is an example of how to use the Fluent GUI library:

import {
  DisposeBag,
  FluentBehaviourState,
  FluentContainer,
  FluentRectangle,
  FluentStackPanel,
  FluentTextBlock,
  Ref,
} from "@abraini/fluent-gui"

// Create a dispose bag to manage event listeners
const disposeBag = new DisposeBag()

// Create a reference to a button
const buttonRef = new Ref<Button>()

// Create a state for the headline text
const headlineState = new FluentBehaviourState<string>("Headline")

// Create a container and add controls to it
new FluentContainer("root")
  .addControl(
    new FluentStackPanel("stack panel")
      .setHorizontal()
      .addControl(
        new FluentRectangle("border")
          .width("200px")
          .height("100px")
          .background("green")
          .onPointerClick((eventData, eventState) => {
            console.log("Rectangle clicked!")
          }, disposeBag)
          .onPointerEnter((eventData, eventState) => {
            console.log("Pointer entered!")
          }, disposeBag)
          .modifyControl((c) => (c.thickness = 5))
      )
      .addControl(
        new FluentTextBlock("tb", "Headline").bindState(headlineState, (c, v) =>
          c.setText(v)
        )
      )
  )
  .build()

// Update the headline state
headlineState.setValue("Headline 2")

// Dispose of all event listeners when done
disposeBag.dispose()

API

FluentContainer

A container for holding other controls.

FluentRectangle

A rectangle control with customizable properties.

FluentStackPanel

A stack panel for arranging controls vertically or horizontally.

FluentTextBlock

A text block for displaying text.

FluentBehaviourState

A state management class for binding state to controls.

DisposeBag

A class for managing event listeners and disposing of them when no longer needed.

License

This project is licensed under the MIT License. See the LICENSE file for details.