Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-20 17:30:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

form layout component

Browse source
This commit is contained in:
nixa 2016-05-13 11:26:05 +03:00
parent fcd27874d2
commit 72b075b4f8
18 changed files with 208 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/app/pages/forms/components/layouts/components/basicForm/basicForm.component.ts Normal file
View file

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
@Component({
selector: 'basic-form',
template: require('./basicForm.html'),
})
export class BasicForm {
constructor() {
}
}

17
src/app/pages/forms/components/layouts/components/basicForm/basicForm.html Normal file
View file

@ -0,0 +1,17 @@
<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="checkbox">
<label class="custom-checkbox">
<input type="checkbox">
<span>Check me out</span>
</label>
</div>
<button type="submit" class="btn btn-danger">Submit</button>
</form>

1
src/app/pages/forms/components/layouts/components/basicForm/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './basicForm.component';

11
src/app/pages/forms/components/layouts/components/blockForm/blockForm.component.ts Normal file
View file

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
@Component({
selector: 'block-form',
template: require('./blockForm.html'),
})
export class BlockForm {
constructor() {
}
}

29
src/app/pages/forms/components/layouts/components/blockForm/blockForm.html Normal file
View file

@ -0,0 +1,29 @@
<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="inputFirstName">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>

1
src/app/pages/forms/components/layouts/components/blockForm/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './blockForm.component';

11
src/app/pages/forms/components/layouts/components/horizontalForm/horizontalForm.component.ts Normal file
View file

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
@Component({
selector: 'horizontal-form',
template: require('./horizontalForm.html'),
})
export class HorizontalForm {
constructor() {
}
}

29
src/app/pages/forms/components/layouts/components/horizontalForm/horizontalForm.html Normal file
View file

@ -0,0 +1,29 @@
<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="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox">
<span>Remember me</span>
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-warning">Sign in</button>
</div>
</div>
</form>

1
src/app/pages/forms/components/layouts/components/horizontalForm/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './horizontalForm.component';

1
src/app/pages/forms/components/layouts/components/inlineForm/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './inlineForm.component';

11
src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.component.ts Normal file
View file

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
@Component({
selector: 'inline-form',
template: require('./inlineForm.html'),
})
export class InlineForm {
constructor() {
}
}

15
src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.html Normal file
View file

@ -0,0 +1,15 @@
<form class="row form-inline">
<div class="form-group col-sm-3 col-xs-6">
<input type="text" class="form-control" id="exampleInputName2" placeholder="Name">
</div>
<div class="form-group col-sm-3 col-xs-6">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email">
</div>
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox">
<span>Remember me</span>
</label>
</div>
<button type="submit" class="btn btn-primary">Send invitation</button>
</form>

1
src/app/pages/forms/components/layouts/components/withoutLabelsForm/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './withoutLabelsForm.component';

11
src/app/pages/forms/components/layouts/components/withoutLabelsForm/withoutLabelsForm.component.ts Normal file
View file

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
@Component({
selector: 'without-labels-form',
template: require('./withoutLabelsForm.html'),
})
export class WithoutLabelsForm {
constructor() {
}
}

12
src/app/pages/forms/components/layouts/components/withoutLabelsForm/withoutLabelsForm.html Normal file
View file

@ -0,0 +1,12 @@
<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>

8
src/app/pages/forms/components/layouts/layouts.component.ts
View file

@ -2,10 +2,16 @@ import {Component, ViewEncapsulation} from '@angular/core';
import {BaCard} from '../../../../theme/components';
import {InlineForm} from './components/inlineForm';
import {BlockForm} from './components/blockForm';
import {HorizontalForm} from './components/horizontalForm';
import {BasicForm} from './components/basicForm';
import {WithoutLabelsForm} from './components/withoutLabelsForm';
@Component({
selector: 'layouts',
encapsulation: ViewEncapsulation.None,
directives: [BaCard],
directives: [BaCard, InlineForm, BlockForm, HorizontalForm, BasicForm, WithoutLabelsForm],
styles: [require('./layouts.scss')],
template: require('./layouts.html'),
})

39
src/app/pages/forms/components/layouts/layouts.html
View file

@ -1 +1,38 @@
hello
<div class="widgets">
<div class="row">
<div class="col-md-12">
<ba-card title="Inline Form" baCardClass="with-scroll">
<inline-form></inline-form>
</ba-card>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div>
<ba-card title="Basic Form" baCardClass="with-scroll">
<basic-form></basic-form>
</ba-card>
</div>
<div>
<ba-card title="Horizontal Form" baCardClass="with-scroll">
<horizontal-form></horizontal-form>
</ba-card>
</div>
</div>
<div class="col-md-6">
<div>
<ba-card title="Form Without Labels" baCardClass="with-scroll">
<without-labels-form></without-labels-form>
</ba-card>
</div>
<div>
<ba-card title="Block Form" baCardClass="with-scroll">
<block-form></block-form>
</ba-card>
</div>
</div>
</div>
</div>

2
src/app/theme/components/sidebar/sidebar.service.ts
View file

@ -95,7 +95,7 @@ export class SidebarService {
name: 'Inputs',
},
{
title: 'Form Elements',
title: 'Form Layouts',
name: 'Layouts',
},
]