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): update the readme files from the build

Browse Source
This commit is contained in:
Brandy Carney
2018-02-01 16:13:31 -05:00
parent c4cb9e92ac
commit 284dc584bc
41 changed files with 1192 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/core/src/components/badge/readme.md
View File

@@ -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).
----------------------------------------------

170
packages/core/src/components/datetime/readme.md
View File

@@ -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.
----------------------------------------------

32
packages/core/src/components/fab-button/readme.md
View File

@@ -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`.
----------------------------------------------

22
packages/core/src/components/fab/test/basic/index.html
View File

@@ -86,6 +86,9 @@
<ion-footer>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button onclick="closeLists()">Close</ion-button>
</ion-buttons>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-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;
}
}
</script>

10
packages/core/src/components/footer/readme.md
View File

@@ -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`.
----------------------------------------------

10
packages/core/src/components/gesture/readme.md
View File

@@ -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.
----------------------------------------------

10
packages/core/src/components/header/readme.md
View File

@@ -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`.
----------------------------------------------

8
packages/core/src/components/infinite-scroll-content/readme.md
View File

@@ -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.
----------------------------------------------

49
packages/core/src/components/infinite-scroll/readme.md
View File

@@ -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

116
packages/core/src/components/input/readme.md
View File

@@ -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.
----------------------------------------------

16
packages/core/src/components/item-divider/readme.md
View File

@@ -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).
----------------------------------------------

26
packages/core/src/components/item-option/readme.md
View File

@@ -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).
----------------------------------------------

8
packages/core/src/components/item-options/readme.md
View File

@@ -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

19
packages/core/src/components/item-sliding/readme.md
View File

@@ -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

34
packages/core/src/components/item/readme.md
View File

@@ -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`.
----------------------------------------------

8
packages/core/src/components/keyboard-controller/readme.md
View File

@@ -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.
----------------------------------------------

30
packages/core/src/components/label/readme.md
View File

@@ -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

16
packages/core/src/components/list-header/readme.md
View File

@@ -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).
----------------------------------------------

12
packages/core/src/components/loading/readme.md
View File

@@ -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

39
packages/core/src/components/menu/readme.md
View File

@@ -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

28
packages/core/src/components/modal/readme.md
View File

@@ -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

16
packages/core/src/components/note/readme.md
View File

@@ -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).
----------------------------------------------

12
packages/core/src/components/picker/readme.md
View File

@@ -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

28
packages/core/src/components/popover/readme.md
View File

@@ -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

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

@@ -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.
----------------------------------------------

38
packages/core/src/components/radio/readme.md
View File

@@ -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.
----------------------------------------------

62
packages/core/src/components/range/readme.md
View File

@@ -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

6
packages/core/src/components/scroll/readme.md
View File

@@ -53,12 +53,18 @@ boolean
#### ionScroll
Emitted while scrolling.
#### ionScrollEnd
Emitted when the scroll has ended.
#### ionScrollStart
Emitted when the scroll has started.
## Methods

66
packages/core/src/components/searchbar/readme.md
View File

@@ -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.
----------------------------------------------

4
packages/core/src/components/select-option/readme.md
View File

@@ -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

6
packages/core/src/components/select/readme.md
View File

@@ -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.
----------------------------------------------

28
packages/core/src/components/spinner/readme.md
View File

@@ -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.
----------------------------------------------

18
packages/core/src/components/split-pane/readme.md
View File

@@ -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

8
packages/core/src/components/tab-button/readme.md
View File

@@ -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

44
packages/core/src/components/tab/readme.md
View File

@@ -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

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

@@ -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

16
packages/core/src/components/text/readme.md
View File

@@ -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).
----------------------------------------------

76
packages/core/src/components/textarea/readme.md
View File

@@ -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.
----------------------------------------------

12
packages/core/src/components/toast/readme.md
View File

@@ -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

35
packages/core/src/components/toggle/readme.md
View File

@@ -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.

26
packages/core/src/components/toolbar/readme.md
View File

@@ -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`.
----------------------------------------------