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

docs(API): update descriptions to be more clear

Browse Source 
also update descriptions for the same properties to be more consistent,
and reword all events to start and end the same.

closes #10248 closes driftyco/ionic-site#613 closes
driftyco/ionic-site#899
This commit is contained in:
Brandy Carney
2017-01-31 17:47:52 -05:00
parent ace727e627
commit cc21f93b87
39 changed files with 304 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/alert/alert.ts
View File

@ -239,7 +239,7 @@ export class Alert extends ViewController {
* | Property | Type | Description | * | Property | Type | Description |
* |----------|----------|-----------------------------------------------------------------| * |----------|----------|-----------------------------------------------------------------|
* | text | `string` | The buttons displayed text. | * | text | `string` | The buttons displayed text. |
* | handler | `any` | Expression that should be evaluated when the button is pressed. | * | handler | `any` | Emitted when the button is pressed. |
* | cssClass | `string` | An additional CSS class for the button. | * | cssClass | `string` | An additional CSS class for the button. |
* | role | `string` | The buttons role, null or `cancel`. | * | role | `string` | The buttons role, null or `cancel`. |
* *

8
src/components/badge/badge.ts
View File

@ -17,7 +17,9 @@ import { Ion } from '../ion';
export class Badge extends Ion { export class Badge extends Ion {
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -25,7 +27,9 @@ export class Badge extends Ion {
} }
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {

29
src/components/button/button.ts
View File

@ -153,7 +153,7 @@ export class Button extends Ion {
_init: boolean; _init: boolean;
/** /**
* @input {boolean} Large button. * @input {boolean} If true, activates the large button size.
*/ */
@Input() @Input()
set large(val: boolean) { set large(val: boolean) {
@ -161,7 +161,7 @@ export class Button extends Ion {
} }
/** /**
* @input {boolean} Small button. * @input {boolean} If true, activates the small button size.
*/ */
@Input() @Input()
set small(val: boolean) { set small(val: boolean) {
@ -169,7 +169,7 @@ export class Button extends Ion {
} }
/** /**
* @input {boolean} Default button. * @input {boolean} If true, activates the default button size. Normally the default, useful for buttons in an item.
*/ */
@Input() @Input()
set default(val: boolean) { set default(val: boolean) {
@ -177,7 +177,7 @@ export class Button extends Ion {
} }
/** /**
* @input {boolean} A transparent button with a border. * @input {boolean} If true, activates a transparent button style with a border.
*/ */
@Input() @Input()
set outline(val: boolean) { set outline(val: boolean) {
@ -185,7 +185,7 @@ export class Button extends Ion {
} }
/** /**
* @input {boolean} A transparent button without a border. * @input {boolean} If true, activates a transparent button style without a border.
*/ */
@Input() @Input()
set clear(val: boolean) { set clear(val: boolean) {
@ -193,7 +193,7 @@ export class Button extends Ion {
} }
/** /**
* @input {boolean} Force a solid button. Useful for buttons within an item. * @input {boolean} If true, activates a solid button style. Normally the default, useful for buttons in a toolbar.
*/ */
@Input() @Input()
set solid(val: boolean) { set solid(val: boolean) {
@ -201,7 +201,7 @@ export class Button extends Ion {
} }
/** /**
* @input {boolean} A button with rounded corners. * @input {boolean} If true, activates a button with rounded corners.
*/ */
@Input() @Input()
set round(val: boolean) { set round(val: boolean) {
@ -209,7 +209,7 @@ export class Button extends Ion {
} }
/** /**
* @input {boolean} A button that fills its parent container with a border-radius. * @input {boolean} If true, activates a button style that fills the available width.
*/ */
@Input() @Input()
set block(val: boolean) { set block(val: boolean) {
@ -217,7 +217,8 @@ export class Button extends Ion {
} }
/** /**
* @input {boolean} A button that fills its parent container without a border-radius or borders on the left/right. * @input {boolean} If true, activates a button style that fills the available width without
* a left and right border.
*/ */
@Input() @Input()
set full(val: boolean) { set full(val: boolean) {
@ -225,7 +226,7 @@ export class Button extends Ion {
} }
/** /**
* @input {boolean} A button that has strong importance, ie. it represents an important action. * @input {boolean} If true, activates a button with a heavier font weight.
*/ */
@Input() @Input()
set strong(val: boolean) { set strong(val: boolean) {
@ -233,7 +234,9 @@ export class Button extends Ion {
} }
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {
@ -264,7 +267,9 @@ export class Button extends Ion {
} }
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {

34
src/components/card/card.ts
View File

@ -13,7 +13,9 @@ import { Ion } from '../ion';
export class Card extends Ion { export class Card extends Ion {
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -21,7 +23,9 @@ export class Card extends Ion {
} }
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {
@ -44,7 +48,9 @@ export class Card extends Ion {
export class CardContent extends Ion { export class CardContent extends Ion {
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -52,8 +58,10 @@ export class CardContent extends Ion {
} }
/** /**
* @input {string} The mode to apply to this component. * @input {string} The mode determines which platform styles to use.
*/ * Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/
@Input() @Input()
set mode(val: string) { set mode(val: string) {
this._setMode(val); this._setMode(val);
@ -75,7 +83,9 @@ export class CardContent extends Ion {
export class CardHeader extends Ion { export class CardHeader extends Ion {
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -83,7 +93,9 @@ export class CardHeader extends Ion {
} }
/** /**
* @input {string} The mode to apply to this component. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {
@ -105,7 +117,9 @@ export class CardHeader extends Ion {
export class CardTitle extends Ion { export class CardTitle extends Ion {
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -113,7 +127,9 @@ export class CardTitle extends Ion {
} }
/** /**
* @input {string} The mode to apply to this component. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {

14
src/components/checkbox/checkbox.ts
View File

@ -87,7 +87,9 @@ export class Checkbox extends Ion implements IonicTapInput, AfterContentInit, Co
id: string; id: string;
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -95,7 +97,9 @@ export class Checkbox extends Ion implements IonicTapInput, AfterContentInit, Co
} }
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {
@ -103,7 +107,7 @@ export class Checkbox extends Ion implements IonicTapInput, AfterContentInit, Co
} }
/** /**
* @output {Checkbox} expression to evaluate when the checkbox value changes * @output {Checkbox} Emitted when the checkbox value changes.
*/ */
@Output() ionChange: EventEmitter<Checkbox> = new EventEmitter<Checkbox>(); @Output() ionChange: EventEmitter<Checkbox> = new EventEmitter<Checkbox>();
@ -138,7 +142,7 @@ export class Checkbox extends Ion implements IonicTapInput, AfterContentInit, Co
} }
/** /**
* @input {boolean} whether or not the checkbox is checked (defaults to false) * @input {boolean} If `true`, the element is selected.
*/ */
@Input() @Input()
get checked(): boolean { get checked(): boolean {
@ -189,7 +193,7 @@ export class Checkbox extends Ion implements IonicTapInput, AfterContentInit, Co
registerOnTouched(fn: any) { this.onTouched = fn; } registerOnTouched(fn: any) { this.onTouched = fn; }
/** /**
* @input {boolean} whether or not the checkbox is disabled or not. * @input {boolean} If true, the user cannot interact with this element.
*/ */
@Input() @Input()
get disabled(): boolean { get disabled(): boolean {

8
src/components/chip/chip.ts
View File

@ -96,7 +96,9 @@ import { Ion } from '../ion';
export class Chip extends Ion { export class Chip extends Ion {
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -104,7 +106,9 @@ export class Chip extends Ion {
} }
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {

14
src/components/content/content.ts
View File

@ -463,23 +463,15 @@ export class Content extends Ion implements OnDestroy, OnInit {
} }
/** /**
* @input {boolean} By default, content is positioned between the headers * @input {boolean} If true, the content will scroll behind the headers
* and footers. However, using `fullscreen="true"`, the content will be * and footers. This effect can easily be seen by setting the toolbar
* able to scroll "under" the headers and footers. At first glance the * to transparent.
* fullscreen option may not look any different than the default, however,
* by adding a transparency effect to a header then the content can be
* seen under the header as the user scrolls.
*
* @returns {boolean}
*/ */
@Input() @Input()
get fullscreen(): boolean { get fullscreen(): boolean {
return !!this._fullscreen; return !!this._fullscreen;
} }
/**
* @param {boolean} val
*/
set fullscreen(val: boolean) { set fullscreen(val: boolean) {
this._fullscreen = isTrueProperty(val); this._fullscreen = isTrueProperty(val);
} }

14
src/components/datetime/datetime.ts
View File

@ -408,7 +408,9 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
@Input() pickerOptions: any = {}; @Input() pickerOptions: any = {};
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {
@ -416,12 +418,12 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
} }
/** /**
* @output {any} Any expression to evaluate when the datetime selection has changed. * @output {any} Emitted when the datetime selection has changed.
*/ */
@Output() ionChange: EventEmitter<any> = new EventEmitter(); @Output() ionChange: EventEmitter<any> = new EventEmitter();
/** /**
* @output {any} Any expression to evaluate when the datetime selection was cancelled. * @output {any} Emitted when the datetime selection was cancelled.
*/ */
@Output() ionCancel: EventEmitter<any> = new EventEmitter(); @Output() ionCancel: EventEmitter<any> = new EventEmitter();
@ -784,14 +786,14 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
} }
/** /**
* @input {boolean} Whether or not the datetime component is disabled. Default `false`. * @input {boolean} If true, the user cannot interact with this element.
*/ */
@Input() @Input()
get disabled() { get disabled(): boolean {
return this._disabled; return this._disabled;
} }
set disabled(val) { set disabled(val: boolean) {
this._disabled = isTrueProperty(val); this._disabled = isTrueProperty(val);
this._item && this._item.setElementClass('item-datetime-disabled', this._disabled); this._item && this._item.setElementClass('item-datetime-disabled', this._disabled);
} }

8
src/components/fab/fab.ts
View File

@ -66,7 +66,9 @@ import { UIEventManager } from '../../gestures/ui-event-manager';
export class FabButton extends Ion { export class FabButton extends Ion {
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -74,7 +76,9 @@ export class FabButton extends Ion {
} }
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {

19
src/components/icon/icon.ts
View File

@ -57,7 +57,9 @@ export class Icon extends Ion {
_css: string = ''; _css: string = '';
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
get color(): string { get color(): string {
@ -68,7 +70,9 @@ export class Icon extends Ion {
} }
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {
@ -94,7 +98,8 @@ export class Icon extends Ion {
} }
/** /**
* @input {string} Icon to use. Will load the appropriate icon for each mode * @input {string} Specifies which icon to use. The appropriate icon will be used based on the mode.
* For more information, see [Ionicons](/docs/v2/ionicons/).
*/ */
@Input() @Input()
get name(): string { get name(): string {
@ -113,7 +118,7 @@ export class Icon extends Ion {
} }
/** /**
* @input {string} Explicitly set the icon to use on iOS * @input {string} Specifies which icon to use on `ios` mode.
*/ */
@Input() @Input()
get ios(): string { get ios(): string {
@ -126,7 +131,7 @@ export class Icon extends Ion {
} }
/** /**
* @input {string} Explicitly set the icon to use on MD * @input {string} Specifies which icon to use on `md` mode.
*/ */
@Input() @Input()
get md(): string { get md(): string {
@ -140,7 +145,9 @@ export class Icon extends Ion {
/** /**
* @input {bool} Whether or not the icon has an "active" appearance. On iOS an active icon is filled in or full appearance, and an inactive icon on iOS will use an outlined version of the icon same icon. Material Design icons do not change appearance depending if they're active or not. The `isActive` property is largely used by the tabbar. * @input {boolean} If true, the icon is styled with an "active" appearance.
* An active icon is filled in, and an inactive icon is the outline of the icon.
* The `isActive` property is largely used by the tabbar. Only affects `ios` icons.
*/ */
@Input() @Input()
get isActive(): boolean { get isActive(): boolean {

2
src/components/img/img.ts
View File

@ -146,7 +146,7 @@ export class Img implements OnDestroy {
} }
/** /**
* @input {string} Image src. * @input {string} The source of the image.
*/ */
@Input() @Input()
get src(): string { get src(): string {

4
src/components/infinite-scroll/infinite-scroll.ts
View File

@ -137,7 +137,7 @@ export class InfiniteScroll {
} }
/** /**
* @input {boolean} Whether or not the infinite scroll should be * @input {boolean} If true, Whether or not the infinite scroll should be
* enabled or not. Setting to `false` will remove scroll event listeners * enabled or not. Setting to `false` will remove scroll event listeners
* and hide the display. * and hide the display.
*/ */
@ -147,7 +147,7 @@ export class InfiniteScroll {
} }
/** /**
* @output {event} The expression to call when the scroll reaches * @output {event} Emitted when the scroll reaches
* the threshold distance. From within your infinite handler, * the threshold distance. From within your infinite handler,
* you must call the infinite scroll's `complete()` method when * you must call the infinite scroll's `complete()` method when
* your async operation has completed. * your async operation has completed.

24
src/components/input/input.ts
View File

@ -163,12 +163,12 @@ export class TextInput extends Ion implements IonicFormInput {
} }
/** /**
* @input {string} The placeholder for the input * @input {string} Instructional text that shows before the input has a value.
*/ */
@Input() placeholder: string = ''; @Input() placeholder: string = '';
/** /**
* @input {boolean} A clear icon will appear in the input when there is a value. Clicking it clears the input. * @input {boolean} If true, a clear icon will appear in the input when there is a value. Clicking it clears the input.
*/ */
@Input() @Input()
get clearInput() { get clearInput() {
@ -179,7 +179,7 @@ export class TextInput extends Ion implements IonicFormInput {
} }
/** /**
* @input {string} The text value of the input * @input {string} The text value of the input.
*/ */
@Input() @Input()
get value() { get value() {
@ -191,7 +191,7 @@ export class TextInput extends Ion implements IonicFormInput {
} }
/** /**
* @input {string} The HTML input type (text, password, email, number, search, tel, or url) * @input {string} The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`.
*/ */
@Input() @Input()
get type() { get type() {
@ -212,10 +212,10 @@ export class TextInput extends Ion implements IonicFormInput {
} }
/** /**
* @input {boolean} If the input should be disabled or not * @input {boolean} If true, the user cannot interact with this element.
*/ */
@Input() @Input()
get disabled() { get disabled(): boolean {
return this._disabled; return this._disabled;
} }
set disabled(val: boolean) { set disabled(val: boolean) {
@ -239,7 +239,7 @@ export class TextInput extends Ion implements IonicFormInput {
} }
/** /**
* @input {boolean} If the input should be readonly or not * @input {boolean} If true, the user cannot modify the value.
*/ */
@Input() @Input()
get readonly() { get readonly() {
@ -250,7 +250,9 @@ export class TextInput extends Ion implements IonicFormInput {
} }
/** /**
* @input {string} The mode to apply to this component. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {
@ -258,7 +260,7 @@ export class TextInput extends Ion implements IonicFormInput {
} }
/** /**
* @input {boolean} whether to clear the input upon editing or not * @input {boolean} If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
*/ */
@Input() @Input()
get clearOnEdit() { get clearOnEdit() {
@ -355,12 +357,12 @@ export class TextInput extends Ion implements IonicFormInput {
} }
/** /**
* @output {event} Expression to call when the input no longer has focus * @output {event} Emitted when the input no longer has focus.
*/ */
@Output() blur: EventEmitter<Event> = new EventEmitter<Event>(); @Output() blur: EventEmitter<Event> = new EventEmitter<Event>();
/** /**
* @output {event} Expression to call when the input has focus * @output {event} Emitted when the input has focus.
*/ */
@Output() focus: EventEmitter<Event> = new EventEmitter<Event>(); @Output() focus: EventEmitter<Event> = new EventEmitter<Event>();

2
src/components/item/item-reorder.ts
View File

@ -154,7 +154,7 @@ export class ItemReorder implements ItemReorderGestureDelegate {
_element: HTMLElement; _element: HTMLElement;
/** /**
* @output {object} The expression to evaluate when the item is reordered. Emits an object * @output {object} Emitted when the item is reordered. Emits an object
* with `from` and `to` properties. * with `from` and `to` properties.
*/ */
@Output() ionItemReorder: EventEmitter<ReorderIndexes> = new EventEmitter<ReorderIndexes>(); @Output() ionItemReorder: EventEmitter<ReorderIndexes> = new EventEmitter<ReorderIndexes>();

6
src/components/item/item-sliding.ts
View File

@ -42,13 +42,13 @@ export const enum ItemSideFlags {
}) })
export class ItemOptions { export class ItemOptions {
/** /**
* @input {string} the side the option button should be on. Defaults to right. * @input {string} The side the option button should be on. Defaults to `"right"`.
* If you have multiple `ion-item-options`, a side must be provided for each. * If you have multiple `ion-item-options`, a side must be provided for each.
*/ */
@Input() side: string; @Input() side: string;
/** /**
* @output {event} Expression to evaluate when the item has been fully swiped. * @output {event} Emitted when the item has been fully swiped.
*/ */
@Output() ionSwipe: EventEmitter<ItemSliding> = new EventEmitter<ItemSliding>(); @Output() ionSwipe: EventEmitter<ItemSliding> = new EventEmitter<ItemSliding>();
@ -196,7 +196,7 @@ export class ItemSliding {
@ContentChild(Item) item: Item; @ContentChild(Item) item: Item;
/** /**
* @output {event} Expression to evaluate when the sliding position changes. * @output {event} Emitted when the sliding position changes.
* It reports the relative position. * It reports the relative position.
* *
* ```ts * ```ts

18
src/components/item/item.ts
View File

@ -312,7 +312,9 @@ export class Item extends Ion {
labelId: string = null; labelId: string = null;
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -320,7 +322,9 @@ export class Item extends Ion {
} }
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {
@ -460,7 +464,9 @@ export class Item extends Ion {
export class ItemDivider extends Ion { export class ItemDivider extends Ion {
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -468,8 +474,10 @@ export class ItemDivider extends Ion {
} }
/** /**
* @input {string} The mode to apply to this component. * @input {string} The mode determines which platform styles to use.
*/ * Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/
@Input() @Input()
set mode(val: string) { set mode(val: string) {
this._setMode(val); this._setMode(val);

8
src/components/label/label.ts
View File

@ -61,7 +61,9 @@ export class Label extends Ion {
private _id: string; private _id: string;
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -69,7 +71,9 @@ export class Label extends Ion {
} }
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {

8
src/components/list/list-header.ts
View File

@ -12,7 +12,9 @@ import { Ion } from '../ion';
export class ListHeader extends Ion { export class ListHeader extends Ion {
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -20,7 +22,9 @@ export class ListHeader extends Ion {
} }
/** /**
* @input {string} The mode to apply to this component. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {

6
src/components/list/list.ts
View File

@ -63,7 +63,9 @@ export class List extends Ion {
} }
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {
@ -71,7 +73,7 @@ export class List extends Ion {
} }
/** /**
* @input {boolean} shouldEnable whether the item-sliding should be enabled or not * @input {boolean} If true, the sliding items will be enabled.
*/ */
@Input() @Input()
get sliding(): boolean { get sliding(): boolean {

12
src/components/menu/menu.ts
View File

@ -240,7 +240,7 @@ export class Menu {
@Input() type: string; @Input() type: string;
/** /**
* @input {boolean} Whether or not the menu should be enabled. Default `true`. * @input {boolean} If true, the menu is enabled. Default `true`.
*/ */
@Input() @Input()
get enabled(): boolean { get enabled(): boolean {
@ -253,7 +253,7 @@ export class Menu {
} }
/** /**
* @input {boolean} Whether or not swiping the menu should be enabled. Default `true`. * @input {boolean} If true, swiping the menu is enabled. Default `true`.
*/ */
@Input() @Input()
get swipeEnabled(): boolean { get swipeEnabled(): boolean {
@ -266,7 +266,7 @@ export class Menu {
} }
/** /**
* @input {string} Whether or not the menu should persist on child pages. Default `false`. * @input {boolean} If true, the menu will persist on child pages.
*/ */
@Input() @Input()
get persistent(): boolean { get persistent(): boolean {
@ -283,17 +283,17 @@ export class Menu {
@Input() maxEdgeStart: number; @Input() maxEdgeStart: number;
/** /**
* @output {event} When the menu is being dragged open. * @output {event} Emitted when the menu is being dragged open.
*/ */
@Output() ionDrag: EventEmitter<number> = new EventEmitter<number>(); @Output() ionDrag: EventEmitter<number> = new EventEmitter<number>();
/** /**
* @output {event} When the menu has been opened. * @output {event} Emitted when the menu has been opened.
*/ */
@Output() ionOpen: EventEmitter<boolean> = new EventEmitter<boolean>(); @Output() ionOpen: EventEmitter<boolean> = new EventEmitter<boolean>();
/** /**
* @output {event} When the menu has been closed. * @output {event} Emitted when the menu has been closed.
*/ */
@Output() ionClose: EventEmitter<boolean> = new EventEmitter<boolean>(); @Output() ionClose: EventEmitter<boolean> = new EventEmitter<boolean>();

2
src/components/nav/nav.ts
View File

@ -146,7 +146,7 @@ export class Nav extends NavControllerBase implements AfterViewInit {
@Input() rootParams: any; @Input() rootParams: any;
/** /**
* @input {boolean} Whether it's possible to swipe-to-go-back on this nav controller or not. * @input {boolean} If true, swipe to go back is enabled.
*/ */
@Input() @Input()
get swipeBackEnabled(): boolean { get swipeBackEnabled(): boolean {

10
src/components/navbar/navbar.ts
View File

@ -87,7 +87,9 @@ export class Navbar extends ToolbarBase {
_sbPadding: boolean; _sbPadding: boolean;
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -95,7 +97,9 @@ export class Navbar extends ToolbarBase {
} }
/** /**
* @input {string} The mode to apply to this component. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {
@ -103,7 +107,7 @@ export class Navbar extends ToolbarBase {
} }
/** /**
* @input {boolean} whether the back button should be shown or not * @input {boolean} If true, the back button will be hidden.
*/ */
@Input() @Input()
get hideBackButton(): boolean { get hideBackButton(): boolean {

8
src/components/note/note.ts
View File

@ -33,7 +33,9 @@ import { Ion } from '../ion';
export class Note extends Ion { export class Note extends Ion {
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -41,7 +43,9 @@ export class Note extends Ion {
} }
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {

12
src/components/option/option.ts
View File

@ -18,14 +18,14 @@ export class Option {
_value: any; _value: any;
/** /**
* @input {any} Event to evaluate when option is selected * @output {any} Event to evaluate when option is selected.
*/ */
@Output() ionSelect: EventEmitter<any> = new EventEmitter(); @Output() ionSelect: EventEmitter<any> = new EventEmitter();
constructor(private _elementRef: ElementRef) {} constructor(private _elementRef: ElementRef) {}
/** /**
* @input {boolean} Whether or not the option is already selected * @input {boolean} If true, the element is selected.
*/ */
@Input() @Input()
get selected() { get selected() {
@ -37,7 +37,7 @@ export class Option {
} }
/** /**
* @input {any} The value of the option * @input {any} The value of the option.
*/ */
@Input() @Input()
get value() { get value() {
@ -52,14 +52,14 @@ export class Option {
} }
/** /**
* @input {boolean} Whether or not the option is disabled * @input {boolean} If true, the user cannot interact with this element.
*/ */
@Input() @Input()
get disabled() { get disabled(): boolean {
return this._disabled; return this._disabled;
} }
set disabled(val) { set disabled(val: boolean) {
this._disabled = isTrueProperty(val); this._disabled = isTrueProperty(val);
} }

18
src/components/radio/radio-button.ts
View File

@ -91,7 +91,9 @@ export class RadioButton extends Ion implements IonicTapInput, OnDestroy, OnInit
id: string; id: string;
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -103,7 +105,9 @@ export class RadioButton extends Ion implements IonicTapInput, OnDestroy, OnInit
} }
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {
@ -111,7 +115,7 @@ export class RadioButton extends Ion implements IonicTapInput, OnDestroy, OnInit
} }
/** /**
* @output {any} expression to be evaluated when selected * @output {any} Emitted when the radio button is selected.
*/ */
@Output() ionSelect: EventEmitter<any> = new EventEmitter(); @Output() ionSelect: EventEmitter<any> = new EventEmitter();
@ -153,15 +157,15 @@ export class RadioButton extends Ion implements IonicTapInput, OnDestroy, OnInit
} }
/** /**
* @input {boolean} Whether the radio button should be checked or not. Default false. * @input {boolean} If true, the element is selected, and other buttons in the group are unselected.
*/ */
@Input() @Input()
get checked(): boolean { get checked(): boolean {
return this._checked; return this._checked;
} }
set checked(isChecked: boolean) { set checked(val: boolean) {
this._checked = isTrueProperty(isChecked); this._checked = isTrueProperty(val);
if (this._item) { if (this._item) {
this._item.setElementClass('item-radio-checked', this._checked); this._item.setElementClass('item-radio-checked', this._checked);
@ -169,7 +173,7 @@ export class RadioButton extends Ion implements IonicTapInput, OnDestroy, OnInit
} }
/** /**
* @input {boolean} Whether the radio button should be disabled or not. Default false. * @input {boolean} If true, the user cannot interact with this element.
*/ */
@Input() @Input()
get disabled(): boolean { get disabled(): boolean {

4
src/components/radio/radio-group.ts
View File

@ -107,7 +107,7 @@ export class RadioGroup {
id: number; id: number;
/** /**
* @input {boolean} Whether all radio buttons in the group should be disabled. Default false. * @input {boolean} If true, the user cannot interact with any of the buttons in the group.
*/ */
@Input() @Input()
get disabled(): boolean { get disabled(): boolean {
@ -118,7 +118,7 @@ export class RadioGroup {
} }
/** /**
* @output {any} expression to be evaluated when selection has been changed * @output {any} Emitted when the selected button has changed.
*/ */
@Output() ionChange: EventEmitter<RadioGroup> = new EventEmitter<RadioGroup>(); @Output() ionChange: EventEmitter<RadioGroup> = new EventEmitter<RadioGroup>();

13
src/components/range/range.ts
View File

@ -152,8 +152,9 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
value: any; value: any;
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, * @input {string} The color to use from your Sass `$colors` map.
* `"secondary"`, `"danger"`. * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -161,7 +162,9 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
} }
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {
@ -263,7 +266,7 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
} }
/** /**
* @input {boolean} Whether or not the range is disabled. Defaults to `false`. * @input {boolean} If true, the user cannot interact with this element.
*/ */
@Input() @Input()
get disabled(): boolean { get disabled(): boolean {
@ -300,7 +303,7 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
} }
/** /**
* @output {Range} Expression to evaluate when the range value changes. * @output {Range} Emitted when the range value changes.
*/ */
@Output() ionChange: EventEmitter<Range> = new EventEmitter<Range>(); @Output() ionChange: EventEmitter<Range> = new EventEmitter<Range>();

12
src/components/refresher/refresher.ts
View File

@ -182,20 +182,20 @@ export class Refresher {
} }
/** /**
* @output {event} When the user lets go and has pulled down far enough, which would be * @output {event} Emitted when the user lets go and has pulled down
* farther than the `pullMin`, then your refresh hander if fired and the state is * far enough, which would be farther than the `pullMin`, then your refresh hander if
* updated to `refreshing`. From within your refresh handler, you must call the * fired and the state is updated to `refreshing`. From within your refresh handler,
* `complete()` method when your async operation has completed. * you must call the `complete()` method when your async operation has completed.
*/ */
@Output() ionRefresh: EventEmitter<Refresher> = new EventEmitter<Refresher>(); @Output() ionRefresh: EventEmitter<Refresher> = new EventEmitter<Refresher>();
/** /**
* @output {event} While the user is pulling down the content and exposing the refresher. * @output {event} Emitted while the user is pulling down the content and exposing the refresher.
*/ */
@Output() ionPull: EventEmitter<Refresher> = new EventEmitter<Refresher>(); @Output() ionPull: EventEmitter<Refresher> = new EventEmitter<Refresher>();
/** /**
* @output {event} When the user begins to start pulling down. * @output {event} Emitted when the user begins to start pulling down.
*/ */
@Output() ionStart: EventEmitter<Refresher> = new EventEmitter<Refresher>(); @Output() ionStart: EventEmitter<Refresher> = new EventEmitter<Refresher>();

8
src/components/scroll/scroll.ts
View File

@ -41,7 +41,7 @@ export class Scroll {
_maxZoom: number = 1; _maxZoom: number = 1;
/** /**
* @input {boolean} whether to enable scrolling along the X axis * @input {boolean} If true, scrolling along the X axis is enabled.
*/ */
@Input() @Input()
get scrollX() { get scrollX() {
@ -52,7 +52,7 @@ export class Scroll {
} }
/** /**
* @input {boolean} whether to enable scrolling along the Y axis; requires the following CSS declaration: ion-scroll { white-space: nowrap; } * @input {boolean} If true, scrolling along the Y axis is enabled; requires the following CSS declaration: ion-scroll { white-space: nowrap; }
*/ */
@Input() @Input()
get scrollY() { get scrollY() {
@ -63,7 +63,7 @@ export class Scroll {
} }
/** /**
* @input {boolean} whether to enable zooming * @input {boolean} If true, zooming is enabled.
*/ */
@Input() @Input()
get zoom() { get zoom() {
@ -74,7 +74,7 @@ export class Scroll {
} }
/** /**
* @input {number} set the max zoom amount for ion-scroll * @input {number} Set the max zoom amount.
*/ */
@Input() @Input()
get maxZoom() { get maxZoom() {

22
src/components/searchbar/searchbar.ts
View File

@ -67,7 +67,9 @@ export class Searchbar extends Ion {
_animated: boolean = false; _animated: boolean = false;
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -75,7 +77,9 @@ export class Searchbar extends Ion {
} }
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {
@ -88,7 +92,7 @@ export class Searchbar extends Ion {
@Input() cancelButtonText: string = 'Cancel'; @Input() cancelButtonText: string = 'Cancel';
/** /**
* @input {boolean} Whether to show the cancel button or not. Default: `"false"`. * @input {boolean} If true, show the cancel button.
*/ */
@Input() @Input()
get showCancelButton(): boolean { get showCancelButton(): boolean {
@ -144,7 +148,7 @@ export class Searchbar extends Ion {
@Input() type: string = 'search'; @Input() type: string = 'search';
/** /**
* @input {boolean} Configures if the searchbar is animated or no. By default, animation is `false`. * @input {boolean} If true, enable searchbar animation.
*/ */
@Input() @Input()
get animated(): boolean { get animated(): boolean {
@ -155,27 +159,27 @@ export class Searchbar extends Ion {
} }
/** /**
* @output {event} When the Searchbar input has changed including cleared. * @output {event} Emitted when the Searchbar input has changed, including when it's cleared.
*/ */
@Output() ionInput: EventEmitter<UIEvent> = new EventEmitter<UIEvent>(); @Output() ionInput: EventEmitter<UIEvent> = new EventEmitter<UIEvent>();
/** /**
* @output {event} When the Searchbar input has blurred. * @output {event} Emitted when the Searchbar input has blurred.
*/ */
@Output() ionBlur: EventEmitter<UIEvent> = new EventEmitter<UIEvent>(); @Output() ionBlur: EventEmitter<UIEvent> = new EventEmitter<UIEvent>();
/** /**
* @output {event} When the Searchbar input has focused. * @output {event} Emitted when the Searchbar input has focused.
*/ */
@Output() ionFocus: EventEmitter<UIEvent> = new EventEmitter<UIEvent>(); @Output() ionFocus: EventEmitter<UIEvent> = new EventEmitter<UIEvent>();
/** /**
* @output {event} When the cancel button is clicked. * @output {event} Emitted when the cancel button is clicked.
*/ */
@Output() ionCancel: EventEmitter<UIEvent> = new EventEmitter<UIEvent>(); @Output() ionCancel: EventEmitter<UIEvent> = new EventEmitter<UIEvent>();
/** /**
* @output {event} When the clear input button is clicked. * @output {event} Emitted when the clear input button is clicked.
*/ */
@Output() ionClear: EventEmitter<UIEvent> = new EventEmitter<UIEvent>(); @Output() ionClear: EventEmitter<UIEvent> = new EventEmitter<UIEvent>();

16
src/components/segment/segment.ts
View File

@ -63,14 +63,14 @@ export class SegmentButton {
@Input() value: string; @Input() value: string;
/** /**
* @output {SegmentButton} expression to evaluate when a segment button has been clicked * @output {SegmentButton} Emitted when a segment button has been clicked.
*/ */
@Output() ionSelect: EventEmitter<SegmentButton> = new EventEmitter<SegmentButton>(); @Output() ionSelect: EventEmitter<SegmentButton> = new EventEmitter<SegmentButton>();
constructor(private _renderer: Renderer, private _elementRef: ElementRef) {} constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
/** /**
* @input {boolean} disabled state of the button. Optional. * @input {boolean} If true, the user cannot interact with this element.
*/ */
@Input() @Input()
get disabled(): boolean { get disabled(): boolean {
@ -187,7 +187,9 @@ export class Segment extends Ion {
value: string; value: string;
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -195,7 +197,9 @@ export class Segment extends Ion {
} }
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {
@ -203,7 +207,7 @@ export class Segment extends Ion {
} }
/** /**
* @output {Any} expression to evaluate when a segment button has been changed * @output {Any} Emitted when a segment button has been changed.
*/ */
@Output() ionChange: EventEmitter<SegmentButton> = new EventEmitter<SegmentButton>(); @Output() ionChange: EventEmitter<SegmentButton> = new EventEmitter<SegmentButton>();
@ -227,7 +231,7 @@ export class Segment extends Ion {
} }
/** /**
* @private * @input {boolean} If true, the user cannot interact with any of the buttons in the segment.
*/ */
@Input() @Input()
get disabled(): boolean { get disabled(): boolean {

16
src/components/select/select.ts
View File

@ -191,7 +191,9 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
@Input() selectedText: string = ''; @Input() selectedText: string = '';
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {
@ -199,12 +201,12 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
} }
/** /**
* @output {any} Any expression you want to evaluate when the selection has changed. * @output {any} Emitted when the selection has changed.
*/ */
@Output() ionChange: EventEmitter<any> = new EventEmitter(); @Output() ionChange: EventEmitter<any> = new EventEmitter();
/** /**
* @output {any} Any expression you want to evaluate when the selection was cancelled. * @output {any} Emitted when the selection was cancelled.
*/ */
@Output() ionCancel: EventEmitter<any> = new EventEmitter(); @Output() ionCancel: EventEmitter<any> = new EventEmitter();
@ -366,7 +368,7 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
/** /**
* @input {boolean} Whether or not the select component can accept multiple values. Default: `false`. * @input {boolean} If true, the element can accept multiple values.
*/ */
@Input() @Input()
get multiple(): any { get multiple(): any {
@ -424,14 +426,14 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
} }
/** /**
* @input {boolean} Whether or not the select component is disabled. Default `false`. * @input {boolean} If true, the user cannot interact with this element.
*/ */
@Input() @Input()
get disabled() { get disabled(): boolean {
return this._disabled; return this._disabled;
} }
set disabled(val) { set disabled(val: boolean) {
this._disabled = isTrueProperty(val); this._disabled = isTrueProperty(val);
this._item && this._item.setElementClass('item-select-disabled', this._disabled); this._item && this._item.setElementClass('item-select-disabled', this._disabled);
} }

56
src/components/slides/slides.ts
View File

@ -147,7 +147,7 @@ import { ViewController } from '../../navigation/view-controller';
export class Slides extends Ion { export class Slides extends Ion {
/** /**
* @input {number} Delay between transitions (in milliseconds). If this * @input {number} Delay between transitions (in milliseconds). If this
* parameter is not passed, autoplay is disabled. Default does * parameter is not passed, autoplay is disabled. Default does
* not have a value and does not autoplay. * not have a value and does not autoplay.
* Default: `null`. * Default: `null`.
@ -162,7 +162,7 @@ export class Slides extends Ion {
private _autoplayMs: number; private _autoplayMs: number;
/** /**
* @input {Slides} Pass another Slides instance or array of Slides instances * @input {Slides} Pass another Slides instance or array of Slides instances
* that should be controlled by this Slides instance. * that should be controlled by this Slides instance.
* Default: `null`. * Default: `null`.
*/ */
@ -178,7 +178,8 @@ export class Slides extends Ion {
private _control: Slides | Slides[] = null; private _control: Slides | Slides[] = null;
/** /**
* @input {string} Could be `slide`, `fade`, `cube`, `coverflow` or `flip`. * @input {string} The animation effect of the slides.
* Possible values are: `slide`, `fade`, `cube`, `coverflow` or `flip`.
* Default: `slide`. * Default: `slide`.
*/ */
@Input() @Input()
@ -220,8 +221,8 @@ export class Slides extends Ion {
private _initialSlide = 0; private _initialSlide = 0;
/** /**
* @input {boolean} Whether to continuously loop from the last slide to the * @input {boolean} If true, continuously loop from the last slide to the
* first slide. Default: `false`. * first slide.
*/ */
@Input() @Input()
get loop() { get loop() {
@ -233,7 +234,7 @@ export class Slides extends Ion {
private _isLoop = false; private _isLoop = false;
/** /**
* @input {boolean} Whether or not to show the pager. Default: `false`. * @input {boolean} If true, show the pager.
*/ */
@Input() @Input()
get pager() { get pager() {
@ -245,7 +246,7 @@ export class Slides extends Ion {
private _pager = false; private _pager = false;
/** /**
* @input {string} String with type of pagination. Can be * @input {string} Type of pagination. Possible values are:
* `bullets`, `fraction`, `progress`. Default: `bullets`. * `bullets`, `fraction`, `progress`. Default: `bullets`.
* (Note that the pager will not show unless `pager` input * (Note that the pager will not show unless `pager` input
* is set to true). * is set to true).
@ -266,8 +267,8 @@ export class Slides extends Ion {
paginationBulletRender: (index?: number, cssClass?: string) => void = null; paginationBulletRender: (index?: number, cssClass?: string) => void = null;
/** /**
* @input {boolean} Enable, if you want to use "parallaxed" elements inside of * @input {boolean} If true, allows you to use "parallaxed" elements inside of
* slider. Default: `false`. * slider.
*/ */
@Input() @Input()
get parallax() { get parallax() {
@ -279,7 +280,7 @@ export class Slides extends Ion {
private _isParallax = false; private _isParallax = false;
/** /**
* @input {number} Duration of transition between slides * @input {number} Duration of transition between slides
* (in milliseconds). Default: `300`. * (in milliseconds). Default: `300`.
*/ */
@Input() @Input()
@ -292,8 +293,7 @@ export class Slides extends Ion {
private _speedMs = 300; private _speedMs = 300;
/** /**
* @input {boolean} Set to `true` to enable zooming functionality. * @input {boolean} If true, enables zooming functionality.
* Default: `false`.
*/ */
@Input() @Input()
get zoom() { get zoom() {
@ -334,7 +334,7 @@ export class Slides extends Ion {
// Slides grid // Slides grid
/** /**
* @input {number} Distance between slides in px. Default: `0`. * @input {number} Distance between slides in px. Default: `0`.
*/ */
@Input() @Input()
get spaceBetween() { get spaceBetween() {
@ -346,7 +346,7 @@ export class Slides extends Ion {
private _spaceBetween = 0; private _spaceBetween = 0;
/** /**
* @input {number} Slides per view. Slides visible at the same time. Default: `1`. * @input {number} Slides per view. Slides visible at the same time. Default: `1`.
*/ */
@Input() @Input()
get slidesPerView() { get slidesPerView() {
@ -645,72 +645,72 @@ export class Slides extends Ion {
originalEvent: any; originalEvent: any;
/** /**
* @output {Slides} Expression to evaluate when a slide change starts. * @output {Slides} Emitted when a slide change starts.
*/ */
@Output() ionSlideWillChange: EventEmitter<Slides> = new EventEmitter(); @Output() ionSlideWillChange: EventEmitter<Slides> = new EventEmitter();
/** /**
* @output {Slides} Expression to evaluate when a slide change ends. * @output {Slides} Emitted when a slide change ends.
*/ */
@Output() ionSlideDidChange: EventEmitter<Slides> = new EventEmitter(); @Output() ionSlideDidChange: EventEmitter<Slides> = new EventEmitter();
/** /**
* @output {Slides} Expression to evaluate when a slide moves. * @output {Slides} Emitted when a slide moves.
*/ */
@Output() ionSlideDrag: EventEmitter<Slides> = new EventEmitter(); @Output() ionSlideDrag: EventEmitter<Slides> = new EventEmitter();
/** /**
* @output {Slides} When slides reach its beginning (initial position). * @output {Slides} Emitted when slides reaches its beginning (initial position).
*/ */
@Output() ionSlideReachStart: EventEmitter<Slides> = new EventEmitter(); @Output() ionSlideReachStart: EventEmitter<Slides> = new EventEmitter();
/** /**
* @output {Slides} When slides reach its last slide. * @output {Slides} Emitted when slides reaches its last slide.
*/ */
@Output() ionSlideReachEnd: EventEmitter<Slides> = new EventEmitter(); @Output() ionSlideReachEnd: EventEmitter<Slides> = new EventEmitter();
/** /**
* @output {Slides} Expression to evaluate when a slide moves. * @output {Slides} Emitted when a slide moves.
*/ */
@Output() ionSlideAutoplay: EventEmitter<Slides> = new EventEmitter(); @Output() ionSlideAutoplay: EventEmitter<Slides> = new EventEmitter();
/** /**
* @output {Slides} Same as `ionSlideWillChange` but caused by autoplay. * @output {Slides} Emitted when a autoplay starts.
*/ */
@Output() ionSlideAutoplayStart: EventEmitter<Slides> = new EventEmitter(); @Output() ionSlideAutoplayStart: EventEmitter<Slides> = new EventEmitter();
/** /**
* @output {Slides} Expression to evaluate when a autoplay stops. * @output {Slides} Emitted when a autoplay stops.
*/ */
@Output() ionSlideAutoplayStop: EventEmitter<Slides> = new EventEmitter(); @Output() ionSlideAutoplayStop: EventEmitter<Slides> = new EventEmitter();
/** /**
* @output {Slides} Same as `ionSlideWillChange` but for "forward" direction only. * @output {Slides} Emitted when a slide change starts with the "forward" direction.
*/ */
@Output() ionSlideNextStart: EventEmitter<Slides> = new EventEmitter(); @Output() ionSlideNextStart: EventEmitter<Slides> = new EventEmitter();
/** /**
* @output {Slides} Same as `ionSlideWillChange` but for "backward" direction only. * @output {Slides} Emitted when a slide change starts with the "backward" direction.
*/ */
@Output() ionSlidePrevStart: EventEmitter<Slides> = new EventEmitter(); @Output() ionSlidePrevStart: EventEmitter<Slides> = new EventEmitter();
/** /**
* @output {Slides} Same as `ionSlideDidChange` but for "forward" direction only. * @output {Slides} Emitted when a slide change ends with the "forward" direction.
*/ */
@Output() ionSlideNextEnd: EventEmitter<Slides> = new EventEmitter(); @Output() ionSlideNextEnd: EventEmitter<Slides> = new EventEmitter();
/** /**
* @output {Slides} Same as `ionSlideDidChange` but for "backward" direction only. * @output {Slides} Emitted when a slide change ends with the "backward" direction.
*/ */
@Output() ionSlidePrevEnd: EventEmitter<Slides> = new EventEmitter(); @Output() ionSlidePrevEnd: EventEmitter<Slides> = new EventEmitter();
/** /**
* @output {Slides} When the user taps/clicks on the slide's container. * @output {Slides} Emitted when the user taps/clicks on the slide's container.
*/ */
@Output() ionSlideTap: EventEmitter<Slides> = new EventEmitter(); @Output() ionSlideTap: EventEmitter<Slides> = new EventEmitter();
/** /**
* @output {Slides} When the user double taps on the slide's container. * @output {Slides} Emitted when the user double taps on the slide's container.
*/ */
@Output() ionSlideDoubleTap: EventEmitter<Slides> = new EventEmitter(); @Output() ionSlideDoubleTap: EventEmitter<Slides> = new EventEmitter();

10
src/components/spinner/spinner.ts
View File

@ -121,7 +121,9 @@ export class Spinner extends Ion {
_paused: boolean = false; _paused: boolean = false;
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
get color(): string { get color(): string {
@ -132,7 +134,9 @@ export class Spinner extends Ion {
} }
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {
@ -164,7 +168,7 @@ export class Spinner extends Ion {
} }
/** /**
* @input {boolean} If the animation is paused or not. Defaults to `false`. * @input {boolean} If true, pause the animation.
*/ */
@Input() @Input()
get paused(): boolean { get paused(): boolean {

17
src/components/tabs/tab.ts
View File

@ -209,10 +209,9 @@ export class Tab extends NavControllerBase {
@Input() tabBadgeStyle: string; @Input() tabBadgeStyle: string;
/** /**
* @input {boolean} If the tab is enabled or not. If the tab * @input {boolean} If true, enable the tab. If false,
* is not enabled then the tab button will still show, however, * the user cannot interact with this element.
* the button will appear grayed out and will not be clickable. * Default: `true`.
* Defaults to `true`.
*/ */
@Input() @Input()
get enabled(): boolean { get enabled(): boolean {
@ -223,8 +222,8 @@ export class Tab extends NavControllerBase {
} }
/** /**
* @input {boolean} If the tab button is visible within the * @input {boolean} If true, the tab button is visible within the
* tabbar or not. Defaults to `true`. * tabbar. Default: `true`.
*/ */
@Input() @Input()
get show(): boolean { get show(): boolean {
@ -235,7 +234,7 @@ export class Tab extends NavControllerBase {
} }
/** /**
* @input {boolean} Whether it's possible to swipe-to-go-back on this tab or not. * @input {boolean} If true, swipe to go back is enabled.
*/ */
@Input() @Input()
get swipeBackEnabled(): boolean { get swipeBackEnabled(): boolean {
@ -246,7 +245,7 @@ export class Tab extends NavControllerBase {
} }
/** /**
* @input {boolean} Whether to hide the tabs on child pages or not. If `true` it will not show the tabs on child pages. * @input {boolean} If true, hide the tabs on child pages.
*/ */
@Input() @Input()
get tabsHideOnSubPages(): boolean { get tabsHideOnSubPages(): boolean {
@ -257,7 +256,7 @@ export class Tab extends NavControllerBase {
} }
/** /**
* @output {Tab} Method to call when the current tab is selected * @output {Tab} Emitted when the current tab is selected.
*/ */
@Output() ionSelect: EventEmitter<Tab> = new EventEmitter<Tab>(); @Output() ionSelect: EventEmitter<Tab> = new EventEmitter<Tab>();

12
src/components/tabs/tabs.ts
View File

@ -179,7 +179,9 @@ export class Tabs extends Ion implements AfterViewInit {
_selectHistory: string[] = []; _selectHistory: string[] = [];
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(value: string) { set color(value: string) {
@ -187,7 +189,9 @@ export class Tabs extends Ion implements AfterViewInit {
} }
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {
@ -210,12 +214,12 @@ export class Tabs extends Ion implements AfterViewInit {
@Input() tabsPlacement: string; @Input() tabsPlacement: string;
/** /**
* @input {boolean} Whether to show the tab highlight bar under the selected tab. Default: `false`. * @input {boolean} If true, show the tab highlight bar under the selected tab.
*/ */
@Input() tabsHighlight: boolean; @Input() tabsHighlight: boolean;
/** /**
* @input {any} Expression to evaluate when the tab changes. * @output {any} Emitted when the tab changes.
*/ */
@Output() ionChange: EventEmitter<Tab> = new EventEmitter<Tab>(); @Output() ionChange: EventEmitter<Tab> = new EventEmitter<Tab>();

14
src/components/toggle/toggle.ts
View File

@ -94,7 +94,9 @@ export class Toggle extends Ion implements IonicTapInput, AfterContentInit, Cont
id: string; id: string;
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -102,7 +104,9 @@ export class Toggle extends Ion implements IonicTapInput, AfterContentInit, Cont
} }
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {
@ -110,7 +114,7 @@ export class Toggle extends Ion implements IonicTapInput, AfterContentInit, Cont
} }
/** /**
* @output {Toggle} expression to evaluate when the toggle value changes * @output {Toggle} Emitted when the toggle value changes.
*/ */
@Output() ionChange: EventEmitter<Toggle> = new EventEmitter<Toggle>(); @Output() ionChange: EventEmitter<Toggle> = new EventEmitter<Toggle>();
@ -209,7 +213,7 @@ export class Toggle extends Ion implements IonicTapInput, AfterContentInit, Cont
} }
/** /**
* @input {boolean} whether the toggle it toggled or not * @input {boolean} If `true`, the element is selected.
*/ */
@Input() @Input()
get checked(): boolean { get checked(): boolean {
@ -256,7 +260,7 @@ export class Toggle extends Ion implements IonicTapInput, AfterContentInit, Cont
} }
/** /**
* @input {boolean} whether the toggle is disabled or not * @input {boolean} If true, the user cannot interact with this element.
*/ */
@Input() @Input()
get disabled(): boolean { get disabled(): boolean {

8
src/components/toolbar/toolbar.ts
View File

@ -210,7 +210,9 @@ export class Toolbar extends ToolbarBase {
_sbPadding: boolean; _sbPadding: boolean;
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -218,7 +220,9 @@ export class Toolbar extends ToolbarBase {
} }
/** /**
* @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {

8
src/components/typography/typography.ts
View File

@ -52,7 +52,9 @@ import { Ion } from '../ion';
export class Typography extends Ion { export class Typography extends Ion {
/** /**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. * @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/ */
@Input() @Input()
set color(val: string) { set color(val: string) {
@ -60,7 +62,9 @@ export class Typography extends Ion {
} }
/** /**
* @input {string} The mode to apply to this component. * @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/ */
@Input() @Input()
set mode(val: string) { set mode(val: string) {