mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-09-22 05:50:48 +02:00
feat(forms): add a form layouts page (#5)
This commit is contained in:
Lex Zhukov
GitHub
parent
33a21d559b
commit
4a9685eada
4 changed files with 228 additions and 0 deletions
211
src/app/pages/forms/form-layouts/form-layouts.component.html
Normal file
211
src/app/pages/forms/form-layouts/form-layouts.component.html
Normal file
|
|
@ -0,0 +1,211 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Inline form
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<form class="form-inline">
|
||||
<label class="sr-only" for="inlineFormInput">Name</label>
|
||||
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe">
|
||||
|
||||
<label class="sr-only" for="inlineFormInputGroup">Username</label>
|
||||
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
|
||||
<div class="input-group-addon">@</div>
|
||||
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
|
||||
</div>
|
||||
|
||||
<div class="form-check mb-2 mr-sm-2 mb-sm-0">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</form>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>Using the Grid</nga-card-header>
|
||||
<nga-card-body>
|
||||
<form>
|
||||
<div class="form-group row">
|
||||
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<fieldset class="form-group row">
|
||||
<legend class="col-form-legend col-sm-2">Radios</legend>
|
||||
<div class="col-sm-10">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
|
||||
Option one is this and that—be sure to include why it's great
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
|
||||
Option two can be something else and selecting it will deselect option one
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check disabled">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
|
||||
Option three is disabled
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2">Checkbox</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox"> Check me out
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="offset-sm-2 col-sm-10">
|
||||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Form without labels
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Recipients">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Subject">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="form-control" placeholder="Message"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success">Send</button>
|
||||
</form>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Basic form
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputPassword1">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>
|
||||
Check me out
|
||||
<input type="checkbox"/>
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-danger">Submit</button>
|
||||
</form>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Block form
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="inputFirstName">First Name</label>
|
||||
<input type="text" class="form-control" id="inputFirstName" placeholder="First Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="inputLastName">Last Name</label>
|
||||
<input type="text" class="form-control" id="inputLastName" placeholder="Last Name">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="inputEmail">Email</label>
|
||||
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="inputWebsite">Website</label>
|
||||
<input type="text" class="form-control" id="inputWebsite" placeholder="Website">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Horizontal form
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="offset-sm-2 col-sm-10">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
Remember me
|
||||
<input type="checkbox"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="offset-sm-2 col-sm-10">
|
||||
<button type="submit" class="btn btn-warning">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-form-layouts',
|
||||
templateUrl: './form-layouts.component.html',
|
||||
})
|
||||
export class FormLayoutsComponent {
|
||||
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
|
|||
|
||||
import { FormsComponent } from './forms.component';
|
||||
import { FormInputsComponent } from './form-inputs/form-inputs.component';
|
||||
import { FormLayoutsComponent } from './form-layouts/form-layouts.component';
|
||||
|
||||
const routes: Routes = [{
|
||||
path: '',
|
||||
|
|
@ -10,6 +11,9 @@ const routes: Routes = [{
|
|||
children: [{
|
||||
path: 'inputs',
|
||||
component: FormInputsComponent,
|
||||
}, {
|
||||
path: 'layouts',
|
||||
component: FormLayoutsComponent,
|
||||
}],
|
||||
}];
|
||||
|
||||
|
|
@ -28,4 +32,5 @@ export class FormsRoutingModule {
|
|||
export const routedComponents = [
|
||||
FormsComponent,
|
||||
FormInputsComponent,
|
||||
FormLayoutsComponent,
|
||||
];
|
||||
|
|
|
|||
|
|
@ -89,6 +89,9 @@ export const menuItems: List<NgaMenuItem> = List([{
|
|||
children: List<NgaMenuItem>([{
|
||||
title: 'Form Inputs',
|
||||
link: '/pages/forms/inputs',
|
||||
}, {
|
||||
title: 'Form Layouts',
|
||||
link: '/pages/forms/layouts',
|
||||
}]),
|
||||
}, {
|
||||
title: 'Tables',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue