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

feat(ba-checkbox): create checkbox component

Browse source
This commit is contained in:
tibing 2016-07-07 15:25:08 +03:00
parent f3f3f43805
commit 7218804440
10 changed files with 142 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,11 +1,14 @@
import {Component} from '@angular/core';
import {BaCheckbox} from '../../../../../../theme/components';
@Component({
selector: 'checkbox-inputs',
template: require('./checkboxInputs.html'),
directives: [BaCheckbox]
})
export class CheckboxInputs {
constructor() {
}
}

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

@ -1,22 +1,13 @@
<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>
<ba-checkbox [(ngModel)]="value1" [label]="'Check 1'" [value]="option1" id="inlineCheckbox01"></ba-checkbox>
</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>
<ba-checkbox [(ngModel)]="value2" [label]="'Check 2'" [value]="option2" id="inlineCheckbox02"></ba-checkbox>
</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>
<ba-checkbox [(ngModel)]="value3" [label]="'Check 3'" [value]="option3" id="inlineCheckbox03"></ba-checkbox>
</div>
</div>
<div class="input-demo radio-demo row">
@ -42,10 +33,7 @@
</div>
<div>
<div class="checkbox disabled">
<label class="custom-checkbox nowrap">
<input type="checkbox" value="" disabled>
<span>Checkbox is disabled</span>
</label>
<ba-checkbox [label]="'Disabled checkbox'" [disabled]="true"></ba-checkbox>
</div>
<div class="radio disabled">
<label class="custom-radio nowrap">

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

@ -1,7 +1,9 @@
import {Component} from '@angular/core';
import {BaCheckbox} from '../../../../../../theme/components/baCheckbox';
@Component({
selector: 'validation-inputs',
directives: [BaCheckbox],
template: require('./validationInputs.html'),
})
export class ValidationInputs {

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

@ -10,31 +10,9 @@
<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>
<ba-checkbox [(ngModel)]="option1" [baCheckboxClass]="'checkbox has-success'" [label]="'Checkbox with success'" [value]="'option1'" id="checkboxSuccess"></ba-checkbox>
<ba-checkbox [(ngModel)]="option2" [baCheckboxClass]="'checkbox has-warning'" [label]="'Checkbox with warning'" [value]="'option2'" id="checkboxWarning"></ba-checkbox>
<ba-checkbox [(ngModel)]="option3" [baCheckboxClass]="'checkbox has-error'" [label]="'Checkbox with error'" [value]="'option3'" id="checkboxError"></ba-checkbox>
<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">

31
src/app/theme/components/baCheckbox/baCheckbox.component.ts Normal file
View file

@ -0,0 +1,31 @@
import {Component, Provider, forwardRef, Input} from "@angular/core";
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/common";
const BA_CHECKBOX_CONTROL_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {
useExisting: forwardRef(() => BaCheckbox),
multi: true
});
@Component({
selector: 'ba-checkbox',
template: require('./baCheckbox.html'),
providers: [BA_CHECKBOX_CONTROL_VALUE_ACCESSOR]
})
export class BaCheckbox implements ControlValueAccessor {
@Input() disabled:boolean;
@Input() label:string;
@Input() value:string;
@Input() baCheckboxClass:string;
public state: boolean;
onChange(value: any): void {}
onTouch(value: any): void {}
writeValue(value: any): void {
this.state = value;
}
registerOnChange(fn: any): void { this.onChange = fn; }
registerOnTouched(fn: any): void { this.onTouch = fn; }
}

8
src/app/theme/components/baCheckbox/baCheckbox.html Normal file
View file

@ -0,0 +1,8 @@
<div class="{{baCheckboxClass}}">
<label class="checkbox-inline custom-checkbox nowrap">
<input type="checkbox" [checked]=state
(change)="onChange($event.target.checked)"
[disabled]="disabled" [value]="value">
<span>{{label}}</span>
</label>
</div>

78
src/app/theme/components/baCheckbox/baCheckbox.scss Normal file
View file

