diff --git a/src/app/pages/editors/editors-routing.module.ts b/src/app/pages/editors/editors-routing.module.ts index 25350f27..3f9d6a85 100644 --- a/src/app/pages/editors/editors-routing.module.ts +++ b/src/app/pages/editors/editors-routing.module.ts @@ -5,19 +5,17 @@ import { NgxEditorsComponent } from './editors.component'; import { NgxTinyMCEComponent, NgxTinyMCEEditorComponent } from './tinyMCE.component'; import { NgxCKEditorComponent } from './ckeditor.component'; -const routes: Routes = [ - { - path: '', - component: NgxEditorsComponent, - children: [{ - path: 'tinymce', - component: NgxTinyMCEComponent, - }, { - path: 'ckeditor', - component: NgxCKEditorComponent, - }], - }, -]; +const routes: Routes = [{ + path: '', + component: NgxEditorsComponent, + children: [{ + path: 'tinymce', + component: NgxTinyMCEComponent, + }, { + path: 'ckeditor', + component: NgxCKEditorComponent, + }], +}]; @NgModule({ imports: [RouterModule.forChild(routes)], diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.html b/src/app/pages/forms/form-inputs/form-inputs.component.html new file mode 100644 index 00000000..f947fa5e --- /dev/null +++ b/src/app/pages/forms/form-inputs/form-inputs.component.html @@ -0,0 +1,314 @@ +
+
+ + Text inputs + +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+ + + +
+
+ + Disabled states + +
+
+
+ + +
+
+ + +
+
+ +
+ +
+
+ + + + + + Validation states + + +
+ + + + Example help text that remains unchanged. +
+
+ + + + Example help text that remains unchanged. +
+
+ + + + Example help text that remains unchanged. +
+ + + +
+
+
+
+ + + Form controls + + +
+
+ + + We'll never share your email with anyone else. +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line. +
+
+ Radio buttons +
+ +
+
+ +
+
+ +
+
+
+ +
+ +
+ + + +
+
+ + + Input groups + + +
+ @ + +
+
+
+ + @example.com +
+
+ +
+ https://example.com/users/ + +
+
+
+ $ + + .00 +
+
+
+ $ + 0.00 + +
+ + + + + + Rating + + +
+ + + + + + + Rate: {{ rate1 }} +
+
+ + + + + + + Rate: {{ rate2 }} +
+ + + + + + Selects + + +
+ + +
+ +
+ + +
+ + + +
+
diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.ts b/src/app/pages/forms/form-inputs/form-inputs.component.ts new file mode 100644 index 00000000..202240d7 --- /dev/null +++ b/src/app/pages/forms/form-inputs/form-inputs.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-form-inputs', + templateUrl: './form-inputs.component.html', +}) +export class NgxFormInputsComponent { + + rate1: number = 3; + rate2: number = 4; + + max1: number = 5; + max2: number = 10; + +} diff --git a/src/app/pages/forms/form-layouts/form-layouts.component.html b/src/app/pages/forms/form-layouts/form-layouts.component.html new file mode 100644 index 00000000..652772da --- /dev/null +++ b/src/app/pages/forms/form-layouts/form-layouts.component.html @@ -0,0 +1,217 @@ +
+
+ + + Inline form + + +
+ + + + +
+
@
+ +
+ +
+ +
+ + +
+ + + +
+
+
+
+ + Using the Grid + +
+
+ +
+ +
+
+
+ +
+ +
+
+
+ Radios +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+ +
+
+
+ + + + + + Form without labels + + +
+
+ +
+
+ +
+
+ +
+ +
+ + + +
+
+ + + Basic form + + +
+
+ + +
+
+ + +
+
+ +
+ +
+ + + + + + Block form + + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+ + + + +
+
+
+
+ + + Horizontal form + + +
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+ + + +
+
diff --git a/src/app/pages/forms/form-layouts/form-layouts.component.ts b/src/app/pages/forms/form-layouts/form-layouts.component.ts new file mode 100644 index 00000000..69fbb583 --- /dev/null +++ b/src/app/pages/forms/form-layouts/form-layouts.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-form-layouts', + templateUrl: './form-layouts.component.html', +}) +export class NgxFormLayoutsComponent { + +} diff --git a/src/app/pages/forms/forms-routing.module.ts b/src/app/pages/forms/forms-routing.module.ts new file mode 100644 index 00000000..89293644 --- /dev/null +++ b/src/app/pages/forms/forms-routing.module.ts @@ -0,0 +1,36 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { NgxFormsComponent } from './forms.component'; +import { NgxFormInputsComponent } from './form-inputs/form-inputs.component'; +import { NgxFormLayoutsComponent } from './form-layouts/form-layouts.component'; + +const routes: Routes = [{ + path: '', + component: NgxFormsComponent, + children: [{ + path: 'inputs', + component: NgxFormInputsComponent, + }, { + path: 'layouts', + component: NgxFormLayoutsComponent, + }], +}]; + +@NgModule({ + imports: [ + RouterModule.forChild(routes), + ], + exports: [ + RouterModule, + ], +}) +export class NgxFormsRoutingModule { + +} + +export const routedComponents = [ + NgxFormsComponent, + NgxFormInputsComponent, + NgxFormLayoutsComponent, +]; diff --git a/src/app/pages/forms/forms.component.ts b/src/app/pages/forms/forms.component.ts new file mode 100644 index 00000000..64eb5e47 --- /dev/null +++ b/src/app/pages/forms/forms.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-form-elements', + template: ` + + `, +}) +export class NgxFormsComponent { + +} diff --git a/src/app/pages/forms/forms.module.ts b/src/app/pages/forms/forms.module.ts new file mode 100644 index 00000000..8f2096a4 --- /dev/null +++ b/src/app/pages/forms/forms.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; + +import { NgxSharedModule } from '../../@shared/shared.module'; + +import { NgxFormsRoutingModule, routedComponents } from './forms-routing.module'; + +@NgModule({ + imports: [ + NgxSharedModule, + NgxFormsRoutingModule, + ], + declarations: [ + ...routedComponents, + ], +}) +export class NgxFormsModule { } diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts index e96c7b29..0a514020 100644 --- a/src/app/pages/pages-menu.ts +++ b/src/app/pages/pages-menu.ts @@ -42,7 +42,6 @@ export const menuItems: List = List([{ }, { title: 'Editors', icon: 'ion ion-edit', - link: '/pages/editors', children: List([{ title: 'TinyMCE', link: '/pages/editors/tinymce', @@ -50,4 +49,14 @@ export const menuItems: List = List([{ title: 'CKEditor', link: '/pages/editors/ckeditor', }]), +}, { + title: 'Forms', + icon: 'ion-compose', + children: List([{ + title: 'Form Inputs', + link: '/pages/forms/inputs', + }, { + title: 'Form Layouts', + link: '/pages/forms/layouts', + }]), }]); diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index d4688f72..5dd88766 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/src/app/pages/pages-routing.module.ts @@ -8,21 +8,36 @@ import { MapsComponent } from './maps/maps.component'; import { NgxChartsComponent } from './charts/charts.component'; import { NgxEditorsComponent } from './editors/editors.component'; -const routes: Routes = [ - { +const routes: Routes = [{ + path: '', + component: PagesComponent, + children: [{ + path: 'dashboard', + component: DashboardComponent, + }, { + path: 'ui-features', + loadChildren: './ui-features/ui-features.module#NgxUiFeaturesModule', + }, { + path: 'components', + component: ComponentsComponent, + }, { + path: 'maps', + component: MapsComponent, + }, { + path: 'charts', + component: NgxChartsComponent, + }, { + path: 'editors', + loadChildren: './editors/editors.module#NgxEditorsModule', + }, { + path: 'forms', + loadChildren: './forms/forms.module#NgxFormsModule', + }, { path: '', - component: PagesComponent, - children: [ - { path: 'dashboard', component: DashboardComponent }, - { path: 'ui-features', loadChildren: './ui-features/ui-features.module#NgxUiFeaturesModule' }, - { path: 'components', component: ComponentsComponent }, - { path: 'maps', component: MapsComponent }, - { path: 'charts', component: NgxChartsComponent }, - { path: 'editors', loadChildren: './editors/editors.module#NgxEditorsModule' }, - { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, - ], - }, -]; + redirectTo: 'dashboard', + pathMatch: 'full', + }], +}]; @NgModule({ imports: [RouterModule.forChild(routes)], diff --git a/src/app/pages/ui-features/ui-features-routing.module.ts b/src/app/pages/ui-features/ui-features-routing.module.ts index 88c7cb1b..2329e26b 100644 --- a/src/app/pages/ui-features/ui-features-routing.module.ts +++ b/src/app/pages/ui-features/ui-features-routing.module.ts @@ -15,25 +15,23 @@ import { NgxDropdownButtonsComponent } from './buttons/dropdown/dropdown.compone import { NgxLargeButtonsComponent } from './buttons/large/large.component'; import { NgxGroupButtonsComponent } from './buttons/group/group.component'; -const routes: Routes = [ - { - path: '', - component: NgxUiFeaturesComponent, - children: [{ - path: 'buttons', - component: NgxButtonsComponent, - }, { - path: 'grid', - component: NgxGridComponent, - }, { - path: 'icons', - component: NgxIconsComponent, - }, { - path: 'modals', - component: NgxModalsComponent, - }], - }, -]; +const routes: Routes = [{ + path: '', + component: NgxUiFeaturesComponent, + children: [{ + path: 'buttons', + component: NgxButtonsComponent, + }, { + path: 'grid', + component: NgxGridComponent, + }, { + path: 'icons', + component: NgxIconsComponent, + }, { + path: 'modals', + component: NgxModalsComponent, + }], +}]; @NgModule({ imports: [RouterModule.forChild(routes)],