mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-24 14:58:36 +08:00
chore(build): rename ionic directory to src and update all references in the build process.
This commit is contained in:
Josh Thomas
125
src/components/checkbox/checkbox.ios.scss
Normal file
125
src/components/checkbox/checkbox.ios.scss
Normal file
@ -0,0 +1,125 @@
|
||||
@import "../../globals.ios";
|
||||
|
||||
// iOS Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
$checkbox-ios-background-color-off: $list-ios-background-color !default;
|
||||
$checkbox-ios-background-color-on: color($colors-ios, primary) !default;
|
||||
|
||||
$checkbox-ios-icon-size: 21px !default;
|
||||
$checkbox-ios-icon-border-color-off: $list-ios-border-color !default;
|
||||
$checkbox-ios-icon-border-color-on: $checkbox-ios-background-color-on !default;
|
||||
$checkbox-ios-icon-border-width: 1px !default;
|
||||
$checkbox-ios-icon-border-style: solid !default;
|
||||
$checkbox-ios-icon-border-radius: 50% !default;
|
||||
|
||||
$checkbox-ios-icon-checkmark-width: 1px !default;
|
||||
$checkbox-ios-icon-checkmark-style: solid !default;
|
||||
$checkbox-ios-icon-checkmark-color: color-contrast($colors-ios, $checkbox-ios-background-color-on) !default;
|
||||
|
||||
$checkbox-ios-disabled-opacity: .3 !default;
|
||||
|
||||
$checkbox-ios-item-left-margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px !default;
|
||||
$checkbox-ios-item-right-margin: 10px 8px 9px 0 !default;
|
||||
|
||||
ion-checkbox {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
// iOS Checkbox Outer Circle: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-icon {
|
||||
position: relative;
|
||||
|
||||
width: $checkbox-ios-icon-size;
|
||||
height: $checkbox-ios-icon-size;
|
||||
|
||||
border-width: $checkbox-ios-icon-border-width;
|
||||
border-style: $checkbox-ios-icon-border-style;
|
||||
border-radius: $checkbox-ios-icon-border-radius;
|
||||
border-color: $checkbox-ios-icon-border-color-off;
|
||||
background-color: $checkbox-ios-background-color-off;
|
||||
}
|
||||
|
||||
|
||||
// iOS Checkbox Outer Circle: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-checked {
|
||||
border-color: $checkbox-ios-icon-border-color-on;
|
||||
background-color: $checkbox-ios-background-color-on;
|
||||
}
|
||||
|
||||
|
||||
// iOS Checkbox Inner Checkmark: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-checked .checkbox-inner {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 7px;
|
||||
|
||||
width: 4px;
|
||||
height: 9px;
|
||||
|
||||
border-width: $checkbox-ios-icon-checkmark-width;
|
||||
border-top-width: 0;
|
||||
border-left-width: 0;
|
||||
border-style: $checkbox-ios-icon-checkmark-style;
|
||||
border-color: $checkbox-ios-icon-checkmark-color;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
|
||||
// iOS Checkbox: Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-disabled,
|
||||
.item-checkbox-disabled ion-label {
|
||||
opacity: $checkbox-ios-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// iOS Checkbox Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item ion-checkbox {
|
||||
position: static;
|
||||
display: block;
|
||||
|
||||
margin: $checkbox-ios-item-left-margin;
|
||||
|
||||
&[item-right] {
|
||||
margin: $checkbox-ios-item-right-margin;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Checkbox Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin checkbox-theme-ios($color-name, $color-base, $color-contrast) {
|
||||
|
||||
ion-checkbox[#{$color-name}] .checkbox-checked {
|
||||
border-color: $color-base;
|
||||
background-color: $color-base;
|
||||
|
||||
.checkbox-inner {
|
||||
border-color: $color-contrast;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Checkbox Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
||||
@include checkbox-theme-ios($color-name, $color-base, $color-contrast);
|
||||
}
|
||||
142
src/components/checkbox/checkbox.md.scss
Normal file
142
src/components/checkbox/checkbox.md.scss
Normal file
@ -0,0 +1,142 @@
|
||||
@import "../../globals.md";
|
||||
|
||||
// Material Design Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
$checkbox-md-border-bottom-width: 1px !default;
|
||||
$checkbox-md-border-bottom-style: solid !default;
|
||||
$checkbox-md-border-bottom-color: $list-md-border-color !default;
|
||||
$checkbox-md-padding: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0 !default;
|
||||
$checkbox-md-margin: 0 !default;
|
||||
$checkbox-md-disabled-opacity: .3 !default;
|
||||
|
||||
$checkbox-md-icon-background-color-off: $list-md-background-color !default;
|
||||
$checkbox-md-icon-background-color-on: color($colors-md, primary) !default;
|
||||
$checkbox-md-icon-size: 16px !default;
|
||||
|
||||
$checkbox-md-icon-checkmark-width: 2px !default;
|
||||
$checkbox-md-icon-checkmark-style: solid !default;
|
||||
$checkbox-md-icon-checkmark-color: color-contrast($colors-md, $checkbox-md-icon-background-color-on) !default;
|
||||
|
||||
$checkbox-md-icon-border-width: 2px !default;
|
||||
$checkbox-md-icon-border-style: solid !default;
|
||||
$checkbox-md-icon-border-radius: 2px !default;
|
||||
$checkbox-md-icon-border-color-off: darken($list-md-border-color, 40%) !default;
|
||||
$checkbox-md-icon-border-color-on: color($colors-md, primary) !default;
|
||||
|
||||
$checkbox-md-transition-duration: 280ms !default;
|
||||
$checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
|
||||
|
||||
$checkbox-md-item-left-margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px !default;
|
||||
$checkbox-md-item-right-margin: 11px 10px 10px 0 !default;
|
||||
|
||||
|
||||
ion-checkbox {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Checkbox Outer Square: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-icon {
|
||||
position: relative;
|
||||
|
||||
width: $checkbox-md-icon-size;
|
||||
height: $checkbox-md-icon-size;
|
||||
|
||||
border-width: $checkbox-md-icon-border-width;
|
||||
border-style: $checkbox-md-icon-border-style;
|
||||
border-radius: $checkbox-md-icon-border-radius;
|
||||
border-color: $checkbox-md-icon-border-color-off;
|
||||
background-color: $checkbox-md-icon-background-color-off;
|
||||
|
||||
transition-duration: $checkbox-md-transition-duration;
|
||||
transition-property: background;
|
||||
transition-timing-function: $checkbox-md-transition-easing;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Checkbox Outer Square: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-checked {
|
||||
border-color: $checkbox-md-icon-border-color-on;
|
||||
background-color: $checkbox-md-icon-background-color-on;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Checkbox Inner Checkmark: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-checked .checkbox-inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 4px;
|
||||
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
|
||||
border-width: $checkbox-md-icon-checkmark-width;
|
||||
border-top-width: 0;
|
||||
border-left-width: 0;
|
||||
border-style: $checkbox-md-icon-checkmark-style;
|
||||
border-color: $checkbox-md-icon-checkmark-color;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
|
||||
// Material Design Checkbox: Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-disabled,
|
||||
.item-checkbox-disabled ion-label {
|
||||
opacity: $checkbox-md-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Checkbox Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item ion-checkbox {
|
||||
position: static;
|
||||
display: block;
|
||||
|
||||
margin: $checkbox-md-item-left-margin;
|
||||
|
||||
&[item-right] {
|
||||
margin: $checkbox-md-item-right-margin;
|
||||
}
|
||||
}
|
||||
|
||||
ion-checkbox + .item-inner ion-label {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Checkbox Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin checkbox-theme-md($color-name, $color-base, $color-contrast) {
|
||||
|
||||
ion-checkbox[#{$color-name}] .checkbox-checked {
|
||||
border-color: $color-base;
|
||||
background-color: $color-base;
|
||||
|
||||
.checkbox-inner {
|
||||
border-color: $color-contrast;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Checkbox Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
@include checkbox-theme-md($color-name, $color-base, $color-contrast);
|
||||
}
|
||||
204
src/components/checkbox/checkbox.ts
Normal file
204
src/components/checkbox/checkbox.ts
Normal file
@ -0,0 +1,204 @@
|
||||
import {Component, Optional, Input, Output, EventEmitter, HostListener, Provider, forwardRef, ViewEncapsulation} from '@angular/core';
|
||||
import {NG_VALUE_ACCESSOR} from '@angular/common';
|
||||
|
||||
import {Form} from '../../util/form';
|
||||
import {Item} from '../item/item';
|
||||
import {isTrueProperty} from '../../util/util';
|
||||
|
||||
const CHECKBOX_VALUE_ACCESSOR = new Provider(
|
||||
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => Checkbox), multi: true});
|
||||
|
||||
|
||||
/**
|
||||
* @name Checkbox
|
||||
* @module ionic
|
||||
*
|
||||
* @description
|
||||
* The Checkbox is a simple component styled based on the mode. It can be
|
||||
* placed in an `ion-item` or used as a stand-alone checkbox.
|
||||
*
|
||||
* See the [Angular 2 Docs](https://angular.io/docs/ts/latest/guide/forms.html)
|
||||
* for more info on forms and inputs.
|
||||
*
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
*
|
||||
* <ion-list>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-label>Pepperoni</ion-label>
|
||||
* <ion-checkbox [(ngModel)]="pepperoni"></ion-checkbox>
|
||||
* </ion-item>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-label>Sausage</ion-label>
|
||||
* <ion-checkbox [(ngModel)]="sausage" disabled="true"></ion-checkbox>
|
||||
* </ion-item>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-label>Mushrooms</ion-label>
|
||||
* <ion-checkbox [(ngModel)]="mushrooms"></ion-checkbox>
|
||||
* </ion-item>
|
||||
*
|
||||
* </ion-list>
|
||||
* ```
|
||||
*
|
||||
* @demo /docs/v2/demos/checkbox/
|
||||
* @see {@link /docs/v2/components#checkbox Checkbox Component Docs}
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ion-checkbox',
|
||||
template:
|
||||
'<div class="checkbox-icon" [class.checkbox-checked]="_checked">' +
|
||||
'<div class="checkbox-inner"></div>' +
|
||||
'</div>' +
|
||||
'<button role="checkbox" ' +
|
||||
'type="button" ' +
|
||||
'category="item-cover" ' +
|
||||
'[id]="id" ' +
|
||||
'[attr.aria-checked]="_checked" ' +
|
||||
'[attr.aria-labelledby]="_labelId" ' +
|
||||
'[attr.aria-disabled]="_disabled" ' +
|
||||
'class="item-cover">' +
|
||||
'</button>',
|
||||
host: {
|
||||
'[class.checkbox-disabled]': '_disabled'
|
||||
},
|
||||
providers: [CHECKBOX_VALUE_ACCESSOR],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class Checkbox {
|
||||
private _checked: boolean = false;
|
||||
private _init: boolean;
|
||||
private _disabled: boolean = false;
|
||||
private _labelId: string;
|
||||
private _fn: Function;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
id: string;
|
||||
|
||||
/**
|
||||
* @output {Checkbox} expression to evaluate when the checkbox value changes
|
||||
*/
|
||||
@Output() change: EventEmitter<Checkbox> = new EventEmitter();
|
||||
|
||||
constructor(
|
||||
private _form: Form,
|
||||
@Optional() private _item: Item
|
||||
) {
|
||||
_form.register(this);
|
||||
|
||||
if (_item) {
|
||||
this.id = 'chk-' + _item.registerInput('checkbox');
|
||||
this._labelId = 'lbl-' + _item.id;
|
||||
this._item.setCssClass('item-checkbox', true);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
@HostListener('click', ['$event'])
|
||||
private _click(ev) {
|
||||
console.debug('checkbox, checked');
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
this.onChange(!this._checked);
|
||||
}
|
||||
|
||||
/**
|
||||
* @input {boolean} whether or not the checkbox is checked (defaults to false)
|
||||
*/
|
||||
@Input()
|
||||
get checked(): boolean {
|
||||
return this._checked;
|
||||
}
|
||||
|
||||
set checked(val: boolean) {
|
||||
this._setChecked(isTrueProperty(val));
|
||||
this.onChange(this._checked);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
private _setChecked(isChecked: boolean) {
|
||||
if (isChecked !== this._checked) {
|
||||
this._checked = isChecked;
|
||||
if (this._init) {
|
||||
this.change.emit(this);
|
||||
}
|
||||
this._item && this._item.setCssClass('item-checkbox-checked', isChecked);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
writeValue(val: any) {
|
||||
this._setChecked( isTrueProperty(val) );
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
registerOnChange(fn: Function): void {
|
||||
this._fn = fn;
|
||||
this.onChange = (isChecked: boolean) => {
|
||||
console.debug('checkbox, onChange', isChecked);
|
||||
fn(isChecked);
|
||||
this._setChecked(isChecked);
|
||||
this.onTouched();
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
registerOnTouched(fn) { this.onTouched = fn; }
|
||||
|
||||
/**
|
||||
* @input {boolean} whether or not the checkbox is disabled or not.
|
||||
*/
|
||||
@Input()
|
||||
get disabled(): boolean {
|
||||
return this._disabled;
|
||||
}
|
||||
|
||||
set disabled(val: boolean) {
|
||||
this._disabled = isTrueProperty(val);
|
||||
this._item && this._item.setCssClass('item-checkbox-disabled', this._disabled);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onChange(isChecked: boolean) {
|
||||
// used when this input does not have an ngModel or ngControl
|
||||
console.debug('checkbox, onChange (no ngModel)', isChecked);
|
||||
this._setChecked(isChecked);
|
||||
this.onTouched();
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onTouched() {}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ngAfterContentInit() {
|
||||
this._init = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ngOnDestroy() {
|
||||
this._form.deregister(this);
|
||||
}
|
||||
}
|
||||
135
src/components/checkbox/checkbox.wp.scss
Normal file
135
src/components/checkbox/checkbox.wp.scss
Normal file
@ -0,0 +1,135 @@
|
||||
@import "../../globals.wp";
|
||||
|
||||
// Windows Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
$checkbox-wp-border-bottom-width: 1px !default;
|
||||
$checkbox-wp-border-bottom-style: solid !default;
|
||||
$checkbox-wp-border-bottom-color: $list-wp-border-color !default;
|
||||
$checkbox-wp-padding: $item-wp-padding-top ($item-wp-padding-right / 2) $item-wp-padding-bottom 0 !default;
|
||||
$checkbox-wp-margin: 0 !default;
|
||||
$checkbox-wp-disabled-opacity: .3 !default;
|
||||
|
||||
$checkbox-wp-icon-background-color-off: $list-wp-background-color !default;
|
||||
$checkbox-wp-icon-background-color-on: color($colors-wp, primary) !default;
|
||||
$checkbox-wp-icon-size: 16px !default;
|
||||
|
||||
$checkbox-wp-icon-checkmark-width: 1px !default;
|
||||
$checkbox-wp-icon-checkmark-style: solid !default;
|
||||
$checkbox-wp-icon-checkmark-color: color-contrast($colors-wp, $checkbox-wp-icon-background-color-on) !default;
|
||||
|
||||
$checkbox-wp-icon-border-width: 2px !default;
|
||||
$checkbox-wp-icon-border-style: solid !default;
|
||||
$checkbox-wp-icon-border-radius: 0 !default;
|
||||
$checkbox-wp-icon-border-color-off: #333 !default;
|
||||
$checkbox-wp-icon-border-color-on: color($colors-wp, primary) !default;
|
||||
|
||||
$checkbox-wp-item-left-margin: $item-wp-padding-media-top $item-wp-padding-right $item-wp-padding-media-bottom 4px !default;
|
||||
$checkbox-wp-item-right-margin: 11px 10px 10px 0 !default;
|
||||
|
||||
|
||||
ion-checkbox {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
// Windows Checkbox Outer Square: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-icon {
|
||||
position: relative;
|
||||
|
||||
width: $checkbox-wp-icon-size;
|
||||
height: $checkbox-wp-icon-size;
|
||||
|
||||
border-width: $checkbox-wp-icon-border-width;
|
||||
border-style: $checkbox-wp-icon-border-style;
|
||||
border-radius: $checkbox-wp-icon-border-radius;
|
||||
border-color: $checkbox-wp-icon-border-color-off;
|
||||
background-color: $checkbox-wp-icon-background-color-off;
|
||||
}
|
||||
|
||||
|
||||
// Windows Checkbox Outer Square: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-checked {
|
||||
border-color: $checkbox-wp-icon-border-color-on;
|
||||
background-color: $checkbox-wp-icon-background-color-on;
|
||||
}
|
||||
|
||||
|
||||
// Windows Checkbox Inner Checkmark: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-checked .checkbox-inner {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 3px;
|
||||
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
|
||||
border-width: $checkbox-wp-icon-checkmark-width;
|
||||
border-top-width: 0;
|
||||
border-left-width: 0;
|
||||
border-style: $checkbox-wp-icon-checkmark-style;
|
||||
border-color: $checkbox-wp-icon-checkmark-color;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
|
||||
// Windows Checkbox: Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-disabled,
|
||||
.item-checkbox-disabled ion-label {
|
||||
opacity: $checkbox-wp-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// Windows Checkbox Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item ion-checkbox {
|
||||
position: static;
|
||||
display: block;
|
||||
|
||||
margin: $checkbox-wp-item-left-margin;
|
||||
|
||||
&[item-right] {
|
||||
margin: $checkbox-wp-item-right-margin;
|
||||
}
|
||||
}
|
||||
|
||||
ion-checkbox + .item-inner ion-label {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
// Windows Checkbox Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin checkbox-theme-wp($color-name, $color-base, $color-contrast) {
|
||||
|
||||
ion-checkbox[#{$color-name}] .checkbox-checked {
|
||||
border-color: $color-base;
|
||||
background-color: $color-base;
|
||||
|
||||
.checkbox-inner {
|
||||
border-color: $color-contrast;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Generate Windows Checkbox Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
||||
@include checkbox-theme-wp($color-name, $color-base, $color-contrast);
|
||||
}
|
||||
7
src/components/checkbox/test/basic/e2e.ts
Normal file
7
src/components/checkbox/test/basic/e2e.ts
Normal file
@ -0,0 +1,7 @@
|
||||
|
||||
it('should check apple, enable/check grape, submit form', function() {
|
||||
element(by.css('[ngControl=appleCtrl]')).click();
|
||||
element(by.css('.e2eGrapeDisabled')).click();
|
||||
element(by.css('.e2eGrapeChecked')).click();
|
||||
element(by.css('.e2eSubmit')).click();
|
||||
});
|
||||
63
src/components/checkbox/test/basic/index.ts
Normal file
63
src/components/checkbox/test/basic/index.ts
Normal file
@ -0,0 +1,63 @@
|
||||
import {App} from '../../../../../ionic';
|
||||
import {
|
||||
Control,
|
||||
ControlGroup,
|
||||
NgForm,
|
||||
Validators,
|
||||
NgControl,
|
||||
ControlValueAccessor,
|
||||
NgControlName,
|
||||
NgFormModel,
|
||||
FormBuilder
|
||||
} from '@angular/common';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {
|
||||
fruitsForm: ControlGroup;
|
||||
grapeDisabled: boolean;
|
||||
grapeChecked: boolean;
|
||||
kiwiValue: boolean;
|
||||
strawberryValue: boolean;
|
||||
standAloneChecked: boolean;
|
||||
formResults: string;
|
||||
|
||||
constructor() {
|
||||
this.fruitsForm = new ControlGroup({
|
||||
"appleCtrl": new Control(true),
|
||||
"bananaCtrl": new Control(true),
|
||||
"cherryCtrl": new Control(false),
|
||||
"grapeCtrl": new Control(true)
|
||||
});
|
||||
|
||||
this.grapeDisabled = true;
|
||||
this.grapeChecked = true;
|
||||
this.standAloneChecked = true;
|
||||
}
|
||||
|
||||
toggleGrapeChecked() {
|
||||
this.grapeChecked = !this.grapeChecked;
|
||||
}
|
||||
|
||||
toggleGrapeDisabled() {
|
||||
this.grapeDisabled = !this.grapeDisabled;
|
||||
}
|
||||
|
||||
kiwiChange(ev) {
|
||||
console.log('kiwiChange', ev);
|
||||
this.kiwiValue = ev.checked;
|
||||
}
|
||||
|
||||
strawberryChange(ev) {
|
||||
console.log('strawberryChange', ev);
|
||||
this.strawberryValue = ev.checked;
|
||||
}
|
||||
|
||||
doSubmit(ev) {
|
||||
console.log('Submitting form', this.fruitsForm.value);
|
||||
this.formResults = JSON.stringify(this.fruitsForm.value);
|
||||
ev.preventDefault();
|
||||
}
|
||||
}
|
||||
86
src/components/checkbox/test/basic/main.html
Normal file
86
src/components/checkbox/test/basic/main.html
Normal file
@ -0,0 +1,86 @@
|
||||
|
||||
<ion-toolbar><ion-title>Checkboxes</ion-title></ion-toolbar>
|
||||
|
||||
|
||||
<ion-content>
|
||||
|
||||
<form (submit)="doSubmit($event)" [ngFormModel]="fruitsForm">
|
||||
|
||||
<ion-list>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Apple, ngControl</ion-label>
|
||||
<ion-checkbox ngControl="appleCtrl"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Banana, ngControl</ion-label>
|
||||
<ion-checkbox ngControl="bananaCtrl"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Cherry, ngControl, disabled</ion-label>
|
||||
<ion-checkbox disabled="true" ngControl="cherryCtrl"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Grape, ngControl, checked, disabled</ion-label>
|
||||
<ion-checkbox [checked]="grapeChecked" [disabled]="grapeDisabled" ngControl="grapeCtrl"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Kiwi, (change) Secondary color</ion-label>
|
||||
<ion-checkbox secondary (change)="kiwiChange($event)"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Strawberry, (change) [checked]="true"</ion-label>
|
||||
<ion-checkbox light (change)="strawberryChange($event)" [checked]="true"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
|
||||
<ion-checkbox item-right danger checked></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<button ion-item detail-none>
|
||||
<ion-label>Checkbox right side</ion-label>
|
||||
<ion-checkbox item-right checked></ion-checkbox>
|
||||
</button>
|
||||
|
||||
<button ion-item detail-none>
|
||||
Button w/ right side default icon, really long text that should ellipsis
|
||||
<ion-icon name="information-circle" item-right></ion-icon>
|
||||
</button>
|
||||
|
||||
</ion-list>
|
||||
|
||||
</form>
|
||||
|
||||
<p aria-hidden="true" text-center>
|
||||
<button (click)="toggleGrapeChecked()" outline small class="e2eGrapeChecked">Grape Checked</button>
|
||||
<button (click)="toggleGrapeDisabled()" outline small class="e2eGrapeDisabled">Grape Disabled</button>
|
||||
<button (click)="doSubmit($event)" outline small class="e2eSubmit">Submit</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-checkbox [(ngModel)]="standAloneChecked"></ion-checkbox>
|
||||
Stand-alone checkbox: {{standAloneChecked}}
|
||||
</p>
|
||||
|
||||
<p aria-hidden="true" padding>
|
||||
<code>appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}</code><br>
|
||||
<code>appleCtrl.value: {{fruitsForm.controls.appleCtrl.value}}</code><br>
|
||||
<code>bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}</code><br>
|
||||
<code>bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value}}</code><br>
|
||||
<code>cherry.dirty: {{fruitsForm.controls.cherryCtrl.dirty}}</code><br>
|
||||
<code>cherry.value: {{fruitsForm.controls.cherryCtrl.value}}</code><br>
|
||||
<code>grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}</code><br>
|
||||
<code>grape.value: {{fruitsForm.controls.grapeCtrl.value}}</code><br>
|
||||
<code>kiwiValue: {{kiwiValue}}</code><br>
|
||||
<code>strawberryValue: {{strawberryValue}}</code><br>
|
||||
</p>
|
||||
|
||||
<pre aria-hidden="true" padding>{{formResults}}</pre>
|
||||
|
||||
</ion-content>
|
||||
Reference in New Issue
Block a user