@ -0,0 +1,78 @@
label.custom-checkbox > span {
display: block;
margin-top: -13px;
margin-right: 10px;
}
label.custom-checkbox {
padding-right: 0;
padding-left: 0;
margin-bottom: 0;
& > input {
height: 0;
z-index: -100 !important;
opacity: 0;
position: absolute;
&:checked {
& + span {
&:before {
content: "\f00c";
font-weight: $font-light;
}
}
}
&:disabled {
& + span {
color: $disabled;
cursor: not-allowed;
&:before {
border-color: $disabled !important;
cursor: not-allowed;
}
}
}
}
& > span {
position: relative;
display: inline-block;
margin: 0;
line-height: 16px;
font-weight: $font-light;
cursor: pointer;
padding-left: 22px;
width: 100%;
&:before {
cursor: pointer;
font-family: fontAwesome;
font-weight: $font-light;
font-size: 12px;
color: $content-text;
content: "\a0";
background-color: transparent;
border: 1px solid $border;
border-radius: 0;
display: inline-block;
text-align: center;
height: 16px;
line-height: 14px;
min-width: 16px;
margin-right: 6px;
position: relative;
top: 0;
margin-left: -22px;
float: left;
}
&:hover {
&:before {
border-color: $primary-bg;
}
}
}
}
.form-horizontal {
.checkbox, .checkbox-inline{
padding-top: 0;
}
}

1
src/app/theme/components/baCheckbox/index.ts Normal file
View file

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

1
src/app/theme/components/index.ts
View file

@ -7,3 +7,4 @@ export * from './baAmChart';
export * from './baChartistChart';
export * from './baBackTop';
export * from './baFullCalendar';
export * from './baCheckbox';

84
src/app/theme/sass/_form.scss
View file

@ -1,3 +1,5 @@
@import "../components/baCheckbox/baCheckbox";
.label {
border-radius: 0;
}
@ -75,12 +77,6 @@ textarea.form-control {
button[type="submit"] {
margin-left: 12px;
}
label.custom-checkbox > span {
display: block;
margin-top: -13px;
margin-right: 10px;
}
}
@mixin setSwitchBorder($color) {
@ -182,71 +178,6 @@ textarea.form-control {
}
}
label.custom-checkbox {
padding-right: 0;
padding-left: 0;
margin-bottom: 0;
& > input {
height: 0;
z-index: -100 !important;
opacity: 0;
position: absolute;
&:checked {
& + span {
&:before {
content: "\f00c";
font-weight: $font-light;
}
}
}
&:disabled {
& + span {
color: $disabled;
cursor: not-allowed;
&:before {
border-color: $disabled !important;
cursor: not-allowed;
}
}
}
}
& > span {
position: relative;
display: inline-block;
margin: 0;
line-height: 16px;
font-weight: $font-light;
cursor: pointer;
padding-left: 22px;
width: 100%;
&:before {
cursor: pointer;
font-family: fontAwesome;
font-weight: $font-light;
font-size: 12px;
color: $content-text;
content: "\a0";
background-color: transparent;
border: 1px solid $border;
border-radius: 0;
display: inline-block;
text-align: center;
height: 16px;
line-height: 14px;
min-width: 16px;
margin-right: 6px;
position: relative;
top: 0;
margin-left: -22px;
float: left;
}
&:hover {
&:before {
border-color: $primary-bg;
}
}
}
}
.nowrap {
white-space: nowrap;
@ -307,7 +238,7 @@ label.custom-input-danger {
}
.form-horizontal {
.radio, .checkbox, .radio-inline, .checkbox-inline {
.radio, .radio-inline {
padding-top: 0;
}
}
@ -327,7 +258,6 @@ label.custom-input-danger {
border-color: $focusColor;
}
}
label.custom-checkbox {
color: $color;
& > span {
@ -582,3 +512,11 @@ label.custom-input-danger {
.sub-little-text {
font-size: 12px;
}
.rating {
font-size: 20px;
}
rating-inputs span {
vertical-align: middle;
}