mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
feat(checkbox): add checkbox, consistent function names
This commit is contained in:
Brandy Carney
174
packages/core/src/components/checkbox/checkbox.ios.scss
Normal file
174
packages/core/src/components/checkbox/checkbox.ios.scss
Normal file
@ -0,0 +1,174 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
@import "./checkbox";
|
||||
|
||||
// iOS Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Background color of the checkbox when off
|
||||
$checkbox-ios-background-color-off: $list-ios-background-color !default;
|
||||
|
||||
/// @prop - Background color of the checkbox when on
|
||||
$checkbox-ios-background-color-on: color($colors-ios, primary) !default;
|
||||
|
||||
/// @prop - Size of the checkbox icon
|
||||
$checkbox-ios-icon-size: 21px !default;
|
||||
|
||||
/// @prop - Border color of the checkbox icon when off
|
||||
$checkbox-ios-icon-border-color-off: $list-ios-border-color !default;
|
||||
|
||||
/// @prop - Border color of the checkbox icon when on
|
||||
$checkbox-ios-icon-border-color-on: $checkbox-ios-background-color-on !default;
|
||||
|
||||
/// @prop - Border width of the checkbox icon
|
||||
$checkbox-ios-icon-border-width: 1px !default;
|
||||
|
||||
/// @prop - Border style of the checkbox icon
|
||||
$checkbox-ios-icon-border-style: solid !default;
|
||||
|
||||
/// @prop - Border radius of the checkbox icon
|
||||
$checkbox-ios-icon-border-radius: 50% !default;
|
||||
|
||||
/// @prop - Width of the checkbox icon checkmark
|
||||
$checkbox-ios-icon-checkmark-width: 1px !default;
|
||||
|
||||
/// @prop - Style of the checkbox icon checkmark
|
||||
$checkbox-ios-icon-checkmark-style: solid !default;
|
||||
|
||||
/// @prop - Color of the checkbox icon checkmark
|
||||
$checkbox-ios-icon-checkmark-color: color-contrast($colors-ios, $checkbox-ios-background-color-on) !default;
|
||||
|
||||
/// @prop - Opacity of the disabled checkbox
|
||||
$checkbox-ios-disabled-opacity: .3 !default;
|
||||
|
||||
// deprecated
|
||||
$checkbox-ios-item-left-margin: null !default;
|
||||
|
||||
/// @prop - Margin top of the left checkbox item
|
||||
$checkbox-ios-item-start-margin-top: $item-ios-padding-media-top !default;
|
||||
|
||||
/// @prop - Margin end of the left checkbox item
|
||||
$checkbox-ios-item-start-margin-end: $item-ios-padding-end !default;
|
||||
|
||||
/// @prop - Margin bottom of the left checkbox item
|
||||
$checkbox-ios-item-start-margin-bottom: $item-ios-padding-media-bottom !default;
|
||||
|
||||
/// @prop - Margin start of the left checkbox item
|
||||
$checkbox-ios-item-start-margin-start: 2px !default;
|
||||
|
||||
// deprecated
|
||||
$checkbox-ios-item-right-margin: null !default;
|
||||
|
||||
/// @prop - Margin top of the right checkbox item
|
||||
$checkbox-ios-item-end-margin-top: 10px !default;
|
||||
|
||||
/// @prop - Margin end of the right checkbox item
|
||||
$checkbox-ios-item-end-margin-end: 8px !default;
|
||||
|
||||
/// @prop - Margin bottom of the right checkbox item
|
||||
$checkbox-ios-item-end-margin-bottom: 9px !default;
|
||||
|
||||
/// @prop - Margin start of the right checkbox item
|
||||
$checkbox-ios-item-end-margin-start: 0 !default;
|
||||
|
||||
|
||||
// iOS Checkbox Outer Circle: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-ios .checkbox-icon {
|
||||
@include border-radius($checkbox-ios-icon-border-radius);
|
||||
|
||||
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-color: $checkbox-ios-icon-border-color-off;
|
||||
background-color: $checkbox-ios-background-color-off;
|
||||
}
|
||||
|
||||
|
||||
// iOS Checkbox Outer Circle: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-ios .checkbox-checked {
|
||||
border-color: $checkbox-ios-icon-border-color-on;
|
||||
background-color: $checkbox-ios-background-color-on;
|
||||
}
|
||||
|
||||
|
||||
// iOS Checkbox Inner Checkmark: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-ios .checkbox-checked .checkbox-inner {
|
||||
@include position(4px, null, null, 7px);
|
||||
|
||||
position: absolute;
|
||||
|
||||
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-ios.checkbox-disabled,
|
||||
.item-ios.item-checkbox-disabled ion-label {
|
||||
opacity: $checkbox-ios-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// iOS Checkbox Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item.item-ios .checkbox-ios {
|
||||
position: static;
|
||||
display: block;
|
||||
|
||||
@include deprecated-variable(margin, $checkbox-ios-item-left-margin) {
|
||||
@include margin($checkbox-ios-item-start-margin-top, $checkbox-ios-item-start-margin-end, $checkbox-ios-item-start-margin-bottom, $checkbox-ios-item-start-margin-start);
|
||||
}
|
||||
}
|
||||
|
||||
.item.item-ios .checkbox-ios[item-right], // deprecated
|
||||
.item.item-ios .checkbox-ios[item-end] {
|
||||
@include deprecated-variable(margin, $checkbox-ios-item-right-margin) {
|
||||
@include margin($checkbox-ios-item-end-margin-top, $checkbox-ios-item-end-margin-end, $checkbox-ios-item-end-margin-bottom, $checkbox-ios-item-end-margin-start);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Checkbox Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin checkbox-theme-ios($color-name, $color-base, $color-contrast) {
|
||||
|
||||
.checkbox-ios-#{$color-name} .checkbox-checked {
|
||||
border-color: $color-base;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
.checkbox-ios-#{$color-name} .checkbox-checked .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);
|
||||
}
|
||||
197
packages/core/src/components/checkbox/checkbox.md.scss
Normal file
197
packages/core/src/components/checkbox/checkbox.md.scss
Normal file
@ -0,0 +1,197 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
@import "./checkbox";
|
||||
|
||||
// Material Design Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border bottom width of the checkbox
|
||||
$checkbox-md-border-bottom-width: 1px !default;
|
||||
|
||||
/// @prop - Border bottom style of the checkbox
|
||||
$checkbox-md-border-bottom-style: solid !default;
|
||||
|
||||
/// @prop - Border bottom color of the checkbox
|
||||
$checkbox-md-border-bottom-color: $list-md-border-color !default;
|
||||
|
||||
/// @prop - Opacity of the disabled checkbox
|
||||
$checkbox-md-disabled-opacity: .3 !default;
|
||||
|
||||
/// @prop - Background color of the checkbox icon when off
|
||||
$checkbox-md-icon-background-color-off: $list-md-background-color !default;
|
||||
|
||||
/// @prop - Background color of the checkbox icon when on
|
||||
$checkbox-md-icon-background-color-on: color($colors-md, primary) !default;
|
||||
|
||||
/// @prop - Size of the checkbox icon
|
||||
$checkbox-md-icon-size: 16px !default;
|
||||
|
||||
/// @prop - Width of the checkbox icon checkmark
|
||||
$checkbox-md-icon-checkmark-width: 2px !default;
|
||||
|
||||
/// @prop - Style of the checkbox icon checkmark
|
||||
$checkbox-md-icon-checkmark-style: solid !default;
|
||||
|
||||
/// @prop - Color of the checkbox icon checkmark
|
||||
$checkbox-md-icon-checkmark-color: color-contrast($colors-md, $checkbox-md-icon-background-color-on) !default;
|
||||
|
||||
/// @prop - Border width of the checkbox icon
|
||||
$checkbox-md-icon-border-width: 2px !default;
|
||||
|
||||
/// @prop - Border style of the checkbox icon
|
||||
$checkbox-md-icon-border-style: solid !default;
|
||||
|
||||
/// @prop - Border radius of the checkbox icon
|
||||
$checkbox-md-icon-border-radius: 2px !default;
|
||||
|
||||
/// @prop - Border color of the checkbox icon when off
|
||||
$checkbox-md-icon-border-color-off: darken($list-md-border-color, 40%) !default;
|
||||
|
||||
/// @prop - Border color of the checkbox icon when on
|
||||
$checkbox-md-icon-border-color-on: color($colors-md, primary) !default;
|
||||
|
||||
/// @prop - Transition duration of the checkbox
|
||||
$checkbox-md-transition-duration: 280ms !default;
|
||||
|
||||
/// @prop - Transition easing of the checkbox
|
||||
$checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
|
||||
|
||||
// deprecated
|
||||
$checkbox-md-item-left-margin: null !default;
|
||||
|
||||
/// @prop - Margin top of the start checkbox item
|
||||
$checkbox-md-item-start-margin-top: $item-md-padding-media-top !default;
|
||||
|
||||
/// @prop - Margin end of the start checkbox item
|
||||
$checkbox-md-item-start-margin-end: 36px !default;
|
||||
|
||||
/// @prop - Margin bottom of the start checkbox item
|
||||
$checkbox-md-item-start-margin-bottom: $item-md-padding-media-bottom !default;
|
||||
|
||||
/// @prop - Margin start of the start checkbox item
|
||||
$checkbox-md-item-start-margin-start: 4px !default;
|
||||
|
||||
// deprecated
|
||||
$checkbox-md-item-right-margin: null !default;
|
||||
|
||||
/// @prop - Margin top of the end checkbox item
|
||||
$checkbox-md-item-end-margin-top: 11px !default;
|
||||
|
||||
/// @prop - Margin end of the end checkbox item
|
||||
$checkbox-md-item-end-margin-end: 10px !default;
|
||||
|
||||
/// @prop - Margin bottom of the end checkbox item
|
||||
$checkbox-md-item-end-margin-bottom: 10px !default;
|
||||
|
||||
/// @prop - Margin start of the end checkbox item
|
||||
$checkbox-md-item-end-margin-start: 0 !default;
|
||||
|
||||
|
||||
// Material Design Checkbox Outer Square: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-md .checkbox-icon {
|
||||
@include border-radius($checkbox-md-icon-border-radius);
|
||||
|
||||
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-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-md .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-md .checkbox-checked .checkbox-inner {
|
||||
@include position(0, null, null, 4px);
|
||||
|
||||
position: absolute;
|
||||
|
||||
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-md.checkbox-disabled,
|
||||
.item-md.item-checkbox-disabled ion-label {
|
||||
opacity: $checkbox-md-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Checkbox Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item.item-md .checkbox-md {
|
||||
position: static;
|
||||
display: block;
|
||||
|
||||
@include deprecated-variable(margin, $checkbox-md-item-left-margin) {
|
||||
@include margin($checkbox-md-item-start-margin-top, $checkbox-md-item-start-margin-end, $checkbox-md-item-start-margin-bottom, $checkbox-md-item-start-margin-start);
|
||||
}
|
||||
}
|
||||
|
||||
.item.item-md .checkbox-md[item-right], // deprecated
|
||||
.item.item-md .checkbox-md[item-end] {
|
||||
@include deprecated-variable(margin, $checkbox-md-item-right-margin) {
|
||||
@include margin($checkbox-md-item-end-margin-top, $checkbox-md-item-end-margin-end, $checkbox-md-item-end-margin-bottom, $checkbox-md-item-end-margin-start);
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-md + .item-inner ion-label {
|
||||
@include margin-horizontal(0, null);
|
||||
}
|
||||
|
||||
|
||||
// Material Design Checkbox Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin checkbox-theme-md($color-name, $color-base, $color-contrast) {
|
||||
|
||||
.checkbox-md-#{$color-name} .checkbox-checked {
|
||||
border-color: $color-base;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
.checkbox-md-#{$color-name} .checkbox-checked .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);
|
||||
}
|
||||
22
packages/core/src/components/checkbox/checkbox.scss
Normal file
22
packages/core/src/components/checkbox/checkbox.scss
Normal file
@ -0,0 +1,22 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
ion-checkbox {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.checkbox-cover {
|
||||
@include position(0, null, null, 0);
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
173
packages/core/src/components/checkbox/checkbox.tsx
Normal file
173
packages/core/src/components/checkbox/checkbox.tsx
Normal file
@ -0,0 +1,173 @@
|
||||
import { Component, CssClassMap, Event, EventEmitter, Listen, Prop, PropDidChange } from '@stencil/core';
|
||||
|
||||
|
||||
/**
|
||||
* @name Checkbox
|
||||
* @module ionic
|
||||
*
|
||||
* @description
|
||||
* placed in an `ion-item` or used as a stand-alone checkbox.
|
||||
*
|
||||
* See the [Angular 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>
|
||||
* ```
|
||||
*
|
||||
* @advanced
|
||||
*
|
||||
* ```html
|
||||
*
|
||||
* <!-- Call function when state changes -->
|
||||
* <ion-list>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-label>Cucumber</ion-label>
|
||||
* <ion-checkbox [(ngModel)]="cucumber" (ionChange)="updateCucumber()"></ion-checkbox>
|
||||
* </ion-item>
|
||||
*
|
||||
* </ion-list>
|
||||
* ```
|
||||
*
|
||||
* ```ts
|
||||
* @Component({
|
||||
* templateUrl: 'main.html'
|
||||
* })
|
||||
* class SaladPage {
|
||||
* cucumber: boolean;
|
||||
*
|
||||
* updateCucumber() {
|
||||
* console.log('Cucumbers new state:' + this.cucumber);
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* @demo /docs/demos/src/checkbox/
|
||||
* @see {@link /docs/components#checkbox Checkbox Component Docs}
|
||||
*/
|
||||
@Component({
|
||||
tag: 'ion-checkbox',
|
||||
styleUrls: {
|
||||
ios: 'checkbox.ios.scss',
|
||||
md: 'checkbox.md.scss',
|
||||
wp: 'checkbox.wp.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'checkbox'
|
||||
}
|
||||
})
|
||||
export class Checkbox {
|
||||
id: string;
|
||||
labelId: string;
|
||||
styleTmr: any;
|
||||
|
||||
@Event() ionChange: EventEmitter;
|
||||
@Event() ionStyle: EventEmitter;
|
||||
|
||||
/*
|
||||
* @input {boolean} If true, the checkbox is checked. Default false.
|
||||
*/
|
||||
@Prop({ state: true }) checked: boolean = false;
|
||||
|
||||
/*
|
||||
* @input {boolean} If true, the user cannot interact with this element. Default false.
|
||||
*/
|
||||
@Prop({ state: true }) disabled: boolean = false;
|
||||
|
||||
/**
|
||||
* @input {string} the value of the checkbox.
|
||||
*/
|
||||
@Prop({ state: true }) value: string;
|
||||
|
||||
|
||||
ionViewWillLoad() {
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
@PropDidChange('checked')
|
||||
checkedChanged(val: boolean) {
|
||||
this.ionChange.emit({ checked: val });
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
@PropDidChange('disabled')
|
||||
disabledChanged() {
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
private emitStyle() {
|
||||
clearTimeout(this.styleTmr);
|
||||
|
||||
this.styleTmr = setTimeout(() => {
|
||||
this.ionStyle.emit({
|
||||
'checkbox-disabled': this.disabled,
|
||||
'checkbox-checked': this.checked,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@Listen('keydown.space')
|
||||
onSpace(ev: KeyboardEvent) {
|
||||
this.toggle();
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.checked = !this.checked;
|
||||
}
|
||||
|
||||
hostData() {
|
||||
return {
|
||||
class: {
|
||||
'checkbox-checked': this.checked,
|
||||
'checkbox-disabled': this.disabled
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const checkboxClasses: CssClassMap = {
|
||||
'checkbox-icon': true,
|
||||
'checkbox-checked': this.checked
|
||||
};
|
||||
|
||||
return [
|
||||
<div class={checkboxClasses}>
|
||||
<div class='checkbox-inner'></div>
|
||||
</div>,
|
||||
<button
|
||||
class='checkbox-cover'
|
||||
onClick={() => this.toggle()}
|
||||
id={this.id}
|
||||
aria-checked={this.checked ? 'true' : false}
|
||||
aria-disabled={this.disabled ? 'true' : false}
|
||||
aria-labelledby={this.labelId}
|
||||
role='checkbox'
|
||||
tabIndex={0}
|
||||
/>
|
||||
];
|
||||
}
|
||||
}
|
||||
187
packages/core/src/components/checkbox/checkbox.wp.scss
Normal file
187
packages/core/src/components/checkbox/checkbox.wp.scss
Normal file
@ -0,0 +1,187 @@
|
||||
@import "../../themes/ionic.globals.wp";
|
||||
@import "./checkbox";
|
||||
|
||||
// Windows Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border bottom width of the checkbox
|
||||
$checkbox-wp-border-bottom-width: 1px !default;
|
||||
|
||||
/// @prop - Border bottom style of the checkbox
|
||||
$checkbox-wp-border-bottom-style: solid !default;
|
||||
|
||||
/// @prop - Border bottom color of the checkbox
|
||||
$checkbox-wp-border-bottom-color: $list-wp-border-color !default;
|
||||
|
||||
/// @prop - Opacity of the disabled checkbox
|
||||
$checkbox-wp-disabled-opacity: .3 !default;
|
||||
|
||||
/// @prop - Background color of the checkbox icon when off
|
||||
$checkbox-wp-icon-background-color-off: $list-wp-background-color !default;
|
||||
|
||||
/// @prop - Background color of the checkbox icon when on
|
||||
$checkbox-wp-icon-background-color-on: color($colors-wp, primary) !default;
|
||||
|
||||
/// @prop - Size of the checkbox icon
|
||||
$checkbox-wp-icon-size: 16px !default;
|
||||
|
||||
/// @prop - Width of the checkbox icon checkmark
|
||||
$checkbox-wp-icon-checkmark-width: 1px !default;
|
||||
|
||||
/// @prop - Style of the checkbox icon checkmark
|
||||
$checkbox-wp-icon-checkmark-style: solid !default;
|
||||
|
||||
/// @prop - Color of the checkbox icon checkmark
|
||||
$checkbox-wp-icon-checkmark-color: color-contrast($colors-wp, $checkbox-wp-icon-background-color-on) !default;
|
||||
|
||||
/// @prop - Border width of the checkbox icon
|
||||
$checkbox-wp-icon-border-width: 2px !default;
|
||||
|
||||
/// @prop - Border style of the checkbox icon
|
||||
$checkbox-wp-icon-border-style: solid !default;
|
||||
|
||||
/// @prop - Border radius of the checkbox icon
|
||||
$checkbox-wp-icon-border-radius: 0 !default;
|
||||
|
||||
/// @prop - Border color of the checkbox icon when off
|
||||
$checkbox-wp-icon-border-color-off: #333 !default;
|
||||
|
||||
/// @prop - Border color of the checkbox icon when on
|
||||
$checkbox-wp-icon-border-color-on: color($colors-wp, primary) !default;
|
||||
|
||||
// deprecated
|
||||
$checkbox-wp-item-left-margin: null !default;
|
||||
|
||||
/// @prop - Margin top of the start checkbox item
|
||||
$checkbox-wp-item-start-margin-top: $item-wp-padding-media-top !default;
|
||||
|
||||
/// @prop - Margin end of the start checkbox item
|
||||
$checkbox-wp-item-start-margin-end: $item-wp-padding-end !default;
|
||||
|
||||
/// @prop - Margin bottom of the start checkbox item
|
||||
$checkbox-wp-item-start-margin-bottom: $item-wp-padding-media-bottom !default;
|
||||
|
||||
/// @prop - Margin start of the start checkbox item
|
||||
$checkbox-wp-item-start-margin-start: 4px !default;
|
||||
|
||||
// deprecated
|
||||
$checkbox-wp-item-right-margin: null !default;
|
||||
|
||||
/// @prop - Margin top of the end checkbox item
|
||||
$checkbox-wp-item-end-margin-top: 11px !default;
|
||||
|
||||
/// @prop - Margin end of the end checkbox item
|
||||
$checkbox-wp-item-end-margin-end: 10px !default;
|
||||
|
||||
/// @prop - Margin bottom of the end checkbox item
|
||||
$checkbox-wp-item-end-margin-bottom: 10px !default;
|
||||
|
||||
/// @prop - Margin start of the end checkbox item
|
||||
$checkbox-wp-item-end-margin-start: 0 !default;
|
||||
|
||||
|
||||
// Windows Checkbox Outer Square: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-wp .checkbox-icon {
|
||||
@include border-radius($checkbox-wp-icon-border-radius);
|
||||
|
||||
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-color: $checkbox-wp-icon-border-color-off;
|
||||
background-color: $checkbox-wp-icon-background-color-off;
|
||||
}
|
||||
|
||||
|
||||
// Windows Checkbox Outer Square: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-wp .checkbox-checked {
|
||||
border-color: $checkbox-wp-icon-border-color-on;
|
||||
background-color: $checkbox-wp-icon-background-color-on;
|
||||
}
|
||||
|
||||
|
||||
// Windows Checkbox Inner Checkmark: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-wp .checkbox-checked .checkbox-inner {
|
||||
@include position(-2px, null, null, 3px);
|
||||
|
||||
position: absolute;
|
||||
|
||||
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-wp.checkbox-disabled,
|
||||
.item-wp.item-checkbox-disabled ion-label {
|
||||
opacity: $checkbox-wp-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// Windows Checkbox Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item.item-wp .checkbox-wp {
|
||||
position: static;
|
||||
display: block;
|
||||
|
||||
@include deprecated-variable(margin, $checkbox-wp-item-left-margin) {
|
||||
@include margin($checkbox-wp-item-start-margin-top, $checkbox-wp-item-start-margin-end, $checkbox-wp-item-start-margin-bottom, $checkbox-wp-item-start-margin-start);
|
||||
}
|
||||
}
|
||||
|
||||
.item.item-wp .checkbox-wp[item-right], // deprecated
|
||||
.item.item-wp .checkbox-wp[item-end] {
|
||||
@include deprecated-variable(margin, $checkbox-wp-item-right-margin) {
|
||||
@include margin($checkbox-wp-item-end-margin-top, $checkbox-wp-item-end-margin-end, $checkbox-wp-item-end-margin-bottom, $checkbox-wp-item-end-margin-start);
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-wp + .item-inner ion-label {
|
||||
@include margin-horizontal(0, null);
|
||||
}
|
||||
|
||||
|
||||
// Windows Checkbox Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin checkbox-theme-wp($color-name, $color-base, $color-contrast) {
|
||||
|
||||
.checkbox-wp-#{$color-name} .checkbox-checked {
|
||||
border-color: $color-base;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
.checkbox-wp-#{$color-name} .checkbox-checked .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);
|
||||
}
|
||||
126
packages/core/src/components/checkbox/test/basic.html
Normal file
126
packages/core/src/components/checkbox/test/basic.html
Normal file
@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ionic Checkbox</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Checkboxes</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-label>Apple</ion-label>
|
||||
<ion-checkbox slot="start" name="apple" checked></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Banana</ion-label>
|
||||
<ion-checkbox slot="start" name="banana" checked></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Cherry, disabled</ion-label>
|
||||
<ion-checkbox slot="start" color="danger" name="cherry" disabled></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Grape, checked, disabled</ion-label>
|
||||
<ion-checkbox slot="start" id="grapeChecked" name="grape" checked disabled></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Kiwi, (ionChange) Secondary color</ion-label>
|
||||
<ion-checkbox slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Strawberry, (ionChange) checked="true"</ion-label>
|
||||
<ion-checkbox slot="start" color="light" (ionChange)="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 slot="end" color="danger" checked></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Checkbox right side</ion-label>
|
||||
<ion-checkbox slot="end" checked></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label>
|
||||
<ion-icon name="information-circle" slot="end"></ion-icon>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
|
||||
|
||||
<p aria-hidden="true" text-center>
|
||||
<ion-button onClick="toggleBoolean('grapeChecked', 'checked')" outline small>Grape Checked</ion-button>
|
||||
<ion-button onClick="toggleBoolean('grapeChecked', 'disabled')" outline small>Grape Disabled</ion-button>
|
||||
<ion-button onClick="printForm()" outline small>Print Form</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-checkbox id="standAloneChecked"></ion-checkbox>
|
||||
Stand-alone checkbox: <span id="standAloneCheckedSpan"></span>
|
||||
</p>
|
||||
|
||||
<p aria-hidden="true" padding>
|
||||
<code>appleCtrl.value: <span id="appleCtrlValue"></span></code><br>
|
||||
<code>bananaCtrl.value: <span id="bananaCtrlValue"></span></code><br>
|
||||
<code>cherry.value: <span id="cherryCtrlValue"></span></code><br>
|
||||
<code>grape.value: <span id="grapeCtrlValue"></span></code><br>
|
||||
<code>kiwiValue: <spa id="kiwiValue"></span></code><br>
|
||||
<code>strawberryValue: <span id="strawberryValue">y</span></code><br>
|
||||
</p>
|
||||
|
||||
<pre aria-hidden="true" padding id="formResults"></pre>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Checkbox / Toggle</ion-label>
|
||||
<ion-checkbox slot="start" id="checked"></ion-checkbox>
|
||||
<ion-toggle id="checked"></ion-toggle>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Checked</ion-label>
|
||||
<ion-checkbox slot="start" checked></ion-checkbox>
|
||||
<ion-toggle checked></ion-toggle>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Disabled</ion-label>
|
||||
<ion-checkbox slot="start" disabled></ion-checkbox>
|
||||
<ion-toggle disabled></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
</ion-content>
|
||||
|
||||
<script>
|
||||
function printForm(ev) {
|
||||
console.log('TODO get working with forms');
|
||||
}
|
||||
|
||||
function toggleBoolean(id, prop) {
|
||||
var ele = document.getElementById(id);
|
||||
|
||||
var isTrue = ele[prop] ? false : true;
|
||||
ele[prop] = isTrue;
|
||||
console.log('in toggleBoolean, setting', prop, 'to', isTrue);
|
||||
}
|
||||
</script>
|
||||
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@ -31,8 +31,8 @@ export interface InputBaseComponent {
|
||||
inputFocused: (ev: any) => void;
|
||||
inputKeydown: (ev: any) => void;
|
||||
|
||||
setDisabled: (ev: any) => void;
|
||||
setValue: (ev: any) => void;
|
||||
disabledChanged: (ev: any) => void;
|
||||
valueChanged: (ev: any) => void;
|
||||
}
|
||||
|
||||
export interface InputComponent extends InputBaseComponent {
|
||||
@ -51,7 +51,7 @@ export interface InputComponent extends InputBaseComponent {
|
||||
size: number;
|
||||
type: string;
|
||||
|
||||
setChecked: (ev: any) => void;
|
||||
checkedChanged: (ev: any) => void;
|
||||
}
|
||||
|
||||
export interface TextareaComponent extends InputBaseComponent {
|
||||
|
||||
@ -73,7 +73,7 @@ export class Input implements InputComponent {
|
||||
* @hidden
|
||||
*/
|
||||
@PropDidChange('checked')
|
||||
setChecked() {
|
||||
checkedChanged() {
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
@ -97,7 +97,7 @@ export class Input implements InputComponent {
|
||||
* @hidden
|
||||
*/
|
||||
@PropDidChange('disabled')
|
||||
setDisabled() {
|
||||
disabledChanged() {
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
@ -192,7 +192,7 @@ export class Input implements InputComponent {
|
||||
* Update the native input element when the value changes
|
||||
*/
|
||||
@PropDidChange('value')
|
||||
setValue() {
|
||||
valueChanged() {
|
||||
const inputEl = this.el.querySelector('input');
|
||||
if (inputEl.value !== this.value) {
|
||||
inputEl.value = this.value;
|
||||
|
||||
@ -111,7 +111,7 @@ export class Textarea implements TextareaComponent {
|
||||
* @hidden
|
||||
*/
|
||||
@PropDidChange('disabled')
|
||||
setDisabled() {
|
||||
disabledChanged() {
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
@ -175,7 +175,7 @@ export class Textarea implements TextareaComponent {
|
||||
* Update the native input element when the value changes
|
||||
*/
|
||||
@PropDidChange('value')
|
||||
setValue() {
|
||||
valueChanged() {
|
||||
const inputEl = this.el.querySelector('textarea');
|
||||
if (inputEl.value !== this.value) {
|
||||
inputEl.value = this.value;
|
||||
|
||||
@ -39,13 +39,13 @@ export class Toggle implements BooleanInputComponent {
|
||||
}
|
||||
|
||||
@PropDidChange('checked')
|
||||
changed(val: boolean) {
|
||||
checkedChanged(val: boolean) {
|
||||
this.ionChange.emit({ checked: val });
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
@PropDidChange('disabled')
|
||||
disableChanged() {
|
||||
disabledChanged() {
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
|
||||
@ -12,6 +12,7 @@ exports.config = {
|
||||
{ components: ['ion-backdrop'] },
|
||||
{ components: ['ion-button', 'ion-buttons', 'ion-icon'] },
|
||||
{ components: ['ion-card', 'ion-card-content', 'ion-card-header', 'ion-card-title'] },
|
||||
{ components: ['ion-checkbox'] },
|
||||
{ components: ['ion-chip', 'ion-chip-button'] },
|
||||
{ components: ['ion-fab', 'ion-fab-button', 'ion-fab-list'] },
|
||||
{ components: ['ion-gesture', 'ion-scroll'], priority: 'low' },
|
||||
|
||||
Reference in New Issue
Block a user