diff --git a/packages/core/src/components/badge/readme.md b/packages/core/src/components/badge/readme.md index a14282fa76..e8e518c525 100644 --- a/packages/core/src/components/badge/readme.md +++ b/packages/core/src/components/badge/readme.md @@ -36,11 +36,19 @@ Badges are inline block elements that usually appear near another element. Typic 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/theming/theming-your-app). + #### mode +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). + ## Attributes @@ -48,11 +56,19 @@ string 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/theming/theming-your-app). + #### mode +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). + ---------------------------------------------- diff --git a/packages/core/src/components/datetime/readme.md b/packages/core/src/components/datetime/readme.md index b9ea84a156..8b560ab743 100644 --- a/packages/core/src/components/datetime/readme.md +++ b/packages/core/src/components/datetime/readme.md @@ -219,96 +219,180 @@ dates in JavaScript. string +The text to display on the picker's cancel button. Default: `Cancel`. + #### dayNames any +Full day of the week names. This can be used to provide +locale names for each day in the week. Defaults to English. + #### dayShortNames any +Short abbreviated day of the week names. This can be used to provide +locale names for each day in the week. Defaults to English. + #### dayValues any +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 +number for the selected month, like `31` in February, it will correctly not show +days which are not valid for the selected month. + #### disabled boolean +If true, the user cannot interact with the datetime. Defaults to `false`. + #### displayFormat string +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 +more info. Defaults to `MMM D, YYYY`. + #### doneText string +The text to display on the picker's "Done" button. Default: `Done`. + #### hourValues any +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. + #### max 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 +datetime. For example, the maximum could just be the year, such as `1994`. +Defaults to the end of this year. + #### min 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 +datetime. For example, the minimum could just be the year, such as `1994`. +Defaults to the beginning of the year, 100 years ago from today. + #### minuteValues any +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 +this input value would be `minuteValues="0,15,30,45"`. + #### monthNames any +Full names for each month name. This can be used to provide +locale month names. Defaults to English. + #### monthShortNames any +Short abbreviated names for each month name. This can be used to provide +locale month names. Defaults to English. + #### monthValues any +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 +input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a +zero-based index, meaning January's value is `1`, and December's is `12`. + #### pickerFormat string +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 +choose an exact date from the datetime picker. Each column follows the string +parse format. Defaults to use `displayFormat`. + #### pickerOptions +Any additional options that the picker interface can accept. +See the [Picker API docs](../../picker/Picker) for the picker options. + #### placeholder string +The text to display when there's no date selected yet. +Using lowercase to match the input attribute + #### value string +the value of the datetime. + #### yearValues any +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 +recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. + ## Attributes @@ -316,101 +400,187 @@ any string +The text to display on the picker's cancel button. Default: `Cancel`. + #### day-names any +Full day of the week names. This can be used to provide +locale names for each day in the week. Defaults to English. + #### day-short-names any +Short abbreviated day of the week names. This can be used to provide +locale names for each day in the week. Defaults to English. + #### day-values any +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 +number for the selected month, like `31` in February, it will correctly not show +days which are not valid for the selected month. + #### disabled boolean +If true, the user cannot interact with the datetime. Defaults to `false`. + #### display-format string +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 +more info. Defaults to `MMM D, YYYY`. + #### done-text string +The text to display on the picker's "Done" button. Default: `Done`. + #### hour-values any +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. + #### max 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 +datetime. For example, the maximum could just be the year, such as `1994`. +Defaults to the end of this year. + #### min 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 +datetime. For example, the minimum could just be the year, such as `1994`. +Defaults to the beginning of the year, 100 years ago from today. + #### minute-values any +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 +this input value would be `minuteValues="0,15,30,45"`. + #### month-names any +Full names for each month name. This can be used to provide +locale month names. Defaults to English. + #### month-short-names any +Short abbreviated names for each month name. This can be used to provide +locale month names. Defaults to English. + #### month-values any +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 +input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a +zero-based index, meaning January's value is `1`, and December's is `12`. + #### picker-format string +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 +choose an exact date from the datetime picker. Each column follows the string +parse format. Defaults to use `displayFormat`. + #### picker-options +Any additional options that the picker interface can accept. +See the [Picker API docs](../../picker/Picker) for the picker options. + #### placeholder string +The text to display when there's no date selected yet. +Using lowercase to match the input attribute + #### value string +the value of the datetime. + #### year-values any +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 +recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. + ## Events #### ionCancel +Emitted when the datetime selection was cancelled. + ---------------------------------------------- diff --git a/packages/core/src/components/fab-button/readme.md b/packages/core/src/components/fab-button/readme.md index c7cc225fa1..74209ac697 100644 --- a/packages/core/src/components/fab-button/readme.md +++ b/packages/core/src/components/fab-button/readme.md @@ -47,21 +47,34 @@ boolean 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/theming/theming-your-app). + #### disabled boolean +If true, sets the button into a disabled state. + #### href string +Contains a URL or a URL fragment that the hyperlink points to. +If this property is set, an anchor tag will be rendered. + #### mode +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). + #### show @@ -77,6 +90,9 @@ boolean boolean +If true, adds transparency to the fab. +Only affects `ios` mode. Defaults to `false`. + ## Attributes @@ -89,21 +105,34 @@ boolean 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/theming/theming-your-app). + #### disabled boolean +If true, sets the button into a disabled state. + #### href string +Contains a URL or a URL fragment that the hyperlink points to. +If this property is set, an anchor tag will be rendered. + #### mode +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). + #### show @@ -119,6 +148,9 @@ boolean boolean +If true, adds transparency to the fab. +Only affects `ios` mode. Defaults to `false`. + ---------------------------------------------- diff --git a/packages/core/src/components/fab/test/basic/index.html b/packages/core/src/components/fab/test/basic/index.html index 55cdd50820..7ade5c0dd7 100644 --- a/packages/core/src/components/fab/test/basic/index.html +++ b/packages/core/src/components/fab/test/basic/index.html @@ -86,6 +86,9 @@ + + Close + Footer @@ -114,21 +117,32 @@ let message = 'Clicked open social menu'; insertLog(message); - openLists(container); + toggleLists(container); } function openSocial(network, container) { let message = 'Share in ' + network; insertLog(message); - openLists(container); + toggleLists(container); } - function openLists(container) { + function toggleLists(container) { + var fabButton = document.getElementById(container).querySelector('ion-fab-button'); var fabLists = document.getElementById(container).querySelectorAll('ion-fab-list'); + fabButton.activated = !fabButton.activated; + for (var i = 0; i < fabLists.length; i++) { - fabLists[i].activated = true; + fabLists[i].activated = !fabLists[i].activated; + } + } + + function closeLists() { + var fabs = document.querySelectorAll('ion-fab'); + + for (var i = 0; i < fabs.length; i++) { + fabs[i].activated = false; } } diff --git a/packages/core/src/components/footer/readme.md b/packages/core/src/components/footer/readme.md index aa0fbc9d71..eafc36d10a 100644 --- a/packages/core/src/components/footer/readme.md +++ b/packages/core/src/components/footer/readme.md @@ -11,6 +11,11 @@ boolean +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`. + ## Attributes @@ -18,6 +23,11 @@ boolean boolean +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`. + ---------------------------------------------- diff --git a/packages/core/src/components/gesture/readme.md b/packages/core/src/components/gesture/readme.md index e1752ef891..2893fc0fc2 100644 --- a/packages/core/src/components/gesture/readme.md +++ b/packages/core/src/components/gesture/readme.md @@ -203,18 +203,28 @@ string #### ionGestureEnd +Emitted when the gesture ends. + #### ionGestureMove +Emitted when the gesture moves. + #### ionGestureNotCaptured +Emitted when the gesture is not captured. + #### ionGestureStart +Emitted when the gesture starts. + #### ionPress +Emitted when press is detected. + ---------------------------------------------- diff --git a/packages/core/src/components/header/readme.md b/packages/core/src/components/header/readme.md index a627fa420e..42b59dbcd7 100644 --- a/packages/core/src/components/header/readme.md +++ b/packages/core/src/components/header/readme.md @@ -11,6 +11,11 @@ boolean +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`. + ## Attributes @@ -18,6 +23,11 @@ boolean boolean +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`. + ---------------------------------------------- diff --git a/packages/core/src/components/infinite-scroll-content/readme.md b/packages/core/src/components/infinite-scroll-content/readme.md index 57acf8fede..5c9db4e6c2 100644 --- a/packages/core/src/components/infinite-scroll-content/readme.md +++ b/packages/core/src/components/infinite-scroll-content/readme.md @@ -11,11 +11,15 @@ string +An animated SVG spinner that shows while loading. + #### loadingText string +Optional text to display while loading. + ## Attributes @@ -23,11 +27,15 @@ string string +An animated SVG spinner that shows while loading. + #### loading-text string +Optional text to display while loading. + ---------------------------------------------- diff --git a/packages/core/src/components/infinite-scroll/readme.md b/packages/core/src/components/infinite-scroll/readme.md index 804857ff09..97ce2cdacf 100644 --- a/packages/core/src/components/infinite-scroll/readme.md +++ b/packages/core/src/components/infinite-scroll/readme.md @@ -139,16 +139,38 @@ You could replace our default content with custom SVG or CSS animations. boolean +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. + +Call `enable(false)` to disable the infinite scroll from actively +trying to receive new data while scrolling. This method is useful +when it is known that there is no more data that can be added, and +the infinite scroll is no longer needed. + #### position string +The position of the infinite scroll element. +The value can be either `top` or `bottom`. +Defaults to `bottom`. + #### threshold string +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` +output event to get called when the user has scrolled 10% +from the bottom of the page. Use the value `100px` when the +scroll is within 100 pixels from the bottom of the page. +Defaults to `15%`. + ## Attributes @@ -156,21 +178,48 @@ string boolean +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. + +Call `enable(false)` to disable the infinite scroll from actively +trying to receive new data while scrolling. This method is useful +when it is known that there is no more data that can be added, and +the infinite scroll is no longer needed. + #### position string +The position of the infinite scroll element. +The value can be either `top` or `bottom`. +Defaults to `bottom`. + #### threshold string +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` +output event to get called when the user has scrolled 10% +from the bottom of the page. Use the value `100px` when the +scroll is within 100 pixels from the bottom of the page. +Defaults to `15%`. + ## Events #### ionInfinite +Emitted when the scroll reaches +the threshold distance. From within your infinite handler, +you must call the infinite scroll's `complete()` method when +your async operation has completed. + ## Methods diff --git a/packages/core/src/components/input/readme.md b/packages/core/src/components/input/readme.md index feaecdfcaa..0869b3b68a 100644 --- a/packages/core/src/components/input/readme.md +++ b/packages/core/src/components/input/readme.md @@ -11,136 +11,190 @@ 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. + #### autocapitalize string +Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. + #### autocomplete string +Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`. + #### autocorrect string +Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `"off"`. + #### autofocus boolean +This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. + #### checked boolean +If true and the type is `checkbox` or `radio`, the control is selected by default. Defaults to `false`. + #### clearInput boolean +If true, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`. + #### clearOnEdit boolean +If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. + #### debounce number +Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `0`. + #### disabled boolean +If true, the user cannot interact with the input. Defaults to `false`. + #### inputmode 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"`. + #### max string +The maximum value, which must not be less than its minimum (min attribute) value. + #### maxlength 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. + #### min string +The minimum value, which must not be greater than its maximum (max attribute) value. + #### minlength 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. + #### multiple 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. + #### name string +The name of the control, which is submitted with the form data. + #### pattern 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. + #### placeholder string +Instructional text that shows before the input has a value. + #### readonly boolean +If true, the user cannot modify the value. Defaults to `false`. + #### required boolean +If true, the user must fill in a value before submitting a form. + #### results 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. + #### size 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. + #### spellcheck boolean +If true, the element will have its spelling and grammar checked. Defaults to `false`. + #### step 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. + #### type string +The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`. + #### value string +The value of the input. + ## Attributes @@ -148,150 +202,212 @@ string 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. + #### autocapitalize string +Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. + #### autocomplete string +Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`. + #### autocorrect string +Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `"off"`. + #### autofocus boolean +This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. + #### checked boolean +If true and the type is `checkbox` or `radio`, the control is selected by default. Defaults to `false`. + #### clear-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`. + #### clear-on-edit boolean +If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. + #### debounce number +Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `0`. + #### disabled boolean +If true, the user cannot interact with the input. Defaults to `false`. + #### inputmode 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"`. + #### max string +The maximum value, which must not be less than its minimum (min attribute) value. + #### maxlength 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. + #### min string +The minimum value, which must not be greater than its maximum (max attribute) value. + #### minlength 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. + #### multiple 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. + #### name string +The name of the control, which is submitted with the form data. + #### pattern 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. + #### placeholder string +Instructional text that shows before the input has a value. + #### readonly boolean +If true, the user cannot modify the value. Defaults to `false`. + #### required boolean +If true, the user must fill in a value before submitting a form. + #### results 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. + #### size 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. + #### spellcheck boolean +If true, the element will have its spelling and grammar checked. Defaults to `false`. + #### step 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. + #### type string +The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`. + #### value string +The value of the input. + ## Events #### ionBlur +Emitted when the input loses focus. + #### ionFocus +Emitted when the input has focus. + #### ionInput +Emitted when the input value has changed. + #### ionStyle +Emitted when the styles change. + ---------------------------------------------- diff --git a/packages/core/src/components/item-divider/readme.md b/packages/core/src/components/item-divider/readme.md index e8a9fd3498..86d2c5b915 100644 --- a/packages/core/src/components/item-divider/readme.md +++ b/packages/core/src/components/item-divider/readme.md @@ -11,11 +11,19 @@ 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/theming/theming-your-app). + #### mode +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). + ## Attributes @@ -23,11 +31,19 @@ string 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/theming/theming-your-app). + #### mode +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). + ---------------------------------------------- diff --git a/packages/core/src/components/item-option/readme.md b/packages/core/src/components/item-option/readme.md index 53eb4a93e8..9da5f42318 100644 --- a/packages/core/src/components/item-option/readme.md +++ b/packages/core/src/components/item-option/readme.md @@ -14,21 +14,34 @@ action for the item. 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/theming/theming-your-app). + #### disabled boolean +If true, sets the button into a disabled state. + #### href string +Contains a URL or a URL fragment that the hyperlink points to. +If this property is set, an anchor tag will be rendered. + #### mode +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). + ## Attributes @@ -36,21 +49,34 @@ string 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/theming/theming-your-app). + #### disabled boolean +If true, sets the button into a disabled state. + #### href string +Contains a URL or a URL fragment that the hyperlink points to. +If this property is set, an anchor tag will be rendered. + #### mode +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). + ---------------------------------------------- diff --git a/packages/core/src/components/item-options/readme.md b/packages/core/src/components/item-options/readme.md index bc8ecd993b..274252ece5 100644 --- a/packages/core/src/components/item-options/readme.md +++ b/packages/core/src/components/item-options/readme.md @@ -27,6 +27,9 @@ You can combine the `(ionSwipe)` event plus the `expandable` directive to create +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. + ## Attributes @@ -34,11 +37,16 @@ You can combine the `(ionSwipe)` event plus the `expandable` directive to create +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. + ## Events #### ionSwipe +Emitted when the item has been fully swiped. + ## Methods diff --git a/packages/core/src/components/item-sliding/readme.md b/packages/core/src/components/item-sliding/readme.md index a7fd08a04a..31e90ff3a6 100644 --- a/packages/core/src/components/item-sliding/readme.md +++ b/packages/core/src/components/item-sliding/readme.md @@ -106,6 +106,25 @@ We can call `delete` by either clicking the button, or by doing a full swipe on #### ionDrag +Emitted when the sliding position changes. +It reports the relative position. + +```ts +onDrag(slidingItem) { + let percent = slidingItem.getSlidingPercent(); + if (percent > 0) { + // positive + console.log('right side'); + } else { + // negative + console.log('left side'); + } + if (Math.abs(percent) > 1) { + console.log('overscroll'); + } +} +``` + ## Methods diff --git a/packages/core/src/components/item/readme.md b/packages/core/src/components/item/readme.md index c904ea2230..dfc38cfad1 100644 --- a/packages/core/src/components/item/readme.md +++ b/packages/core/src/components/item/readme.md @@ -11,26 +11,43 @@ 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/theming/theming-your-app). + #### href string +Contains a URL or a URL fragment that the hyperlink points to. +If this property is set, an anchor tag will be rendered. + #### mode +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). + #### onclick +Callback function. +If this property is set, a button tag will be rendered. + #### tappable boolean +Whether or not this item should be tappable. +If true, a button tag will be rendered. Default `true`. + ## Attributes @@ -38,26 +55,43 @@ boolean 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/theming/theming-your-app). + #### href string +Contains a URL or a URL fragment that the hyperlink points to. +If this property is set, an anchor tag will be rendered. + #### mode +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). + #### onclick +Callback function. +If this property is set, a button tag will be rendered. + #### tappable boolean +Whether or not this item should be tappable. +If true, a button tag will be rendered. Default `true`. + ---------------------------------------------- diff --git a/packages/core/src/components/keyboard-controller/readme.md b/packages/core/src/components/keyboard-controller/readme.md index 0d94147188..7c82ce584e 100644 --- a/packages/core/src/components/keyboard-controller/readme.md +++ b/packages/core/src/components/keyboard-controller/readme.md @@ -9,15 +9,23 @@ #### keyboardDidHide +Emitted after the keyboard has hidden. + #### keyboardDidShow +Emitted after the keyboard has shown. + #### keyboardWillHide +Emitted before the keyboard has hidden. + #### keyboardWillShow +Emitted before the keyboard has shown. + ---------------------------------------------- diff --git a/packages/core/src/components/label/readme.md b/packages/core/src/components/label/readme.md index 2d00cf9a25..f83df7a9ce 100644 --- a/packages/core/src/components/label/readme.md +++ b/packages/core/src/components/label/readme.md @@ -11,26 +11,40 @@ 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/theming/theming-your-app). + #### fixed boolean +If true, the label will sit alongside an input. Defaults to `false`. + #### floating boolean +If true, the label will float above an input when the value is empty or the input is focused. Defaults to `false`. + #### mode +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). + #### stacked boolean +If true, the label will be stacked above an input. Defaults to `false`. + ## Attributes @@ -38,31 +52,47 @@ boolean 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/theming/theming-your-app). + #### fixed boolean +If true, the label will sit alongside an input. Defaults to `false`. + #### floating boolean +If true, the label will float above an input when the value is empty or the input is focused. Defaults to `false`. + #### mode +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). + #### stacked boolean +If true, the label will be stacked above an input. Defaults to `false`. + ## Events #### ionStyle +Emitted when the styles change. + ## Methods diff --git a/packages/core/src/components/list-header/readme.md b/packages/core/src/components/list-header/readme.md index b6ffd14e7d..0c63c1869b 100644 --- a/packages/core/src/components/list-header/readme.md +++ b/packages/core/src/components/list-header/readme.md @@ -11,11 +11,19 @@ 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/theming/theming-your-app). + #### mode +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). + ## Attributes @@ -23,11 +31,19 @@ string 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/theming/theming-your-app). + #### mode +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). + ---------------------------------------------- diff --git a/packages/core/src/components/loading/readme.md b/packages/core/src/components/loading/readme.md index 7622990fc7..117fe79911 100644 --- a/packages/core/src/components/loading/readme.md +++ b/packages/core/src/components/loading/readme.md @@ -149,21 +149,33 @@ Toggles whether animation should occur or not #### ionLoadingDidDismiss +Emitted after the loading has dismissed. + #### ionLoadingDidLoad +Emitted after the loading has loaded. + #### ionLoadingDidPresent +Emitted after the loading has presented. + #### ionLoadingDidUnload +Emitted after the loading has unloaded. + #### ionLoadingWillDismiss +Emitted before the loading has dismissed. + #### ionLoadingWillPresent +Emitted before the loading has presented. + ## Methods diff --git a/packages/core/src/components/menu/readme.md b/packages/core/src/components/menu/readme.md index 43aa70f7f2..65f35764b2 100644 --- a/packages/core/src/components/menu/readme.md +++ b/packages/core/src/components/menu/readme.md @@ -11,11 +11,15 @@ string +The content's id the menu should use. + #### disabled boolean +If true, the menu is disabled. Default `false`. + #### maxEdgeStart @@ -26,26 +30,38 @@ number string +An id for the menu. + #### persistent boolean +If true, the menu will persist on child pages. + #### side +Which side of the view the menu should be placed. Default `"start"`. + #### swipeEnabled boolean +If true, swiping the menu is enabled. Default `true`. + #### type string +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"`. + ## Attributes @@ -53,11 +69,15 @@ string string +The content's id the menu should use. + #### disabled boolean +If true, the menu is disabled. Default `false`. + #### max-edge-start @@ -68,37 +88,56 @@ number string +An id for the menu. + #### persistent boolean +If true, the menu will persist on child pages. + #### side +Which side of the view the menu should be placed. Default `"start"`. + #### swipe-enabled boolean +If true, swiping the menu is enabled. Default `true`. + #### type string +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"`. + ## Events #### ionClose +Emitted when the menu is closed. + #### ionDrag +Emitted when the sliding position changes. +It reports the relative position. + #### ionOpen +Emitted when the menu is open. + ## Methods diff --git a/packages/core/src/components/modal/readme.md b/packages/core/src/components/modal/readme.md index 3c43560d71..f750495f33 100644 --- a/packages/core/src/components/modal/readme.md +++ b/packages/core/src/components/modal/readme.md @@ -11,6 +11,10 @@ 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/theming/theming-your-app). + #### component @@ -56,6 +60,10 @@ number +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). + #### showBackdrop @@ -73,6 +81,10 @@ boolean 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/theming/theming-your-app). + #### component @@ -118,6 +130,10 @@ number +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). + #### show-backdrop @@ -133,21 +149,33 @@ boolean #### ionModalDidDismiss +Emitted after the modal has dismissed. + #### ionModalDidLoad +Emitted after the modal has loaded. + #### ionModalDidPresent +Emitted after the modal has presented. + #### ionModalDidUnload +Emitted after the modal has unloaded. + #### ionModalWillDismiss +Emitted before the modal has dismissed. + #### ionModalWillPresent +Emitted before the modal has presented. + ## Methods diff --git a/packages/core/src/components/note/readme.md b/packages/core/src/components/note/readme.md index adaaad25d9..04a857abd0 100644 --- a/packages/core/src/components/note/readme.md +++ b/packages/core/src/components/note/readme.md @@ -37,11 +37,19 @@ Notes are text elements generally used as subtitles that provide more informatio 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/theming/theming-your-app). + #### mode +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). + ## Attributes @@ -49,11 +57,19 @@ string 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/theming/theming-your-app). + #### mode +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). + ---------------------------------------------- diff --git a/packages/core/src/components/picker/readme.md b/packages/core/src/components/picker/readme.md index 69de17f8fd..7d168061e5 100644 --- a/packages/core/src/components/picker/readme.md +++ b/packages/core/src/components/picker/readme.md @@ -133,21 +133,33 @@ boolean #### ionPickerDidDismiss +Emitted after the picker has dismissed. + #### ionPickerDidLoad +Emitted after the picker has loaded. + #### ionPickerDidPresent +Emitted after the picker has presented. + #### ionPickerDidUnload +Emitted after the picker has unloaded. + #### ionPickerWillDismiss +Emitted before the picker has dismissed. + #### ionPickerWillPresent +Emitted before the picker has presented. + ## Methods diff --git a/packages/core/src/components/popover/readme.md b/packages/core/src/components/popover/readme.md index 341666698b..6bf87f2e4c 100644 --- a/packages/core/src/components/popover/readme.md +++ b/packages/core/src/components/popover/readme.md @@ -11,6 +11,10 @@ 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/theming/theming-your-app). + #### component @@ -56,6 +60,10 @@ boolean +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). + #### popoverId @@ -83,6 +91,10 @@ boolean 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/theming/theming-your-app). + #### component @@ -128,6 +140,10 @@ boolean +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). + #### popover-id @@ -153,21 +169,33 @@ boolean #### ionPopoverDidDismiss +Emitted after the popover has dismissed. + #### ionPopoverDidLoad +Emitted after the popover has loaded. + #### ionPopoverDidPresent +Emitted after the popover has presented. + #### ionPopoverDidUnload +Emitted after the popover has unloaded. + #### ionPopoverWillDismiss +Emitted before the popover has dismissed. + #### ionPopoverWillPresent +Emitted before the popover has presented. + ## Methods diff --git a/packages/core/src/components/radio-group/readme.md b/packages/core/src/components/radio-group/readme.md index 164c0e41e0..b65e1f0f54 100644 --- a/packages/core/src/components/radio-group/readme.md +++ b/packages/core/src/components/radio-group/readme.md @@ -74,7 +74,7 @@ The name of the control, which is submitted with the form data. string -Reflects the value of the form control. +the value of the radio group. ## Attributes @@ -102,13 +102,15 @@ The name of the control, which is submitted with the form data. string -Reflects the value of the form control. +the value of the radio group. ## Events #### ionChange +Emitted when the value has changed. + ---------------------------------------------- diff --git a/packages/core/src/components/radio/readme.md b/packages/core/src/components/radio/readme.md index 74eef1a49c..56cb83ff8a 100644 --- a/packages/core/src/components/radio/readme.md +++ b/packages/core/src/components/radio/readme.md @@ -40,13 +40,17 @@ An `ion-radio-group` can be used to group a set of radios. When radios are insid boolean -Returns / Sets the current state of the element when type is checkbox or radio. +If true, the radio is selected. Defaults to `false`. #### color 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/theming/theming-your-app). + #### disabled @@ -59,6 +63,10 @@ Indicates that the user cannot interact with the control. +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). + #### name @@ -71,7 +79,7 @@ The name of the control, which is submitted with the form data. string -Reflects the value of the form control. +the value of the radio. ## Attributes @@ -80,13 +88,17 @@ Reflects the value of the form control. boolean -Returns / Sets the current state of the element when type is checkbox or radio. +If true, the radio is selected. Defaults to `false`. #### color 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/theming/theming-your-app). + #### disabled @@ -99,6 +111,10 @@ Indicates that the user cannot interact with the control. +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). + #### name @@ -111,36 +127,40 @@ The name of the control, which is submitted with the form data. string -Reflects the value of the form control. +the value of the radio. ## Events #### ionBlur -Removes focus from input; keystrokes will subsequently go nowhere. +Emitted when the radio button loses focus. #### ionFocus -Focus on the input element; keystrokes will subsequently go to this element. +Emitted when the radio button has focus. #### ionRadioDidLoad +Emitted when the radio loads. + #### ionRadioDidUnload +Emitted when the radio unloads. + #### ionSelect -A single radio button fires an ionSelect event, whereas -a radio group fires an ionChange event. It would be more common -to attach listeners to the radio group, not individual radio buttons. +Emitted when the radio button is selected. #### ionStyle +Emitted when the styles change. + ---------------------------------------------- diff --git a/packages/core/src/components/range/readme.md b/packages/core/src/components/range/readme.md index 3c673f27d9..4cefde8386 100644 --- a/packages/core/src/components/range/readme.md +++ b/packages/core/src/components/range/readme.md @@ -11,11 +11,18 @@ 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/theming/theming-your-app). + #### debounce number +How long, in milliseconds, to wait to trigger the +`ionChange` event after each change in the range value. Default `0`. + #### disabled @@ -26,41 +33,61 @@ boolean boolean +Show two knobs. Defaults to `false`. + #### max number +Maximum integer value of the range. Defaults to `100`. + #### min number +Minimum integer value of the range. Defaults to `0`. + #### mode +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). + #### pin boolean +If true, a pin with integer value is shown when the knob +is pressed. Defaults to `false`. + #### snaps boolean +If true, the knob snaps to tick marks evenly spaced based +on the step property value. Defaults to `false`. + #### step number +Specifies the value granularity. Defaults to `1`. + #### value any +the value of the range. + ## Attributes @@ -68,11 +95,18 @@ any 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/theming/theming-your-app). + #### debounce number +How long, in milliseconds, to wait to trigger the +`ionChange` event after each change in the range value. Default `0`. + #### disabled @@ -83,55 +117,83 @@ boolean boolean +Show two knobs. Defaults to `false`. + #### max number +Maximum integer value of the range. Defaults to `100`. + #### min number +Minimum integer value of the range. Defaults to `0`. + #### mode +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). + #### pin boolean +If true, a pin with integer value is shown when the knob +is pressed. Defaults to `false`. + #### snaps boolean +If true, the knob snaps to tick marks evenly spaced based +on the step property value. Defaults to `false`. + #### step number +Specifies the value granularity. Defaults to `1`. + #### value any +the value of the range. + ## Events #### ionBlur +Emitted when the range loses focus. + #### ionChange +Emitted when the value property has changed. + #### ionFocus +Emitted when the range has focus. + #### ionStyle +Emitted when the styles change. + ## Methods diff --git a/packages/core/src/components/scroll/readme.md b/packages/core/src/components/scroll/readme.md index 4b221d055c..087d4313aa 100644 --- a/packages/core/src/components/scroll/readme.md +++ b/packages/core/src/components/scroll/readme.md @@ -53,12 +53,18 @@ boolean #### ionScroll +Emitted while scrolling. + #### ionScrollEnd +Emitted when the scroll has ended. + #### ionScrollStart +Emitted when the scroll has started. + ## Methods diff --git a/packages/core/src/components/searchbar/readme.md b/packages/core/src/components/searchbar/readme.md index 8bb2573173..7243859308 100644 --- a/packages/core/src/components/searchbar/readme.md +++ b/packages/core/src/components/searchbar/readme.md @@ -20,61 +20,89 @@ Manages the display of a Searchbar which can be used to search or filter items. boolean +If true, enable searchbar animation. Default `false`. + #### autocomplete string +Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`. + #### autocorrect string +Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`. + #### cancelButtonText string +Set the the cancel button text. Default: `"Cancel"`. + #### color 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/theming/theming-your-app). + #### debounce number +Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `250`. + #### mode +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). + #### placeholder string +Set the input's placeholder. Default `"Search"`. + #### showCancelButton boolean +If true, show the cancel button. Default `false`. + #### spellcheck boolean +If true, enable spellcheck on the input. Default `false`. + #### type string +Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`. + #### value string +the value of the searchbar. + ## Attributes @@ -82,78 +110,116 @@ string boolean +If true, enable searchbar animation. Default `false`. + #### autocomplete string +Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`. + #### autocorrect string +Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`. + #### cancel-button-text string +Set the the cancel button text. Default: `"Cancel"`. + #### color 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/theming/theming-your-app). + #### debounce number +Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `250`. + #### mode +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). + #### placeholder string +Set the input's placeholder. Default `"Search"`. + #### show-cancel-button boolean +If true, show the cancel button. Default `false`. + #### spellcheck boolean +If true, enable spellcheck on the input. Default `false`. + #### type string +Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`. + #### value string +the value of the searchbar. + ## Events #### ionBlur +Emitted when the input loses focus. + #### ionCancel +Emitted when the cancel button is clicked. + #### ionClear +Emitted when the clear input button is clicked. + #### ionFocus +Emitted when the input has focus. + #### ionInput +Emitted when the Searchbar input has changed, including when it's cleared. + ---------------------------------------------- diff --git a/packages/core/src/components/select-option/readme.md b/packages/core/src/components/select-option/readme.md index c70e9749c5..d5c70d13c4 100644 --- a/packages/core/src/components/select-option/readme.md +++ b/packages/core/src/components/select-option/readme.md @@ -11,6 +11,8 @@ boolean +If true, the user cannot interact with the select option. + #### selected @@ -32,6 +34,8 @@ The text value of the option. boolean +If true, the user cannot interact with the select option. + #### selected diff --git a/packages/core/src/components/select/readme.md b/packages/core/src/components/select/readme.md index 14cf7b194f..28884fa9b1 100644 --- a/packages/core/src/components/select/readme.md +++ b/packages/core/src/components/select/readme.md @@ -153,6 +153,8 @@ The text to display instead of the selected option's value. +the value of the select. + ## Attributes @@ -227,6 +229,8 @@ The text to display instead of the selected option's value. +the value of the select. + ## Events @@ -252,6 +256,8 @@ Emitted when the select has focus. #### ionStyle +Emitted when the styles change. + ---------------------------------------------- diff --git a/packages/core/src/components/spinner/readme.md b/packages/core/src/components/spinner/readme.md index 36800c1106..a17bd7d388 100644 --- a/packages/core/src/components/spinner/readme.md +++ b/packages/core/src/components/spinner/readme.md @@ -99,26 +99,40 @@ ion-spinner{ 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/theming/theming-your-app). + #### duration number +How long it takes it to do one loop. + #### mode +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). + #### name string +SVG spinner name. + #### paused boolean +If true, pause the animation. + ## Attributes @@ -126,26 +140,40 @@ boolean 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/theming/theming-your-app). + #### duration number +How long it takes it to do one loop. + #### mode +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). + #### name string +SVG spinner name. + #### paused boolean +If true, pause the animation. + ---------------------------------------------- diff --git a/packages/core/src/components/split-pane/readme.md b/packages/core/src/components/split-pane/readme.md index 0548f774b8..256489cdc7 100644 --- a/packages/core/src/components/split-pane/readme.md +++ b/packages/core/src/components/split-pane/readme.md @@ -119,11 +119,18 @@ SplitPane also provides some predefined media queries that can be used. boolean +If `false`, the split-pane is disabled, ie. the side pane will +never be displayed. Default `true`. + #### when +When the split-pane should be shown. +Can be a CSS media query expression, or a shortcut expression. +Can also be a boolean expression. + ## Attributes @@ -131,19 +138,30 @@ boolean boolean +If `false`, the split-pane is disabled, ie. the side pane will +never be displayed. Default `true`. + #### when +When the split-pane should be shown. +Can be a CSS media query expression, or a shortcut expression. +Can also be a boolean expression. + ## Events #### ionChange +Emitted when the split pane is visible. + #### ionSplitPaneDidChange +Expression to be called when the split-pane visibility has changed + ## Methods diff --git a/packages/core/src/components/tab-button/readme.md b/packages/core/src/components/tab-button/readme.md index aff3928146..5ab07c0780 100644 --- a/packages/core/src/components/tab-button/readme.md +++ b/packages/core/src/components/tab-button/readme.md @@ -11,6 +11,10 @@ +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). + #### selected @@ -28,6 +32,10 @@ boolean +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). + #### selected diff --git a/packages/core/src/components/tab/readme.md b/packages/core/src/components/tab/readme.md index a4ccb33488..519ede9f96 100644 --- a/packages/core/src/components/tab/readme.md +++ b/packages/core/src/components/tab/readme.md @@ -54,31 +54,45 @@ export class Tabs { string +The badge for the tab button. + #### badgeStyle string +The badge color for the tab button. + #### btnId string +Set the root page for this tab. + #### disabled boolean +If true, enable the tab. If false, +the user cannot interact with this element. +Default: `true`. + #### icon string +The icon for the tab button. + #### path string +The URL path name to represent this tab within the URL. + #### selected @@ -89,16 +103,23 @@ boolean boolean +If true, the tab button is visible within the +tabbar. Default: `true`. + #### tabsHideOnSubPages boolean +If true, hide the tabs on child pages. + #### title string +The title of the tab button. + ## Attributes @@ -106,31 +127,45 @@ string string +The badge for the tab button. + #### badge-style string +The badge color for the tab button. + #### btn-id string +Set the root page for this tab. + #### disabled boolean +If true, enable the tab. If false, +the user cannot interact with this element. +Default: `true`. + #### icon string +The icon for the tab button. + #### path string +The URL path name to represent this tab within the URL. + #### selected @@ -141,21 +176,30 @@ boolean boolean +If true, the tab button is visible within the +tabbar. Default: `true`. + #### tabs-hide-on-sub-pages boolean +If true, hide the tabs on child pages. + #### title string +The title of the tab button. + ## Events #### ionSelect +Emitted when the current tab is selected. + ## Methods diff --git a/packages/core/src/components/tabs/readme.md b/packages/core/src/components/tabs/readme.md index d0928e5aff..351710d8f5 100644 --- a/packages/core/src/components/tabs/readme.md +++ b/packages/core/src/components/tabs/readme.md @@ -94,6 +94,8 @@ components to switch to `TabsRoot3`: string +A unique name for the tabs + #### scrollable @@ -104,26 +106,39 @@ boolean boolean +If true, the tabbar + #### tabbarHighlight boolean +If true, show the tab highlight bar under the selected tab. + #### tabbarLayout string +Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`. + #### tabbarPlacement string +Set position of the tabbar: `top`, `bottom`. + #### translucent boolean +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`. + ## Attributes @@ -131,6 +146,8 @@ boolean string +A unique name for the tabs + #### scrollable @@ -141,31 +158,46 @@ boolean boolean +If true, the tabbar + #### tabbar-highlight boolean +If true, show the tab highlight bar under the selected tab. + #### tabbar-layout string +Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`. + #### tabbar-placement string +Set position of the tabbar: `top`, `bottom`. + #### translucent boolean +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`. + ## Events #### ionChange +Emitted when the tab changes. + ## Methods diff --git a/packages/core/src/components/text/readme.md b/packages/core/src/components/text/readme.md index 7dcc24074e..be91ff5611 100644 --- a/packages/core/src/components/text/readme.md +++ b/packages/core/src/components/text/readme.md @@ -43,11 +43,19 @@ The text component is a simple component that can be used to style the text colo 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/theming/theming-your-app). + #### mode +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). + ## Attributes @@ -55,11 +63,19 @@ string 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/theming/theming-your-app). + #### mode +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). + ---------------------------------------------- diff --git a/packages/core/src/components/textarea/readme.md b/packages/core/src/components/textarea/readme.md index 19c638310a..6464b88936 100644 --- a/packages/core/src/components/textarea/readme.md +++ b/packages/core/src/components/textarea/readme.md @@ -45,86 +45,120 @@ When requiring only a single-line text input, we recommend using string +Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. + #### autocomplete string +Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`. + #### autofocus boolean +This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. + #### clearOnEdit boolean +If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. + #### cols number +The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. + #### debounce number +Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `0`. + #### disabled boolean +If true, the user cannot interact with the textarea. Defaults to `false`. + #### maxlength 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. + #### minlength 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. + #### name string +The name of the control, which is submitted with the form data. + #### placeholder string +Instructional text that shows before the input has a value. + #### readonly boolean +If true, the user cannot modify the value. Defaults to `false`. + #### required boolean +If true, the user must fill in a value before submitting a form. + #### rows number +The number of visible text lines for the control. + #### spellcheck boolean +If true, the element will have its spelling and grammar checked. Defaults to `false`. + #### value string +The value of the textarea. + #### wrap string +Indicates how the control wraps text. Possible values are: `"hard"`, `"soft"`, `"off"`. + ## Attributes @@ -132,100 +166,142 @@ string string +Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. + #### autocomplete string +Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`. + #### autofocus boolean +This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. + #### clear-on-edit boolean +If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. + #### cols number +The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. + #### debounce number +Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `0`. + #### disabled boolean +If true, the user cannot interact with the textarea. Defaults to `false`. + #### maxlength 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. + #### minlength 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. + #### name string +The name of the control, which is submitted with the form data. + #### placeholder string +Instructional text that shows before the input has a value. + #### readonly boolean +If true, the user cannot modify the value. Defaults to `false`. + #### required boolean +If true, the user must fill in a value before submitting a form. + #### rows number +The number of visible text lines for the control. + #### spellcheck boolean +If true, the element will have its spelling and grammar checked. Defaults to `false`. + #### value string +The value of the textarea. + #### wrap string +Indicates how the control wraps text. Possible values are: `"hard"`, `"soft"`, `"off"`. + ## Events #### ionBlur +Emitted when the input loses focus. + #### ionFocus +Emitted when the input has focus. + #### ionInput +Emitted when the input value has changed. + #### ionStyle +Emitted when the styles change. + ---------------------------------------------- diff --git a/packages/core/src/components/toast/readme.md b/packages/core/src/components/toast/readme.md index 58acba3dcd..13d87b6445 100644 --- a/packages/core/src/components/toast/readme.md +++ b/packages/core/src/components/toast/readme.md @@ -133,21 +133,33 @@ boolean #### ionToastDidDismiss +Emitted after the toast has dismissed. + #### ionToastDidLoad +Emitted after the toast has loaded. + #### ionToastDidPresent +Emitted after the toast has presented. + #### ionToastDidUnload +Emitted after the toast has unloaded. + #### ionToastWillDismiss +Emitted before the toast has dismissed. + #### ionToastWillPresent +Emitted before the toast has presented. + ## Methods diff --git a/packages/core/src/components/toggle/readme.md b/packages/core/src/components/toggle/readme.md index 06b8e80929..447dfb401a 100644 --- a/packages/core/src/components/toggle/readme.md +++ b/packages/core/src/components/toggle/readme.md @@ -49,13 +49,17 @@ Toggles change the state of a single option. Toggles can be switched on or off b boolean -Returns / Sets the current state of the element when type is checkbox or radio. +If true, the toggle is selected. Defaults to `false`. #### color 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/theming/theming-your-app). + #### disabled @@ -68,6 +72,10 @@ Indicates that the user cannot interact with the control. +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). + #### name @@ -80,7 +88,7 @@ The name of the control, which is submitted with the form data. string -Reflects the value of the form control. +the value of the toggle. ## Attributes @@ -89,13 +97,17 @@ Reflects the value of the form control. boolean -Returns / Sets the current state of the element when type is checkbox or radio. +If true, the toggle is selected. Defaults to `false`. #### color 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/theming/theming-your-app). + #### disabled @@ -108,6 +120,10 @@ Indicates that the user cannot interact with the control. +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). + #### name @@ -120,32 +136,29 @@ The name of the control, which is submitted with the form data. string -Reflects the value of the form control. +the value of the toggle. ## Events #### ionBlur -Removes focus from input; keystrokes will subsequently go nowhere. +Emitted when the toggle loses focus. #### ionChange -The change event is fired when the value of has changed. +Emitted when the value property has changed. #### ionFocus -Focus on the input element; keystrokes will subsequently go to this element. +Emitted when the toggle has focus. #### ionStyle -Emitted when the styles change. This is useful for parent -components to know how to style themselves depending on the -child input. For example, a disabled ion-toggle may give -its wrapping ion-item a different style. +Emitted when the styles change. diff --git a/packages/core/src/components/toolbar/readme.md b/packages/core/src/components/toolbar/readme.md index dc44b17e3b..3eb44312c0 100644 --- a/packages/core/src/components/toolbar/readme.md +++ b/packages/core/src/components/toolbar/readme.md @@ -91,16 +91,29 @@ attribute to the element. 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/theming/theming-your-app). + #### mode +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). + #### translucent boolean +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`. + ## Attributes @@ -108,16 +121,29 @@ boolean 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/theming/theming-your-app). + #### mode +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). + #### translucent boolean +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`. + ----------------------------------------------