javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs()

Browse Source
This commit is contained in:
mhartington
2018-01-09 16:05:48 -05:00
parent 77a2ccb463
commit 3de89c8834
2 changed files with 42 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/core/src/components/checkbox/checkbox.tsx
View File

@ -21,16 +21,14 @@ export class Checkbox implements CheckboxInput {
@State() keyFocus: boolean; @State() keyFocus: boolean;
/** /**
* @input {string} The color to use from your Sass `$colors` map. * The color to use.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;
/** /**
* @input {string} The mode determines which platform styles to use. * The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`. * Possible values are: `"ios"` or `"md"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/ */
@Prop() mode: 'ios' | 'md'; @Prop() mode: 'ios' | 'md';
@ -40,41 +38,40 @@ export class Checkbox implements CheckboxInput {
@Prop() name: string; @Prop() name: string;
/** /**
* @input {boolean} If true, the checkbox is selected. Defaults to `false`. * If true, the checkbox is selected. Defaults to `false`.
*/ */
@Prop({ mutable: true }) checked = false; @Prop({ mutable: true }) checked = false;
/* /**
* @input {boolean} If true, the user cannot interact with the checkbox. Default false. * If true, the user cannot interact with the checkbox. Default false.
*/ */
@Prop() disabled = false; @Prop() disabled = false;
/** /**
* @input {string} the value of the checkbox. * the value of the checkbox.
*/ */
@Prop({ mutable: true }) value: string; @Prop({ mutable: true }) value: string;
/** /**
* @output {Event} Emitted when the checked property has changed. * Emitted when the checked property has changed.
*/ */
@Event() ionChange: EventEmitter<CheckedInputChangeEvent>; @Event() ionChange: EventEmitter<CheckedInputChangeEvent>;
/** /**
* @output {Event} Emitted when the toggle has focus. * Emitted when the toggle has focus.
*/ */
@Event() ionFocus: EventEmitter<FocusEvent>; @Event() ionFocus: EventEmitter<FocusEvent>;
/** /**
* @output {Event} Emitted when the toggle loses focus. * Emitted when the toggle loses focus.
*/ */
@Event() ionBlur: EventEmitter<BlurEvent>; @Event() ionBlur: EventEmitter<BlurEvent>;
/** /**
* @output {Event} Emitted when the styles change. * Emitted when the styles change.
*/ */
@Event() ionStyle: EventEmitter<StyleEvent>; @Event() ionStyle: EventEmitter<StyleEvent>;
componentWillLoad() { componentWillLoad() {
this.inputId = 'ion-cb-' + (checkboxIds++); this.inputId = 'ion-cb-' + (checkboxIds++);
if (this.value === undefined) { if (this.value === undefined) {

32
packages/core/src/components/checkbox/readme.md
View File

@ -36,21 +36,31 @@ Placed in an `ion-item` or used as a stand-alone checkbox.
boolean boolean
If true, the checkbox is selected. Defaults to `false`.
#### color #### color
string string
The color to use.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
#### disabled #### disabled
boolean boolean
If true, the user cannot interact with the checkbox. Default false.
#### mode #### mode
any any
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
#### name #### name
@ -63,6 +73,8 @@ The name of the control, which is submitted with the form data.
string string
the value of the checkbox.
## Attributes ## Attributes
@ -70,21 +82,31 @@ string
boolean boolean
If true, the checkbox is selected. Defaults to `false`.
#### color #### color
string string
The color to use.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
#### disabled #### disabled
boolean boolean
If true, the user cannot interact with the checkbox. Default false.
#### mode #### mode
any any
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
#### name #### name
@ -97,20 +119,30 @@ The name of the control, which is submitted with the form data.
string string
the value of the checkbox.
## Events ## Events
#### ionBlur #### ionBlur
Emitted when the toggle loses focus.
#### ionChange #### ionChange
Emitted when the checked property has changed.
#### ionFocus #### ionFocus
Emitted when the toggle has focus.
#### ionStyle #### ionStyle
Emitted when the styles change.
---------------------------------------------- ----------------------------------------------