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

docs(components): remove jsdoc input docs

Browse Source
This commit is contained in:
Brandy Carney
2018-02-01 15:54:12 -05:00
parent 1dd2650393
commit 34f8ef2047
33 changed files with 173 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/src/components/badge/badge.tsx
View File

@@ -14,14 +14,14 @@ import { Component, Prop } from '@stencil/core';
export class Badge {
/**
* @input {string} The color to use from your Sass `$colors` map.
* 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/theming/theming-your-app).
*/
@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"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/

38
packages/core/src/components/datetime/datetime.tsx
View File

@@ -48,12 +48,12 @@ export class Datetime {
@Prop({ connect: 'ion-picker-controller' }) pickerCtrl: PickerController;
/**
* @input {boolean} If true, the user cannot interact with the datetime. Defaults to `false`.
* If true, the user cannot interact with the datetime. Defaults to `false`.
*/
@Prop() disabled = false;
/**
* @input {string} The minimum datetime allowed. Value must be a date string
* The minimum datetime allowed. Value must be a date string
* following the
* [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),
* such as `1996-12-19`. The format does not have to be specific to an exact
@@ -63,7 +63,7 @@ export class Datetime {
@Prop({ mutable: true }) min: string;
/**
* @input {string} The maximum datetime allowed. Value must be a date string
* The maximum datetime allowed. Value must be a date string
* following the
* [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),
* `1996-12-19`. The format does not have to be specific to an exact
@@ -73,7 +73,7 @@ export class Datetime {
@Prop({ mutable: true }) max: string;
/**
* @input {string} The display format of the date and time as text that shows
* The display format of the date and time as text that shows
* within the item. When the `pickerFormat` input is not used, then the
* `displayFormat` is used for both display the formatted text, and determining
* the datetime picker's columns. See the `pickerFormat` input description for
@@ -82,7 +82,7 @@ export class Datetime {
@Prop() displayFormat = 'MMM D, YYYY';
/**
* @input {string} The format of the date and time picker columns the user selects.
* The format of the date and time picker columns the user selects.
* A datetime input can have one or many datetime parts, each getting their
* own column which allow individual selection of that particular datetime part. For
* example, year and month columns are two individually selectable columns which help
@@ -92,17 +92,17 @@ export class Datetime {
@Prop() pickerFormat: string;
/**
* @input {string} The text to display on the picker's cancel button. Default: `Cancel`.
* The text to display on the picker's cancel button. Default: `Cancel`.
*/
@Prop() cancelText = 'Cancel';
/**
* @input {string} The text to display on the picker's "Done" button. Default: `Done`.
* The text to display on the picker's "Done" button. Default: `Done`.
*/
@Prop() doneText = 'Done';
/**
* @input {array | string} Values used to create the list of selectable years. By default
* Values used to create the list of selectable years. By default
* the year values range between the `min` and `max` datetime inputs. However, to
* control exactly which years to display, the `yearValues` input can take either an array
* of numbers, or string of comma separated numbers. For example, to show upcoming and
@@ -111,7 +111,7 @@ export class Datetime {
@Prop() yearValues: any;
/**
* @input {array | string} Values used to create the list of selectable months. By default
* Values used to create the list of selectable months. By default
* the month values range from `1` to `12`. However, to control exactly which months to
* display, the `monthValues` input can take either an array of numbers, or string of
* comma separated numbers. For example, if only summer months should be shown, then this
@@ -121,7 +121,7 @@ export class Datetime {
@Prop() monthValues: any;
/**
* @input {array | string} Values used to create the list of selectable days. By default
* Values used to create the list of selectable days. By default
* every day is shown for the given month. However, to control exactly which days of
* the month to display, the `dayValues` input can take either an array of numbers, or
* string of comma separated numbers. Note that even if the array days have an invalid
@@ -131,7 +131,7 @@ export class Datetime {
@Prop() dayValues: any;
/**
* @input {array | string} Values used to create the list of selectable hours. By default
* Values used to create the list of selectable hours. By default
* the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However,
* to control exactly which hours to display, the `hourValues` input can take either an
* array of numbers, or string of comma separated numbers.
@@ -139,7 +139,7 @@ export class Datetime {
@Prop() hourValues: any;
/**
* @input {array | string} Values used to create the list of selectable minutes. By default
* Values used to create the list of selectable minutes. By default
* the mintues range from `0` to `59`. However, to control exactly which minutes to display,
* the `minuteValues` input can take either an array of numbers, or string of comma separated
* numbers. For example, if the minute selections should only be every 15 minutes, then
@@ -148,31 +148,31 @@ export class Datetime {
@Prop() minuteValues: any;
/**
* @input {array} Full names for each month name. This can be used to provide
* Full names for each month name. This can be used to provide
* locale month names. Defaults to English.
*/
@Prop() monthNames: any;
/**
* @input {array} Short abbreviated names for each month name. This can be used to provide
* Short abbreviated names for each month name. This can be used to provide
* locale month names. Defaults to English.
*/
@Prop() monthShortNames: any;
/**
* @input {array} Full day of the week names. This can be used to provide
* Full day of the week names. This can be used to provide
* locale names for each day in the week. Defaults to English.
*/
@Prop() dayNames: any;
/**
* @input {array} Short abbreviated day of the week names. This can be used to provide
* Short abbreviated day of the week names. This can be used to provide
* locale names for each day in the week. Defaults to English.
*/
@Prop() dayShortNames: any;
/**
* @input {PickerOptions} Any additional options that the picker interface can accept.
* Any additional options that the picker interface can accept.
* See the [Picker API docs](../../picker/Picker) for the picker options.
*/
@Prop() pickerOptions: PickerOptions = {
@@ -181,13 +181,13 @@ export class Datetime {
};
/**
* @input {string} The text to display when there's no date selected yet.
* The text to display when there's no date selected yet.
* Using lowercase to match the input attribute
*/
@Prop() placeholder: string;
/**
* @input {string} the value of the datetime.
* the value of the datetime.
*/
@Prop({ mutable: true }) value: string;

10
packages/core/src/components/fab-button/fab-button.tsx
View File

@@ -13,27 +13,27 @@ export class FabButton {
@Element() private el: HTMLElement;
/**
* @input {string} The color to use from your Sass `$colors` map.
* 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/theming/theming-your-app).
*/
@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"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@Prop() mode: 'ios' | 'md';
/**
* @input {string} Contains a URL or a URL fragment that the hyperlink points to.
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
*/
@Prop() href: string;
/**
* @input {boolean} If true, adds transparency to the fab.
* If true, adds transparency to the fab.
* Only affects `ios` mode. Defaults to `false`.
*/
@Prop() translucent = false;
@@ -47,7 +47,7 @@ export class FabButton {
@State() private inList = false;
/**
* @input {boolean} If true, sets the button into a disabled state.
* If true, sets the button into a disabled state.
*/
@Prop() disabled = false;

2
packages/core/src/components/footer/footer.tsx
View File

@@ -17,7 +17,7 @@ export class Footer {
color: string;
/**
* @input {boolean} If true, adds transparency to the footer.
* If true, adds transparency to the footer.
* Note: In order to scroll content behind the footer, the `fullscreen`
* attribute needs to be set on the content.
* Only affects `ios` mode. Defaults to `false`.

2
packages/core/src/components/header/header.tsx
View File

@@ -17,7 +17,7 @@ export class Header {
color: string;
/**
* @input {boolean} If true, adds transparency to the header.
* If true, adds transparency to the header.
* Note: In order to scroll content behind the header, the `fullscreen`
* attribute needs to be set on the content.
* Only affects `ios` mode. Defaults to `false`.

4
packages/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
View File

@@ -10,12 +10,12 @@ export class InfiniteScrollContent {
@Prop({ context: 'config' }) config: Config;
/**
* @input {string} An animated SVG spinner that shows while loading.
* An animated SVG spinner that shows while loading.
*/
@Prop({ mutable: true }) loadingSpinner: string;
/**
* @input {string} Optional text to display while loading.
* Optional text to display while loading.
*/
@Prop() loadingText: string;

6
packages/core/src/components/infinite-scroll/infinite-scroll.tsx
View File

@@ -27,7 +27,7 @@ export class InfiniteScroll {
@Prop({ context: 'enableListener' }) enableListener: EventListenerEnable;
/**
* @input {string} The threshold distance from the bottom
* The threshold distance from the bottom
* of the content to call the `infinite` output event when scrolled.
* The threshold value can be either a percent, or
* in pixels. For example, use the value of `10%` for the `infinite`
@@ -52,7 +52,7 @@ export class InfiniteScroll {
/**
* @input {boolean} If true, whether or not the infinite scroll should be
* If true, whether or not the infinite scroll should be
* disabled or not. Setting to `true` will remove scroll event listeners
* and hide the display.
*
@@ -69,7 +69,7 @@ export class InfiniteScroll {
}
/**
* @input {string} The position of the infinite scroll element.
* The position of the infinite scroll element.
* The value can be either `top` or `bottom`.
* Defaults to `bottom`.
*/

54
packages/core/src/components/input/input.tsx
View File

@@ -45,32 +45,32 @@ export class Input implements InputComponent {
@Event() ionFocus: EventEmitter;
/**
* @input {string} If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.
* If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.
*/
@Prop() accept: string;
/**
* @input {string} Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`.
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`.
*/
@Prop() autocapitalize = 'none';
/**
* @input {string} Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`.
* Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`.
*/
@Prop() autocomplete = 'off';
/**
* @input {string} Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `"off"`.
* Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `"off"`.
*/
@Prop() autocorrect = 'off';
/**
* @input {string} This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`.
* This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`.
*/
@Prop() autofocus = false;
/**
* @input {boolean} If true and the type is `checkbox` or `radio`, the control is selected by default. Defaults to `false`.
* If true and the type is `checkbox` or `radio`, the control is selected by default. Defaults to `false`.
*/
@Prop() checked = false;
@@ -80,17 +80,17 @@ export class Input implements InputComponent {
}
/**
* @input {boolean} If true, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`.
* If true, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`.
*/
@Prop() clearInput = false;
/**
* @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.
* If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
*/
@Prop({ mutable: true }) clearOnEdit: boolean;
/**
* @input {number} Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `0`.
* Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `0`.
*/
@Prop() debounce = 0;
@@ -103,7 +103,7 @@ export class Input implements InputComponent {
}
/**
* @input {boolean} If true, the user cannot interact with the input. Defaults to `false`.
* If true, the user cannot interact with the input. Defaults to `false`.
*/
@Prop() disabled = false;
@@ -113,87 +113,87 @@ export class Input implements InputComponent {
}
/**
* @input {string} A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`.
* A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`.
*/
@Prop() inputmode: string;
/**
* @input {string} The maximum value, which must not be less than its minimum (min attribute) value.
* The maximum value, which must not be less than its minimum (min attribute) value.
*/
@Prop() max: string;
/**
* @input {number} If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.
* If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.
*/
@Prop() maxlength: number;
/**
* @input {string} The minimum value, which must not be greater than its maximum (max attribute) value.
* The minimum value, which must not be greater than its maximum (max attribute) value.
*/
@Prop() min: string;
/**
* @input {number} If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.
* If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.
*/
@Prop() minlength: number;
/**
* @input {boolean} If true, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored.
* If true, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored.
*/
@Prop() multiple: boolean;
/**
* @input {string} The name of the control, which is submitted with the form data.
* The name of the control, which is submitted with the form data.
*/
@Prop() name: string;
/**
* @input {string} A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
* A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
*/
@Prop() pattern: string;
/**
* @input {string} Instructional text that shows before the input has a value.
* Instructional text that shows before the input has a value.
*/
@Prop() placeholder: string;
/**
* @input {boolean} If true, the user cannot modify the value. Defaults to `false`.
* If true, the user cannot modify the value. Defaults to `false`.
*/
@Prop() readonly = false;
/**
* @input {boolean} If true, the user must fill in a value before submitting a form.
* If true, the user must fill in a value before submitting a form.
*/
@Prop() required = false;
/**
* @input {number} This is a nonstandard attribute supported by Safari that only applies when the type is `"search"`. Its value should be a nonnegative decimal integer.
* This is a nonstandard attribute supported by Safari that only applies when the type is `"search"`. Its value should be a nonnegative decimal integer.
*/
@Prop() results: number;
/**
* @input {string} If true, the element will have its spelling and grammar checked. Defaults to `false`.
* If true, the element will have its spelling and grammar checked. Defaults to `false`.
*/
@Prop() spellcheck = false;
/**
* @input {string} Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number.
* Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number.
*/
@Prop() step: string;
/**
* @input {number} The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
* The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
*/
@Prop() size: number;
/**
* @input {string} The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`.
* The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`.
*/
@Prop() type = 'text';
/**
* @input {string} The value of the input.
* The value of the input.
*/
@Prop({ mutable: true }) value: string;

4
packages/core/src/components/item-divider/item-divider.tsx
View File

@@ -14,14 +14,14 @@ import { Component, Prop } from '@stencil/core';
export class ItemDivider {
/**
* @input {string} The color to use from your Sass `$colors` map.
* 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/theming/theming-your-app).
*/
@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"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/

8
packages/core/src/components/item-option/item-option.tsx
View File

@@ -9,27 +9,27 @@ import { Component, Prop } from '@stencil/core';
})
export class ItemOption {
/**
* @input {string} The color to use from your Sass `$colors` map.
* 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/theming/theming-your-app).
*/
@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"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@Prop() mode: 'ios' | 'md';
/**
* @input {string} Contains a URL or a URL fragment that the hyperlink points to.
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
*/
@Prop() href: string;
/**
* @input {boolean} If true, sets the button into a disabled state.
* If true, sets the button into a disabled state.
*/
@Prop() disabled = false;

2
packages/core/src/components/item-options/item-options.tsx
View File

@@ -9,7 +9,7 @@ export class ItemOptions {
@Element() private el: HTMLElement;
/**
* @input {string} The side the option button should be on. Defaults to `"right"`.
* 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.
*/
@Prop() side: Side = 'right';

10
packages/core/src/components/item/item.tsx
View File

@@ -18,33 +18,33 @@ export class Item {
@State() hasStyleChange: boolean;
/**
* @input {string} The color to use from your Sass `$colors` map.
* 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/theming/theming-your-app).
*/
@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"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@Prop() mode: 'ios' | 'md';
/**
* @input {string} Contains a URL or a URL fragment that the hyperlink points to.
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
*/
@Prop() href: string;
/**
* @input {any} Callback function.
* Callback function.
* If this property is set, a button tag will be rendered.
*/
@Prop() onclick: (this: HTMLElement, ev: MouseEvent) => any;
/**
* @input {boolean} Whether or not this item should be tappable.
* Whether or not this item should be tappable.
* If true, a button tag will be rendered. Default `true`.
*/
@Prop() tappable = false;

4
packages/core/src/components/label/label.tsx
View File

@@ -22,14 +22,14 @@ export class Label {
@Event() ionStyle: EventEmitter;
/**
* @input {string} The color to use from your Sass `$colors` map.
* 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/theming/theming-your-app).
*/
@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"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/

4
packages/core/src/components/list-header/list-header.tsx
View File

@@ -14,14 +14,14 @@ import { Component, Prop } from '@stencil/core';
export class ListHeader {
/**
* @input {string} The color to use from your Sass `$colors` map.
* 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/theming/theming-your-app).
*/
@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"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/

14
packages/core/src/components/menu/menu.tsx
View File

@@ -38,17 +38,17 @@ export class Menu {
@Prop({ context: 'enableListener' }) enableListener: any;
/**
* @input {string} The content's id the menu should use.
* The content's id the menu should use.
*/
@Prop() content: string;
/**
* @input {string} An id for the menu.
* An id for the menu.
*/
@Prop() menuId: string;
/**
* @input {string} The display type of the menu. Default varies based on the mode,
* The display type of the menu. Default varies based on the mode,
* see the `menuType` in the [config](../../config/Config). Available options:
* `"overlay"`, `"reveal"`, `"push"`.
*/
@@ -69,7 +69,7 @@ export class Menu {
}
/**
* @input {boolean} If true, the menu is disabled. Default `false`.
* If true, the menu is disabled. Default `false`.
*/
@Prop({ mutable: true }) disabled = false;
@@ -79,7 +79,7 @@ export class Menu {
}
/**
* @input {string} Which side of the view the menu should be placed. Default `"start"`.
* Which side of the view the menu should be placed. Default `"start"`.
*/
@Prop() side: Side = 'start';
@@ -89,7 +89,7 @@ export class Menu {
}
/**
* @input {boolean} If true, swiping the menu is enabled. Default `true`.
* If true, swiping the menu is enabled. Default `true`.
*/
@Prop() swipeEnabled = true;
@@ -99,7 +99,7 @@ export class Menu {
}
/**
* @input {boolean} If true, the menu will persist on child pages.
* If true, the menu will persist on child pages.
*/
@Prop() persistent = false;

4
packages/core/src/components/modal/modal.tsx
View File

@@ -67,14 +67,14 @@ export class Modal {
@Prop({ context: 'dom' }) dom: DomController;
/**
* @input {string} The color to use from your Sass `$colors` map.
* 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/theming/theming-your-app).
*/
@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"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/

4
packages/core/src/components/note/note.tsx
View File

@@ -14,14 +14,14 @@ import { Component, Prop } from '@stencil/core';
export class Note {
/**
* @input {string} The color to use from your Sass `$colors` map.
* 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/theming/theming-your-app).
*/
@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"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/

4
packages/core/src/components/popover/popover.tsx
View File

@@ -68,14 +68,14 @@ export class Popover {
@Prop({ context: 'dom' }) dom: DomController;
/**
* @input {string} The color to use from your Sass `$colors` map.
* 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/theming/theming-your-app).
*/
@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"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/

6
packages/core/src/components/radio-group/radio-group.tsx
View File

@@ -15,12 +15,12 @@ export class RadioGroup implements ComponentDidLoad, RadioGroupInput {
@State() labelId: string;
/*
* @input {boolean} If true, the radios can be deselected. Default false.
* If true, the radios can be deselected. Default false.
*/
@Prop() allowEmptySelection = false;
/*
* @input {boolean} If true, the user cannot interact with the radio group. Default false.
* If true, the user cannot interact with the radio group. Default false.
*/
@Prop({ mutable: true }) disabled = false;
@@ -30,7 +30,7 @@ export class RadioGroup implements ComponentDidLoad, RadioGroupInput {
@Prop({ mutable: true }) name: string;
/**
* @input {string} the value of the radio group.
* the value of the radio group.
*/
@Prop({ mutable: true }) value: string;

10
packages/core/src/components/radio/radio.tsx
View File

@@ -24,14 +24,14 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn
@State() keyFocus: boolean;
/**
* @input {string} The color to use from your Sass `$colors` map.
* 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/theming/theming-your-app).
*/
@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"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@@ -43,17 +43,17 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn
@Prop() name: string;
/*
* @input {boolean} If true, the user cannot interact with the radio. Default false.
* If true, the user cannot interact with the radio. Default false.
*/
@Prop() disabled = false;
/**
* @input {boolean} If true, the radio is selected. Defaults to `false`.
* If true, the radio is selected. Defaults to `false`.
*/
@Prop({ mutable: true }) checked = false;
/**
* @input {string} the value of the radio.
* the value of the radio.
*/
@Prop({ mutable: true }) value: string;

22
packages/core/src/components/range/range.tsx
View File

@@ -57,21 +57,21 @@ export class Range implements BaseInputComponent {
@Event() ionBlur: EventEmitter;
/**
* @input {string} The color to use from your Sass `$colors` map.
* 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/theming/theming-your-app).
*/
@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"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@Prop() mode: 'ios' | 'md';
/**
* @input {number} How long, in milliseconds, to wait to trigger the
* How long, in milliseconds, to wait to trigger the
* `ionChange` event after each change in the range value. Default `0`.
*/
@Prop() debounce = 0;
@@ -85,44 +85,44 @@ export class Range implements BaseInputComponent {
}
/*
* @input {boolean} If true, the user cannot interact with the range. Default false.
* If true, the user cannot interact with the range. Default false.
*/
@Prop() disabled = false;
/**
* @input {boolean} Show two knobs. Defaults to `false`.
* Show two knobs. Defaults to `false`.
*/
@Prop() dualKnobs = false;
/**
* @input {number} Maximum integer value of the range. Defaults to `100`.
* Maximum integer value of the range. Defaults to `100`.
*/
@Prop() max = 100;
/**
* @input {number} Minimum integer value of the range. Defaults to `0`.
* Minimum integer value of the range. Defaults to `0`.
*/
@Prop() min = 0;
/**
* @input {boolean} If true, a pin with integer value is shown when the knob
* If true, a pin with integer value is shown when the knob
* is pressed. Defaults to `false`.
*/
@Prop() pin = false;
/**
* @input {boolean} If true, the knob snaps to tick marks evenly spaced based
* If true, the knob snaps to tick marks evenly spaced based
* on the step property value. Defaults to `false`.
*/
@Prop() snaps = false;
/**
* @input {number} Specifies the value granularity. Defaults to `1`.
* Specifies the value granularity. Defaults to `1`.
*/
@Prop() step = 1;
/**
* @input {string} the value of the range.
* the value of the range.
*/
@Prop({ mutable: true }) value: any;

24
packages/core/src/components/searchbar/searchbar.tsx
View File

@@ -50,41 +50,41 @@ export class Searchbar {
@Event() ionFocus: EventEmitter;
/**
* @input {string} The color to use from your Sass `$colors` map.
* 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/theming/theming-your-app).
*/
@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"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@Prop() mode: 'ios' | 'md';
/**
* @input {boolean} If true, enable searchbar animation. Default `false`.
* If true, enable searchbar animation. Default `false`.
*/
@Prop({ mutable: true }) animated = false;
/**
* @input {string} Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`.
* Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`.
*/
@Prop({ mutable: true }) autocomplete = 'off';
/**
* @input {string} Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`.
* Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`.
*/
@Prop({ mutable: true }) autocorrect = 'off';
/**
* @input {string} Set the the cancel button text. Default: `"Cancel"`.
* Set the the cancel button text. Default: `"Cancel"`.
*/
@Prop({ mutable: true }) cancelButtonText = 'Cancel';
/**
* @input {number} Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `250`.
* Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `250`.
*/
@Prop({ mutable: true }) debounce = 250;
@@ -97,27 +97,27 @@ export class Searchbar {
}
/**
* @input {string} Set the input's placeholder. Default `"Search"`.
* Set the input's placeholder. Default `"Search"`.
*/
@Prop({ mutable: true }) placeholder = 'Search';
/**
* @input {boolean} If true, show the cancel button. Default `false`.
* If true, show the cancel button. Default `false`.
*/
@Prop({ mutable: true }) showCancelButton = false;
/**
* @input {boolean} If true, enable spellcheck on the input. Default `false`.
* If true, enable spellcheck on the input. Default `false`.
*/
@Prop({ mutable: true }) spellcheck = false;
/**
* @input {string} Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`.
* Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`.
*/
@Prop({ mutable: true }) type = 'search';
/**
* @input {string} the value of the searchbar.
* the value of the searchbar.
*/
@Prop({ mutable: true }) value: string;

2
packages/core/src/components/select-option/select-option.tsx
View File

@@ -13,7 +13,7 @@ export class SelectOption {
@Element() el: HTMLElement;
/**
* @input {boolean} If true, the user cannot interact with the select option.
* If true, the user cannot interact with the select option.
*/
@Prop() disabled = false;

2
packages/core/src/components/select/select.tsx
View File

@@ -93,7 +93,7 @@ export class Select {
@Prop() interfaceOptions: any = {};
/**
* @input {string} the value of the select.
* the value of the select.
*/
@Prop({ mutable: true }) value: string | string[];

10
packages/core/src/components/spinner/spinner.tsx
View File

@@ -18,31 +18,31 @@ export class Spinner {
@Prop({ context: 'config' }) config: Config;
/**
* @input {string} The color to use from your Sass `$colors` map.
* 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/theming/theming-your-app).
*/
@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"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@Prop() mode: 'ios' | 'md';
/**
* @input {string} How long it takes it to do one loop.
* How long it takes it to do one loop.
*/
@Prop() duration: number;
/**
* @input {string} SVG spinner name.
* SVG spinner name.
*/
@Prop() name: string;
/**
* @input {boolean} If true, pause the animation.
* If true, pause the animation.
*/
@Prop() paused = false;

4
packages/core/src/components/split-pane/split-pane.tsx
View File

@@ -30,13 +30,13 @@ export class SplitPane {
@State() private visible = false;
/**
* @input {boolean} If `false`, the split-pane is disabled, ie. the side pane will
* If `false`, the split-pane is disabled, ie. the side pane will
* never be displayed. Default `true`.
*/
@Prop() disabled = false;
/**
* @input {string | boolean} When the split-pane should be shown.
* When the split-pane should be shown.
* Can be a CSS media query expression, or a shortcut expression.
* Can also be a boolean expression.
*/

2
packages/core/src/components/tab-button/tab-button.tsx
View File

@@ -9,7 +9,7 @@ export class TabButton {
@Element() el: HTMLElement;
/**
* @input {string} The mode determines which platform styles to use.
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/

18
packages/core/src/components/tab/tab.tsx
View File

@@ -13,50 +13,50 @@ export class Tab {
@State() active = false;
/**
* @input {string} Set the root page for this tab.
* Set the root page for this tab.
*/
@Prop() btnId: string;
/**
* @input {string} The URL path name to represent this tab within the URL.
* The URL path name to represent this tab within the URL.
*/
@Prop() path: string;
/**
* @input {string} The title of the tab button.
* The title of the tab button.
*/
@Prop() title: string;
/**
* @input {string} The icon for the tab button.
* The icon for the tab button.
*/
@Prop() icon: string;
/**
* @input {string} The badge for the tab button.
* The badge for the tab button.
*/
@Prop() badge: string;
/**
* @input {string} The badge color for the tab button.
* The badge color for the tab button.
*/
@Prop() badgeStyle = 'default';
/**
* @input {boolean} If true, enable the tab. If false,
* If true, enable the tab. If false,
* the user cannot interact with this element.
* Default: `true`.
*/
@Prop() disabled = false;
/**
* @input {boolean} If true, the tab button is visible within the
* If true, the tab button is visible within the
* tabbar. Default: `true`.
*/
@Prop() show = true;
/**
* @input {boolean} If true, hide the tabs on child pages.
* If true, hide the tabs on child pages.
*/
@Prop() tabsHideOnSubPages = false;

12
packages/core/src/components/tabs/tabs.tsx
View File

@@ -21,32 +21,32 @@ export class Tabs {
@Prop({ context: 'config' }) config: Config;
/**
* @input {string} A unique name for the tabs
* A unique name for the tabs
*/
@Prop() name: string;
/**
* @input {boolean} If true, the tabbar
* If true, the tabbar
*/
@Prop() tabbarHidden = false;
/**
* @input {string} Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
* Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
*/
@Prop({ mutable: true }) tabbarLayout: string;
/**
* @input {string} Set position of the tabbar: `top`, `bottom`.
* Set position of the tabbar: `top`, `bottom`.
*/
@Prop({ mutable: true }) tabbarPlacement: string;
/**
* @input {boolean} If true, show the tab highlight bar under the selected tab.
* If true, show the tab highlight bar under the selected tab.
*/
@Prop({ mutable: true }) tabbarHighlight: boolean;
/**
* @input {boolean} If true, adds transparency to the tabbar.
* If true, adds transparency to the tabbar.
* Note: In order to scroll content behind the tabbar, the `fullscreen`
* attribute needs to be set on the content.
* Only affects `ios` mode. Defaults to `false`.

4
packages/core/src/components/text/text.tsx
View File

@@ -14,14 +14,14 @@ import { Component, Prop } from '@stencil/core';
export class Text {
/**
* @input {string} The color to use from your Sass `$colors` map.
* 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/theming/theming-your-app).
*/
@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"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/

34
packages/core/src/components/textarea/textarea.tsx
View File

@@ -50,27 +50,27 @@ export class Textarea implements TextareaComponent {
@Event() ionFocus: EventEmitter;
/**
* @input {string} Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`.
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`.
*/
@Prop() autocapitalize = 'none';
/**
* @input {string} Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`.
* Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`.
*/
@Prop() autocomplete = 'off';
/**
* @input {string} This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`.
* This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`.
*/
@Prop() autofocus = false;
/**
* @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.
* If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
*/
@Prop({ mutable: true }) clearOnEdit: boolean;
/**
* @input {number} Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `0`.
* Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `0`.
*/
@Prop() debounce = 0;
@@ -83,7 +83,7 @@ export class Textarea implements TextareaComponent {
}
/**
* @input {boolean} If true, the user cannot interact with the textarea. Defaults to `false`.
* If true, the user cannot interact with the textarea. Defaults to `false`.
*/
@Prop() disabled = false;
@@ -93,57 +93,57 @@ export class Textarea implements TextareaComponent {
}
/**
* @input {number} If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.
* If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.
*/
@Prop() maxlength: number;
/**
* @input {number} If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.
* If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.
*/
@Prop() minlength: number;
/**
* @input {string} The name of the control, which is submitted with the form data.
* The name of the control, which is submitted with the form data.
*/
@Prop() name: string;
/**
* @input {string} Instructional text that shows before the input has a value.
* Instructional text that shows before the input has a value.
*/
@Prop() placeholder: string;
/**
* @input {boolean} If true, the user cannot modify the value. Defaults to `false`.
* If true, the user cannot modify the value. Defaults to `false`.
*/
@Prop() readonly = false;
/**
* @input {boolean} If true, the user must fill in a value before submitting a form.
* If true, the user must fill in a value before submitting a form.
*/
@Prop() required = false;
/**
* @input {string} If true, the element will have its spelling and grammar checked. Defaults to `false`.
* If true, the element will have its spelling and grammar checked. Defaults to `false`.
*/
@Prop() spellcheck = false;
/**
* @input {number} The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
* The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
*/
@Prop() cols: number;
/**
* @input {number} The number of visible text lines for the control.
* The number of visible text lines for the control.
*/
@Prop() rows: number;
/**
* @input {string} Indicates how the control wraps text. Possible values are: `"hard"`, `"soft"`, `"off"`.
* Indicates how the control wraps text. Possible values are: `"hard"`, `"soft"`, `"off"`.
*/
@Prop() wrap: string;
/**
* @input {string} The value of the textarea.
* The value of the textarea.
*/
@Prop({ mutable: true }) value: string;

10
packages/core/src/components/toggle/toggle.tsx
View File

@@ -28,14 +28,14 @@ export class Toggle implements CheckboxInput {
@State() keyFocus: boolean;
/**
* @input {string} The color to use from your Sass `$colors` map.
* 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/theming/theming-your-app).
*/
@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"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@@ -47,17 +47,17 @@ export class Toggle implements CheckboxInput {
@Prop({ mutable: true }) name: string;
/**
* @input {boolean} If true, the toggle is selected. Defaults to `false`.
* If true, the toggle is selected. Defaults to `false`.
*/
@Prop({ mutable: true }) checked = false;
/*
* @input {boolean} If true, the user cannot interact with the toggle. Default false.
* If true, the user cannot interact with the toggle. Default false.
*/
@Prop({ mutable: true }) disabled = false;
/**
* @input {string} the value of the toggle.
* the value of the toggle.
*/
@Prop() value = 'on';

8
packages/core/src/components/toolbar/toolbar.tsx
View File

@@ -19,21 +19,21 @@ export class Toolbar {
@Prop({ context: 'config' }) config: Config;
/**
* @input {string} The color to use from your Sass `$colors` map.
* 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/theming/theming-your-app).
*/
@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"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@Prop() mode: 'ios' | 'md';
/**
* @input {boolean} If true, adds transparency to the header.
* If true, adds transparency to the header.
* Note: In order to scroll content behind the header, the `fullscreen`
* attribute needs to be set on the content.
* Only affects `ios` mode. Defaults to `false`.
@@ -41,7 +41,7 @@ export class Toolbar {
@Prop() translucent = false;
componentDidLoad() {
const buttons = this.el.querySelectorAll('ion-button') as any;
const buttons = this.el.querySelectorAll('ion-button');
for (let i = 0; i < buttons.length; i++) {
buttons[i].setAttribute('button-type', 'bar-button');
}