mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
chore(packages): move the packages to root
This commit is contained in:
Brandy Carney
127
core/src/components/checkbox/checkbox.ios.scss
Normal file
127
core/src/components/checkbox/checkbox.ios.scss
Normal file
@ -0,0 +1,127 @@
|
||||
@import "./checkbox";
|
||||
@import "./checkbox.ios.vars";
|
||||
|
||||
// iOS Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
// 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;
|
||||
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
|
||||
// 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 Keyboard Focus
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-key .checkbox-icon::after {
|
||||
@include border-radius(50%);
|
||||
@include position(-9px, null, null, -9px);
|
||||
|
||||
position: absolute;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
|
||||
background: $checkbox-ios-background-color-focused;
|
||||
|
||||
content: "";
|
||||
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
|
||||
// iOS Checkbox Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item.item-ios .checkbox-ios {
|
||||
@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);
|
||||
|
||||
position: static;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.item.item-ios .checkbox-ios[slot="end"] {
|
||||
@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: ion-color($colors-ios, $color-name, base, ios);
|
||||
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
|
||||
|
||||
.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-value in $colors-ios {
|
||||
@include checkbox-theme-ios($color-name);
|
||||
}
|
||||
69
core/src/components/checkbox/checkbox.ios.vars.scss
Normal file
69
core/src/components/checkbox/checkbox.ios.vars.scss
Normal file
@ -0,0 +1,69 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
@import "../item/item.ios.vars";
|
||||
|
||||
// iOS Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Background color of the checkbox when off
|
||||
$checkbox-ios-background-color-off: $item-ios-background-color !default;
|
||||
|
||||
/// @prop - Background color of the checkbox when on
|
||||
$checkbox-ios-background-color-on: ion-color($colors-ios, primary, base, ios) !default;
|
||||
|
||||
/// @prop - Background color of focus indicator for checkbox when focused
|
||||
$checkbox-ios-background-color-focused: ion-color($colors-ios, primary, tint, ios) !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: $item-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: ion-color($colors-ios, $checkbox-ios-background-color-on, contrast, ios) !default;
|
||||
|
||||
/// @prop - Opacity of the disabled checkbox
|
||||
$checkbox-ios-disabled-opacity: .3 !default;
|
||||
|
||||
/// @prop - Margin top of the left checkbox item
|
||||
$checkbox-ios-item-start-margin-top: 8px !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: $checkbox-ios-item-start-margin-top !default;
|
||||
|
||||
/// @prop - Margin start of the left checkbox item
|
||||
$checkbox-ios-item-start-margin-start: 2px !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;
|
||||
135
core/src/components/checkbox/checkbox.md.scss
Normal file
135
core/src/components/checkbox/checkbox.md.scss
Normal file
@ -0,0 +1,135 @@
|
||||
@import "./checkbox";
|
||||
@import "./checkbox.md.vars";
|
||||
|
||||
// Material Design Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
// 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;
|
||||
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
|
||||
// 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 Keyboard Focus
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-key .checkbox-icon::after {
|
||||
@include border-radius(50%);
|
||||
@include position(-12px, null, null, -12px);
|
||||
|
||||
position: absolute;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
|
||||
background: $checkbox-md-background-color-focused;
|
||||
|
||||
content: "";
|
||||
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Checkbox Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item.item-md .checkbox-md {
|
||||
@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);
|
||||
|
||||
position: static;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.item.item-md .checkbox-md[slot="end"] {
|
||||
@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: ion-color($colors-md, $color-name, base, md);
|
||||
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
|
||||
|
||||
.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-value in $colors-md {
|
||||
@include checkbox-theme-md($color-name);
|
||||
}
|
||||
75
core/src/components/checkbox/checkbox.md.vars.scss
Normal file
75
core/src/components/checkbox/checkbox.md.vars.scss
Normal file
@ -0,0 +1,75 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
@import "../item/item.md.vars";
|
||||
|
||||
// Material Design Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @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: $item-md-background-color !default;
|
||||
|
||||
/// @prop - Background color of focus indicator for checkbox when focused
|
||||
$checkbox-md-background-color-focused: ion-color($colors-md, primary, tint, md) !default;
|
||||
|
||||
/// @prop - Background color of the checkbox icon when on
|
||||
$checkbox-md-icon-background-color-on: ion-color($colors-md, primary, base, md) !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: ion-color($colors-md, $checkbox-md-icon-background-color-on, contrast, md) !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: $border-md-color !default;
|
||||
|
||||
/// @prop - Border color of the checkbox icon when on
|
||||
$checkbox-md-icon-border-color-on: ion-color($colors-md, primary, base, md) !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;
|
||||
|
||||
/// @prop - Margin top of the start checkbox item
|
||||
$checkbox-md-item-start-margin-top: 9px !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: $checkbox-md-item-start-margin-top !default;
|
||||
|
||||
/// @prop - Margin start of the start checkbox item
|
||||
$checkbox-md-item-start-margin-start: 4px !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;
|
||||
28
core/src/components/checkbox/checkbox.scss
Normal file
28
core/src/components/checkbox/checkbox.scss
Normal file
@ -0,0 +1,28 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-checkbox {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
ion-checkbox input {
|
||||
@include position(0, null, null, 0);
|
||||
@include margin(0);
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
170
core/src/components/checkbox/checkbox.tsx
Normal file
170
core/src/components/checkbox/checkbox.tsx
Normal file
@ -0,0 +1,170 @@
|
||||
import { BlurEvent, CheckboxInput, CheckedInputChangeEvent, FocusEvent, StyleEvent } from '../../utils/input-interfaces';
|
||||
import { Component, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
|
||||
import { CssClassMap } from '../../index';
|
||||
import { deferEvent } from '../../utils/helpers';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-checkbox',
|
||||
styleUrls: {
|
||||
ios: 'checkbox.ios.scss',
|
||||
md: 'checkbox.md.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'checkbox'
|
||||
}
|
||||
})
|
||||
export class Checkbox implements CheckboxInput {
|
||||
private didLoad: boolean;
|
||||
private inputId: string;
|
||||
private nativeInput: HTMLInputElement;
|
||||
|
||||
@State() keyFocus: boolean;
|
||||
|
||||
/**
|
||||
* The color to use.
|
||||
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
*/
|
||||
@Prop() color: string;
|
||||
|
||||
/**
|
||||
* The mode determines which platform styles to use.
|
||||
* Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
@Prop() mode: 'ios' | 'md';
|
||||
|
||||
/**
|
||||
* The name of the control, which is submitted with the form data.
|
||||
*/
|
||||
@Prop({ mutable: true }) name: string;
|
||||
|
||||
/**
|
||||
* If true, the checkbox is selected. Defaults to `false`.
|
||||
*/
|
||||
@Prop({ mutable: true }) checked = false;
|
||||
|
||||
/**
|
||||
* If true, the user cannot interact with the checkbox. Defaults to `false`.
|
||||
*/
|
||||
@Prop() disabled = false;
|
||||
|
||||
/**
|
||||
* the value of the checkbox.
|
||||
*/
|
||||
@Prop() value = 'on';
|
||||
|
||||
/**
|
||||
* Emitted when the checked property has changed.
|
||||
*/
|
||||
@Event() ionChange: EventEmitter<CheckedInputChangeEvent>;
|
||||
|
||||
/**
|
||||
* Emitted when the toggle has focus.
|
||||
*/
|
||||
@Event() ionFocus: EventEmitter<FocusEvent>;
|
||||
|
||||
/**
|
||||
* Emitted when the toggle loses focus.
|
||||
*/
|
||||
@Event() ionBlur: EventEmitter<BlurEvent>;
|
||||
|
||||
/**
|
||||
* Emitted when the styles change.
|
||||
*/
|
||||
@Event() ionStyle: EventEmitter<StyleEvent>;
|
||||
|
||||
componentWillLoad() {
|
||||
this.inputId = `ion-cb-${checkboxIds++}`;
|
||||
if (this.name === undefined) {
|
||||
this.name = this.inputId;
|
||||
}
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
componentDidLoad() {
|
||||
this.ionStyle = deferEvent(this.ionStyle);
|
||||
this.didLoad = true;
|
||||
|
||||
const parentItem = this.nativeInput.closest('ion-item');
|
||||
if (parentItem) {
|
||||
const itemLabel = parentItem.querySelector('ion-label');
|
||||
if (itemLabel) {
|
||||
itemLabel.id = this.inputId + '-lbl';
|
||||
this.nativeInput.setAttribute('aria-labelledby', itemLabel.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Watch('checked')
|
||||
checkedChanged(isChecked: boolean) {
|
||||
if (this.didLoad) {
|
||||
this.ionChange.emit({
|
||||
checked: isChecked,
|
||||
value: this.value
|
||||
});
|
||||
}
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
@Watch('disabled')
|
||||
emitStyle() {
|
||||
this.ionStyle.emit({
|
||||
'checkbox-disabled': this.disabled,
|
||||
'checkbox-checked': this.checked,
|
||||
});
|
||||
}
|
||||
|
||||
onChange() {
|
||||
this.checked = !this.checked;
|
||||
}
|
||||
|
||||
onKeyUp() {
|
||||
this.keyFocus = true;
|
||||
}
|
||||
|
||||
onFocus() {
|
||||
this.ionFocus.emit();
|
||||
}
|
||||
|
||||
onBlur() {
|
||||
this.keyFocus = false;
|
||||
this.ionBlur.emit();
|
||||
}
|
||||
|
||||
hostData() {
|
||||
return {
|
||||
class: {
|
||||
'checkbox-checked': this.checked,
|
||||
'checkbox-disabled': this.disabled,
|
||||
'checkbox-key': this.keyFocus
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const checkboxClasses: CssClassMap = {
|
||||
'checkbox-icon': true,
|
||||
'checkbox-checked': this.checked
|
||||
};
|
||||
|
||||
return [
|
||||
<div class={checkboxClasses}>
|
||||
<div class='checkbox-inner'></div>
|
||||
</div>,
|
||||
<input
|
||||
type='checkbox'
|
||||
onChange={this.onChange.bind(this)}
|
||||
onFocus={this.onFocus.bind(this)}
|
||||
onBlur={this.onBlur.bind(this)}
|
||||
onKeyUp={this.onKeyUp.bind(this)}
|
||||
checked={this.checked}
|
||||
id={this.inputId}
|
||||
name={this.name}
|
||||
value={this.value}
|
||||
disabled={this.disabled}
|
||||
ref={r => this.nativeInput = (r as any)}/>
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
let checkboxIds = 0;
|
||||
163
core/src/components/checkbox/readme.md
Normal file
163
core/src/components/checkbox/readme.md
Normal file
@ -0,0 +1,163 @@
|
||||
# ion-checkbox
|
||||
|
||||
Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property.
|
||||
|
||||
|
||||
```html
|
||||
<!-- Default Checkbox -->
|
||||
<ion-checkbox></ion-checkbox>
|
||||
|
||||
<!-- Disabled Checkbox -->
|
||||
<ion-checkbox disabled></ion-checkbox>
|
||||
|
||||
<!-- Checked Checkbox -->
|
||||
<ion-checkbox checked></ion-checkbox>
|
||||
|
||||
<!-- Checkbox Colors -->
|
||||
<ion-checkbox color="primary"></ion-checkbox>
|
||||
<ion-checkbox color="secondary"></ion-checkbox>
|
||||
<ion-checkbox color="danger"></ion-checkbox>
|
||||
<ion-checkbox color="light"></ion-checkbox>
|
||||
<ion-checkbox color="dark"></ion-checkbox>
|
||||
|
||||
<!-- Checkboxes in a List -->
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-label>Pepperoni</ion-label>
|
||||
<ion-checkbox slot="end" value="pepperoni" checked></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Sausage</ion-label>
|
||||
<ion-checkbox slot="end" value="sausage" disabled></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Mushrooms</ion-label>
|
||||
<ion-checkbox slot="end" value="mushrooms"></ion-checkbox>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### checked
|
||||
|
||||
boolean
|
||||
|
||||
If true, the checkbox is selected. Defaults to `false`.
|
||||
|
||||
|
||||
#### color
|
||||
|
||||
string
|
||||
|
||||
The color to use.
|
||||
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
|
||||
|
||||
#### disabled
|
||||
|
||||
boolean
|
||||
|
||||
If true, the user cannot interact with the checkbox. Defaults to `false`.
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
|
||||
|
||||
The mode determines which platform styles to use.
|
||||
Possible values are: `"ios"` or `"md"`.
|
||||
|
||||
|
||||
#### name
|
||||
|
||||
string
|
||||
|
||||
The name of the control, which is submitted with the form data.
|
||||
|
||||
|
||||
#### value
|
||||
|
||||
string
|
||||
|
||||
the value of the checkbox.
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### checked
|
||||
|
||||
boolean
|
||||
|
||||
If true, the checkbox is selected. Defaults to `false`.
|
||||
|
||||
|
||||
#### color
|
||||
|
||||
string
|
||||
|
||||
The color to use.
|
||||
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
|
||||
|
||||
#### disabled
|
||||
|
||||
boolean
|
||||
|
||||
If true, the user cannot interact with the checkbox. Defaults to `false`.
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
|
||||
|
||||
The mode determines which platform styles to use.
|
||||
Possible values are: `"ios"` or `"md"`.
|
||||
|
||||
|
||||
#### name
|
||||
|
||||
string
|
||||
|
||||
The name of the control, which is submitted with the form data.
|
||||
|
||||
|
||||
#### value
|
||||
|
||||
string
|
||||
|
||||
the value of the checkbox.
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
#### ionBlur
|
||||
|
||||
Emitted when the toggle loses focus.
|
||||
|
||||
|
||||
#### ionChange
|
||||
|
||||
Emitted when the checked property has changed.
|
||||
|
||||
|
||||
#### ionFocus
|
||||
|
||||
Emitted when the toggle has focus.
|
||||
|
||||
|
||||
#### ionStyle
|
||||
|
||||
Emitted when the styles change.
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
19
core/src/components/checkbox/test/basic/e2e.js
Normal file
19
core/src/components/checkbox/test/basic/e2e.js
Normal file
@ -0,0 +1,19 @@
|
||||
'use strict';
|
||||
|
||||
const { By, until } = require('selenium-webdriver');
|
||||
const { register, Page, platforms } = require('../../../../../scripts/e2e');
|
||||
|
||||
class E2ETestPage extends Page {
|
||||
constructor(driver, platform) {
|
||||
super(driver, `http://localhost:3333/src/components/checkbox/test/basic?ionicplatform=${platform}`);
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('checkbox/basic', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate('#content');
|
||||
});
|
||||
});
|
||||
});
|
||||
85
core/src/components/checkbox/test/basic/index.html
Normal file
85
core/src/components/checkbox/test/basic/index.html
Normal file
@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Checkbox - Basic</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>Checkbox - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content">
|
||||
<ion-item>
|
||||
<ion-label>Default</ion-label>
|
||||
<ion-checkbox checked></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Primary</ion-label>
|
||||
<ion-checkbox checked color="primary"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Secondary</ion-label>
|
||||
<ion-checkbox checked color="secondary"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Tertiary</ion-label>
|
||||
<ion-checkbox checked color="tertiary"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Success</ion-label>
|
||||
<ion-checkbox checked color="success"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Warning</ion-label>
|
||||
<ion-checkbox checked color="warning"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Danger</ion-label>
|
||||
<ion-checkbox checked color="danger"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Light</ion-label>
|
||||
<ion-checkbox checked color="light"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Medium</ion-label>
|
||||
<ion-checkbox checked color="medium"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Dark</ion-label>
|
||||
<ion-checkbox checked color="dark"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Unchecked by Default</ion-label>
|
||||
<ion-checkbox></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Disabled</ion-label>
|
||||
<ion-checkbox disabled></ion-checkbox>
|
||||
</ion-item>
|
||||
</ion-content>
|
||||
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
19
core/src/components/checkbox/test/standalone/e2e.js
Normal file
19
core/src/components/checkbox/test/standalone/e2e.js
Normal file
@ -0,0 +1,19 @@
|
||||
'use strict';
|
||||
|
||||
const { By, until } = require('selenium-webdriver');
|
||||
const { register, Page, platforms } = require('../../../../../scripts/e2e');
|
||||
|
||||
class E2ETestPage extends Page {
|
||||
constructor(driver, platform) {
|
||||
super(driver, `http://localhost:3333/src/components/checkbox/test/standalone?ionicplatform=${platform}`);
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('checkbox/standalone', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate();
|
||||
});
|
||||
});
|
||||
});
|
||||
30
core/src/components/checkbox/test/standalone/index.html
Normal file
30
core/src/components/checkbox/test/standalone/index.html
Normal file
@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Checkbox - Standalone</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>
|
||||
<!-- Default -->
|
||||
<ion-checkbox checked></ion-checkbox>
|
||||
|
||||
<!-- Colors -->
|
||||
<ion-checkbox checked color="primary"></ion-checkbox>
|
||||
<ion-checkbox checked color="secondary"></ion-checkbox>
|
||||
<ion-checkbox checked color="tertiary"></ion-checkbox>
|
||||
<ion-checkbox checked color="success"></ion-checkbox>
|
||||
<ion-checkbox checked color="warning"></ion-checkbox>
|
||||
<ion-checkbox checked color="danger"></ion-checkbox>
|
||||
<ion-checkbox checked color="light"></ion-checkbox>
|
||||
<ion-checkbox checked color="medium"></ion-checkbox>
|
||||
<ion-checkbox checked color="dark"></ion-checkbox>
|
||||
|
||||
<!-- Disabled -->
|
||||
<ion-checkbox disabled></ion-checkbox>
|
||||
<ion-checkbox disabled checked></ion-checkbox>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user