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

form inputs base components

Browse source
This commit is contained in:
nixa 2016-05-13 12:04:38 +03:00
parent cdef950586
commit a74300c6f1
14 changed files with 256 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.component.ts Normal file
View file

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
@Component({
selector: 'checkbox-inputs',
template: require('./checkboxInputs.html'),
})
export class CheckboxInputs {
constructor() {
}
}

56
src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.html Normal file
View file

@ -0,0 +1,56 @@
<div class="checkbox-demo-row">
<div class="input-demo checkbox-demo row">
<div class="col-md-4">
<label class="checkbox-inline custom-checkbox nowrap">
<input type="checkbox" id="inlineCheckbox01" value="option1">
<span>Check 1</span>
</label>
</div>
<div class="col-md-4">
<label class="checkbox-inline custom-checkbox nowrap">
<input type="checkbox" id="inlineCheckbox02" value="option2">
<span>Check 2</span>
</label>
</div>
<div class="col-md-4">
<label class="checkbox-inline custom-checkbox nowrap">
<input type="checkbox" id="inlineCheckbox03" value="option3">
<span>Check 3</span>
</label>
</div>
</div>
<div class="input-demo radio-demo row">
<div class="col-md-4">
<label class="radio-inline custom-radio nowrap">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<span>Option 1</span>
</label>
</div>
<div class="col-md-4">
<label class="radio-inline custom-radio nowrap">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<span>Option 2</span>
</label>
</div>
<div class="col-md-4">
<label class="radio-inline custom-radio nowrap">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<span>Option3</span>
</label>
</div>
</div>
</div>
<div>
<div class="checkbox disabled">
<label class="custom-checkbox nowrap">
<input type="checkbox" value="" disabled>
<span>Checkbox is disabled</span>
</label>
</div>
<div class="radio disabled">
<label class="custom-radio nowrap">
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
<span>Disabled option</span>
</label>
</div>
</div>

1
src/app/pages/forms/components/inputs/components/checkboxInputs/index.ts Normal file
View file

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

11
src/app/pages/forms/components/inputs/components/groupInputs/groupInputs.component.ts Normal file
View file

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
@Component({
selector: 'group-inputs',
template: require('./groupInputs.html'),
})
export class GroupInputs {
constructor() {
}
}

22
src/app/pages/forms/components/inputs/components/groupInputs/groupInputs.html Normal file
View file

@ -0,0 +1,22 @@
<div class="input-group">
<span class="input-group-addon input-group-addon-primary addon-left" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon input-group-addon-warning addon-right" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon addon-left input-group-addon-success">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon addon-right input-group-addon-success">.00</span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-danger" type="button">Go!</button>
</span>
</div>

1
src/app/pages/forms/components/inputs/components/groupInputs/index.ts Normal file
View file

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

1
src/app/pages/forms/components/inputs/components/standardInputs/index.ts Normal file
View file

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

11
src/app/pages/forms/components/inputs/components/standardInputs/standardInputs.component.ts Normal file
View file

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
@Component({
selector: 'standard-inputs',
template: require('./standardInputs.html'),
})
export class StandardInputs {
constructor() {
}
}

35
src/app/pages/forms/components/inputs/components/standardInputs/standardInputs.html Normal file
View file

@ -0,0 +1,35 @@
<form>
<div class="form-group">
<label for="input01">Text</label>
<input type="text" class="form-control" id="input01" placeholder="Text">
</div>
<div class="form-group">
<label for="input02">Password</label>
<input type="password" class="form-control" id="input02" placeholder="Password">
</div>
<div class="form-group">
<label for="input03">Rounded Corners</label>
<input type="text" class="form-control form-control-rounded" id="input03" placeholder="Rounded Corners">
</div>
<div class="form-group">
<label for="input04">With help</label>
<input type="text" class="form-control" id="input04" placeholder="With help">
<span class="help-block sub-little-text">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group">
<label for="input05">Disabled Input</label>
<input type="text" class="form-control" id="input05" placeholder="Disabled Input" disabled>
</div>
<div class="form-group">
<label for="textarea01">Textarea</label>
<textarea placeholder="Default Input" class="form-control" id="textarea01"></textarea>
</div>
<div class="form-group">
<input type="text" class="form-control input-sm" id="input2" placeholder="Small Input">
</div>
<div class="form-group">
<input type="text" class="form-control input-lg" id="input4" placeholder="Large Input">
</div>
</form>

1
src/app/pages/forms/components/inputs/components/validationInputs/index.ts Normal file
View file

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

11
src/app/pages/forms/components/inputs/components/validationInputs/validationInputs.component.ts Normal file
View file

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
@Component({
selector: 'validation-inputs',
template: require('./validationInputs.html'),
})
export class ValidationInputs {
constructor() {
}
}

64
src/app/pages/forms/components/inputs/components/validationInputs/validationInputs.html Normal file
View file

@ -0,0 +1,64 @@
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox" id="checkboxSuccess" value="option1">
<span>Checkbox with success</span>
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox" id="checkboxWarning" value="option1">
<span>Checkbox with warning</span>
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox" id="checkboxError" value="option1">
<span>Checkbox with error</span>
</label>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<i class="ion-checkmark-circled form-control-feedback" aria-hidden="true"></i>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<i class="ion-alert-circled form-control-feedback" aria-hidden="true"></i>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<i class="ion-android-cancel form-control-feedback" aria-hidden="true"></i>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon addon-left">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<i class="ion-checkmark-circled form-control-feedback" aria-hidden="true"></i>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

7
src/app/pages/forms/components/inputs/inputs.component.ts
View file

@ -2,10 +2,15 @@ import {Component, ViewEncapsulation} from '@angular/core';
import {BaCard} from '../../../../theme/components';
import {StandardInputs} from './components/standardInputs';
import {ValidationInputs} from './components/validationInputs';
import {GroupInputs} from './components/groupInputs';
import {CheckboxInputs} from './components/checkboxInputs';
@Component({
selector: 'inputs',
encapsulation: ViewEncapsulation.None,
directives: [BaCard],
directives: [BaCard, StandardInputs, ValidationInputs, GroupInputs, CheckboxInputs],
styles: [require('./inputs.scss')],
template: require('./inputs.html'),
})

26
src/app/pages/forms/components/inputs/inputs.html
View file

@ -1 +1,25 @@
hello
<div class="widgets">
<div class="row">
<div class="col-md-6">
<ba-card title="Standard Fields" baCardClass="with-scroll">
<standard-inputs></standard-inputs>
</ba-card>
<ba-card title="Input Groups" baCardClass="with-scroll">
<group-inputs></group-inputs>
</ba-card>
</div>
<div class="col-md-6">
<ba-card title="Validation States" baCardClass="with-scroll">
<validation-inputs></validation-inputs>
</ba-card>
<ba-card title="Checkboxes & Radios" baCardClass="with-scroll">
<checkbox-inputs></checkbox-inputs>
</ba-card>
</div>
</div>
</div>