forked from hamzahamidi/ajsf
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
04293f5
commit 5ae091f
Showing
4 changed files
with
195 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,67 @@ | ||
| # AjsfMaterialFramework | ||
| # @ajsf/material | ||
|
|
||
| This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.1.1. | ||
| ## Getting started | ||
|
|
||
| ```shell | ||
| npm install @asjf/material | ||
| ``` | ||
|
|
||
| With YARN, run the following: | ||
|
|
||
| ```shell | ||
| yarn add @asjf/material | ||
| ``` | ||
|
|
||
| Then import `MaterialDesignFrameworkModule` in your main application module if you want to use `material-angular` UI, like this: | ||
|
|
||
| ```javascript | ||
| import { BrowserModule } from '@angular/platform-browser'; | ||
| import { NgModule } from '@angular/core'; | ||
|
|
||
| import { MaterialDesignFrameworkModule } from '@ajsf/material'; | ||
|
|
||
| import { AppComponent } from './app.component'; | ||
|
|
||
| @NgModule({ | ||
| declarations: [ AppComponent ], | ||
| imports: [ | ||
| MaterialDesignFrameworkModule | ||
| ], | ||
| providers: [], | ||
| bootstrap: [ AppComponent ] | ||
| }) | ||
| export class AppModule { } | ||
| ``` | ||
|
|
||
| For basic use, after loading JsonSchemaFormModule as described above, to display a form in your Angular component, simply add the following to your component's template: | ||
|
|
||
| ```html | ||
| <json-schema-form | ||
| loadExternalAssets="true" | ||
| [schema]="yourJsonSchema" | ||
| framework="material-design" | ||
| (onSubmit)="yourOnSubmitFn($event)"> | ||
| </json-schema-form> | ||
| ``` | ||
|
|
||
| Where `schema` is a valid JSON schema object, and `onSubmit` calls a function to process the submitted JSON form data. If you don't already have your own schemas, you can find a bunch of samples to test with in the `demo/assets/example-schemas` folder, as described above. | ||
|
|
||
| `framework` is for the template you want to use, the default value is `no-framwork`. The possible values are: | ||
|
|
||
| * `material-design` for Material Design. | ||
| * `bootstrap-3` for Bootstrap 3. | ||
| * `bootstrap-4` for 'Bootstrap 4. | ||
| * `no-framework` for (plain HTML). | ||
|
|
||
| ## Code scaffolding | ||
|
|
||
| Run `ng generate component component-name --project @ajsf/material` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project @ajsf/material`. | ||
| > Note: Don't forget to add `--project @ajsf/material` or else it will be added to the default project in your `angular.json` file. | ||
| > Note: Don't forget to add `--project @ajsf/material` or else it will be added to the default project in your `angular.json` file. | ||
| ## Build | ||
|
|
||
| Run `ng build @ajsf/material` to build the project. The build artifacts will be stored in the `dist/` directory. | ||
|
|
||
| ## Publishing | ||
|
|
||
| After building your library with `ng build @ajsf/material`, go to the dist folder `cd dist/@ajsf/material` and run `npm publish`. | ||
|
|
||
| ## Running unit tests | ||
|
|
||
| Run `ng test @ajsf/material` to execute the unit tests via [Karma](https://karma-runner.github.io). | ||
|
|
||
| ## Further help | ||
|
|
||
| To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). |