Skip to content

acrodata/gui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

fabd4ea Β· Nov 29, 2024
Oct 17, 2024
Dec 10, 2023
Nov 29, 2024
Oct 9, 2023
May 6, 2024
Oct 11, 2023
Oct 11, 2023
Oct 11, 2023
Sep 8, 2023
Aug 23, 2024
Oct 16, 2024
Oct 11, 2023
Oct 18, 2024
Oct 11, 2023
Oct 18, 2024
Oct 16, 2024
Oct 17, 2024

Repository files navigation

GUI

npm license

cover

JSON powered GUI for configurable panels.

Quick links

Documentation | 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

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

Setup

Define a theme with Angular Material's theming system. More about theming.

@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.

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

Usage

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

@Component({
  selector: 'your-app',
  template: `<gui-form [config]="config" [model]="model" [form]="form" />`,
  standalone: true,
  imports: [GuiForm],
})
export class YourAppComponent {
  config: GuiFields = {
    title: {
      type: 'text',
      name: 'Title',
      default: 'I am title',
    },
  };
  model = {};
  form = new FormGroup({});
}

License

MIT