ng-fancy-gui v1.2.2
Ng Fancy GUI
This package contains components, for creating userinterfaces in a Angular app.
You can play with the components here
Installation
npm i ng-fancy-guiAdd to app module or any other Angular module.
// src/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {NgFancyGUIModule} from 'ng-fancy-gui'
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgFancyGUIModule //<-- added here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Import styles
// src/styles.scss
@import '~ng-fancy-gui/scss/style.scss';If you want to prevent your browser from negative scrolling add the following CSS to your global stylesheet. This is recommended if you are using the image input or the imagecropper (as overlay).
html {
overflow: hidden;
}
body {
top: 0;
left: 0;
position: fixed;
height: 100%;
width: 100%;
overflow: auto;
}Important: The scroll event is now fired on the body object, not the window object.
Customize styles
// customize to your needs
$inputElementsColor: rgb(25, 123, 204);
$border-color: gray;
$font-color: black;
$invalid: red;
// must be importet after variable definitions
@import '~ng-fancy-gui/scss/style.scss';Components
Keywordpicker
Usage
Inputs
| input | description |
|---|---|
| config: KeywordPickerConfig | Defines how the keywordpicker behaves |
| source: string[] | KeyValue[] | Array with autocompleteitems. This input is only used if datasource is set to Input and autocompleteMode is set to true. |
| invalid: boolean | Changes the appearance of the inputelement to a invalid state if it is set to true |
| placeholder: string | Placeholder of the keywordpicker |
<fg-keyword-picker
[placeholder]="null"
[config]="null"
[source]="null"
[invalid]="false">
</fg-keyword-picker>Configurtaion
You can configure the behavior of the keywordpicker by defining a keywordpickerconfig object and passing it into the keywordpicker component.
The constructor of the keywordpickerconfig class takes the following parameters:
| parameter | description |
|---|---|
| keywordType: KeywordType | Defines the type of a keyword item |
| autocompleteMode: boolean | Defines if a autocomplete dropdown is shown. Setting this value to true also means, that you can not pick a keyword if it does not exist in the autocomplete dropdown. |
| autoCompleteSource: AutoCompleteSource | Defines how the autocomplete items are retrived |
| dataMapperFunction: (x: any | any[])=> KeyValue[] | string[] | This value only takes effect if autocompleteSourceMode is set to true. Pass in a function, which maps the autoCompleteSource to a array matching the type selected at the keywordType parameter (x represents the API response). |
| autocompleteSourceUrl: string | Only takes effect if autoCompleteMode is set to true and autocompleteSource is set to ApiEndpoint |
Example autocomplete with the source API:
public keywordPickerConfig: KeywordPickerConfig = new KeywordPickerConfig(
KeywordType.KeyValue,
true,
AutCompleteSource.ApiEndpoint,
(x: any[]) => {
return x.map<KeyValue>(x => {
return {
key: x.id,
value: x.name
}
});
},
"https://api.thecatapi.com/v1/breeds"
);Reactive forms
Write value
value: string[] | KeywordSourceItem[] depending on the keywordtype parameter
Value
value: string[] | KeywordSourceItem[] depending on the keywordtype parameter
Imageinput
<fg-input-image [width]="750" [height]="500" [invalid]="false"></fg-input-image>Reactive forms
Write value
value: string (imagepath)
Value
value: string (base64 encoded image)
Rangeinput
<fg-input-range [value]="2" [min]="0" [max]="100"></fg-input-range>Reactive forms
Write value
value: number
Value
value: number
Betweeninput
<fg-input-between [min]="0" [max]="100"></fg-input-between>Reactive forms
Write value
value
Imagecropper
Usage
Inputs
| input | description |
|---|---|
| config: ImageCropperConfig | Defines how the imagecropper behaves |
| imageSrc: string | Path to the image wich should be cropped |
Outputs
| output | description |
|---|---|
| cancle | Is emitted when user clicks on the cancle button of the imagecropper |
| continue: string(base64 encoded image) | Is emitted when user clicks on the continue button of the imagecropper |
<fg-image-cropper
[config]="null"
(cancle)="null"
(continue)="null"
[imageSrc]="null">
</fg-image-cropper>Configuration
You can configure the behavior of the keywordpicker by defining a imageCropperConfigObject and passing it into the keywordpicker component.
The constructor of the keywordpickerConfigClass takes the following parameters:
| parameter | description |
|---|---|
| width: number | Defines the width of the outputimage |
| height: number | Defines the height of the outputimage |
| rasterlevels: number[] | Defines the levels of rasters |
Example:
public cropperConfig: ImageCropperConfig = new ImageCropperConfig(
500,
600,
[4, 8, 16]
);Sliderinput
Usage
Inputs
| input | description |
|---|---|
| iconPath: string | Path to a image |
| additive: string | String which will be added after the displayed value |
Outputs
| output | description |
|---|---|
| change: number | Emmits the new value |
<fg-slider (change)="null" [iconPath]="null" [additive]="null"></fg-slider>Reactive forms
Currently not supported
Infinite Slider
Usage
Outputs
| output | description |
|---|---|
| change: number | Emmits -1 if slided right, emmits 1 if slided left |
<fg-slider-infinite (change)="null"></fg-slider-infinite>Reactive forms
Currently not supported