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(all): possible values are extracted by stencil (#16190)

Browse Source 
* docs(all): possible values are extracted by stencil

* add defaults

* remove all hardcoded defaults

* update stencil
This commit is contained in:
Manu MA
2018-11-02 00:06:40 +01:00
committed by GitHub
parent 335acf96ee
commit ecc2c55370
151 changed files with 1363 additions and 1430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/src/components/action-sheet/action-sheet.tsx
View File

@@ -31,7 +31,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
@@ -62,7 +61,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
@Prop() cssClass?: string | string[];
/**
* If `true`, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`.
* If `true`, the action sheet will be dismissed when the backdrop is clicked.
*/
@Prop() backdropDismiss = true;
@@ -77,12 +76,12 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
@Prop() subHeader?: string;
/**
* If `true`, the action sheet will be translucent. Defaults to `false`.
* If `true`, the action sheet will be translucent.
*/
@Prop() translucent = false;
/**
* If `true`, the action sheet will animate. Defaults to `true`.
* If `true`, the action sheet will animate.
*/
@Prop() animated = true;

44
core/src/components/action-sheet/readme.md
View File

@@ -16,32 +16,32 @@ A button's `role` property can either be `destructive` or `cancel`. Buttons with
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| `animated` | `animated` | If `true`, the action sheet will animate. Defaults to `true`. | `boolean` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `buttons` | -- | An array of buttons for the action sheet. | `(string \| ActionSheetButton)[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` |
| `enterAnimation` | -- | Animation to use when the action sheet is presented. | `AnimationBuilder \| undefined` |
| `header` | `header` | Title for the action sheet. | `string \| undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` |
| `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `AnimationBuilder \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `overlayIndex` | `overlay-index` | | `number` |
| `subHeader` | `sub-header` | Subtitle for the action sheet. | `string \| undefined` |
| `translucent` | `translucent` | If `true`, the action sheet will be translucent. Defaults to `false`. | `boolean` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the action sheet will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked. | `boolean` | `true` |
| `buttons` | -- | An array of buttons for the action sheet. | `(string \| ActionSheetButton)[]` | `undefined` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the action sheet is presented. | `AnimationBuilder \| undefined` | `undefined` |
| `header` | `header` | Title for the action sheet. | `string \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `AnimationBuilder \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `overlayIndex` | `overlay-index` | | `number` | `undefined` |
| `subHeader` | `sub-header` | Subtitle for the action sheet. | `string \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the action sheet will be translucent. | `boolean` | `false` |
## Events
| Event | Detail | Description |
| --------------------------- | ------------------ | --------------------------------------- |
| `ionActionSheetDidDismiss` | OverlayEventDetail | Emitted after the alert has dismissed. |
| `ionActionSheetDidLoad` | | Emitted after the alert has loaded. |
| `ionActionSheetDidPresent` | | Emitted after the alert has presented. |
| `ionActionSheetDidUnload` | | Emitted after the alert has unloaded. |
| `ionActionSheetWillDismiss` | OverlayEventDetail | Emitted before the alert has dismissed. |
| `ionActionSheetWillPresent` | | Emitted before the alert has presented. |
| Event | Description | Detail |
| --------------------------- | --------------------------------------- | ------------------ |
| `ionActionSheetDidDismiss` | Emitted after the alert has dismissed. | OverlayEventDetail |
| `ionActionSheetDidLoad` | Emitted after the alert has loaded. | void |
| `ionActionSheetDidPresent` | Emitted after the alert has presented. | void |
| `ionActionSheetDidUnload` | Emitted after the alert has unloaded. | void |
| `ionActionSheetWillDismiss` | Emitted before the alert has dismissed. | OverlayEventDetail |
| `ionActionSheetWillPresent` | Emitted before the alert has presented. | void |
## Methods

8
core/src/components/alert/alert.tsx
View File

@@ -31,12 +31,12 @@ export class Alert implements ComponentInterface, OverlayInterface {
@Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;
@Prop({ context: 'config' }) config!: Config;
/** @internal */
@Prop() overlayIndex!: number;
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
@@ -87,17 +87,17 @@ export class Alert implements ComponentInterface, OverlayInterface {
@Prop({ mutable: true }) inputs: AlertInput[] = [];
/**
* If `true`, the alert will be dismissed when the backdrop is clicked. Defaults to `true`.
* If `true`, the alert will be dismissed when the backdrop is clicked.
*/
@Prop() backdropDismiss = true;
/**
* If `true`, the alert will be translucent. Defaults to `false`.
* If `true`, the alert will be translucent.
*/
@Prop() translucent = false;
/**
* If `true`, the alert will animate. Defaults to `true`.
* If `true`, the alert will animate.
*/
@Prop() animated = true;

48
core/src/components/alert/readme.md
View File

@@ -25,34 +25,34 @@ Alerts can also include several different inputs whose data can be passed back t
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| `animated` | `animated` | If `true`, the alert will animate. Defaults to `true`. | `boolean` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the alert will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `buttons` | -- | Array of buttons to be added to the alert. | `(string \| AlertButton)[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` |
| `enterAnimation` | -- | Animation to use when the alert is presented. | `AnimationBuilder \| undefined` |
| `header` | `header` | The main title in the heading of the alert. | `string \| undefined` |
| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` |
| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `AnimationBuilder \| undefined` |
| `message` | `message` | The main message to be displayed in the alert. | `string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `overlayIndex` | `overlay-index` | | `number` |
| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string \| undefined` |
| `translucent` | `translucent` | If `true`, the alert will be translucent. Defaults to `false`. | `boolean` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the alert will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the alert will be dismissed when the backdrop is clicked. | `boolean` | `true` |
| `buttons` | -- | Array of buttons to be added to the alert. | `(string \| AlertButton)[]` | `[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the alert is presented. | `AnimationBuilder \| undefined` | `undefined` |
| `header` | `header` | The main title in the heading of the alert. | `string \| undefined` | `undefined` |
| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | `[]` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `AnimationBuilder \| undefined` | `undefined` |
| `message` | `message` | The main message to be displayed in the alert. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `overlayIndex` | `overlay-index` | | `number` | `undefined` |
| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the alert will be translucent. | `boolean` | `false` |
## Events
| Event | Detail | Description |
| --------------------- | ------------------ | --------------------------------------- |
| `ionAlertDidDismiss` | OverlayEventDetail | Emitted after the alert has dismissed. |
| `ionAlertDidLoad` | | Emitted after the alert has presented. |
| `ionAlertDidPresent` | | Emitted after the alert has presented. |
| `ionAlertDidUnload` | | Emitted before the alert has presented. |
| `ionAlertWillDismiss` | OverlayEventDetail | Emitted before the alert has dismissed. |
| `ionAlertWillPresent` | | Emitted before the alert has presented. |
| Event | Description | Detail |
| --------------------- | --------------------------------------- | ------------------ |
| `ionAlertDidDismiss` | Emitted after the alert has dismissed. | OverlayEventDetail |
| `ionAlertDidLoad` | Emitted after the alert has presented. | void |
| `ionAlertDidPresent` | Emitted after the alert has presented. | void |
| `ionAlertDidUnload` | Emitted before the alert has presented. | void |
| `ionAlertWillDismiss` | Emitted before the alert has dismissed. | OverlayEventDetail |
| `ionAlertWillPresent` | Emitted before the alert has presented. | void |
## Methods

10
core/src/components/anchor/readme.md
View File

@@ -8,11 +8,11 @@ The Anchor component is used for navigating to a specified link. Similar to the
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root" \| undefined` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root" \| undefined` | `undefined` |
## CSS Custom Properties

1
core/src/components/back-button/back-button.tsx
View File

@@ -27,7 +27,6 @@ export class BackButton implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;

14
core/src/components/back-button/readme.md
View File

@@ -10,13 +10,13 @@ To change what is displayed in the back button, use the `text` and `icon` proper
## Properties
| Property | Attribute | Description | Type |
| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `defaultHref` | `default-href` | The url to navigate back to by default when there is no history. | `string \| undefined` |
| `icon` | `icon` | The icon name to use for the back button. | `null \| string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `text` | `text` | The text to display in the back button. | `null \| string \| undefined` |
| Property | Attribute | Description | Type | Default |
| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `defaultHref` | `default-href` | The url to navigate back to by default when there is no history. | `string \| undefined` | `undefined` |
| `icon` | `icon` | The icon name to use for the back button. | `null \| string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `text` | `text` | The text to display in the back button. | `null \| string \| undefined` | `undefined` |
## CSS Custom Properties

6
core/src/components/backdrop/backdrop.tsx
View File

@@ -21,17 +21,17 @@ export class Backdrop implements ComponentInterface {
@Prop({ context: 'document' }) doc!: Document;
/**
* If `true`, the backdrop will be visible. Defaults to `true`.
* If `true`, the backdrop will be visible.
*/
@Prop() visible = true;
/**
* If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event. Defaults to `true`.
* If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.
*/
@Prop() tappable = true;
/**
* If `true`, the backdrop will stop propagation on tap. Defaults to `true`.
* If `true`, the backdrop will stop propagation on tap.
*/
@Prop() stopPropagation = true;

16
core/src/components/backdrop/readme.md
View File

@@ -8,18 +8,18 @@ Backdrops are full screen components that overlay other components. They are use
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------- | --------- |
| `stopPropagation` | `stop-propagation` | If `true`, the backdrop will stop propagation on tap. Defaults to `true`. | `boolean` |
| `tappable` | `tappable` | If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event. Defaults to `true`. | `boolean` |
| `visible` | `visible` | If `true`, the backdrop will be visible. Defaults to `true`. | `boolean` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ------------------------------------------------------------------------------------- | --------- | ------- |
| `stopPropagation` | `stop-propagation` | If `true`, the backdrop will stop propagation on tap. | `boolean` | `true` |
| `tappable` | `tappable` | If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event. | `boolean` | `true` |
| `visible` | `visible` | If `true`, the backdrop will be visible. | `boolean` | `true` |
## Events
| Event | Detail | Description |
| ---------------- | ------ | ------------------------------------ |
| `ionBackdropTap` | | Emitted when the backdrop is tapped. |
| Event | Description | Detail |
| ---------------- | ------------------------------------ | ------ |
| `ionBackdropTap` | Emitted when the backdrop is tapped. | void |
----------------------------------------------

1
core/src/components/badge/badge.tsx
View File

@@ -21,7 +21,6 @@ export class Badge implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;

8
core/src/components/badge/readme.md
View File

@@ -8,10 +8,10 @@ Badges are inline block elements that usually appear near another element. Typic
## Properties
| Property | Attribute | Description | Type |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
## CSS Custom Properties

8
core/src/components/button/button.tsx
View File

@@ -28,18 +28,16 @@ export class Button implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
/**
* The type of button.
* Possible values are: `"button"`, `"bar-button"`.
*/
@Prop({ mutable: true }) buttonType = 'button';
/**
* If `true`, the user cannot interact with the button. Defaults to `false`.
* If `true`, the user cannot interact with the button.
*/
@Prop({ reflectToAttr: true }) disabled = false;
@@ -70,13 +68,11 @@ export class Button implements ComponentInterface {
/**
* The button shape.
* Possible values are: `"round"`.
*/
@Prop({ reflectToAttr: true }) shape?: 'round';
/**
* The button size.
* Possible values are: `"small"`, `"default"`, `"large"`.
*/
@Prop({ reflectToAttr: true }) size?: 'small' | 'default' | 'large';
@@ -87,8 +83,6 @@ export class Button implements ComponentInterface {
/**
* The type of the button.
* Possible values are: `"submit"`, `"reset"` and `"button"`.
* Default value is: `"button"`
*/
@Prop() type: 'submit' | 'reset' | 'button' = 'button';

36
core/src/components/button/readme.md
View File

@@ -37,28 +37,28 @@ This attribute specifies the size of the button. Setting this attribute will cha
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| `buttonType` | `button-type` | The type of button. Possible values are: `"button"`, `"bar-button"`. | `string` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the button. Defaults to `false`. | `boolean` |
| `expand` | `expand` | Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders. | `"block" \| "full" \| undefined` |
| `fill` | `fill` | Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`. | `"clear" \| "default" \| "outline" \| "solid" \| undefined` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root" \| undefined` |
| `shape` | `shape` | The button shape. Possible values are: `"round"`. | `"round" \| undefined` |
| `size` | `size` | The button size. Possible values are: `"small"`, `"default"`, `"large"`. | `"default" \| "large" \| "small" \| undefined` |
| `strong` | `strong` | If `true`, activates a button with a heavier font weight. | `boolean` |
| `type` | `type` | The type of the button. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` | `"button" \| "reset" \| "submit"` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ----------- |
| `buttonType` | `button-type` | The type of button. | `string` | `'button'` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the button. | `boolean` | `false` |
| `expand` | `expand` | Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders. | `"block" \| "full" \| undefined` | `undefined` |
| `fill` | `fill` | Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`. | `"clear" \| "default" \| "outline" \| "solid" \| undefined` | `undefined` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root" \| undefined` | `undefined` |
| `shape` | `shape` | The button shape. | `"round" \| undefined` | `undefined` |
| `size` | `size` | The button size. | `"default" \| "large" \| "small" \| undefined` | `undefined` |
| `strong` | `strong` | If `true`, activates a button with a heavier font weight. | `boolean` | `false` |
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
## Events
| Event | Detail | Description |
| ---------- | ------ | ------------------------------------ |
| `ionBlur` | | Emitted when the button loses focus. |
| `ionFocus` | | Emitted when the button has focus. |
| Event | Description | Detail |
| ---------- | ------------------------------------ | ------ |
| `ionBlur` | Emitted when the button loses focus. | void |
| `ionFocus` | Emitted when the button has focus. | void |
## CSS Custom Properties

1
core/src/components/card-content/card-content.tsx
View File

@@ -14,7 +14,6 @@ export class CardContent implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;

6
core/src/components/card-content/readme.md
View File

@@ -9,9 +9,9 @@ It is recommended that any text content for a card should be placed in an `ion-c
## Properties
| Property | Attribute | Description | Type |
| -------- | --------- | ----------------------------------------------------------------------------------------- | --------------- |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ------------------------------------------------- | --------------- | ----------- |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
----------------------------------------------

3
core/src/components/card-header/card-header.tsx
View File

@@ -21,12 +21,11 @@ export class CardHeader implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
/**
* If `true`, the card header will be translucent. Defaults to `false`.
* If `true`, the card header will be translucent.
*/
@Prop() translucent = false;

10
core/src/components/card-header/readme.md
View File

@@ -8,11 +8,11 @@
## Properties
| Property | Attribute | Description | Type |
| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `translucent` | `translucent` | If `true`, the card header will be translucent. Defaults to `false`. | `boolean` |
| Property | Attribute | Description | Type | Default |
| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `translucent` | `translucent` | If `true`, the card header will be translucent. | `boolean` | `false` |
----------------------------------------------

1
core/src/components/card-subtitle/card-subtitle.tsx
View File

@@ -21,7 +21,6 @@ export class CardSubtitle implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;

8
core/src/components/card-subtitle/readme.md
View File

@@ -7,10 +7,10 @@
## Properties
| Property | Attribute | Description | Type |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
## CSS Custom Properties

1
core/src/components/card-title/card-title.tsx
View File

@@ -21,7 +21,6 @@ export class CardTitle implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;

8
core/src/components/card-title/readme.md
View File

@@ -8,10 +8,10 @@
## Properties
| Property | Attribute | Description | Type |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
## CSS Custom Properties

1
core/src/components/card/card.tsx
View File

@@ -22,7 +22,6 @@ export class Card implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;

8
core/src/components/card/readme.md
View File

@@ -11,10 +11,10 @@ sub-components to reflect this. Please see `ion-card-content`,
## Properties
| Property | Attribute | Description | Type |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
## CSS Custom Properties

6
core/src/components/checkbox/checkbox.tsx
View File

@@ -30,7 +30,6 @@ export class Checkbox implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
@@ -40,12 +39,12 @@ export class Checkbox implements ComponentInterface {
@Prop() name: string = this.inputId;
/**
* If `true`, the checkbox is selected. Defaults to `false`.
* If `true`, the checkbox is selected.
*/
@Prop({ mutable: true }) checked = false;
/**
* If `true`, the user cannot interact with the checkbox. Defaults to `false`.
* If `true`, the user cannot interact with the checkbox.
*/
@Prop() disabled = false;
@@ -55,7 +54,6 @@ export class Checkbox implements ComponentInterface {
*
* The value of a toggle is analogous to the value of a `<input type="checkbox">`,
* it's only used when the toggle participates in a native `<form>`.
* Defaults to `on`.
*/
@Prop() value = 'on';

28
core/src/components/checkbox/readme.md
View File

@@ -10,24 +10,24 @@ Checkboxes allow the selection of multiple options from a set of options. They a
## Properties
| Property | Attribute | Description | Type |
| ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `checked` | `checked` | If `true`, the checkbox is selected. Defaults to `false`. | `boolean` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the checkbox. Defaults to `false`. | `boolean` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` |
| `value` | `value` | The value of the toggle does not mean if it's checked or not, use the `checked` property for that. The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`. Defaults to `on`. | `string` |
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -------------- |
| `checked` | `checked` | If `true`, the checkbox is selected. | `boolean` | `false` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the checkbox. | `boolean` | `false` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` |
| `value` | `value` | The value of the toggle does not mean if it's checked or not, use the `checked` property for that. The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`. | `string` | `'on'` |
## Events
| Event | Detail | Description |
| ----------- | ----------------------- | ---------------------------------------------- |
| `ionBlur` | | Emitted when the toggle loses focus. |
| `ionChange` | CheckedInputChangeEvent | Emitted when the checked property has changed. |
| `ionFocus` | | Emitted when the toggle has focus. |
| `ionStyle` | StyleEvent | Emitted when the styles change. |
| Event | Description | Detail |
| ----------- | ---------------------------------------------- | ----------------------- |
| `ionBlur` | Emitted when the toggle loses focus. | void |
| `ionChange` | Emitted when the checked property has changed. | CheckedInputChangeEvent |
| `ionFocus` | Emitted when the toggle has focus. | void |
| `ionStyle` | Emitted when the styles change. | StyleEvent |
## CSS Custom Properties

4
core/src/components/chip-button/chip-button.tsx
View File

@@ -20,18 +20,16 @@ export class ChipButton implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
/**
* If `true`, the user cannot interact with the chip button. Defaults to `false`.
* If `true`, the user cannot interact with the chip button.
*/
@Prop() disabled = false;
/**
* Set to `"clear"` for a transparent button or to `"solid"` for a filled background.
* Defaults to `"clear"`.
*/
@Prop() fill: 'clear' | 'solid' = 'clear';

14
core/src/components/chip-button/readme.md
View File

@@ -7,13 +7,13 @@ A ChipButton is an inset button that is placed inside of a Chip. For more inform
## Properties
| Property | Attribute | Description | Type |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the chip button. Defaults to `false`. | `boolean` |
| `fill` | `fill` | Set to `"clear"` for a transparent button or to `"solid"` for a filled background. Defaults to `"clear"`. | `"clear" \| "solid"` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the chip button. | `boolean` | `false` |
| `fill` | `fill` | Set to `"clear"` for a transparent button or to `"solid"` for a filled background. | `"clear" \| "solid"` | `'clear'` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
## CSS Custom Properties

2
core/src/components/chip-icon/chip-icon.tsx
View File

@@ -18,13 +18,11 @@ export class ChipIcon implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
/**
* Set to `"clear"` for a transparent icon or to `"solid"` for a filled background.
* Defaults to `"clear"`.
*/
@Prop() fill: 'clear' | 'solid' = 'clear';

14
core/src/components/chip-icon/readme.md
View File

@@ -7,13 +7,13 @@
## Properties
| Property | Attribute | Description | Type |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `fill` | `fill` | Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. Defaults to `"clear"`. | `"clear" \| "solid"` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `name` | `name` | The icon to use. Possible values are the same as `"ion-icon"`. | `string \| undefined` |
| `src` | `src` | The icon src to use. Possible values are the same as `"ion-icon"`. | `string \| undefined` |
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `fill` | `fill` | Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. | `"clear" \| "solid"` | `'clear'` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `name` | `name` | The icon to use. Possible values are the same as `"ion-icon"`. | `string \| undefined` | `undefined` |
| `src` | `src` | The icon src to use. Possible values are the same as `"ion-icon"`. | `string \| undefined` | `undefined` |
## CSS Custom Properties

1
core/src/components/chip/chip.tsx
View File

@@ -21,7 +21,6 @@ export class Chip implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;

8
core/src/components/chip/readme.md
View File

@@ -7,10 +7,10 @@ Chips represent complex entities in small blocks, such as a contact. A chip can
## Properties
| Property | Attribute | Description | Type |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
## CSS Custom Properties

52
core/src/components/col/readme.md
View File

@@ -26,32 +26,32 @@ There are several attributes that can be added to a column to customize this beh
## Properties
| Property | Attribute | Description | Type |
| ---------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- |
| `offsetLg` | `offset-lg` | The amount to offset the column for lg screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` |
| `offsetMd` | `offset-md` | The amount to offset the column for md screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` |
| `offsetSm` | `offset-sm` | The amount to offset the column for sm screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` |
| `offsetXl` | `offset-xl` | The amount to offset the column for xl screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` |
| `offsetXs` | `offset-xs` | The amount to offset the column for xs screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` |
| `offset` | `offset` | The amount to offset the column, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` |
| `pullLg` | `pull-lg` | The amount to pull the column for lg screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` |
| `pullMd` | `pull-md` | The amount to pull the column for md screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` |
| `pullSm` | `pull-sm` | The amount to pull the column for sm screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` |
| `pullXl` | `pull-xl` | The amount to pull the column for xl screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` |
| `pullXs` | `pull-xs` | The amount to pull the column for xs screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` |
| `pull` | `pull` | The amount to pull the column, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` |
| `pushLg` | `push-lg` | The amount to push the column for lg screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` |
| `pushMd` | `push-md` | The amount to push the column for md screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` |
| `pushSm` | `push-sm` | The amount to push the column for sm screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` |
| `pushXl` | `push-xl` | The amount to push the column for xl screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` |
| `pushXs` | `push-xs` | The amount to push the column for xs screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` |
| `push` | `push` | The amount to push the column, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` |
| `sizeLg` | `size-lg` | The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` |
| `sizeMd` | `size-md` | The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` |
| `sizeSm` | `size-sm` | The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` |
| `sizeXl` | `size-xl` | The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` |
| `sizeXs` | `size-xs` | The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` |
| `size` | `size` | The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` |
| Property | Attribute | Description | Type | Default |
| ---------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | ----------- |
| `offsetLg` | `offset-lg` | The amount to offset the column for lg screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `offsetMd` | `offset-md` | The amount to offset the column for md screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `offsetSm` | `offset-sm` | The amount to offset the column for sm screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `offsetXl` | `offset-xl` | The amount to offset the column for xl screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `offsetXs` | `offset-xs` | The amount to offset the column for xs screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `offset` | `offset` | The amount to offset the column, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `pullLg` | `pull-lg` | The amount to pull the column for lg screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | `undefined` |
| `pullMd` | `pull-md` | The amount to pull the column for md screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | `undefined` |
| `pullSm` | `pull-sm` | The amount to pull the column for sm screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | `undefined` |
| `pullXl` | `pull-xl` | The amount to pull the column for xl screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | `undefined` |
| `pullXs` | `pull-xs` | The amount to pull the column for xs screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | `undefined` |
| `pull` | `pull` | The amount to pull the column, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | `undefined` |
| `pushLg` | `push-lg` | The amount to push the column for lg screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `pushMd` | `push-md` | The amount to push the column for md screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `pushSm` | `push-sm` | The amount to push the column for sm screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `pushXl` | `push-xl` | The amount to push the column for xl screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `pushXs` | `push-xs` | The amount to push the column for xs screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `push` | `push` | The amount to push the column, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `sizeLg` | `size-lg` | The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` |
| `sizeMd` | `size-md` | The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` |
| `sizeSm` | `size-sm` | The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` |
| `sizeXl` | `size-xl` | The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` |
| `sizeXs` | `size-xs` | The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` |
| `size` | `size` | The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` |
## CSS Custom Properties

26
core/src/components/content/readme.md
View File

@@ -9,23 +9,23 @@ view component.
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `forceOverscroll` | `force-overscroll` | If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting. | `boolean \| undefined` |
| `fullscreen` | `fullscreen` | If `true`, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent. | `boolean` |
| `scrollEvents` | `scroll-events` | Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`. | `boolean` |
| `scrollX` | `scroll-x` | If you want to enable the content scrolling in the X axis, set this property to `true`. | `boolean` |
| `scrollY` | `scroll-y` | If you want to disable the content scrolling in the Y axis, set this property to `false`. | `boolean` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `forceOverscroll` | `force-overscroll` | If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting. | `boolean \| undefined` | `undefined` |
| `fullscreen` | `fullscreen` | If `true`, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent. | `boolean` | `false` |
| `scrollEvents` | `scroll-events` | Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`. | `boolean` | `false` |
| `scrollX` | `scroll-x` | If you want to enable the content scrolling in the X axis, set this property to `true`. | `boolean` | `false` |
| `scrollY` | `scroll-y` | If you want to disable the content scrolling in the Y axis, set this property to `false`. | `boolean` | `true` |
## Events
| Event | Detail | Description |
| ---------------- | ---------------- | ------------------------------------------------------------------------------------------------ |
| `ionScroll` | ScrollDetail | Emitted while scrolling. This event is disabled by default. Look at the property: `scrollEvents` |
| `ionScrollEnd` | ScrollBaseDetail | Emitted when the scroll has ended. |
| `ionScrollStart` | ScrollBaseDetail | Emitted when the scroll has started. |
| Event | Description | Detail |
| ---------------- | ------------------------------------------------------------------------------------------------ | ---------------- |
| `ionScroll` | Emitted while scrolling. This event is disabled by default. Look at the property: `scrollEvents` | ScrollDetail |
| `ionScrollEnd` | Emitted when the scroll has ended. | ScrollBaseDetail |
| `ionScrollStart` | Emitted when the scroll has started. | ScrollBaseDetail |
## Methods

7
core/src/components/datetime/datetime.tsx
View File

@@ -31,7 +31,6 @@ export class Datetime implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
@@ -41,7 +40,7 @@ export class Datetime implements ComponentInterface {
@Prop() name: string = this.inputId;
/**
* If `true`, the user cannot interact with the datetime. Defaults to `false`.
* If `true`, the user cannot interact with the datetime.
*/
@Prop() disabled = false;
@@ -90,12 +89,12 @@ export class Datetime implements ComponentInterface {
@Prop() pickerFormat?: string;
/**
* The text to display on the picker's cancel button. Default: `Cancel`.
* The text to display on the picker's cancel button.
*/
@Prop() cancelText = 'Cancel';
/**
* The text to display on the picker's "Done" button. Default: `Done`.
* The text to display on the picker's "Done" button.
*/
@Prop() doneText = 'Done';

56
core/src/components/datetime/readme.md
View File

@@ -204,38 +204,38 @@ dates in JavaScript.
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| `cancelText` | `cancel-text` | The text to display on the picker's cancel button. Default: `Cancel`. | `string` |
| `dayNames` | `day-names` | Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. | `string \| string[] \| undefined` |
| `dayShortNames` | `day-short-names` | Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. | `string \| string[] \| undefined` |
| `dayValues` | -- | 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 a number, an array of numbers, or a 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. | `number \| number[] \| string \| undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the datetime. Defaults to `false`. | `boolean` |
| `displayFormat` | `display-format` | 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`. | `string` |
| `doneText` | `done-text` | The text to display on the picker's "Done" button. Default: `Done`. | `string` |
| `hourValues` | -- | 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 a number, an array of numbers, or a string of comma separated numbers. | `number \| number[] \| string \| undefined` |
| `max` | `max` | 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. | `string \| undefined` |
| `min` | `min` | 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. | `string \| undefined` |
| `minuteValues` | -- | Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a 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"`. | `number \| number[] \| string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `monthNames` | `month-names` | Full names for each month name. This can be used to provide locale month names. Defaults to English. | `string \| string[] \| undefined` |
| `monthShortNames` | `month-short-names` | Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English. | `string \| string[] \| undefined` |
| `monthValues` | -- | 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 a number, an array of numbers, or a 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`. | `number \| number[] \| string \| undefined` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` |
| `pickerFormat` | `picker-format` | 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`. | `string \| undefined` |
| `pickerOptions` | -- | Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options. | `Partial<PickerOptions> \| undefined` |
| `placeholder` | `placeholder` | The text to display when there's no date selected yet. Using lowercase to match the input attribute | `null \| string \| undefined` |
| `value` | `value` | The value of the datetime as a valid ISO 8601 datetime string. | `null \| string \| undefined` |
| `yearValues` | -- | 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 a number, 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"`. | `number \| number[] \| string \| undefined` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | --------------- |
| `cancelText` | `cancel-text` | The text to display on the picker's cancel button. | `string` | `'Cancel'` |
| `dayNames` | `day-names` | Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. | `string \| string[] \| undefined` | `undefined` |
| `dayShortNames` | `day-short-names` | Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. | `string \| string[] \| undefined` | `undefined` |
| `dayValues` | -- | 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 a number, an array of numbers, or a 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. | `number \| number[] \| string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the datetime. | `boolean` | `false` |
| `displayFormat` | `display-format` | 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`. | `string` | `'MMM D, YYYY'` |
| `doneText` | `done-text` | The text to display on the picker's "Done" button. | `string` | `'Done'` |
| `hourValues` | -- | 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 a number, an array of numbers, or a string of comma separated numbers. | `number \| number[] \| string \| undefined` | `undefined` |
| `max` | `max` | 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. | `string \| undefined` | `undefined` |
| `min` | `min` | 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. | `string \| undefined` | `undefined` |
| `minuteValues` | -- | Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a 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"`. | `number \| number[] \| string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `monthNames` | `month-names` | Full names for each month name. This can be used to provide locale month names. Defaults to English. | `string \| string[] \| undefined` | `undefined` |
| `monthShortNames` | `month-short-names` | Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English. | `string \| string[] \| undefined` | `undefined` |
| `monthValues` | -- | 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 a number, an array of numbers, or a 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`. | `number \| number[] \| string \| undefined` | `undefined` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` |
| `pickerFormat` | `picker-format` | 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`. | `string \| undefined` | `undefined` |
| `pickerOptions` | -- | Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options. | `Partial<PickerOptions> \| undefined` | `undefined` |
| `placeholder` | `placeholder` | The text to display when there's no date selected yet. Using lowercase to match the input attribute | `null \| string \| undefined` | `undefined` |
| `value` | `value` | The value of the datetime as a valid ISO 8601 datetime string. | `null \| string \| undefined` | `undefined` |
| `yearValues` | -- | 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 a number, 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"`. | `number \| number[] \| string \| undefined` | `undefined` |
## Events
| Event | Detail | Description |
| ----------- | ---------------- | --------------------------------------------------- |
| `ionCancel` | | Emitted when the datetime selection was cancelled. |
| `ionChange` | InputChangeEvent | Emitted when the value (selected date) has changed. |
| `ionStyle` | StyleEvent | Emitted when the styles change. |
| Event | Description | Detail |
| ----------- | --------------------------------------------------- | ---------------- |
| `ionCancel` | Emitted when the datetime selection was cancelled. | void |
| `ionChange` | Emitted when the value (selected date) has changed. | InputChangeEvent |
| `ionStyle` | Emitted when the styles change. | StyleEvent |
## Methods

9
core/src/components/fab-button/fab-button.tsx
View File

@@ -20,7 +20,6 @@ export class FabButton implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
@@ -32,12 +31,12 @@ export class FabButton implements ComponentInterface {
@Prop() color?: Color;
/**
* If `true`, the fab button will be show a close icon. Defaults to `false`.
* If `true`, the fab button will be show a close icon.
*/
@Prop() activated = false;
/**
* If `true`, the user cannot interact with the fab button. Defaults to `false`.
* If `true`, the user cannot interact with the fab button.
*/
@Prop() disabled = false;
@@ -59,14 +58,12 @@ export class FabButton implements ComponentInterface {
@Prop() show = false;
/**
* If `true`, the fab button will be translucent. Defaults to `false`.
* If `true`, the fab button will be translucent.
*/
@Prop() translucent = false;
/**
* The type of the button.
* Possible values are: `"submit"`, `"reset"` and `"button"`.
* Default value is: `"button"`
*/
@Prop() type: 'submit' | 'reset' | 'button' = 'button';

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

@@ -9,25 +9,25 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| `activated` | `activated` | If `true`, the fab button will be show a close icon. Defaults to `false`. | `boolean` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the fab button. Defaults to `false`. | `boolean` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root" \| undefined` |
| `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` |
| `translucent` | `translucent` | If `true`, the fab button will be translucent. Defaults to `false`. | `boolean` |
| `type` | `type` | The type of the button. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` | `"button" \| "reset" \| "submit"` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ----------- |
| `activated` | `activated` | If `true`, the fab button will be show a close icon. | `boolean` | `false` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the fab button. | `boolean` | `false` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root" \| undefined` | `undefined` |
| `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` |
| `translucent` | `translucent` | If `true`, the fab button will be translucent. | `boolean` | `false` |
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
## Events
| Event | Detail | Description |
| ---------- | ------ | ------------------------------------ |
| `ionBlur` | | Emitted when the button loses focus. |
| `ionFocus` | | Emitted when the button has focus. |
| Event | Description | Detail |
| ---------- | ------------------------------------ | ------ |
| `ionBlur` | Emitted when the button loses focus. | void |
| `ionFocus` | Emitted when the button has focus. | void |
## CSS Custom Properties

4
core/src/components/fab-list/fab-list.tsx
View File

@@ -9,7 +9,7 @@ export class FabList implements ComponentInterface {
@Element() el!: HTMLIonFabElement;
/**
* If `true`, the fab list will be show all fab buttons in the list. Defaults to `false`.
* If `true`, the fab list will be show all fab buttons in the list.
*/
@Prop() activated = false;
@@ -25,7 +25,7 @@ export class FabList implements ComponentInterface {
}
/**
* The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`.
* The side the fab list will show on relative to the main fab button.
*/
@Prop() side: 'start' | 'end' | 'top' | 'bottom' = 'bottom';

8
core/src/components/fab-list/readme.md
View File

@@ -7,10 +7,10 @@ The `ion-fab-list` element is a container for multiple fab buttons. This collect
## Properties
| Property | Attribute | Description | Type |
| ----------- | ----------- | ------------------------------------------------------------------------------------------- | --------------------------------------- |
| `activated` | `activated` | If `true`, the fab list will be show all fab buttons in the list. Defaults to `false`. | `boolean` |
| `side` | `side` | The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`. | `"bottom" \| "end" \| "start" \| "top"` |
| Property | Attribute | Description | Type | Default |
| ----------- | ----------- | ------------------------------------------------------------------- | --------------------------------------- | ---------- |
| `activated` | `activated` | If `true`, the fab list will be show all fab buttons in the list. | `boolean` | `false` |
| `side` | `side` | The side the fab list will show on relative to the main fab button. | `"bottom" \| "end" \| "start" \| "top"` | `'bottom'` |
----------------------------------------------

2
core/src/components/fab/fab.tsx
View File

@@ -11,13 +11,11 @@ export class Fab implements ComponentInterface {
/**
* Where to align the fab horizontally in the viewport.
* Possible values are: `"center"`, `"start"`, `"end"`.
*/
@Prop() horizontal?: 'start' | 'end' | 'center';
/**
* Where to align the fab vertically in the viewport.
* Possible values are: `"top"`, `"center"`, `"bottom"`.
*/
@Prop() vertical?: 'top' | 'bottom' | 'center';

12
core/src/components/fab/readme.md
View File

@@ -7,12 +7,12 @@ Fabs are container elements that contain one or more fab buttons. They should be
## Properties
| Property | Attribute | Description | Type |
| ------------ | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| `activated` | `activated` | If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible. | `boolean` |
| `edge` | `edge` | If `true`, the fab will display on the edge of the header if `vertical` is `"top"`, and on the edge of the footer if it is `"bottom"`. Should be used with a `fixed` slot. | `boolean` |
| `horizontal` | `horizontal` | Where to align the fab horizontally in the viewport. Possible values are: `"center"`, `"start"`, `"end"`. | `"center" \| "end" \| "start" \| undefined` |
| `vertical` | `vertical` | Where to align the fab vertically in the viewport. Possible values are: `"top"`, `"center"`, `"bottom"`. | `"bottom" \| "center" \| "top" \| undefined` |
| Property | Attribute | Description | Type | Default |
| ------------ | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ----------- |
| `activated` | `activated` | If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible. | `boolean` | `false` |
| `edge` | `edge` | If `true`, the fab will display on the edge of the header if `vertical` is `"top"`, and on the edge of the footer if it is `"bottom"`. Should be used with a `fixed` slot. | `boolean` | `false` |
| `horizontal` | `horizontal` | Where to align the fab horizontally in the viewport. | `"center" \| "end" \| "start" \| undefined` | `undefined` |
| `vertical` | `vertical` | Where to align the fab vertically in the viewport. | `"bottom" \| "center" \| "top" \| undefined` | `undefined` |
## Methods

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

@@ -14,7 +14,6 @@ export class Footer implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
@@ -22,7 +21,6 @@ export class Footer implements ComponentInterface {
* If `true`, the footer will be translucent.
* Note: In order to scroll content behind the footer, the `fullscreen`
* attribute needs to be set on the content.
* Defaults to `false`.
*/
@Prop() translucent = false;

8
core/src/components/footer/readme.md
View File

@@ -8,10 +8,10 @@ Footer can be a wrapper for ion-toolbar to make sure the content area is sized c
## Properties
| Property | Attribute | Description | Type |
| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `translucent` | `translucent` | If `true`, the footer will be translucent. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. | `boolean` |
| Property | Attribute | Description | Type | Default |
| ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ----------- |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `translucent` | `translucent` | If `true`, the footer will be translucent. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. | `boolean` | `false` |
----------------------------------------------

2
core/src/components/grid/grid.tsx
View File

@@ -8,7 +8,7 @@ import { Component, ComponentInterface, Prop } from '@stencil/core';
export class Grid implements ComponentInterface {
/**
* If `true`, the grid will have a fixed width based on the screen size. Defaults to `false`.
* If `true`, the grid will have a fixed width based on the screen size.
*/
@Prop() fixed = false;

6
core/src/components/grid/readme.md
View File

@@ -12,9 +12,9 @@ See [Grid Layout](/docs/layout/grid) for more information.
## Properties
| Property | Attribute | Description | Type |
| -------- | --------- | ------------------------------------------------------------------------------------------ | --------- |
| `fixed` | `fixed` | If `true`, the grid will have a fixed width based on the screen size. Defaults to `false`. | `boolean` |
| Property | Attribute | Description | Type | Default |
| -------- | --------- | --------------------------------------------------------------------- | --------- | ------- |
| `fixed` | `fixed` | If `true`, the grid will have a fixed width based on the screen size. | `boolean` | `false` |
## CSS Custom Properties

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

@@ -14,7 +14,6 @@ export class Header implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
@@ -22,7 +21,6 @@ export class Header implements ComponentInterface {
* If `true`, the header will be translucent.
* Note: In order to scroll content behind the header, the `fullscreen`
* attribute needs to be set on the content.
* Defaults to `false`.
*/
@Prop() translucent = false;

8
core/src/components/header/readme.md
View File

@@ -10,10 +10,10 @@ It's important to note that ion-header needs to be the one of the three root ele
## Properties
| Property | Attribute | Description | Type |
| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `translucent` | `translucent` | If `true`, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. | `boolean` |
| Property | Attribute | Description | Type | Default |
| ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ----------- |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `translucent` | `translucent` | If `true`, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. | `boolean` | `false` |
----------------------------------------------

14
core/src/components/img/readme.md
View File

@@ -8,17 +8,17 @@ Img is a tag that will lazily load an image when ever the tag is in the viewport
## Properties
| Property | Attribute | Description | Type |
| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- |
| `alt` | `alt` | This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded. | `string \| undefined` |
| `src` | `src` | The image URL. This attribute is mandatory for the <img> element. | `string \| undefined` |
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | ----------- |
| `alt` | `alt` | This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded. | `string \| undefined` | `undefined` |
| `src` | `src` | The image URL. This attribute is mandatory for the <img> element. | `string \| undefined` | `undefined` |
## Events
| Event | Detail | Description |
| --------------- | ------ | ---------------------------------- |
| `ionImgDidLoad` | | Emitted when the img src is loaded |
| Event | Description | Detail |
| --------------- | ---------------------------------- | ------ |
| `ionImgDidLoad` | Emitted when the img src is loaded | void |
----------------------------------------------

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

@@ -1,6 +1,6 @@
import { Component, ComponentInterface, Prop } from '@stencil/core';
import { Config, Mode } from '../../interface';
import { Config, Mode, SpinnerTypes } from '../../interface';
import { createThemedClasses } from '../../utils/theme';
@Component({
@@ -19,7 +19,7 @@ export class InfiniteScrollContent implements ComponentInterface {
/**
* An animated SVG spinner that shows while loading.
*/
@Prop({ mutable: true }) loadingSpinner?: string;
@Prop({ mutable: true }) loadingSpinner?: SpinnerTypes;
/**
* Optional text to display while loading.

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

@@ -7,10 +7,10 @@ The `ion-infinite-scroll-content` component is the default child used by the `io
## Properties
| Property | Attribute | Description | Type |
| ---------------- | ----------------- | ------------------------------------------------- | --------------------- |
| `loadingSpinner` | `loading-spinner` | An animated SVG spinner that shows while loading. | `string \| undefined` |
| `loadingText` | `loading-text` | Optional text to display while loading. | `string \| undefined` |
| Property | Attribute | Description | Type | Default |
| ---------------- | ----------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------- |
| `loadingSpinner` | `loading-spinner` | An animated SVG spinner that shows while loading. | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| undefined` | `undefined` |
| `loadingText` | `loading-text` | Optional text to display while loading. | `string \| undefined` | `undefined` |
----------------------------------------------

2
core/src/components/infinite-scroll/infinite-scroll.tsx
View File

@@ -26,7 +26,6 @@ export class InfiniteScroll implements ComponentInterface {
* 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%`.
*/
@Prop() threshold = '15%';
@@ -65,7 +64,6 @@ export class InfiniteScroll implements ComponentInterface {
/**
* The position of the infinite scroll element.
* The value can be either `top` or `bottom`.
* Defaults to `bottom`.
*/
@Prop() position: 'top' | 'bottom' = 'bottom';

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

@@ -17,18 +17,18 @@ Separating the `ion-infinite-scroll` and `ion-infinite-scroll-content` component
## Properties
| Property | Attribute | Description | Type |
| ----------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| `disabled` | `disabled` | If `true`, the infinite scroll will be hidden and scroll event listeners will be removed. Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed. | `boolean` |
| `position` | `position` | The position of the infinite scroll element. The value can be either `top` or `bottom`. Defaults to `bottom`. | `"bottom" \| "top"` |
| `threshold` | `threshold` | 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%`. | `string` |
| Property | Attribute | Description | Type | Default |
| ----------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ---------- |
| `disabled` | `disabled` | If `true`, the infinite scroll will be hidden and scroll event listeners will be removed. Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed. | `boolean` | `false` |
| `position` | `position` | The position of the infinite scroll element. The value can be either `top` or `bottom`. | `"bottom" \| "top"` | `'bottom'` |
| `threshold` | `threshold` | 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. | `string` | `'15%'` |
## Events
| Event | Detail | Description |
| ------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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. |
| Event | Description | Detail |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| `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. | void |
## Methods

33
core/src/components/input/input.tsx
View File

@@ -31,7 +31,6 @@ export class Input implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
@@ -41,27 +40,27 @@ export class Input implements ComponentInterface {
@Prop() accept?: string;
/**
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`.
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
*/
@Prop() autocapitalize = 'none';
@Prop() autocapitalize: 'on' | 'off' | 'words' | 'characters' = 'off';
/**
* Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`.
* Indicates whether the value of the control can be automatically completed by the browser.
*/
@Prop() autocomplete = 'off';
@Prop() autocomplete: 'on' | 'off' = 'off';
/**
* Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `"off"`.
* Whether autocorrection should be enabled when the user is entering/editing the text value.
*/
@Prop() autocorrect = 'off';
@Prop() autocorrect: 'on' | 'off' = 'off';
/**
* This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`.
* This Boolean attribute lets you specify that a form control should have input focus when the page loads.
*/
@Prop() autofocus = false;
/**
* If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`.
* If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
*/
@Prop() clearInput = false;
@@ -71,7 +70,7 @@ export class Input implements ComponentInterface {
@Prop({ mutable: true }) clearOnEdit?: boolean;
/**
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`.
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
*/
@Prop() debounce = 0;
@@ -81,7 +80,7 @@ export class Input implements ComponentInterface {
}
/**
* If `true`, the user cannot interact with the input. Defaults to `false`.
* If `true`, the user cannot interact with the input.
*/
@Prop() disabled = false;
@@ -91,7 +90,8 @@ export class Input implements ComponentInterface {
}
/**
* A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`.
* A hint to the browser for which keyboard to display.
* This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`.
*/
@Prop() inputmode?: string;
@@ -136,7 +136,7 @@ export class Input implements ComponentInterface {
@Prop() placeholder?: string;
/**
* If `true`, the user cannot modify the value. Defaults to `false`.
* If `true`, the user cannot modify the value.
*/
@Prop() readonly = false;
@@ -151,12 +151,13 @@ export class Input implements ComponentInterface {
@Prop() results?: number;
/**
* If `true`, the element will have its spelling and grammar checked. Defaults to `false`.
* If `true`, the element will have its spelling and grammar checked.
*/
@Prop() spellcheck = false;
/**
* Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number.
* Works with the min and max attributes to limit the increments at which a value can be set.
* Possible values are: `"any"` or a positive floating point number.
*/
@Prop() step?: string;
@@ -166,7 +167,7 @@ export class Input implements ComponentInterface {
@Prop() size?: number;
/**
* The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`.
* The type of control to display. The default type is text.
*/
@Prop() type: TextFieldTypes = 'text';

78
core/src/components/input/readme.md
View File

@@ -10,49 +10,49 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email
## Properties
| Property | Attribute | Description | Type |
| ---------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| `accept` | `accept` | 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. | `string \| undefined` |
| `autocapitalize` | `autocapitalize` | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. | `string` |
| `autocomplete` | `autocomplete` | Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`. | `string` |
| `autocorrect` | `autocorrect` | Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `"off"`. | `string` |
| `autofocus` | `autofocus` | This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. | `boolean` |
| `clearInput` | `clear-input` | If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`. | `boolean` |
| `clearOnEdit` | `clear-on-edit` | If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. | `boolean \| undefined` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`. | `number` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the input. Defaults to `false`. | `boolean` |
| `inputmode` | `inputmode` | 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"`. | `string \| undefined` |
| `max` | `max` | The maximum value, which must not be less than its minimum (min attribute) value. | `string \| undefined` |
| `maxlength` | `maxlength` | 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. | `number \| undefined` |
| `min` | `min` | The minimum value, which must not be greater than its maximum (max attribute) value. | `string \| undefined` |
| `minlength` | `minlength` | 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. | `number \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `multiple` | `multiple` | 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. | `boolean \| undefined` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` |
| `pattern` | `pattern` | 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. | `string \| undefined` |
| `placeholder` | `placeholder` | Instructional text that shows before the input has a value. | `string \| undefined` |
| `readonly` | `readonly` | If `true`, the user cannot modify the value. Defaults to `false`. | `boolean` |
| `required` | `required` | If `true`, the user must fill in a value before submitting a form. | `boolean` |
| `results` | `results` | This is a nonstandard attribute supported by Safari that only applies when the type is `"search"`. Its value should be a nonnegative decimal integer. | `number \| undefined` |
| `size` | `size` | 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. | `number \| undefined` |
| `spellcheck` | `spellcheck` | If `true`, the element will have its spelling and grammar checked. Defaults to `false`. | `boolean` |
| `step` | `step` | 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. | `string \| undefined` |
| `type` | `type` | The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`. | `"date" \| "email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` |
| `value` | `value` | The value of the input. | `null \| string \| undefined` |
| Property | Attribute | Description | Type | Default |
| ---------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -------------- |
| `accept` | `accept` | 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. | `string \| undefined` | `undefined` |
| `autocapitalize` | `autocapitalize` | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. | `"characters" \| "off" \| "on" \| "words"` | `'off'` |
| `autocomplete` | `autocomplete` | Indicates whether the value of the control can be automatically completed by the browser. | `"off" \| "on"` | `'off'` |
| `autocorrect` | `autocorrect` | Whether autocorrection should be enabled when the user is entering/editing the text value. | `"off" \| "on"` | `'off'` |
| `autofocus` | `autofocus` | This Boolean attribute lets you specify that a form control should have input focus when the page loads. | `boolean` | `false` |
| `clearInput` | `clear-input` | If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. | `boolean` | `false` |
| `clearOnEdit` | `clear-on-edit` | If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. | `boolean \| undefined` | `undefined` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. | `number` | `0` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` |
| `inputmode` | `inputmode` | 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"`. | `string \| undefined` | `undefined` |
| `max` | `max` | The maximum value, which must not be less than its minimum (min attribute) value. | `string \| undefined` | `undefined` |
| `maxlength` | `maxlength` | 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. | `number \| undefined` | `undefined` |
| `min` | `min` | The minimum value, which must not be greater than its maximum (max attribute) value. | `string \| undefined` | `undefined` |
| `minlength` | `minlength` | 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. | `number \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `multiple` | `multiple` | 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. | `boolean \| undefined` | `undefined` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` |
| `pattern` | `pattern` | 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. | `string \| undefined` | `undefined` |
| `placeholder` | `placeholder` | Instructional text that shows before the input has a value. | `string \| undefined` | `undefined` |
| `readonly` | `readonly` | If `true`, the user cannot modify the value. | `boolean` | `false` |
| `required` | `required` | If `true`, the user must fill in a value before submitting a form. | `boolean` | `false` |
| `results` | `results` | This is a nonstandard attribute supported by Safari that only applies when the type is `"search"`. Its value should be a nonnegative decimal integer. | `number \| undefined` | `undefined` |
| `size` | `size` | 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. | `number \| undefined` | `undefined` |
| `spellcheck` | `spellcheck` | If `true`, the element will have its spelling and grammar checked. | `boolean` | `false` |
| `step` | `step` | 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. | `string \| undefined` | `undefined` |
| `type` | `type` | The type of control to display. The default type is text. | `"date" \| "email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'text'` |
| `value` | `value` | The value of the input. | `null \| string \| undefined` | `''` |
## Events
| Event | Detail | Description |
| ------------------- | -------------------- | ---------------------------------------- |
| `ionBlur` | | Emitted when the input loses focus. |
| `ionChange` | TextInputChangeEvent | Emitted when the value has changed. |
| `ionFocus` | | Emitted when the input has focus. |
| `ionInput` | KeyboardEvent | Emitted when a keyboard input ocurred. |
| `ionInputDidLoad` | | Emitted when the input has been created. |
| `ionInputDidUnload` | | Emitted when the input has been removed. |
| `ionStyle` | StyleEvent | Emitted when the styles change. |
| Event | Description | Detail |
| ------------------- | ---------------------------------------- | -------------------- |
| `ionBlur` | Emitted when the input loses focus. | void |
| `ionChange` | Emitted when the value has changed. | TextInputChangeEvent |
| `ionFocus` | Emitted when the input has focus. | void |
| `ionInput` | Emitted when a keyboard input ocurred. | KeyboardEvent |
| `ionInputDidLoad` | Emitted when the input has been created. | void |
| `ionInputDidUnload` | Emitted when the input has been removed. | void |
| `ionStyle` | Emitted when the styles change. | StyleEvent |
## Methods

1
core/src/components/item-divider/item-divider.tsx
View File

@@ -24,7 +24,6 @@ export class ItemDivider implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;

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

@@ -7,10 +7,10 @@ Item Dividers are block elements that can be used to separate items in a list. T
## Properties
| Property | Attribute | Description | Type |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
## CSS Custom Properties

5
core/src/components/item-option/item-option.tsx
View File

@@ -24,17 +24,16 @@ export class ItemOption implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
/**
* If `true`, the user cannot interact with the item option. Defaults to `false`.
* If `true`, the user cannot interact with the item option.
*/
@Prop() disabled = false;
/**
* If `true`, the option will expand to take up the available width and cover any other options. Defaults to `false`.
* If `true`, the option will expand to take up the available width and cover any other options.
*/
@Prop() expandable = false;

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

@@ -9,13 +9,13 @@ action for the item.
## Properties
| Property | Attribute | Description | Type |
| ------------ | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the item option. Defaults to `false`. | `boolean` |
| `expandable` | `expandable` | If `true`, the option will expand to take up the available width and cover any other options. Defaults to `false`. | `boolean` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| Property | Attribute | Description | Type | Default |
| ------------ | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the item option. | `boolean` | `false` |
| `expandable` | `expandable` | If `true`, the option will expand to take up the available width and cover any other options. | `boolean` | `false` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
## CSS Custom Properties

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

@@ -16,7 +16,7 @@ export class ItemOptions implements ComponentInterface {
@Prop({ context: 'window' }) win!: Window;
/**
* The side the option button should be on. Possible values: `"start"` and `"end"`. Defaults to `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
* The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
*
*/
@Prop() side: Side = 'end';

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

@@ -17,16 +17,16 @@ You can combine the `ionSwipe` event plus the `expandable` directive to create a
## Properties
| Property | Attribute | Description | Type |
| -------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `side` | `side` | The side the option button should be on. Possible values: `"start"` and `"end"`. Defaults to `"end"`. If you have multiple `ion-item-options`, a side must be provided for each. | `"end" \| "start"` |
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------- |
| `side` | `side` | The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each. | `"end" \| "start"` | `'end'` |
## Events
| Event | Detail | Description |
| ---------- | ------ | -------------------------------------------- |
| `ionSwipe` | any | Emitted when the item has been fully swiped. |
| Event | Description | Detail |
| ---------- | -------------------------------------------- | ------ |
| `ionSwipe` | Emitted when the item has been fully swiped. | any |
## Methods

2
core/src/components/item-sliding/item-sliding.tsx
View File

@@ -49,7 +49,7 @@ export class ItemSliding implements ComponentInterface {
@Prop({ context: 'queue' }) queue!: QueueApi;
/**
* If `true`, the user cannot interact with the sliding-item. Defaults to `false`.
* If `true`, the user cannot interact with the sliding-item.
*/
@Prop() disabled = false;
@Watch('disabled')

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

@@ -31,16 +31,16 @@ Options can be expanded to take up the full width of the item if you swipe past
## Properties
| Property | Attribute | Description | Type |
| ---------- | ---------- | ------------------------------------------------------------------------------- | --------- |
| `disabled` | `disabled` | If `true`, the user cannot interact with the sliding-item. Defaults to `false`. | `boolean` |
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ---------------------------------------------------------- | --------- | ------- |
| `disabled` | `disabled` | If `true`, the user cannot interact with the sliding-item. | `boolean` | `false` |
## Events
| Event | Detail | Description |
| --------- | ------ | ------------------------------------------ |
| `ionDrag` | | Emitted when the sliding position changes. |
| Event | Description | Detail |
| --------- | ------------------------------------------ | ------ |
| `ionDrag` | Emitted when the sliding position changes. | void |
## Methods

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

@@ -29,12 +29,11 @@ export class Item implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
/**
* If `true`, a button tag will be rendered and the item will be tappable. Defaults to `false`.
* If `true`, a button tag will be rendered and the item will be tappable.
*/
@Prop() button = false;
@@ -45,12 +44,12 @@ export class Item implements ComponentInterface {
@Prop() detail?: boolean;
/**
* The icon to use when `detail` is set to `true`. Defaults to `"ios-arrow-forward"`.
* The icon to use when `detail` is set to `true`.
*/
@Prop() detailIcon = 'ios-arrow-forward';
/**
* If `true`, the user cannot interact with the item. Defaults to `false`.
* If `true`, the user cannot interact with the item.
*/
@Prop() disabled = false;
@@ -62,7 +61,6 @@ export class Item implements ComponentInterface {
/**
* How the bottom border should be displayed on the item.
* Available options: `"full"`, `"inset"`, `"none"`.
*/
@Prop() lines?: 'full' | 'inset' | 'none';
@@ -74,8 +72,6 @@ export class Item implements ComponentInterface {
/**
* The type of the button. Only used when an `onclick` or `button` property is present.
* Possible values are: `"submit"`, `"reset"` and `"button"`.
* Default value is: `"button"`
*/
@Prop() type: 'submit' | 'reset' | 'button' = 'button';

24
core/src/components/item/readme.md
View File

@@ -56,18 +56,18 @@ The highlight color changes based on the item state, but all of the states use I
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| `button` | `button` | If `true`, a button tag will be rendered and the item will be tappable. Defaults to `false`. | `boolean` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `detailIcon` | `detail-icon` | The icon to use when `detail` is set to `true`. Defaults to `"ios-arrow-forward"`. | `string` |
| `detail` | `detail` | If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present. | `boolean \| undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the item. Defaults to `false`. | `boolean` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` |
| `lines` | `lines` | How the bottom border should be displayed on the item. Available options: `"full"`, `"inset"`, `"none"`. | `"full" \| "inset" \| "none" \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root" \| undefined` |
| `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` | `"button" \| "reset" \| "submit"` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------- |
| `button` | `button` | If `true`, a button tag will be rendered and the item will be tappable. | `boolean` | `false` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `detailIcon` | `detail-icon` | The icon to use when `detail` is set to `true`. | `string` | `'ios-arrow-forward'` |
| `detail` | `detail` | If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present. | `boolean \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the item. | `boolean` | `false` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `lines` | `lines` | How the bottom border should be displayed on the item. | `"full" \| "inset" \| "none" \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root" \| undefined` | `undefined` |
| `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. | `"button" \| "reset" \| "submit"` | `'button'` |
## CSS Custom Properties

1
core/src/components/label/label.tsx
View File

@@ -23,7 +23,6 @@ export class Label implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;

16
core/src/components/label/readme.md
View File

@@ -8,18 +8,18 @@ Label is a wrapper element that can be used in combination with `ion-item`, `ion
## Properties
| Property | Attribute | Description | Type |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `position` | `position` | The position determines where and how the label behaves inside an item. | `"fixed" \| "floating" \| "stacked" \| undefined` |
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `position` | `position` | The position determines where and how the label behaves inside an item. | `"fixed" \| "floating" \| "stacked" \| undefined` | `undefined` |
## Events
| Event | Detail | Description |
| ---------- | ---------- | ------------------------------- |
| `ionStyle` | StyleEvent | Emitted when the styles change. |
| Event | Description | Detail |
| ---------- | ------------------------------- | ---------- |
| `ionStyle` | Emitted when the styles change. | StyleEvent |
## CSS Custom Properties

1
core/src/components/list-header/list-header.tsx
View File

@@ -15,7 +15,6 @@ export class ListHeader implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;

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

@@ -9,10 +9,10 @@ Unlike ItemDivider, ListHeaders are styled to be stand-out from the rest of the
## Properties
| Property | Attribute | Description | Type |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
## CSS Custom Properties

4
core/src/components/list/list.tsx
View File

@@ -16,18 +16,16 @@ export class List implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
/**
* How the bottom border should be displayed on all items.
* Available options: `"full"`, `"inset"`, `"none"`.
*/
@Prop() lines?: 'full' | 'inset' | 'none';
/**
* If `true`, the list will have margin around it and rounded corners. Defaults to `false`.
* If `true`, the list will have margin around it and rounded corners.
*/
@Prop() inset = false;

10
core/src/components/list/readme.md
View File

@@ -11,11 +11,11 @@ Lists support several interactions including swiping items to reveal options, dr
## Properties
| Property | Attribute | Description | Type |
| -------- | --------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `inset` | `inset` | If `true`, the list will have margin around it and rounded corners. Defaults to `false`. | `boolean` |
| `lines` | `lines` | How the bottom border should be displayed on all items. Available options: `"full"`, `"inset"`, `"none"`. | `"full" \| "inset" \| "none" \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ------------------------------------------------------------------- | ------------------------------------------ | ----------- |
| `inset` | `inset` | If `true`, the list will have margin around it and rounded corners. | `boolean` | `false` |
| `lines` | `lines` | How the bottom border should be displayed on all items. | `"full" \| "inset" \| "none" \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
## Methods

2
core/src/components/loading/loading-interface.ts
View File

@@ -1,7 +1,7 @@
import { AnimationBuilder, Mode, SpinnerTypes } from '../../interface';
export interface LoadingOptions {
spinner?: SpinnerTypes;
spinner?: SpinnerTypes | 'hide';
message?: string;
cssClass?: string | string[];
showBackdrop?: boolean;

16
core/src/components/loading/loading.tsx
View File

@@ -1,6 +1,6 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
import { Animation, AnimationBuilder, Config, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
import { Animation, AnimationBuilder, Config, Mode, OverlayEventDetail, OverlayInterface, SpinnerTypes } from '../../interface';
import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays';
import { createThemedClasses, getClassMap } from '../../utils/theme';
@@ -32,7 +32,6 @@ export class Loading implements ComponentInterface, OverlayInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
@@ -68,28 +67,27 @@ export class Loading implements ComponentInterface, OverlayInterface {
@Prop() duration = 0;
/**
* If `true`, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`.
* If `true`, the loading indicator will be dismissed when the backdrop is clicked.
*/
@Prop() backdropDismiss = false;
/**
* If `true`, a backdrop will be displayed behind the loading indicator. Defaults to `true`.
* If `true`, a backdrop will be displayed behind the loading indicator.
*/
@Prop() showBackdrop = true;
/**
* The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`,
* `"bubbles"`, `"circles"`, `"crescent"`.
* The name of the spinner to display.
*/
@Prop({ mutable: true }) spinner?: string;
@Prop({ mutable: true }) spinner?: SpinnerTypes | 'hide';
/**
* If `true`, the loading indicator will be translucent. Defaults to `false`.
* If `true`, the loading indicator will be translucent.
*/
@Prop() translucent = false;
/**
* If `true`, the loading indicator will animate. Defaults to `true`.
* If `true`, the loading indicator will animate.
*/
@Prop() animated = true;

46
core/src/components/loading/readme.md
View File

@@ -18,33 +18,33 @@ The loading indicator can be dismissed automatically after a specific amount of
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| `animated` | `animated` | If `true`, the loading indicator will animate. Defaults to `true`. | `boolean` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`. | `boolean` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` |
| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `AnimationBuilder \| undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` |
| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `AnimationBuilder \| undefined` |
| `message` | `message` | Optional text content to display in the loading indicator. | `string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `overlayIndex` | `overlay-index` | | `number` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. Defaults to `true`. | `boolean` |
| `spinner` | `spinner` | The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. | `string \| undefined` |
| `translucent` | `translucent` | If `true`, the loading indicator will be translucent. Defaults to `false`. | `boolean` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the loading indicator will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked. | `boolean` | `false` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | `0` |
| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `AnimationBuilder \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `AnimationBuilder \| undefined` | `undefined` |
| `message` | `message` | Optional text content to display in the loading indicator. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `overlayIndex` | `overlay-index` | | `number` | `undefined` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. | `boolean` | `true` |
| `spinner` | `spinner` | The name of the spinner to display. | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "hide" \| "lines" \| "lines-small" \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the loading indicator will be translucent. | `boolean` | `false` |
## Events
| Event | Detail | Description |
| ----------------------- | ------------------ | ----------------------------------------- |
| `ionLoadingDidDismiss` | OverlayEventDetail | 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` | OverlayEventDetail | Emitted before the loading has dismissed. |
| `ionLoadingWillPresent` | | Emitted before the loading has presented. |
| Event | Description | Detail |
| ----------------------- | ----------------------------------------- | ------------------ |
| `ionLoadingDidDismiss` | Emitted after the loading has dismissed. | OverlayEventDetail |
| `ionLoadingDidLoad` | Emitted after the loading has loaded. | void |
| `ionLoadingDidPresent` | Emitted after the loading has presented. | void |
| `ionLoadingDidUnload` | Emitted after the loading has unloaded. | void |
| `ionLoadingWillDismiss` | Emitted before the loading has dismissed. | OverlayEventDetail |
| `ionLoadingWillPresent` | Emitted before the loading has presented. | void |
## Methods

1
core/src/components/menu-button/menu-button.tsx
View File

@@ -23,7 +23,6 @@ export class MenuButton implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;

12
core/src/components/menu-button/readme.md
View File

@@ -8,12 +8,12 @@ Menu Button is component that automatically creates the icon and functionality t
## Properties
| Property | Attribute | Description | Type |
| ---------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `autoHide` | `auto-hide` | Automatically hides the menu button when the corresponding menu is not active | `boolean` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `menu` | `menu` | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle | `string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| Property | Attribute | Description | Type | Default |
| ---------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `autoHide` | `auto-hide` | Automatically hides the menu button when the corresponding menu is not active | `boolean` | `true` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `menu` | `menu` | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
----------------------------------------------

8
core/src/components/menu-toggle/readme.md
View File

@@ -11,10 +11,10 @@ In case it's desired to keep `ion-menu-toggle` always visible, the `autoHide` pr
## Properties
| Property | Attribute | Description | Type |
| ---------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `autoHide` | `auto-hide` | Automatically hides the content when the corresponding menu is not active. By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu. | `boolean` |
| `menu` | `menu` | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle. If this property is not used, `ion-menu-toggle` will toggle the first menu that is active. | `string \| undefined` |
| Property | Attribute | Description | Type | Default |
| ---------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `autoHide` | `auto-hide` | Automatically hides the content when the corresponding menu is not active. By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu. | `boolean` | `true` |
| `menu` | `menu` | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle. If this property is not used, `ion-menu-toggle` will toggle the first menu that is active. | `string \| undefined` | `undefined` |
----------------------------------------------

6
core/src/components/menu/menu.tsx
View File

@@ -77,7 +77,7 @@ export class Menu implements ComponentInterface, MenuI {
}
/**
* If `true`, the menu is disabled. Defaults to `false`.
* If `true`, the menu is disabled.
*/
@Prop({ mutable: true }) disabled = false;
@@ -92,7 +92,7 @@ export class Menu implements ComponentInterface, MenuI {
}
/**
* Which side of the view the menu should be placed. Default `"start"`.
* Which side of the view the menu should be placed.
*/
@Prop({ reflectToAttr: true }) side: Side = 'start';
@@ -102,7 +102,7 @@ export class Menu implements ComponentInterface, MenuI {
}
/**
* If `true`, swiping the menu is enabled. Defaults to `true`.
* If `true`, swiping the menu is enabled.
*/
@Prop() swipeGesture = true;

30
core/src/components/menu/readme.md
View File

@@ -13,25 +13,25 @@ These can be controlled from the templates, or programmatically using the MenuCo
## Properties
| Property | Attribute | Description | Type |
| -------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------ | --------------------- |
| `contentId` | `content-id` | The content's id the menu should use. | `string \| undefined` |
| `disabled` | `disabled` | If `true`, the menu is disabled. Defaults to `false`. | `boolean` |
| `maxEdgeStart` | `max-edge-start` | The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered. | `number` |
| `menuId` | `menu-id` | An id for the menu. | `string \| undefined` |
| `side` | `side` | Which side of the view the menu should be placed. Default `"start"`. | `"end" \| "start"` |
| `swipeGesture` | `swipe-gesture` | If `true`, swiping the menu is enabled. Defaults to `true`. | `boolean` |
| `type` | `type` | The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. | `string` |
| Property | Attribute | Description | Type | Default |
| -------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------ | --------------------- | ----------- |
| `contentId` | `content-id` | The content's id the menu should use. | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the menu is disabled. | `boolean` | `false` |
| `maxEdgeStart` | `max-edge-start` | The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered. | `number` | `50` |
| `menuId` | `menu-id` | An id for the menu. | `string \| undefined` | `undefined` |
| `side` | `side` | Which side of the view the menu should be placed. | `"end" \| "start"` | `'start'` |
| `swipeGesture` | `swipe-gesture` | If `true`, swiping the menu is enabled. | `boolean` | `true` |
| `type` | `type` | The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. | `string` | `undefined` |
## Events
| Event | Detail | Description |
| -------------- | ------ | -------------------------------------------- |
| `ionDidClose` | | Emitted when the menu is closed. |
| `ionDidOpen` | | Emitted when the menu is open. |
| `ionWillClose` | | Emitted when the menu is about to be closed. |
| `ionWillOpen` | | Emitted when the menu is about to be opened. |
| Event | Description | Detail |
| -------------- | -------------------------------------------- | ------ |
| `ionDidClose` | Emitted when the menu is closed. | void |
| `ionDidOpen` | Emitted when the menu is open. | void |
| `ionWillClose` | Emitted when the menu is about to be closed. | void |
| `ionWillOpen` | Emitted when the menu is about to be opened. | void |
## Methods

7
core/src/components/modal/modal.tsx
View File

@@ -37,7 +37,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
@@ -73,17 +72,17 @@ export class Modal implements ComponentInterface, OverlayInterface {
@Prop() cssClass?: string | string[];
/**
* If `true`, the modal will be dismissed when the backdrop is clicked. Defaults to `true`.
* If `true`, the modal will be dismissed when the backdrop is clicked.
*/
@Prop() backdropDismiss = true;
/**
* If `true`, a backdrop will be displayed behind the modal. Defaults to `true`.
* If `true`, a backdrop will be displayed behind the modal.
*/
@Prop() showBackdrop = true;
/**
* If `true`, the modal will animate. Defaults to `true`.
* If `true`, the modal will animate.
*/
@Prop() animated = true;

44
core/src/components/modal/readme.md
View File

@@ -14,32 +14,32 @@ Modals can be created using a [Modal Controller](../../modal-controller/ModalCon
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| `animated` | `animated` | If `true`, the modal will animate. Defaults to `true`. | `boolean` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the modal will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `componentProps` | -- | The data to pass to the modal component. | `undefined \| { [key: string]: any; }` |
| `component` | `component` | The component to display inside of the modal. | `Function \| HTMLElement \| null \| string` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` |
| `delegate` | -- | | `FrameworkDelegate \| undefined` |
| `enterAnimation` | -- | Animation to use when the modal is presented. | `AnimationBuilder \| undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` |
| `leaveAnimation` | -- | Animation to use when the modal is dismissed. | `AnimationBuilder \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `overlayIndex` | `overlay-index` | | `number` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the modal. Defaults to `true`. | `boolean` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the modal will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the modal will be dismissed when the backdrop is clicked. | `boolean` | `true` |
| `componentProps` | -- | The data to pass to the modal component. | `undefined \| { [key: string]: any; }` | `undefined` |
| `component` | `component` | The component to display inside of the modal. | `Function \| HTMLElement \| null \| string` | `undefined` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `delegate` | -- | | `FrameworkDelegate \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the modal is presented. | `AnimationBuilder \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the modal is dismissed. | `AnimationBuilder \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `overlayIndex` | `overlay-index` | | `number` | `undefined` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the modal. | `boolean` | `true` |
## Events
| Event | Detail | Description |
| --------------------- | ------------------ | --------------------------------------- |
| `ionModalDidDismiss` | OverlayEventDetail | 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` | OverlayEventDetail | Emitted before the modal has dismissed. |
| `ionModalWillPresent` | | Emitted before the modal has presented. |
| Event | Description | Detail |
| --------------------- | --------------------------------------- | ------------------ |
| `ionModalDidDismiss` | Emitted after the modal has dismissed. | OverlayEventDetail |
| `ionModalDidLoad` | Emitted after the modal has loaded. | void |
| `ionModalDidPresent` | Emitted after the modal has presented. | void |
| `ionModalDidUnload` | Emitted after the modal has unloaded. | void |
| `ionModalWillDismiss` | Emitted before the modal has dismissed. | OverlayEventDetail |
| `ionModalWillPresent` | Emitted before the modal has presented. | void |
## Methods

8
core/src/components/nav-push/readme.md
View File

@@ -9,10 +9,10 @@ It is the element form of `NavController.push()`
## Properties
| Property | Attribute | Description | Type |
| ---------------- | ----------- | ----------------------------------------------- | -------------------------------------------------------------------------- |
| `componentProps` | -- | Data you want to pass to the component as props | `undefined \| { [key: string]: any; }` |
| `component` | `component` | Component to navigate to | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` |
| Property | Attribute | Description | Type | Default |
| ---------------- | ----------- | ----------------------------------------------- | -------------------------------------------------------------------------- | ----------- |
| `componentProps` | -- | Data you want to pass to the component as props | `undefined \| { [key: string]: any; }` | `undefined` |
| `component` | `component` | Component to navigate to | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | `undefined` |
----------------------------------------------

8
core/src/components/nav-set-root/readme.md
View File

@@ -9,10 +9,10 @@ It is the element form a calling `NavController.setRoot()`
## Properties
| Property | Attribute | Description | Type |
| ---------------- | ----------- | -------------------------------------------------------- | -------------------------------------------------------------------------- |
| `componentProps` | -- | Data you want to pass to the component as props | `undefined \| { [key: string]: any; }` |
| `component` | `component` | Component you want to make root for the navigation stack | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` |
| Property | Attribute | Description | Type | Default |
| ---------------- | ----------- | -------------------------------------------------------- | -------------------------------------------------------------------------- | ----------- |
| `componentProps` | -- | Data you want to pass to the component as props | `undefined \| { [key: string]: any; }` | `undefined` |
| `component` | `component` | Component you want to make root for the navigation stack | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | `undefined` |
----------------------------------------------

2
core/src/components/nav/nav.tsx
View File

@@ -46,7 +46,7 @@ export class Nav implements NavOutlet {
}
/**
* If `true`, the nav should animate the transition of components. Default to `true`.
* If `true`, the nav should animate the transition of components.
*/
@Prop() animated = true;

26
core/src/components/nav/readme.md
View File

@@ -9,23 +9,23 @@ Unlike RouterOutlet, Nav is not tied to a particular router. Meaning that if we
## Properties
| Property | Attribute | Description | Type |
| -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| `animated` | `animated` | If `true`, the nav should animate the transition of components. Default to `true`. | `boolean` |
| `animation` | -- | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `AnimationBuilder \| undefined` |
| `delegate` | -- | | `FrameworkDelegate \| undefined` |
| `rootParams` | -- | Any parameters for the root component | `undefined \| { [key: string]: any; }` |
| `root` | `root` | Root NavComponent to load | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` |
| `swipeGesture` | `swipe-gesture` | If the nav component should allow for swipe-to-go-back. | `boolean \| undefined` |
| Property | Attribute | Description | Type | Default |
| -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the nav should animate the transition of components. | `boolean` | `true` |
| `animation` | -- | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `AnimationBuilder \| undefined` | `undefined` |
| `delegate` | -- | | `FrameworkDelegate \| undefined` | `undefined` |
| `rootParams` | -- | Any parameters for the root component | `undefined \| { [key: string]: any; }` | `undefined` |
| `root` | `root` | Root NavComponent to load | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | `undefined` |
| `swipeGesture` | `swipe-gesture` | If the nav component should allow for swipe-to-go-back. | `boolean \| undefined` | `undefined` |
## Events
| Event | Detail | Description |
| ------------------ | ------ | ----------------------------------------------- |
| `ionNavDidChange` | | Event fired when the nav has changed components |
| `ionNavWillChange` | | Event fired when the nav will components |
| `ionNavWillLoad` | | Event fired when Nav will load a component |
| Event | Description | Detail |
| ------------------ | ----------------------------------------------- | ------ |
| `ionNavDidChange` | Event fired when the nav has changed components | void |
| `ionNavWillChange` | Event fired when the nav will components | void |
| `ionNavWillLoad` | Event fired when Nav will load a component | void |
## Methods

1
core/src/components/note/note.tsx
View File

@@ -21,7 +21,6 @@ export class Note implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;

8
core/src/components/note/readme.md
View File

@@ -8,10 +8,10 @@ Notes are text elements generally used as subtitles that provide more informatio
## Properties
| Property | Attribute | Description | Type |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
## CSS Custom Properties

6
core/src/components/picker-column/readme.md
View File

@@ -7,9 +7,9 @@
## Properties
| Property | Attribute | Description | Type |
| -------- | --------- | ----------- | -------------- |
| `col` | -- | | `PickerColumn` |
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ----------- | -------------- | ----------- |
| `col` | -- | | `PickerColumn` | `undefined` |
----------------------------------------------

7
core/src/components/picker/picker.tsx
View File

@@ -30,7 +30,6 @@ export class Picker implements ComponentInterface, OverlayInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
@@ -71,17 +70,17 @@ export class Picker implements ComponentInterface, OverlayInterface {
@Prop() duration = 0;
/**
* If `true`, a backdrop will be displayed behind the picker. Defaults to `true`.
* If `true`, a backdrop will be displayed behind the picker.
*/
@Prop() showBackdrop = true;
/**
* If `true`, the picker will be dismissed when the backdrop is clicked. Defaults to `true`.
* If `true`, the picker will be dismissed when the backdrop is clicked.
*/
@Prop() backdropDismiss = true;
/**
* If `true`, the picker will animate. Defaults to `true`.
* If `true`, the picker will animate.
*/
@Prop() animated = true;

44
core/src/components/picker/readme.md
View File

@@ -9,32 +9,32 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| `animated` | `animated` | If `true`, the picker will animate. Defaults to `true`. | `boolean` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the picker will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `buttons` | -- | Array of buttons to be displayed at the top of the picker. | `PickerButton[]` |
| `columns` | -- | Array of columns to be displayed in the picker. | `PickerColumn[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the picker. | `number` |
| `enterAnimation` | -- | Animation to use when the picker is presented. | `AnimationBuilder \| undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` |
| `leaveAnimation` | -- | Animation to use when the picker is dismissed. | `AnimationBuilder \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `overlayIndex` | `overlay-index` | | `number` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the picker. Defaults to `true`. | `boolean` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the picker will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the picker will be dismissed when the backdrop is clicked. | `boolean` | `true` |
| `buttons` | -- | Array of buttons to be displayed at the top of the picker. | `PickerButton[]` | `[]` |
| `columns` | -- | Array of columns to be displayed in the picker. | `PickerColumn[]` | `[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the picker. | `number` | `0` |
| `enterAnimation` | -- | Animation to use when the picker is presented. | `AnimationBuilder \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the picker is dismissed. | `AnimationBuilder \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `overlayIndex` | `overlay-index` | | `number` | `undefined` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the picker. | `boolean` | `true` |
## Events
| Event | Detail | Description |
| ---------------------- | ------------------ | ---------------------------------------- |
| `ionPickerDidDismiss` | OverlayEventDetail | 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` | OverlayEventDetail | Emitted before the picker has dismissed. |
| `ionPickerWillPresent` | | Emitted before the picker has presented. |
| Event | Description | Detail |
| ---------------------- | ---------------------------------------- | ------------------ |
| `ionPickerDidDismiss` | Emitted after the picker has dismissed. | OverlayEventDetail |
| `ionPickerDidLoad` | Emitted after the picker has loaded. | void |
| `ionPickerDidPresent` | Emitted after the picker has presented. | void |
| `ionPickerDidUnload` | Emitted after the picker has unloaded. | void |
| `ionPickerWillDismiss` | Emitted before the picker has dismissed. | OverlayEventDetail |
| `ionPickerWillPresent` | Emitted before the picker has presented. | void |
## Methods

9
core/src/components/popover/popover.tsx
View File

@@ -39,7 +39,6 @@ export class Popover implements ComponentInterface, OverlayInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
@@ -75,7 +74,7 @@ export class Popover implements ComponentInterface, OverlayInterface {
@Prop() cssClass?: string | string[];
/**
* If `true`, the popover will be dismissed when the backdrop is clicked. Defaults to `true`.
* If `true`, the popover will be dismissed when the backdrop is clicked.
*/
@Prop() backdropDismiss = true;
@@ -85,17 +84,17 @@ export class Popover implements ComponentInterface, OverlayInterface {
@Prop() event: any;
/**
* If `true`, a backdrop will be displayed behind the popover. Defaults to `true`.
* If `true`, a backdrop will be displayed behind the popover.
*/
@Prop() showBackdrop = true;
/**
* If `true`, the popover will be translucent. Defaults to `false`.
* If `true`, the popover will be translucent.
*/
@Prop() translucent = false;
/**
* If `true`, the popover will animate. Defaults to `true`.
* If `true`, the popover will animate.
*/
@Prop() animated = true;

48
core/src/components/popover/readme.md
View File

@@ -16,34 +16,34 @@ To present a popover, call the `present` method on a popover instance. In order
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| `animated` | `animated` | If `true`, the popover will animate. Defaults to `true`. | `boolean` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `componentProps` | -- | The data to pass to the popover component. | `undefined \| { [key: string]: any; }` |
| `component` | `component` | The component to display inside of the popover. | `Function \| HTMLElement \| null \| string` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` |
| `delegate` | -- | | `FrameworkDelegate \| undefined` |
| `enterAnimation` | -- | Animation to use when the popover is presented. | `AnimationBuilder \| undefined` |
| `event` | -- | The event to pass to the popover animation. | `any` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` |
| `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `AnimationBuilder \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `overlayIndex` | `overlay-index` | | `number` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the popover. Defaults to `true`. | `boolean` |
| `translucent` | `translucent` | If `true`, the popover will be translucent. Defaults to `false`. | `boolean` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the popover will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the popover will be dismissed when the backdrop is clicked. | `boolean` | `true` |
| `componentProps` | -- | The data to pass to the popover component. | `undefined \| { [key: string]: any; }` | `undefined` |
| `component` | `component` | The component to display inside of the popover. | `Function \| HTMLElement \| null \| string` | `undefined` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `delegate` | -- | | `FrameworkDelegate \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the popover is presented. | `AnimationBuilder \| undefined` | `undefined` |
| `event` | -- | The event to pass to the popover animation. | `any` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `AnimationBuilder \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `overlayIndex` | `overlay-index` | | `number` | `undefined` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the popover. | `boolean` | `true` |
| `translucent` | `translucent` | If `true`, the popover will be translucent. | `boolean` | `false` |
## Events
| Event | Detail | Description |
| ----------------------- | ------------------ | ----------------------------------------- |
| `ionPopoverDidDismiss` | OverlayEventDetail | 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` | OverlayEventDetail | Emitted before the popover has dismissed. |
| `ionPopoverWillPresent` | | Emitted before the popover has presented. |
| Event | Description | Detail |
| ----------------------- | ----------------------------------------- | ------------------ |
| `ionPopoverDidDismiss` | Emitted after the popover has dismissed. | OverlayEventDetail |
| `ionPopoverDidLoad` | Emitted after the popover has loaded. | void |
| `ionPopoverDidPresent` | Emitted after the popover has presented. | void |
| `ionPopoverDidUnload` | Emitted after the popover has unloaded. | void |
| `ionPopoverWillDismiss` | Emitted before the popover has dismissed. | OverlayEventDetail |
| `ionPopoverWillPresent` | Emitted before the popover has presented. | void |
## Methods

2
core/src/components/radio-group/radio-group.tsx
View File

@@ -14,7 +14,7 @@ export class RadioGroup implements ComponentInterface {
@Element() el!: HTMLElement;
/**
* If `true`, the radios can be deselected. Defaults to `false`.
* If `true`, the radios can be deselected.
*/
@Prop() allowEmptySelection = false;

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

@@ -13,18 +13,18 @@ radio button within the same group.
## Properties
| Property | Attribute | Description | Type |
| --------------------- | ----------------------- | --------------------------------------------------------------- | --------- |
| `allowEmptySelection` | `allow-empty-selection` | If `true`, the radios can be deselected. Defaults to `false`. | `boolean` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` |
| `value` | -- | the value of the radio group. | `any` |
| Property | Attribute | Description | Type | Default |
| --------------------- | ----------------------- | --------------------------------------------------------------- | --------- | -------------- |
| `allowEmptySelection` | `allow-empty-selection` | If `true`, the radios can be deselected. | `boolean` | `false` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` |
| `value` | -- | the value of the radio group. | `any` | `undefined` |
## Events
| Event | Detail | Description |
| ----------- | ---------------- | ----------------------------------- |
| `ionChange` | InputChangeEvent | Emitted when the value has changed. |
| Event | Description | Detail |
| ----------- | ----------------------------------- | ---------------- |
| `ionChange` | Emitted when the value has changed. | InputChangeEvent |
----------------------------------------------

5
core/src/components/radio/radio.tsx
View File

@@ -29,7 +29,6 @@ export class Radio implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
@@ -39,12 +38,12 @@ export class Radio implements ComponentInterface {
@Prop() name: string = this.inputId;
/**
* If `true`, the user cannot interact with the radio. Defaults to `false`.
* If `true`, the user cannot interact with the radio.
*/
@Prop() disabled = false;
/**
* If `true`, the radio is selected. Defaults to `false`.
* If `true`, the radio is selected.
*/
@Prop({ mutable: true }) checked = false;

32
core/src/components/radio/readme.md
View File

@@ -12,26 +12,26 @@ An `ion-radio-group` can be used to group a set of radios. When radios are insid
## Properties
| Property | Attribute | Description | Type |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `checked` | `checked` | If `true`, the radio is selected. Defaults to `false`. | `boolean` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the radio. Defaults to `false`. | `boolean` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` |
| `value` | -- | the value of the radio. | `any` |
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -------------- |
| `checked` | `checked` | If `true`, the radio is selected. | `boolean` | `false` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the radio. | `boolean` | `false` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` |
| `value` | -- | the value of the radio. | `any` | `undefined` |
## Events
| Event | Detail | Description |
| ------------------- | ----------------------- | ------------------------------------------ |
| `ionBlur` | | Emitted when the radio button loses focus. |
| `ionFocus` | | Emitted when the radio button has focus. |
| `ionRadioDidLoad` | | Emitted when the radio loads. |
| `ionRadioDidUnload` | | Emitted when the radio unloads. |
| `ionSelect` | CheckedInputChangeEvent | Emitted when the radio button is selected. |
| `ionStyle` | StyleEvent | Emitted when the styles change. |
| Event | Description | Detail |
| ------------------- | ------------------------------------------ | ----------------------- |
| `ionBlur` | Emitted when the radio button loses focus. | void |
| `ionFocus` | Emitted when the radio button has focus. | void |
| `ionRadioDidLoad` | Emitted when the radio loads. | void |
| `ionRadioDidUnload` | Emitted when the radio unloads. | void |
| `ionSelect` | Emitted when the radio button is selected. | CheckedInputChangeEvent |
| `ionStyle` | Emitted when the styles change. | StyleEvent |
## CSS Custom Properties

17
core/src/components/range/range.tsx
View File

@@ -39,13 +39,12 @@ export class Range implements ComponentInterface {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
/**
* How long, in milliseconds, to wait to trigger the
* `ionChange` event after each change in the range value. Default `0`.
* `ionChange` event after each change in the range value.
*/
@Prop() debounce = 0;
@@ -60,12 +59,12 @@ export class Range implements ComponentInterface {
@Prop() name = '';
/**
* Show two knobs. Defaults to `false`.
* Show two knobs.
*/
@Prop() dualKnobs = false;
/**
* Minimum integer value of the range. Defaults to `0`.
* Minimum integer value of the range.
*/
@Prop() min = 0;
@Watch('min')
@@ -76,7 +75,7 @@ export class Range implements ComponentInterface {
}
/**
* Maximum integer value of the range. Defaults to `100`.
* Maximum integer value of the range.
*/
@Prop() max = 100;
@Watch('max')
@@ -88,23 +87,23 @@ export class Range implements ComponentInterface {
/**
* If `true`, a pin with integer value is shown when the knob
* is pressed. Defaults to `false`.
* is pressed.
*/
@Prop() pin = false;
/**
* If `true`, the knob snaps to tick marks evenly spaced based
* on the step property value. Defaults to `false`.
* on the step property value.
*/
@Prop() snaps = false;
/**
* Specifies the value granularity. Defaults to `1`.
* Specifies the value granularity.
*/
@Prop() step = 1;
/**
* If `true`, the user cannot interact with the range. Defaults to `false`.
* If `true`, the user cannot interact with the range.
*/
@Prop() disabled = false;
@Watch('disabled')

40
core/src/components/range/readme.md
View File

@@ -17,30 +17,30 @@ left or right of the range.
## Properties
| Property | Attribute | Description | Type |
| ----------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `debounce` | `debounce` | How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. Default `0`. | `number` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the range. Defaults to `false`. | `boolean` |
| `dualKnobs` | `dual-knobs` | Show two knobs. Defaults to `false`. | `boolean` |
| `max` | `max` | Maximum integer value of the range. Defaults to `100`. | `number` |
| `min` | `min` | Minimum integer value of the range. Defaults to `0`. | `number` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` |
| `pin` | `pin` | If `true`, a pin with integer value is shown when the knob is pressed. Defaults to `false`. | `boolean` |
| `snaps` | `snaps` | If `true`, the knob snaps to tick marks evenly spaced based on the step property value. Defaults to `false`. | `boolean` |
| `step` | `step` | Specifies the value granularity. Defaults to `1`. | `number` |
| `value` | `value` | the value of the range. | `number \| { lower: number; upper: number; }` |
| Property | Attribute | Description | Type | Default |
| ----------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `debounce` | `debounce` | How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. | `number` | `0` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the range. | `boolean` | `false` |
| `dualKnobs` | `dual-knobs` | Show two knobs. | `boolean` | `false` |
| `max` | `max` | Maximum integer value of the range. | `number` | `100` |
| `min` | `min` | Minimum integer value of the range. | `number` | `0` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `''` |
| `pin` | `pin` | If `true`, a pin with integer value is shown when the knob is pressed. | `boolean` | `false` |
| `snaps` | `snaps` | If `true`, the knob snaps to tick marks evenly spaced based on the step property value. | `boolean` | `false` |
| `step` | `step` | Specifies the value granularity. | `number` | `1` |
| `value` | `value` | the value of the range. | `number \| { lower: number; upper: number; }` | `0` |
## Events
| Event | Detail | Description |
| ----------- | ---------------- | -------------------------------------------- |
| `ionBlur` | | Emitted when the range loses focus. |
| `ionChange` | InputChangeEvent | Emitted when the value property has changed. |
| `ionFocus` | | Emitted when the range has focus. |
| `ionStyle` | StyleEvent | Emitted when the styles change. |
| Event | Description | Detail |
| ----------- | -------------------------------------------- | ---------------- |
| `ionBlur` | Emitted when the range loses focus. | void |
| `ionChange` | Emitted when the value property has changed. | InputChangeEvent |
| `ionFocus` | Emitted when the range has focus. | void |
| `ionStyle` | Emitted when the styles change. | StyleEvent |
## CSS Custom Properties

12
core/src/components/refresher-content/readme.md
View File

@@ -9,12 +9,12 @@ The refresher content contains the text, icon and spinner to display during a pu
## Properties
| Property | Attribute | Description | Type |
| ------------------- | -------------------- | --------------------------------------------------------- | --------------------- |
| `pullingIcon` | `pulling-icon` | A static icon to display when you begin to pull down | `string \| undefined` |
| `pullingText` | `pulling-text` | The text you want to display when you begin to pull down | `string \| undefined` |
| `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `string \| undefined` |
| `refreshingText` | `refreshing-text` | The text you want to display when performing a refresh | `string \| undefined` |
| Property | Attribute | Description | Type | Default |
| ------------------- | -------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------- |
| `pullingIcon` | `pulling-icon` | A static icon to display when you begin to pull down | `string \| undefined` | `undefined` |
| `pullingText` | `pulling-text` | The text you want to display when you begin to pull down | `string \| undefined` | `undefined` |
| `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| undefined` | `undefined` |
| `refreshingText` | `refreshing-text` | The text you want to display when performing a refresh | `string \| undefined` | `undefined` |
----------------------------------------------

4
core/src/components/refresher-content/refresher-content.tsx
View File

@@ -1,6 +1,6 @@
import { Component, ComponentInterface, Prop } from '@stencil/core';
import { Config } from '../../interface';
import { Config, SpinnerTypes } from '../../interface';
@Component({
tag: 'ion-refresher-content'
@@ -22,7 +22,7 @@ export class RefresherContent implements ComponentInterface {
/**
* An animated SVG spinner that shows when refreshing begins
*/
@Prop({ mutable: true }) refreshingSpinner?: string;
@Prop({ mutable: true }) refreshingSpinner?: SpinnerTypes;
/**
* The text you want to display when performing a refresh

24
core/src/components/refresher/readme.md
View File

@@ -15,22 +15,22 @@ refresher.
## Properties
| Property | Attribute | Description | Type |
| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `closeDuration` | `close-duration` | Time it takes to close the refresher. Defaults to `280ms`. | `string` |
| `disabled` | `disabled` | If `true`, the refresher will be hidden. Defaults to `false`. | `boolean` |
| `pullMax` | `pull-max` | The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. | `number` |
| `pullMin` | `pull-min` | The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Defaults to `60`. | `number` |
| `snapbackDuration` | `snapback-duration` | Time it takes the refresher to to snap back to the `refreshing` state. Defaults to `280ms`. | `string` |
| Property | Attribute | Description | Type | Default |
| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------- |
| `closeDuration` | `close-duration` | Time it takes to close the refresher. | `string` | `'280ms'` |
| `disabled` | `disabled` | If `true`, the refresher will be hidden. | `boolean` | `false` |
| `pullMax` | `pull-max` | The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. | `number` | `this.pullMin + 60` |
| `pullMin` | `pull-min` | The minimum distance the user must pull down until the refresher will go into the `refreshing` state. | `number` | `60` |
| `snapbackDuration` | `snapback-duration` | Time it takes the refresher to to snap back to the `refreshing` state. | `string` | `'280ms'` |
## Events
| Event | Detail | Description |
| ------------ | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ionPull` | | Emitted while the user is pulling down the content and exposing the refresher. |
| `ionRefresh` | RefresherEventDetail | Emitted when the user lets go of the content and has pulled down further than the `pullMin` or pulls the content down and exceeds the pullMax. Updates the refresher state to `refreshing`. The `complete()` method should be called when the async operation has completed. |
| `ionStart` | | Emitted when the user begins to start pulling down. |
| Event | Description | Detail |
| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| `ionPull` | Emitted while the user is pulling down the content and exposing the refresher. | void |
| `ionRefresh` | Emitted when the user lets go of the content and has pulled down further than the `pullMin` or pulls the content down and exceeds the pullMax. Updates the refresher state to `refreshing`. The `complete()` method should be called when the async operation has completed. | RefresherEventDetail |
| `ionStart` | Emitted when the user begins to start pulling down. | void |
## Methods

Some files were not shown because too many files have changed in this diff Show More