https://github.com/acrodata/gui

A lightweight GUI library for Angular
https://github.com/acrodata/gui

angular creative-coding gui typescript

Last synced: 3 months ago
JSON representation

A lightweight GUI library for Angular

• Host: GitHub
• URL: https://github.com/acrodata/gui
• Owner: acrodata
• License: mit
• Created: 2023-09-08T11:32:24.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-13T14:59:57.000Z (10 months ago)
• Last Synced: 2024-04-13T23:54:02.719Z (10 months ago)
• Topics: angular, creative-coding, gui, typescript
• Language: TypeScript
• Homepage: https://acrodata.github.io/gui/
• Size: 8.47 MB
• Stars: 63
• Watchers: 2
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - gui - JSON powered GUI for configurable panels. (Table of contents / Third Party Components)
• fucking-awesome-angular - gui - JSON powered GUI for configurable panels. (Table of contents / Third Party Components)

README

        
# GUI

[![npm](https://img.shields.io/npm/v/@acrodata/gui.svg)](https://www.npmjs.com/package/@acrodata/gui)

[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/acrodata/gui/blob/main/LICENSE)

![cover](https://github.com/acrodata/gui/assets/20625845/275f7f08-7971-4a4d-8fe8-ff8ead67beac)

JSON powered GUI for configurable panels.

#### Quick links

[Documentation](https://acrodata.github.io/gui/) |

[Playground](https://acrodata.github.io/gui/playground)

## Compatibility

| Angular  | @acrodata/gui | Theming |

| -------- | ------------- | ------- |

| >=18.0.0 | 2.x           | M2, M3  |

| >=17.0.0 | 1.x           | M2      |

| >=16.0.0 | 0.x           | M2      |

## Installation

```bash

npm install @angular/material @ng-matero/extensions @acrodata/gui --save

```

## Setup

Define a theme with Angular Material's theming system. [More about theming](https://material.angular.io/guide/theming).

```scss

@use '@angular/material' as mat;

@use '@acrodata/gui' as gui;

@include mat.core();

$theme: mat.define-theme(...);

@include gui.all-control-themes($theme);

```

🚨 If you use the Angular Material as default library and have included all component themes, there's no need to include the GUI themes anymore.

```diff

+ @include mat.all-component-themes($theme);

+ @include mtx.all-component-themes($theme);

- @include gui.all-control-themes($theme);

```

## Usage

```ts

import { Component } from '@angular/core';

import { GuiFields, GuiForm } from '@acrodata/gui';

@Component({

  selector: 'your-app',

  template: ``,

  standalone: true,

  imports: [GuiForm],

})

export class YourAppComponent {

  config: GuiFields = {

    title: {

      type: 'text',

      name: 'Title',

      default: 'I am title',

    },

  };

  model = {};

  form = new FormGroup({});

}

```

## License

MIT