diff --git a/core/package.json b/core/package.json index 7c7c8564b7..f18a6e8300 100644 --- a/core/package.json +++ b/core/package.json @@ -27,7 +27,7 @@ "ionicons": "4.3.0" }, "devDependencies": { - "@stencil/core": "0.11.3", + "@stencil/core": "0.11.4", "@stencil/dev-server": "latest", "@stencil/sass": "0.1.0", "@stencil/utils": "latest", diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 739a283c25..91e1b54056 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2107,7 +2107,7 @@ declare global { * The text to display on the ok button. Default: `OK`. */ 'okText': string; - 'open': (ev?: UIEvent | undefined) => Promise | Promise | Promise; + 'open': (ev?: UIEvent | undefined) => Promise | Promise | Promise; /** * The text to display when the select is empty. */ diff --git a/core/src/components/action-sheet-controller/readme.md b/core/src/components/action-sheet-controller/readme.md index 436f8d9f27..62b908efad 100644 --- a/core/src/components/action-sheet-controller/readme.md +++ b/core/src/components/action-sheet-controller/readme.md @@ -7,20 +7,11 @@ Action Sheet controllers programmatically control the action sheet component. Ac ## Methods -#### create() - -Create an action sheet overlay with action sheet options. - - -#### dismiss() - -Dismiss the open action sheet overlay. - - -#### getTop() - -Get the most recently opened action sheet overlay. - +| Method | Description | +| --------- | --------------------------------------------------------- | +| `create` | Create an action sheet overlay with action sheet options. | +| `dismiss` | Dismiss the open action sheet overlay. | +| `getTop` | Get the most recently opened action sheet overlay. | ---------------------------------------------- diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md index 9e28f0e550..1ef3f8a363 100644 --- a/core/src/components/action-sheet/readme.md +++ b/core/src/components/action-sheet/readme.md @@ -16,219 +16,41 @@ A button's `role` property can either be `destructive` or `cancel`. Buttons with ## Properties -#### buttons - -ActionSheetButton[] - -An array of buttons for the action sheet. - - -#### cssClass - -string - -Additional classes to apply for custom CSS. If multiple classes are -provided they should be separated by spaces. - - -#### enableBackdropDismiss - -boolean - -If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`. - - -#### enterAnimation - -AnimationBuilder - -Animation to use when the action sheet is presented. - - -#### header - -string - -Title for the action sheet. - - -#### keyboardClose - -boolean - -If the actionSheet should close the keyboard - - -#### leaveAnimation - -AnimationBuilder - -Animation to use when the action sheet is dismissed. - - -#### overlayId - -number - -Unique ID to be used with the overlay. Internal only - - -#### subHeader - -string - -Subtitle for the action sheet. - - -#### translucent - -boolean - -If true, the action sheet will be translucent. Defaults to `false`. - - -#### willAnimate - -boolean - -If true, the action sheet will animate. Defaults to `true`. - - -## Attributes - -#### buttons - - - -An array of buttons for the action sheet. - - -#### css-class - -string - -Additional classes to apply for custom CSS. If multiple classes are -provided they should be separated by spaces. - - -#### enable-backdrop-dismiss - -boolean - -If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`. - - -#### enter-animation - - - -Animation to use when the action sheet is presented. - - -#### header - -string - -Title for the action sheet. - - -#### keyboard-close - -boolean - -If the actionSheet should close the keyboard - - -#### leave-animation - - - -Animation to use when the action sheet is dismissed. - - -#### overlay-id - -number - -Unique ID to be used with the overlay. Internal only - - -#### sub-header - -string - -Subtitle for the action sheet. - - -#### translucent - -boolean - -If true, the action sheet will be translucent. Defaults to `false`. - - -#### will-animate - -boolean - -If true, the action sheet will animate. Defaults to `true`. +| Property | Attribute | Description | Type | +| ----------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------- | --------------------- | +| `buttons` | -- | An array of buttons for the action sheet. | `ActionSheetButton[]` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` | +| `enableBackdropDismiss` | `enable-backdrop-dismiss` | If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` | +| `enterAnimation` | -- | Animation to use when the action sheet is presented. | `AnimationBuilder` | +| `header` | `header` | Title for the action sheet. | `string` | +| `keyboardClose` | `keyboard-close` | If the actionSheet should close the keyboard | `boolean` | +| `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `AnimationBuilder` | +| `overlayId` | `overlay-id` | Unique ID to be used with the overlay. Internal only | `number` | +| `subHeader` | `sub-header` | Subtitle for the action sheet. | `string` | +| `translucent` | `translucent` | If true, the action sheet will be translucent. Defaults to `false`. | `boolean` | +| `willAnimate` | `will-animate` | If true, the action sheet will animate. Defaults to `true`. | `boolean` | ## Events -#### ionActionSheetDidDismiss - -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 - -Emitted before the alert has dismissed. - - -#### ionActionSheetWillPresent - -Emitted before the alert has presented. +| Event | Description | +| --------------------------- | --------------------------------------- | +| `ionActionSheetDidDismiss` | 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` | Emitted before the alert has dismissed. | +| `ionActionSheetWillPresent` | Emitted before the alert has presented. | ## Methods -#### dismiss() - -Dismiss the action sheet overlay after it has been presented. - - -#### onDidDismiss() - -Returns a promise that resolves when the action-sheet did dismiss. It also accepts a callback -that is called in the same circustances. - - -#### onWillDismiss() - -Returns a promise that resolves when the action-sheet will dismiss. It also accepts a callback -that is called in the same circustances. - - -#### present() - -Present the action sheet overlay after it has been created. - +| Method | Description | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| `dismiss` | Dismiss the action sheet overlay after it has been presented. | +| `onDidDismiss` | Returns a promise that resolves when the action-sheet did dismiss. It also accepts a callback that is called in the same circustances. | +| `onWillDismiss` | Returns a promise that resolves when the action-sheet will dismiss. It also accepts a callback that is called in the same circustances. | +| `present` | Present the action sheet overlay after it has been created. | ---------------------------------------------- diff --git a/core/src/components/alert-controller/readme.md b/core/src/components/alert-controller/readme.md index c6135efa6a..bb4d14736b 100644 --- a/core/src/components/alert-controller/readme.md +++ b/core/src/components/alert-controller/readme.md @@ -24,20 +24,11 @@ async function presentAlert() { ## Methods -#### create() - -Create an alert overlay with alert options - - -#### dismiss() - -Dismiss the open alert overlay. - - -#### getTop() - -Get the most recently opened alert overlay. - +| Method | Description | +| --------- | ------------------------------------------- | +| `create` | Create an alert overlay with alert options | +| `dismiss` | Dismiss the open alert overlay. | +| `getTop` | Get the most recently opened alert overlay. | ---------------------------------------------- diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index 6d51a4f7f3..8647fd006c 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -25,249 +25,44 @@ Alerts can also include several different inputs whose data can be passed back t ## Properties -#### buttons - -(AlertButton | string)[] - -Array of buttons to be added to the alert. - - -#### cssClass - -string - -Additional classes to apply for custom CSS. If multiple classes are -provided they should be separated by spaces. - - -#### enableBackdropDismiss - -boolean - -If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`. - - -#### enterAnimation - -AnimationBuilder - -Animation to use when the alert is presented. - - -#### header - -string - -The main title in the heading of the alert. - - -#### inputs - -AlertInput[] - -Array of input to show in the alert. - - -#### keyboardClose - -boolean - - -#### leaveAnimation - -AnimationBuilder - -Animation to use when the alert is dismissed. - - -#### message - -string - -The main message to be displayed in the alert. - - -#### mode - -string - - -#### overlayId - -number - - -#### subHeader - -string - -The subtitle in the heading of the alert. Displayed under the title. - - -#### translucent - -boolean - -If true, the alert will be translucent. Defaults to `false`. - - -#### willAnimate - -boolean - -If true, the alert will animate. Defaults to `true`. - - -## Attributes - -#### buttons - - - -Array of buttons to be added to the alert. - - -#### css-class - -string - -Additional classes to apply for custom CSS. If multiple classes are -provided they should be separated by spaces. - - -#### enable-backdrop-dismiss - -boolean - -If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`. - - -#### enter-animation - - - -Animation to use when the alert is presented. - - -#### header - -string - -The main title in the heading of the alert. - - -#### inputs - - - -Array of input to show in the alert. - - -#### keyboard-close - -boolean - - -#### leave-animation - - - -Animation to use when the alert is dismissed. - - -#### message - -string - -The main message to be displayed in the alert. - - -#### mode - -string - - -#### overlay-id - -number - - -#### sub-header - -string - -The subtitle in the heading of the alert. Displayed under the title. - - -#### translucent - -boolean - -If true, the alert will be translucent. Defaults to `false`. - - -#### will-animate - -boolean - -If true, the alert will animate. Defaults to `true`. +| Property | Attribute | Description | Type | +| ----------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------- | -------------------------- | +| `buttons` | -- | Array of buttons to be added to the alert. | `(AlertButton | string)[]` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` | +| `enableBackdropDismiss` | `enable-backdrop-dismiss` | If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` | +| `enterAnimation` | -- | Animation to use when the alert is presented. | `AnimationBuilder` | +| `header` | `header` | The main title in the heading of the alert. | `string` | +| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | +| `keyboardClose` | `keyboard-close` | | `boolean` | +| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `AnimationBuilder` | +| `message` | `message` | The main message to be displayed in the alert. | `string` | +| `mode` | `mode` | | `Mode` | +| `overlayId` | `overlay-id` | | `number` | +| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string` | +| `translucent` | `translucent` | If true, the alert will be translucent. Defaults to `false`. | `boolean` | +| `willAnimate` | `will-animate` | If true, the alert will animate. Defaults to `true`. | `boolean` | ## Events -#### ionAlertDidDismiss - -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 - -Emitted before the alert has dismissed. - - -#### ionAlertWillPresent - -Emitted before the alert has presented. +| Event | Description | +| --------------------- | --------------------------------------- | +| `ionAlertDidDismiss` | 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` | Emitted before the alert has dismissed. | +| `ionAlertWillPresent` | Emitted before the alert has presented. | ## Methods -#### dismiss() - -Dismiss the alert overlay after it has been presented. - - -#### onDidDismiss() - -Returns a promise that resolves when the alert did dismiss. It also accepts a callback -that is called in the same circumstances. - - -#### onWillDismiss() - -Returns a promise that resolves when the alert will dismiss. It also accepts a callback -that is called in the same circumstances. - - -#### present() - -Present the alert overlay after it has been created. - +| Method | Description | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------- | +| `dismiss` | Dismiss the alert overlay after it has been presented. | +| `onDidDismiss` | Returns a promise that resolves when the alert did dismiss. It also accepts a callback that is called in the same circumstances. | +| `onWillDismiss` | Returns a promise that resolves when the alert will dismiss. It also accepts a callback that is called in the same circumstances. | +| `present` | Present the alert overlay after it has been created. | ---------------------------------------------- diff --git a/core/src/components/anchor/readme.md b/core/src/components/anchor/readme.md index b5afbb267c..1649a3c94f 100644 --- a/core/src/components/anchor/readme.md +++ b/core/src/components/anchor/readme.md @@ -8,56 +8,11 @@ The Anchor component is used for navigating to a specified link. Similar to the ## Properties -#### color - -string - -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). - - -#### href - -string - -Contains a URL or a URL fragment that the hyperlink points to. -If this property is set, an anchor tag will be rendered. - - -#### routerDirection - -string - -When using a router, it specifies the transition direction when navigating to -another page using `href`. - - -## Attributes - -#### color - -string - -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). - - -#### href - -string - -Contains a URL or a URL fragment that the hyperlink points to. -If this property is set, an anchor tag will be rendered. - - -#### router-direction - -string - -When using a router, it specifies the transition direction when navigating to -another page using `href`. +| 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). | `Color` | +| `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` | +| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `RouterDirection` | ## CSS Custom Properties diff --git a/core/src/components/animation-controller/readme.md b/core/src/components/animation-controller/readme.md index dc55bfb4e5..aa9f6bbe29 100644 --- a/core/src/components/animation-controller/readme.md +++ b/core/src/components/animation-controller/readme.md @@ -9,10 +9,9 @@ Used to create an animation instance. ## Methods -#### create() - -Creates an animation instance - +| Method | Description | +| -------- | ----------------------------- | +| `create` | Creates an animation instance | ---------------------------------------------- diff --git a/core/src/components/app/readme.md b/core/src/components/app/readme.md index 6488e21641..23bdd72215 100644 --- a/core/src/components/app/readme.md +++ b/core/src/components/app/readme.md @@ -5,7 +5,6 @@ App is a container element for an Ionic application. There should only be one `< - ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/back-button/readme.md b/core/src/components/back-button/readme.md index e55fa3dc5d..d763a2acef 100644 --- a/core/src/components/back-button/readme.md +++ b/core/src/components/back-button/readme.md @@ -10,83 +10,13 @@ To change what is displayed in the back button, use the `text` and `icon` proper ## Properties -#### color - -string - -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). - - -#### defaultHref - -string - -The url to navigate back to by default when there is no history. - - -#### icon - -string - -The icon name to use for the back button. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### text - -string - -The text to display in the back button. - - -## Attributes - -#### color - -string - -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). - - -#### default-href - -string - -The url to navigate back to by default when there is no history. - - -#### icon - -string - -The icon name to use for the back button. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### text - -string - -The text to display in the back button. - +| 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). | `Color` | +| `defaultHref` | `default-href` | The url to navigate back to by default when there is no history. | `string` | +| `icon` | `icon` | The icon name to use for the back button. | `string` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `text` | `text` | The text to display in the back button. | `string` | ---------------------------------------------- diff --git a/core/src/components/backdrop/readme.md b/core/src/components/backdrop/readme.md index a49caa9bcb..33826ca23d 100644 --- a/core/src/components/backdrop/readme.md +++ b/core/src/components/backdrop/readme.md @@ -8,56 +8,18 @@ Backdrops are full screen components that overlay other components. They are use ## Properties -#### stopPropagation - -boolean - -If true, the backdrop will stop propagation on tap. Defaults to `true`. - - -#### tappable - -boolean - -If true, the backdrop will can be clicked and will emit the `ionBackdropTap` event. Defaults to `true`. - - -#### visible - -boolean - -If true, the backdrop will be visible. Defaults to `true`. - - -## Attributes - -#### stop-propagation - -boolean - -If true, the backdrop will stop propagation on tap. Defaults to `true`. - - -#### tappable - -boolean - -If true, the backdrop will can be clicked and will emit the `ionBackdropTap` event. Defaults to `true`. - - -#### visible - -boolean - -If true, the backdrop will be visible. Defaults to `true`. +| 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` | ## Events -#### ionBackdropTap - -Emitted when the backdrop is tapped. - +| Event | Description | +| ---------------- | ------------------------------------ | +| `ionBackdropTap` | Emitted when the backdrop is tapped. | ---------------------------------------------- diff --git a/core/src/components/badge/readme.md b/core/src/components/badge/readme.md index ec767baec7..31f738f870 100644 --- a/core/src/components/badge/readme.md +++ b/core/src/components/badge/readme.md @@ -8,40 +8,10 @@ Badges are inline block elements that usually appear near another element. Typic ## Properties -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -## Attributes - -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. +| 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). | `Color` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | ## CSS Custom Properties diff --git a/core/src/components/button/readme.md b/core/src/components/button/readme.md index a2396d7832..55bce88c6e 100644 --- a/core/src/components/button/readme.md +++ b/core/src/components/button/readme.md @@ -37,213 +37,28 @@ This attribute specifies the size of the button. Setting this attribute will cha ## Properties -#### buttonType - -string - -The type of button. -Possible values are: `"button"`, `"bar-button"`. - - -#### color - -string - -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). - - -#### disabled - -boolean - -If true, the user cannot interact with the button. Defaults to `false`. - - -#### expand - -string - -Set to `"block"` for a full-width button or to `"full"` for a full-width button -without left and right borders. - - -#### fill - -string - -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"`. - - -#### href - -string - -Contains a URL or a URL fragment that the hyperlink points to. -If this property is set, an anchor tag will be rendered. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### routerDirection - -string - -When using a router, it specifies the transition direction when navigating to -another page using `href`. - - -#### shape - -string - -The button shape. -Possible values are: `"round"`. - - -#### size - -string - -The button size. -Possible values are: `"small"`, `"default"`, `"large"`. - - -#### strong - -boolean - -If true, activates a button with a heavier font weight. - - -#### type - -string - -The type of the button. -Possible values are: `"submit"`, `"reset"` and `"button"`. -Default value is: `"button"` - - -## Attributes - -#### button-type - -string - -The type of button. -Possible values are: `"button"`, `"bar-button"`. - - -#### color - -string - -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). - - -#### disabled - -boolean - -If true, the user cannot interact with the button. Defaults to `false`. - - -#### expand - -string - -Set to `"block"` for a full-width button or to `"full"` for a full-width button -without left and right borders. - - -#### fill - -string - -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"`. - - -#### href - -string - -Contains a URL or a URL fragment that the hyperlink points to. -If this property is set, an anchor tag will be rendered. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### router-direction - -string - -When using a router, it specifies the transition direction when navigating to -another page using `href`. - - -#### shape - -string - -The button shape. -Possible values are: `"round"`. - - -#### size - -string - -The button size. -Possible values are: `"small"`, `"default"`, `"large"`. - - -#### strong - -boolean - -If true, activates a button with a heavier font weight. - - -#### type - -string - -The type of the button. -Possible values are: `"submit"`, `"reset"` and `"button"`. -Default value is: `"button"` +| 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). | `Color` | +| `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. | `'full' | 'block'` | +| `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' | 'outline' | 'solid' | 'default'` | +| `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` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `RouterDirection` | +| `shape` | `shape` | The button shape. Possible values are: `"round"`. | `'round'` | +| `size` | `size` | The button size. Possible values are: `"small"`, `"default"`, `"large"`. | `'small' | 'default' | 'large'` | +| `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"` | `'submit' | 'reset' | 'button'` | ## Events -#### ionBlur - -Emitted when the button loses focus. - - -#### ionFocus - -Emitted when the button has focus. - +| Event | Description | +| ---------- | ------------------------------------ | +| `ionBlur` | Emitted when the button loses focus. | +| `ionFocus` | Emitted when the button has focus. | ---------------------------------------------- diff --git a/core/src/components/buttons/readme.md b/core/src/components/buttons/readme.md index 0a3e4df168..9f04f6760e 100644 --- a/core/src/components/buttons/readme.md +++ b/core/src/components/buttons/readme.md @@ -15,7 +15,6 @@ The `` element can be positioned inside of the toolbar using a name - ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/card-content/readme.md b/core/src/components/card-content/readme.md index 5db4938152..8963306eaf 100644 --- a/core/src/components/card-content/readme.md +++ b/core/src/components/card-content/readme.md @@ -9,23 +9,9 @@ It is recommended that any text content for a card should be placed in an `ion-c ## Properties -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -## Attributes - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - +| Property | Attribute | Description | Type | +| -------- | --------- | ----------------------------------------------------------------------------------------- | ------ | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | ---------------------------------------------- diff --git a/core/src/components/card-header/readme.md b/core/src/components/card-header/readme.md index 2e622322d8..8da2bdd261 100644 --- a/core/src/components/card-header/readme.md +++ b/core/src/components/card-header/readme.md @@ -8,55 +8,11 @@ ## Properties -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### translucent - -boolean - -If true, the card header will be translucent. Defaults to `false`. - - -## Attributes - -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### translucent - -boolean - -If true, the card header will be translucent. Defaults to `false`. - +| 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). | `Color` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `translucent` | `translucent` | If true, the card header will be translucent. Defaults to `false`. | `boolean` | ---------------------------------------------- diff --git a/core/src/components/card-subtitle/readme.md b/core/src/components/card-subtitle/readme.md index c903ef8b7a..e75a03b03f 100644 --- a/core/src/components/card-subtitle/readme.md +++ b/core/src/components/card-subtitle/readme.md @@ -7,41 +7,10 @@ ## Properties -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -## Attributes - -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - +| 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). | `Color` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | ---------------------------------------------- diff --git a/core/src/components/card-title/readme.md b/core/src/components/card-title/readme.md index 11cfc40d59..9fece5b9de 100644 --- a/core/src/components/card-title/readme.md +++ b/core/src/components/card-title/readme.md @@ -8,41 +8,10 @@ ## Properties -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -## Attributes - -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - +| 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). | `Color` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | ---------------------------------------------- diff --git a/core/src/components/card/readme.md b/core/src/components/card/readme.md index e2a42f5b83..96410b0584 100644 --- a/core/src/components/card/readme.md +++ b/core/src/components/card/readme.md @@ -11,41 +11,10 @@ sub-components to reflect this. Please see `ion-card-content`, ## Properties -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -## Attributes - -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - +| 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). | `Color` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | ---------------------------------------------- diff --git a/core/src/components/checkbox/readme.md b/core/src/components/checkbox/readme.md index a7eb5268f8..404c44ae38 100644 --- a/core/src/components/checkbox/readme.md +++ b/core/src/components/checkbox/readme.md @@ -10,119 +10,24 @@ Checkboxes allow the selection of multiple options from a set of options. They a ## Properties -#### checked - -boolean - -If true, the checkbox is selected. Defaults to `false`. - - -#### color - -string - -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). - - -#### disabled - -boolean - -If true, the user cannot interact with the checkbox. Defaults to `false`. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### name - -string - -The name of the control, which is submitted with the form data. - - -#### value - -string - -The value of the checkbox. - - -## Attributes - -#### checked - -boolean - -If true, the checkbox is selected. Defaults to `false`. - - -#### color - -string - -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). - - -#### disabled - -boolean - -If true, the user cannot interact with the checkbox. Defaults to `false`. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### name - -string - -The name of the control, which is submitted with the form data. - - -#### value - -string - -The value of the checkbox. +| 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). | `Color` | +| `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"`. | `Mode` | +| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | +| `value` | `value` | The value of the checkbox. | `string` | ## Events -#### ionBlur - -Emitted when the toggle loses focus. - - -#### ionChange - -Emitted when the checked property has changed. - - -#### ionFocus - -Emitted when the toggle has focus. - - -#### ionStyle - -Emitted when the styles change. - +| Event | Description | +| ----------- | ---------------------------------------------- | +| `ionBlur` | Emitted when the toggle loses focus. | +| `ionChange` | Emitted when the checked property has changed. | +| `ionFocus` | Emitted when the toggle has focus. | +| `ionStyle` | Emitted when the styles change. | ---------------------------------------------- diff --git a/core/src/components/chip-button/readme.md b/core/src/components/chip-button/readme.md index c72deeadc7..c49b40f239 100644 --- a/core/src/components/chip-button/readme.md +++ b/core/src/components/chip-button/readme.md @@ -7,85 +7,13 @@ A ChipButton is an inset button that is placed inside of a Chip. For more inform ## Properties -#### color - -string - -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). - - -#### disabled - -boolean - -If true, the user cannot interact with the chip button. Defaults to `false`. - - -#### fill - -string - -Set to `"clear"` for a transparent button style. - - -#### href - -string - -Contains a URL or a URL fragment that the hyperlink points to. -If this property is set, an anchor tag will be rendered. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -## Attributes - -#### color - -string - -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). - - -#### disabled - -boolean - -If true, the user cannot interact with the chip button. Defaults to `false`. - - -#### fill - -string - -Set to `"clear"` for a transparent button style. - - -#### href - -string - -Contains a URL or a URL fragment that the hyperlink points to. -If this property is set, an anchor tag will be rendered. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - +| 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). | `Color` | +| `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 style. | `'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` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | ---------------------------------------------- diff --git a/core/src/components/chip-icon/readme.md b/core/src/components/chip-icon/readme.md index b30b8a08e7..05da26ed0a 100644 --- a/core/src/components/chip-icon/readme.md +++ b/core/src/components/chip-icon/readme.md @@ -7,73 +7,12 @@ ## Properties -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### name - -string - -The icon to use. -Possible values are the same as `"ion-icon"`. - - -#### src - -string - -The icon src to use. -Possible values are the same as `"ion-icon"`. - - -## Attributes - -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### name - -string - -The icon to use. -Possible values are the same as `"ion-icon"`. - - -#### src - -string - -The icon src to use. -Possible values are the same as `"ion-icon"`. - +| 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). | `Color` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `name` | `name` | The icon to use. Possible values are the same as `"ion-icon"`. | `string` | +| `src` | `src` | The icon src to use. Possible values are the same as `"ion-icon"`. | `string` | ---------------------------------------------- diff --git a/core/src/components/chip/readme.md b/core/src/components/chip/readme.md index 843b00f68f..c410edb2f1 100644 --- a/core/src/components/chip/readme.md +++ b/core/src/components/chip/readme.md @@ -7,41 +7,10 @@ Chips represent complex entities in small blocks, such as a contact. A chip can ## Properties -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -## Attributes - -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - +| 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). | `Color` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | ---------------------------------------------- diff --git a/core/src/components/col/readme.md b/core/src/components/col/readme.md index f5a593d6c4..9984cc2942 100644 --- a/core/src/components/col/readme.md +++ b/core/src/components/col/readme.md @@ -26,391 +26,32 @@ There are several attributes that can be added to a column to customize this beh ## Properties -#### offset - -string - -The amount to offset the column, in terms of how many columns it should shift to the right -of the total available. - - -#### offsetLg - -string - -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. - - -#### offsetMd - -string - -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. - - -#### offsetSm - -string - -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. - - -#### offsetXl - -string - -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. - - -#### offsetXs - -string - -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. - - -#### pull - -string - -The amount to pull the column, in terms of how many columns it should shift to the left of -the total available. - - -#### pullLg - -string - -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. - - -#### pullMd - -string - -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. - - -#### pullSm - -string - -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. - - -#### pullXl - -string - -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. - - -#### pullXs - -string - -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. - - -#### push - -string - -The amount to push the column, in terms of how many columns it should shift to the right -of the total available. - - -#### pushLg - -string - -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. - - -#### pushMd - -string - -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. - - -#### pushSm - -string - -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. - - -#### pushXl - -string - -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. - - -#### pushXs - -string - -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. - - -#### size - -string - -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. - - -#### sizeLg - -string - -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. - - -#### sizeMd - -string - -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. - - -#### sizeSm - -string - -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. - - -#### sizeXl - -string - -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. - - -#### sizeXs - -string - -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. - - -## Attributes - -#### offset - -string - -The amount to offset the column, in terms of how many columns it should shift to the right -of the total available. - - -#### offset-lg - -string - -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. - - -#### offset-md - -string - -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. - - -#### offset-sm - -string - -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. - - -#### offset-xl - -string - -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. - - -#### offset-xs - -string - -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. - - -#### pull - -string - -The amount to pull the column, in terms of how many columns it should shift to the left of -the total available. - - -#### pull-lg - -string - -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. - - -#### pull-md - -string - -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. - - -#### pull-sm - -string - -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. - - -#### pull-xl - -string - -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. - - -#### pull-xs - -string - -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. - - -#### push - -string - -The amount to push the column, in terms of how many columns it should shift to the right -of the total available. - - -#### push-lg - -string - -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. - - -#### push-md - -string - -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. - - -#### push-sm - -string - -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. - - -#### push-xl - -string - -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. - - -#### push-xs - -string - -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. - - -#### size - -string - -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. - - -#### size-lg - -string - -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. - - -#### size-md - -string - -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. - - -#### size-sm - -string - -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. - - -#### size-xl - -string - -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. - - -#### size-xs - -string - -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. - +| 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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `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` | ---------------------------------------------- diff --git a/core/src/components/content/readme.md b/core/src/components/content/readme.md index 14cd139292..f29353c530 100644 --- a/core/src/components/content/readme.md +++ b/core/src/components/content/readme.md @@ -9,140 +9,34 @@ view component. ## Properties -#### color - -string - - -#### forceOverscroll - -boolean - -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. - - -#### fullscreen - -boolean - -If true, the content will scroll behind the headers -and footers. This effect can easily be seen by setting the toolbar -to transparent. - - -#### scrollEvents - -boolean - -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`. - - -#### scrollX - -boolean - -If you want to enable the content scrolling in the X axis, set this property to `true`. - - -#### scrollY - -boolean - -If you want to disable the content scrolling in the Y axis, set this property to `false`. - - -## Attributes - -#### color - -string - - -#### force-overscroll - -boolean - -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. - - -#### fullscreen - -boolean - -If true, the content will scroll behind the headers -and footers. This effect can easily be seen by setting the toolbar -to transparent. - - -#### scroll-events - -boolean - -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`. - - -#### scroll-x - -boolean - -If you want to enable the content scrolling in the X axis, set this property to `true`. - - -#### scroll-y - -boolean - -If you want to disable the content scrolling in the Y axis, set this property to `false`. +| Property | Attribute | Description | Type | +| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | +| `color` | `color` | | `Color` | +| `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` | +| `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` | ## Events -#### ionScroll - -Emitted while scrolling. This event is disabled by default. -Look at the property: `scrollEvents` - - -#### ionScrollEnd - -Emitted when the scroll has ended. - - -#### ionScrollStart - -Emitted when the scroll has started. +| Event | Description | +| ---------------- | ------------------------------------------------------------------------------------------------ | +| `ionScroll` | Emitted while scrolling. This event is disabled by default. Look at the property: `scrollEvents` | +| `ionScrollEnd` | Emitted when the scroll has ended. | +| `ionScrollStart` | Emitted when the scroll has started. | ## Methods -#### getScrollElement() - - -#### scrollByPoint() - -Scroll by a specified X/Y distance in the component - - -#### scrollToBottom() - -Scroll to the bottom of the component - - -#### scrollToPoint() - -Scroll to a specified X/Y location in the component - - -#### scrollToTop() - -Scroll to the top of the component - +| Method | Description | +| ------------------ | --------------------------------------------------- | +| `getScrollElement` | | +| `scrollByPoint` | Scroll by a specified X/Y distance in the component | +| `scrollToBottom` | Scroll to the bottom of the component | +| `scrollToPoint` | Scroll to a specified X/Y location in the component | +| `scrollToTop` | Scroll to the top of the component | ---------------------------------------------- diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md index e27ace3bce..991c0db943 100644 --- a/core/src/components/datetime/readme.md +++ b/core/src/components/datetime/readme.md @@ -204,382 +204,43 @@ dates in JavaScript. ## Properties -#### cancelText - -string - -The text to display on the picker's cancel button. Default: `Cancel`. - - -#### dayNames - -string - -Full day of the week names. This can be used to provide -locale names for each day in the week. Defaults to English. - - -#### dayShortNames - -string - -Short abbreviated day of the week names. This can be used to provide -locale names for each day in the week. Defaults to English. - - -#### dayValues - -any - -Values used to create the list of selectable days. By default -every day is shown for the given month. However, to control exactly which days of -the month to display, the `dayValues` input can take 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. - - -#### disabled - -boolean - -If true, the user cannot interact with the datetime. Defaults to `false`. - - -#### displayFormat - -string - -The display format of the date and time as text that shows -within the item. When the `pickerFormat` input is not used, then the -`displayFormat` is used for both display the formatted text, and determining -the datetime picker's columns. See the `pickerFormat` input description for -more info. Defaults to `MMM D, YYYY`. - - -#### doneText - -string - -The text to display on the picker's "Done" button. Default: `Done`. - - -#### hourValues - -any - -Values used to create the list of selectable hours. By default -the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, -to control exactly which hours to display, the `hourValues` input can take a number, an -array of numbers, or a string of comma separated numbers. - - -#### max - -string - -The maximum datetime allowed. Value must be a date string -following the -[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), -`1996-12-19`. The format does not have to be specific to an exact -datetime. For example, the maximum could just be the year, such as `1994`. -Defaults to the end of this year. - - -#### min - -string - -The minimum datetime allowed. Value must be a date string -following the -[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), -such as `1996-12-19`. The format does not have to be specific to an exact -datetime. For example, the minimum could just be the year, such as `1994`. -Defaults to the beginning of the year, 100 years ago from today. - - -#### minuteValues - -any - -Values used to create the list of selectable minutes. By default -the mintues range from `0` to `59`. However, to control exactly which minutes to display, -the `minuteValues` input can take 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"`. - - -#### monthNames - -string - -Full names for each month name. This can be used to provide -locale month names. Defaults to English. - - -#### monthShortNames - -string - -Short abbreviated names for each month name. This can be used to provide -locale month names. Defaults to English. - - -#### monthValues - -any - -Values used to create the list of selectable months. By default -the month values range from `1` to `12`. However, to control exactly which months to -display, the `monthValues` input can take 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`. - - -#### pickerFormat - -string - -The format of the date and time picker columns the user selects. -A datetime input can have one or many datetime parts, each getting their -own column which allow individual selection of that particular datetime part. For -example, year and month columns are two individually selectable columns which help -choose an exact date from the datetime picker. Each column follows the string -parse format. Defaults to use `displayFormat`. - - -#### pickerOptions - -PickerOptions - -Any additional options that the picker interface can accept. -See the [Picker API docs](../../picker/Picker) for the picker options. - - -#### placeholder - -string - -The text to display when there's no date selected yet. -Using lowercase to match the input attribute - - -#### value - -string - -the value of the datetime. - - -#### yearValues - -any - -Values used to create the list of selectable years. By default -the year values range between the `min` and `max` datetime inputs. However, to -control exactly which years to display, the `yearValues` input can take 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"`. - - -## Attributes - -#### cancel-text - -string - -The text to display on the picker's cancel button. Default: `Cancel`. - - -#### day-names - -string - -Full day of the week names. This can be used to provide -locale names for each day in the week. Defaults to English. - - -#### day-short-names - -string - -Short abbreviated day of the week names. This can be used to provide -locale names for each day in the week. Defaults to English. - - -#### day-values - -any - -Values used to create the list of selectable days. By default -every day is shown for the given month. However, to control exactly which days of -the month to display, the `dayValues` input can take 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. - - -#### disabled - -boolean - -If true, the user cannot interact with the datetime. Defaults to `false`. - - -#### display-format - -string - -The display format of the date and time as text that shows -within the item. When the `pickerFormat` input is not used, then the -`displayFormat` is used for both display the formatted text, and determining -the datetime picker's columns. See the `pickerFormat` input description for -more info. Defaults to `MMM D, YYYY`. - - -#### done-text - -string - -The text to display on the picker's "Done" button. Default: `Done`. - - -#### hour-values - -any - -Values used to create the list of selectable hours. By default -the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, -to control exactly which hours to display, the `hourValues` input can take a number, an -array of numbers, or a string of comma separated numbers. - - -#### max - -string - -The maximum datetime allowed. Value must be a date string -following the -[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), -`1996-12-19`. The format does not have to be specific to an exact -datetime. For example, the maximum could just be the year, such as `1994`. -Defaults to the end of this year. - - -#### min - -string - -The minimum datetime allowed. Value must be a date string -following the -[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), -such as `1996-12-19`. The format does not have to be specific to an exact -datetime. For example, the minimum could just be the year, such as `1994`. -Defaults to the beginning of the year, 100 years ago from today. - - -#### minute-values - -any - -Values used to create the list of selectable minutes. By default -the mintues range from `0` to `59`. However, to control exactly which minutes to display, -the `minuteValues` input can take 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"`. - - -#### month-names - -string - -Full names for each month name. This can be used to provide -locale month names. Defaults to English. - - -#### month-short-names - -string - -Short abbreviated names for each month name. This can be used to provide -locale month names. Defaults to English. - - -#### month-values - -any - -Values used to create the list of selectable months. By default -the month values range from `1` to `12`. However, to control exactly which months to -display, the `monthValues` input can take 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`. - - -#### picker-format - -string - -The format of the date and time picker columns the user selects. -A datetime input can have one or many datetime parts, each getting their -own column which allow individual selection of that particular datetime part. For -example, year and month columns are two individually selectable columns which help -choose an exact date from the datetime picker. Each column follows the string -parse format. Defaults to use `displayFormat`. - - -#### picker-options - - - -Any additional options that the picker interface can accept. -See the [Picker API docs](../../picker/Picker) for the picker options. - - -#### placeholder - -string - -The text to display when there's no date selected yet. -Using lowercase to match the input attribute - - -#### value - -string - -the value of the datetime. - - -#### year-values - -any - -Values used to create the list of selectable years. By default -the year values range between the `min` and `max` datetime inputs. However, to -control exactly which years to display, the `yearValues` input can take 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"`. +| 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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `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` | +| `minuteValues` | -- | Values used to create the list of selectable minutes. By default the mintues range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take 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` | +| `monthNames` | `month-names` | Full names for each month name. This can be used to provide locale month names. Defaults to English. | `string[] | string` | +| `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` | +| `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` | +| `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` | +| `pickerOptions` | -- | Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options. | `PickerOptions` | +| `placeholder` | `placeholder` | The text to display when there's no date selected yet. Using lowercase to match the input attribute | `string` | +| `value` | -- | the value of the datetime. | `any` | +| `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` | ## Events -#### ionCancel - -Emitted when the datetime selection was cancelled. +| Event | Description | +| ----------- | --------------------------------------------------- | +| `ionCancel` | Emitted when the datetime selection was cancelled. | +| `ionChange` | Emitted when the value (selected date) has changed. | +| `ionStyle` | Emitted when the styles change. | -#### ionChange - -Emitted when the value (selected date) has changed. - - -#### ionStyle - -Emitted when the styles change. +## Methods +| Method | Description | +| ------ | ----------- | +| `open` | | ---------------------------------------------- diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md index 19380e66d5..a630aec757 100644 --- a/core/src/components/fab-button/readme.md +++ b/core/src/components/fab-button/readme.md @@ -9,113 +9,15 @@ If the FAB button is not wrapped with ``, it will scroll with the conte ## Properties -#### activated - -boolean - -If true, the fab button will be show a close icon. Defaults to `false`. - - -#### color - -string - -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). - - -#### disabled - -boolean - -If true, the user cannot interact with the fab button. Defaults to `false`. - - -#### href - -string - -Contains a URL or a URL fragment that the hyperlink points to. -If this property is set, an anchor tag will be rendered. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### show - -boolean - -If true, the fab button will show when in a fab-list. - - -#### translucent - -boolean - -If true, the fab button will be translucent. Defaults to `false`. - - -## Attributes - -#### activated - -boolean - -If true, the fab button will be show a close icon. Defaults to `false`. - - -#### color - -string - -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). - - -#### disabled - -boolean - -If true, the user cannot interact with the fab button. Defaults to `false`. - - -#### href - -string - -Contains a URL or a URL fragment that the hyperlink points to. -If this property is set, an anchor tag will be rendered. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### show - -boolean - -If true, the fab button will show when in a fab-list. - - -#### translucent - -boolean - -If true, the fab button will be translucent. Defaults to `false`. - +| 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). | `Color` | +| `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` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `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` | ---------------------------------------------- diff --git a/core/src/components/fab-list/readme.md b/core/src/components/fab-list/readme.md index e8e4cf2a6f..45236a3421 100644 --- a/core/src/components/fab-list/readme.md +++ b/core/src/components/fab-list/readme.md @@ -7,35 +7,10 @@ The `ion-fab-list` element is a container for multiple fab buttons. This collect ## Properties -#### activated - -boolean - -If true, the fab list will be show all fab buttons in the list. Defaults to `false`. - - -#### side - -string - -The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`. - - -## Attributes - -#### activated - -boolean - -If true, the fab list will be show all fab buttons in the list. Defaults to `false`. - - -#### side - -string - -The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`. - +| 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'`. | `'start' | 'end' | 'top' | 'bottom'` | ---------------------------------------------- diff --git a/core/src/components/fab/readme.md b/core/src/components/fab/readme.md index 2f438e8f09..c52b01ce86 100644 --- a/core/src/components/fab/readme.md +++ b/core/src/components/fab/readme.md @@ -7,74 +7,19 @@ Fabs are container elements that contain one or more fab buttons. They should be ## Properties -#### activated - -boolean - - -#### edge - -boolean - -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. - - -#### horizontal - -string - -Where to align the fab horizontally in the viewport. -Possible values are: `"center"`, `"start"`, `"end"`. - - -#### vertical - -string - -Where to align the fab vertically in the viewport. -Possible values are: `"top"`, `"center"`, `"bottom"`. - - -## Attributes - -#### activated - -boolean - - -#### edge - -boolean - -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. - - -#### horizontal - -string - -Where to align the fab horizontally in the viewport. -Possible values are: `"center"`, `"start"`, `"end"`. - - -#### vertical - -string - -Where to align the fab vertically in the viewport. -Possible values are: `"top"`, `"center"`, `"bottom"`. +| Property | Attribute | Description | Type | +| ------------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------- | +| `activated` | `activated` | | `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"`. | `'start' | 'end' | 'center'` | +| `vertical` | `vertical` | Where to align the fab vertically in the viewport. Possible values are: `"top"`, `"center"`, `"bottom"`. | `'top' | 'bottom' | 'center'` | ## Methods -#### close() - -Close an active FAB list container - +| Method | Description | +| ------- | ---------------------------------- | +| `close` | Close an active FAB list container | ---------------------------------------------- diff --git a/core/src/components/footer/readme.md b/core/src/components/footer/readme.md index 3dfd7b1d81..8ed032ad12 100644 --- a/core/src/components/footer/readme.md +++ b/core/src/components/footer/readme.md @@ -8,43 +8,10 @@ Footer can be a wrapper for ion-toolbar to make sure the content area is sized c ## Properties -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### translucent - -boolean - -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`. - - -## Attributes - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### translucent - -boolean - -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`. - +| Property | Attribute | Description | Type | +| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `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` | ---------------------------------------------- diff --git a/core/src/components/grid/readme.md b/core/src/components/grid/readme.md index 2bef269a97..83e8e1bb03 100644 --- a/core/src/components/grid/readme.md +++ b/core/src/components/grid/readme.md @@ -12,21 +12,9 @@ See [Grid Layout](/docs/layout/grid) for more information. ## Properties -#### fixed - -boolean - -If true, the grid will have a fixed width based on the screen size. Defaults to `false`. - - -## Attributes - -#### fixed - -boolean - -If true, the grid will have a fixed width based on the screen size. Defaults to `false`. - +| Property | Attribute | Description | Type | +| -------- | --------- | ---------------------------------------------------------------------------------------- | --------- | +| `fixed` | `fixed` | If true, the grid will have a fixed width based on the screen size. Defaults to `false`. | `boolean` | ---------------------------------------------- diff --git a/core/src/components/header/readme.md b/core/src/components/header/readme.md index d4632484c1..b147695c7e 100644 --- a/core/src/components/header/readme.md +++ b/core/src/components/header/readme.md @@ -10,43 +10,10 @@ It's important to note that ion-header needs to be the one of the three root ele ## Properties -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### translucent - -boolean - -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`. - - -## Attributes - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### translucent - -boolean - -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`. - +| Property | Attribute | Description | Type | +| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `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` | ---------------------------------------------- diff --git a/core/src/components/hide-when/readme.md b/core/src/components/hide-when/readme.md index 507b50aed5..d6ba4ff18b 100644 --- a/core/src/components/hide-when/readme.md +++ b/core/src/components/hide-when/readme.md @@ -8,99 +8,14 @@ ## Properties -#### mediaQuery - -string - -If the current media query matches this value, the element will hide. - - -#### mode - -string - -If the current platform matches the given value, the element will hide. -Accepts a comma separated list of modes to match against. - - -#### or - -boolean - -If false, and two or more conditions are set, the element will hide when all are true. -If true, and two or more conditions are set, the element will hide when at least one is true. - - -#### orientation - -string - -If the current orientation matches this value, the element will hide. - - -#### platform - -string - -If the current platform matches the given value, the element will hide. -Accepts a comma separated list of platform to match against. - - -#### size - -string - -If the current screen width matches the given size, the element will hide. -Uses the build in sizes of xs, sm, md, lg, xl. - - -## Attributes - -#### media-query - -string - -If the current media query matches this value, the element will hide. - - -#### mode - -string - -If the current platform matches the given value, the element will hide. -Accepts a comma separated list of modes to match against. - - -#### or - -boolean - -If false, and two or more conditions are set, the element will hide when all are true. -If true, and two or more conditions are set, the element will hide when at least one is true. - - -#### orientation - -string - -If the current orientation matches this value, the element will hide. - - -#### platform - -string - -If the current platform matches the given value, the element will hide. -Accepts a comma separated list of platform to match against. - - -#### size - -string - -If the current screen width matches the given size, the element will hide. -Uses the build in sizes of xs, sm, md, lg, xl. - +| Property | Attribute | Description | Type | +| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | +| `mediaQuery` | `media-query` | If the current media query matches this value, the element will hide. | `string` | +| `mode` | `mode` | If the current platform matches the given value, the element will hide. Accepts a comma separated list of modes to match against. | `Mode` | +| `or` | `or` | If false, and two or more conditions are set, the element will hide when all are true. If true, and two or more conditions are set, the element will hide when at least one is true. | `boolean` | +| `orientation` | `orientation` | If the current orientation matches this value, the element will hide. | `string` | +| `platform` | `platform` | If the current platform matches the given value, the element will hide. Accepts a comma separated list of platform to match against. | `string` | +| `size` | `size` | If the current screen width matches the given size, the element will hide. Uses the build in sizes of xs, sm, md, lg, xl. | `string` | ---------------------------------------------- diff --git a/core/src/components/img/readme.md b/core/src/components/img/readme.md index dcfadb6134..6fd1d5be5e 100644 --- a/core/src/components/img/readme.md +++ b/core/src/components/img/readme.md @@ -8,46 +8,17 @@ Img is a tag that will lazyily load an image when ever the tag is in the viewpor ## Properties -#### alt - -string - -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. - - -#### src - -string - -The image URL. This attribute is mandatory for the element. - - -## Attributes - -#### alt - -string - -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. - - -#### src - -string - -The image URL. This attribute is mandatory for the element. +| 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` | +| `src` | `src` | The image URL. This attribute is mandatory for the element. | `string` | ## Events -#### ionImgDidLoad - -Emitted when the img src is loaded - +| Event | Description | +| --------------- | ---------------------------------- | +| `ionImgDidLoad` | Emitted when the img src is loaded | ---------------------------------------------- diff --git a/core/src/components/infinite-scroll-content/readme.md b/core/src/components/infinite-scroll-content/readme.md index 100f6176ee..4218dddc4f 100644 --- a/core/src/components/infinite-scroll-content/readme.md +++ b/core/src/components/infinite-scroll-content/readme.md @@ -7,35 +7,10 @@ The `ion-infinite-scroll-content` component is the default child used by the `io ## Properties -#### loadingSpinner - -string - -An animated SVG spinner that shows while loading. - - -#### loadingText - -string - -Optional text to display while loading. - - -## Attributes - -#### loading-spinner - -string - -An animated SVG spinner that shows while loading. - - -#### loading-text - -string - -Optional text to display while loading. - +| Property | Attribute | Description | Type | +| ---------------- | ----------------- | ------------------------------------------------- | -------- | +| `loadingSpinner` | `loading-spinner` | An animated SVG spinner that shows while loading. | `string` | +| `loadingText` | `loading-text` | Optional text to display while loading. | `string` | ---------------------------------------------- diff --git a/core/src/components/infinite-scroll/readme.md b/core/src/components/infinite-scroll/readme.md index 03edac084a..0e46342ec6 100644 --- a/core/src/components/infinite-scroll/readme.md +++ b/core/src/components/infinite-scroll/readme.md @@ -17,109 +17,26 @@ Separating the `ion-infinite-scroll` and `ion-infinite-scroll-content` component ## Properties -#### disabled - -boolean - -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. - - -#### position - -string - -The position of the infinite scroll element. -The value can be either `top` or `bottom`. -Defaults to `bottom`. - - -#### threshold - -string - -The threshold distance from the bottom -of the content to call the `infinite` output event when scrolled. -The threshold value can be either a percent, or -in pixels. For example, use the value of `10%` for the `infinite` -output event to get called when the user has scrolled 10% -from the bottom of the page. Use the value `100px` when the -scroll is within 100 pixels from the bottom of the page. -Defaults to `15%`. - - -## Attributes - -#### disabled - -boolean - -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. - - -#### position - -string - -The position of the infinite scroll element. -The value can be either `top` or `bottom`. -Defaults to `bottom`. - - -#### threshold - -string - -The threshold distance from the bottom -of the content to call the `infinite` output event when scrolled. -The threshold value can be either a percent, or -in pixels. For example, use the value of `10%` for the `infinite` -output event to get called when the user has scrolled 10% -from the bottom of the page. Use the value `100px` when the -scroll is within 100 pixels from the bottom of the page. -Defaults to `15%`. +| 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`. | `'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. Defaults to `15%`. | `string` | ## Events -#### ionInfinite - -Emitted when the scroll reaches -the threshold distance. From within your infinite handler, -you must call the infinite scroll's `complete()` method when -your async operation has completed. +| Event | 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. | ## Methods -#### complete() - -Call `complete()` within the `infinite` output event handler when -your async operation has completed. For example, the `loading` -state is while the app is performing an asynchronous operation, -such as receiving more data from an AJAX request to add more items -to a data list. Once the data has been received and UI updated, you -then call this method to signify that the loading has completed. -This method will change the infinite scroll's state from `loading` -to `enabled`. - - -#### waitFor() - -Pass a promise inside `waitFor()` within the `infinite` output event handler in order to -change state of infiniteScroll to "complete" - +| Method | Description | +| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `complete` | Call `complete()` within the `infinite` output event handler when your async operation has completed. For example, the `loading` state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request to add more items to a data list. Once the data has been received and UI updated, you then call this method to signify that the loading has completed. This method will change the infinite scroll's state from `loading` to `enabled`. | +| `waitFor` | Pass a promise inside `waitFor()` within the `infinite` output event handler in order to change state of infiniteScroll to "complete" | ---------------------------------------------- diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md index ca874fd992..c258cb264d 100644 --- a/core/src/components/input/readme.md +++ b/core/src/components/input/readme.md @@ -10,442 +10,49 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email ## Properties -#### accept - -string - -If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers. - - -#### autocapitalize - -string - -Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. - - -#### autocomplete - -string - -Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`. - - -#### autocorrect - -string - -Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `"off"`. - - -#### autofocus - -boolean - -This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. - - -#### clearInput - -boolean - -If true, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`. - - -#### clearOnEdit - -boolean - -If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. - - -#### color - -string - -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). - - -#### debounce - -number - -Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`. - - -#### disabled - -boolean - -If true, the user cannot interact with the input. Defaults to `false`. - - -#### inputmode - -string - -A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`. - - -#### max - -string - -The maximum value, which must not be less than its minimum (min attribute) value. - - -#### maxlength - -number - -If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. - - -#### min - -string - -The minimum value, which must not be greater than its maximum (max attribute) value. - - -#### minlength - -number - -If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### multiple - -boolean - -If true, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored. - - -#### name - -string - -The name of the control, which is submitted with the form data. - - -#### pattern - -string - -A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. - - -#### placeholder - -string - -Instructional text that shows before the input has a value. - - -#### readonly - -boolean - -If true, the user cannot modify the value. Defaults to `false`. - - -#### required - -boolean - -If true, the user must fill in a value before submitting a form. - - -#### results - -number - -This is a nonstandard attribute supported by Safari that only applies when the type is `"search"`. Its value should be a nonnegative decimal integer. - - -#### size - -number - -The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. - - -#### spellcheck - -boolean - -If true, the element will have its spelling and grammar checked. Defaults to `false`. - - -#### step - -string - -Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number. - - -#### type - -string - -The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`. - - -#### value - -string - -The value of the input. - - -## Attributes - -#### accept - -string - -If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers. - - -#### autocapitalize - -string - -Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. - - -#### autocomplete - -string - -Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`. - - -#### autocorrect - -string - -Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `"off"`. - - -#### autofocus - -boolean - -This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. - - -#### clear-input - -boolean - -If true, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`. - - -#### clear-on-edit - -boolean - -If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. - - -#### color - -string - -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). - - -#### debounce - -number - -Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`. - - -#### disabled - -boolean - -If true, the user cannot interact with the input. Defaults to `false`. - - -#### inputmode - -string - -A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`. - - -#### max - -string - -The maximum value, which must not be less than its minimum (min attribute) value. - - -#### maxlength - -number - -If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. - - -#### min - -string - -The minimum value, which must not be greater than its maximum (max attribute) value. - - -#### minlength - -number - -If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### multiple - -boolean - -If true, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored. - - -#### name - -string - -The name of the control, which is submitted with the form data. - - -#### pattern - -string - -A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. - - -#### placeholder - -string - -Instructional text that shows before the input has a value. - - -#### readonly - -boolean - -If true, the user cannot modify the value. Defaults to `false`. - - -#### required - -boolean - -If true, the user must fill in a value before submitting a form. - - -#### results - -number - -This is a nonstandard attribute supported by Safari that only applies when the type is `"search"`. Its value should be a nonnegative decimal integer. - - -#### size - -number - -The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. - - -#### spellcheck - -boolean - -If true, the element will have its spelling and grammar checked. Defaults to `false`. - - -#### step - -string - -Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number. - - -#### type - -string - -The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`. - - -#### value - -string - -The value of the input. +| 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` | +| `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` | +| `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). | `Color` | +| `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` | +| `max` | `max` | The maximum value, which must not be less than its minimum (min attribute) value. | `string` | +| `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` | +| `min` | `min` | The minimum value, which must not be greater than its maximum (max attribute) value. | `string` | +| `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` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `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` | +| `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` | +| `placeholder` | `placeholder` | Instructional text that shows before the input has a value. | `string` | +| `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` | +| `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` | +| `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` | +| `type` | `type` | The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`. | `TextFieldTypes` | +| `value` | `value` | The value of the input. | `string` | ## Events -#### ionBlur - -Emitted when the input loses focus. - - -#### ionChange - -Emitted when the value has changed. - - -#### ionFocus - -Emitted when the input has focus. - - -#### ionInput - -Emitted when a keyboard input ocurred. - - -#### ionInputDidLoad - -Emitted when the input has been created. - - -#### ionInputDidUnload - -Emitted when the input has been removed. - - -#### ionStyle - -Emitted when the styles change. - +| Event | Description | +| ------------------- | ---------------------------------------- | +| `ionBlur` | Emitted when the input loses focus. | +| `ionChange` | Emitted when the value has changed. | +| `ionFocus` | Emitted when the input has focus. | +| `ionInput` | Emitted when a keyboard input ocurred. | +| `ionInputDidLoad` | Emitted when the input has been created. | +| `ionInputDidUnload` | Emitted when the input has been removed. | +| `ionStyle` | Emitted when the styles change. | ---------------------------------------------- diff --git a/core/src/components/item-divider/readme.md b/core/src/components/item-divider/readme.md index 8ea3a3f2b7..db82e90559 100644 --- a/core/src/components/item-divider/readme.md +++ b/core/src/components/item-divider/readme.md @@ -7,41 +7,10 @@ Item Dividers are block elements that can be used to separate items in a list. T ## Properties -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -## Attributes - -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - +| 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). | `Color` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | ---------------------------------------------- diff --git a/core/src/components/item-group/readme.md b/core/src/components/item-group/readme.md index 4034fb7266..71c7fc65a8 100644 --- a/core/src/components/item-group/readme.md +++ b/core/src/components/item-group/readme.md @@ -8,7 +8,6 @@ Item groups are containers that organize similar items together. They can contai - ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/item-option/readme.md b/core/src/components/item-option/readme.md index 5f2ede4e62..9b06642608 100644 --- a/core/src/components/item-option/readme.md +++ b/core/src/components/item-option/readme.md @@ -9,85 +9,13 @@ action for the item. ## Properties -#### color - -string - -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). - - -#### disabled - -boolean - -If true, the user cannot interact with the item option. Defaults to `false`. - - -#### expandable - -boolean - -If true, the option will expand to take up the available width and cover any other options. Defaults to `false`. - - -#### href - -string - -Contains a URL or a URL fragment that the hyperlink points to. -If this property is set, an anchor tag will be rendered. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -## Attributes - -#### color - -string - -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). - - -#### disabled - -boolean - -If true, the user cannot interact with the item option. Defaults to `false`. - - -#### expandable - -boolean - -If true, the option will expand to take up the available width and cover any other options. Defaults to `false`. - - -#### href - -string - -Contains a URL or a URL fragment that the hyperlink points to. -If this property is set, an anchor tag will be rendered. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - +| 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). | `Color` | +| `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` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | ---------------------------------------------- diff --git a/core/src/components/item-options/readme.md b/core/src/components/item-options/readme.md index fd967c01e0..47ba862e25 100644 --- a/core/src/components/item-options/readme.md +++ b/core/src/components/item-options/readme.md @@ -17,39 +17,25 @@ You can combine the `ionSwipe` event plus the `expandable` directive to create a ## Properties -#### side - -string - -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. - - -## Attributes - -#### side - -string - -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. +| 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. | `Side` | ## Events -#### ionSwipe - -Emitted when the item has been fully swiped. +| Event | Description | +| ---------- | -------------------------------------------- | +| `ionSwipe` | Emitted when the item has been fully swiped. | ## Methods -#### fireSwipeEvent() - - -#### isEndSide() - - -#### width() - +| Method | Description | +| ---------------- | ----------- | +| `fireSwipeEvent` | | +| `isEndSide` | | +| `width` | | ---------------------------------------------- diff --git a/core/src/components/item-sliding/readme.md b/core/src/components/item-sliding/readme.md index eab7e824e4..fbe04f8143 100644 --- a/core/src/components/item-sliding/readme.md +++ b/core/src/components/item-sliding/readme.md @@ -31,54 +31,26 @@ Options can be expanded to take up the full width of the item if you swipe past ## Properties -#### disabled - -boolean - -If true, the user cannot interact with the sliding-item. Defaults to `false`. - - -## Attributes - -#### disabled - -boolean - -If true, the user cannot interact with the sliding-item. Defaults to `false`. +| Property | Attribute | Description | Type | +| ---------- | ---------- | ----------------------------------------------------------------------------- | --------- | +| `disabled` | `disabled` | If true, the user cannot interact with the sliding-item. Defaults to `false`. | `boolean` | ## Events -#### ionDrag - -Emitted when the sliding position changes. +| Event | Description | +| --------- | ------------------------------------------ | +| `ionDrag` | Emitted when the sliding position changes. | ## Methods -#### close() - -Close the sliding item. Items can also be closed from the [List](../../list/List). - - -#### closeOpened() - -Close all of the sliding items in the list. Items can also be closed from the [List](../../list/List). - - -#### getOpenAmount() - -Get the amount the item is open in pixels. - - -#### getSlidingRatio() - -Get the ratio of the open amount of the item compared to the width of the options. -If the number returned is positive, then the options on the right side are open. -If the number returned is negative, then the options on the left side are open. -If the absolute value of the number is greater than 1, the item is open more than -the width of the options. - +| Method | Description | +| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `close` | Close the sliding item. Items can also be closed from the [List](../../list/List). | +| `closeOpened` | Close all of the sliding items in the list. Items can also be closed from the [List](../../list/List). | +| `getOpenAmount` | Get the amount the item is open in pixels. | +| `getSlidingRatio` | Get the ratio of the open amount of the item compared to the width of the options. If the number returned is positive, then the options on the right side are open. If the number returned is negative, then the options on the left side are open. If the absolute value of the number is greater than 1, the item is open more than the width of the options. | ---------------------------------------------- diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md index 5a2482f3b3..7fe7f4d2e4 100644 --- a/core/src/components/item/readme.md +++ b/core/src/components/item/readme.md @@ -45,175 +45,19 @@ Items left align text and add an ellipsis when the text is wider than the item. ## Properties -#### button - -boolean - -If true, a button tag will be rendered and the item will be tappable. Defaults to `false`. - - -#### color - -string - -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). - - -#### detail - -boolean - -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. - - -#### detailIcon - -string - -The icon to use when `detail` is set to `true`. Defaults to `"ios-arrow-forward"`. - - -#### disabled - -boolean - -If true, the user cannot interact with the item. Defaults to `false`. - - -#### href - -string - -Contains a URL or a URL fragment that the hyperlink points to. -If this property is set, an anchor tag will be rendered. - - -#### lines - -string - -How the bottom border should be displayed on the item. -Available options: `"full"`, `"inset"`, `"none"`. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### routerDirection - -string - -When using a router, it specifies the transition direction when navigating to -another page using `href`. - - -#### state - -string - - -#### type - -string - -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"` - - -## Attributes - -#### button - -boolean - -If true, a button tag will be rendered and the item will be tappable. Defaults to `false`. - - -#### color - -string - -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). - - -#### detail - -boolean - -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. - - -#### detail-icon - -string - -The icon to use when `detail` is set to `true`. Defaults to `"ios-arrow-forward"`. - - -#### disabled - -boolean - -If true, the user cannot interact with the item. Defaults to `false`. - - -#### href - -string - -Contains a URL or a URL fragment that the hyperlink points to. -If this property is set, an anchor tag will be rendered. - - -#### lines - -string - -How the bottom border should be displayed on the item. -Available options: `"full"`, `"inset"`, `"none"`. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### router-direction - -string - -When using a router, it specifies the transition direction when navigating to -another page using `href`. - - -#### state - -string - - -#### type - -string - -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"` - +| 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). | `Color` | +| `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` | +| `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` | +| `lines` | `lines` | How the bottom border should be displayed on the item. Available options: `"full"`, `"inset"`, `"none"`. | `'full' | 'inset' | 'none'` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `RouterDirection` | +| `state` | `state` | | `'valid' | 'invalid' | 'focus'` | +| `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"` | `'submit' | 'reset' | 'button'` | ---------------------------------------------- diff --git a/core/src/components/label/readme.md b/core/src/components/label/readme.md index 5dc8060050..81587eaded 100644 --- a/core/src/components/label/readme.md +++ b/core/src/components/label/readme.md @@ -8,69 +8,25 @@ Label is a wrapper element that can be used in combination with `ion-item`, `ion ## Properties -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### position - -string - -The position determines where and how the label behaves inside an item. -Possible values are: 'inline' | 'fixed' | 'stacked' | 'floating' - - -## Attributes - -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### position - -string - -The position determines where and how the label behaves inside an item. -Possible values are: 'inline' | 'fixed' | 'stacked' | 'floating' +| 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). | `Color` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `position` | `position` | The position determines where and how the label behaves inside an item. Possible values are: 'inline' | 'fixed' | 'stacked' | 'floating' | `'fixed' | 'stacked' | 'floating'` | ## Events -#### ionStyle - -Emitted when the styles change. +| Event | Description | +| ---------- | ------------------------------- | +| `ionStyle` | Emitted when the styles change. | ## Methods -#### getText() - +| Method | Description | +| --------- | ----------- | +| `getText` | | ---------------------------------------------- diff --git a/core/src/components/list-header/readme.md b/core/src/components/list-header/readme.md index 447762e838..f8f8531535 100644 --- a/core/src/components/list-header/readme.md +++ b/core/src/components/list-header/readme.md @@ -9,41 +9,10 @@ Unlike ItemDivider, ListHeaders are styled to be stand-out from the rest of the ## Properties -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -## Attributes - -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - +| 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). | `Color` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | ---------------------------------------------- diff --git a/core/src/components/list/readme.md b/core/src/components/list/readme.md index b69641195b..3360a32075 100644 --- a/core/src/components/list/readme.md +++ b/core/src/components/list/readme.md @@ -11,55 +11,19 @@ Lists support several interactions including swiping items to reveal options, dr ## Properties -#### inset - -boolean - -If true, the list will have margin around it and rounded corners. Defaults to `false`. - - -#### lines - -string - -How the bottom border should be displayed on all items. -Available options: `"full"`, `"inset"`, `"none"`. - - -## Attributes - -#### inset - -boolean - -If true, the list will have margin around it and rounded corners. Defaults to `false`. - - -#### lines - -string - -How the bottom border should be displayed on all items. -Available options: `"full"`, `"inset"`, `"none"`. +| 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'` | ## Methods -#### closeSlidingItems() - -Close the sliding items. Items can also be closed from the [Item Sliding](../../item-sliding/ItemSliding). -Returns a boolean value of whether it closed an item or not. - - -#### getOpenItem() - -Get the [Item Sliding](../../item-sliding/ItemSliding) that is currently open. - - -#### setOpenItem() - -Set an [Item Sliding](../../item-sliding/ItemSliding) as the open item. - +| Method | Description | +| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `closeSlidingItems` | Close the sliding items. Items can also be closed from the [Item Sliding](../../item-sliding/ItemSliding). Returns a boolean value of whether it closed an item or not. | +| `getOpenItem` | Get the [Item Sliding](../../item-sliding/ItemSliding) that is currently open. | +| `setOpenItem` | Set an [Item Sliding](../../item-sliding/ItemSliding) as the open item. | ---------------------------------------------- diff --git a/core/src/components/loading-controller/readme.md b/core/src/components/loading-controller/readme.md index 11fea0e931..1814e118a1 100644 --- a/core/src/components/loading-controller/readme.md +++ b/core/src/components/loading-controller/readme.md @@ -10,20 +10,11 @@ Loading controllers programmatically control the loading component. Loadings can ## Methods -#### create() - -Create a loading overlay with loading options. - - -#### dismiss() - -Dismiss the open loading overlay. - - -#### getTop() - -Get the most recently opened loading overlay. - +| Method | Description | +| --------- | ---------------------------------------------- | +| `create` | Create a loading overlay with loading options. | +| `dismiss` | Dismiss the open loading overlay. | +| `getTop` | Get the most recently opened loading overlay. | ---------------------------------------------- diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md index dc8213d7cc..60430133f4 100644 --- a/core/src/components/loading/readme.md +++ b/core/src/components/loading/readme.md @@ -18,245 +18,43 @@ The loading indicator can be dismissed automatically after a specific amount of ## Properties -#### content - -string - -Optional text content to display in the loading indicator. - - -#### cssClass - -string - -Additional classes to apply for custom CSS. If multiple classes are -provided they should be separated by spaces. - - -#### dismissOnPageChange - -boolean - -If true, the loading indicator will dismiss when the page changes. Defaults to `false`. - - -#### duration - -number - -Number of milliseconds to wait before dismissing the loading indicator. - - -#### enableBackdropDismiss - -boolean - -If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`. - - -#### enterAnimation - -AnimationBuilder - -Animation to use when the loading indicator is presented. - - -#### keyboardClose - -boolean - -If true, the loading will blur any inputs and hide the keyboard - - -#### leaveAnimation - -AnimationBuilder - -Animation to use when the loading indicator is dismissed. - - -#### overlayId - -number - - -#### showBackdrop - -boolean - -If true, a backdrop will be displayed behind the loading indicator. Defaults to `true`. - - -#### spinner - -string - -The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, -`"bubbles"`, `"circles"`, `"crescent"`. - - -#### translucent - -boolean - -If true, the loading indicator will be translucent. Defaults to `false`. - - -#### willAnimate - -boolean - -If true, the loading indicator will animate. Defaults to `true`. - - -## Attributes - -#### content - -string - -Optional text content to display in the loading indicator. - - -#### css-class - -string - -Additional classes to apply for custom CSS. If multiple classes are -provided they should be separated by spaces. - - -#### dismiss-on-page-change - -boolean - -If true, the loading indicator will dismiss when the page changes. Defaults to `false`. - - -#### duration - -number - -Number of milliseconds to wait before dismissing the loading indicator. - - -#### enable-backdrop-dismiss - -boolean - -If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`. - - -#### enter-animation - - - -Animation to use when the loading indicator is presented. - - -#### keyboard-close - -boolean - -If true, the loading will blur any inputs and hide the keyboard - - -#### leave-animation - - - -Animation to use when the loading indicator is dismissed. - - -#### overlay-id - -number - - -#### show-backdrop - -boolean - -If true, a backdrop will be displayed behind the loading indicator. Defaults to `true`. - - -#### spinner - -string - -The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, -`"bubbles"`, `"circles"`, `"crescent"`. - - -#### translucent - -boolean - -If true, the loading indicator will be translucent. Defaults to `false`. - - -#### will-animate - -boolean - -If true, the loading indicator will animate. Defaults to `true`. +| Property | Attribute | Description | Type | +| ----------------------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | +| `content` | `content` | Optional text content to display in the loading indicator. | `string` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` | +| `dismissOnPageChange` | `dismiss-on-page-change` | If true, the loading indicator will dismiss when the page changes. Defaults to `false`. | `boolean` | +| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | +| `enableBackdropDismiss` | `enable-backdrop-dismiss` | If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`. | `boolean` | +| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `AnimationBuilder` | +| `keyboardClose` | `keyboard-close` | If true, the loading will blur any inputs and hide the keyboard | `boolean` | +| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `AnimationBuilder` | +| `overlayId` | `overlay-id` | | `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` | +| `translucent` | `translucent` | If true, the loading indicator will be translucent. Defaults to `false`. | `boolean` | +| `willAnimate` | `will-animate` | If true, the loading indicator will animate. Defaults to `true`. | `boolean` | ## Events -#### ionLoadingDidDismiss - -Emitted after the loading has dismissed. - - -#### ionLoadingDidLoad - -Emitted after the loading has loaded. - - -#### ionLoadingDidPresent - -Emitted after the loading has presented. - - -#### ionLoadingDidUnload - -Emitted after the loading has unloaded. - - -#### ionLoadingWillDismiss - -Emitted before the loading has dismissed. - - -#### ionLoadingWillPresent - -Emitted before the loading has presented. +| Event | Description | +| ----------------------- | ----------------------------------------- | +| `ionLoadingDidDismiss` | Emitted after the loading has dismissed. | +| `ionLoadingDidLoad` | Emitted after the loading has loaded. | +| `ionLoadingDidPresent` | Emitted after the loading has presented. | +| `ionLoadingDidUnload` | Emitted after the loading has unloaded. | +| `ionLoadingWillDismiss` | Emitted before the loading has dismissed. | +| `ionLoadingWillPresent` | Emitted before the loading has presented. | ## Methods -#### dismiss() - -Dismiss the loading overlay after it has been presented. - - -#### onDidDismiss() - -Returns a promise that resolves when the loading did dismiss. It also accepts a callback -that is called in the same circumstances. - - -#### onWillDismiss() - -Returns a promise that resolves when the loading will dismiss. It also accepts a callback -that is called in the same circumstances. - - -#### present() - -Present the loading overlay after it has been created. - +| Method | Description | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------- | +| `dismiss` | Dismiss the loading overlay after it has been presented. | +| `onDidDismiss` | Returns a promise that resolves when the loading did dismiss. It also accepts a callback that is called in the same circumstances. | +| `onWillDismiss` | Returns a promise that resolves when the loading will dismiss. It also accepts a callback that is called in the same circumstances. | +| `present` | Present the loading overlay after it has been created. | ---------------------------------------------- diff --git a/core/src/components/menu-button/readme.md b/core/src/components/menu-button/readme.md index 136b7f4913..2811a4379c 100644 --- a/core/src/components/menu-button/readme.md +++ b/core/src/components/menu-button/readme.md @@ -8,69 +8,12 @@ Menu Button is component that automatically creates the icon and functionality t ## Properties -#### autoHide - -boolean - -Automatically hides the menu button when the corresponding menu is not active - - -#### color - -string - -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). - - -#### menu - -string - -Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -## Attributes - -#### auto-hide - -boolean - -Automatically hides the menu button when the corresponding menu is not active - - -#### color - -string - -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). - - -#### menu - -string - -Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - +| 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). | `Color` | +| `menu` | `menu` | Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle | `string` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | ---------------------------------------------- diff --git a/core/src/components/menu-controller/readme.md b/core/src/components/menu-controller/readme.md index 5b3f5dfb22..e45d3a7a01 100644 --- a/core/src/components/menu-controller/readme.md +++ b/core/src/components/menu-controller/readme.md @@ -8,88 +8,25 @@ The MenuController makes it easy to control a Menu. Its methods can be used to d ## Methods -#### _register() - - -#### _setActiveMenu() - - -#### _setOpen() - - -#### _unregister() - - -#### close() - -Close the menu. If no menu is specified, then it will close any menu -that is open. If a menu is specified, it will close that menu. - - -#### createAnimation() - - -#### enable() - -Used to enable or disable a menu. For example, there could be multiple -left menus, but only one of them should be able to be opened at the same -time. If there are multiple menus on the same side, then enabling one menu -will also automatically disable all the others that are on the same side. - - -#### get() - -Used to get a menu instance. If a menu is not provided then it will -return the first menu found. If the specified menu is `left` or `right`, then -it will return the enabled menu on that side. Otherwise, it will try to find -the menu using the menu's `id` property. If a menu is not found then it will -return `null`. - - -#### getMenus() - -Returns an array of all menu instances. - - -#### getOpen() - -Returns the instance of the menu already opened, otherwise `null`. - - -#### isAnimating() - -Returns true if any menu is currently animating. - - -#### isEnabled() - -Returns true if the specified menu is enabled. - - -#### isOpen() - -Returns true if the specified menu is open. If the menu is not specified, it -will return true if any menu is currently open. - - -#### open() - -Open the menu. - - -#### registerAnimation() - - -#### swipeEnable() - -Used to enable or disable the ability to swipe open the menu. - - -#### toggle() - -Toggle the menu. If it's closed, it will open, and if opened, it -will close. - +| Method | Description | +| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `_register` | | +| `_setActiveMenu` | | +| `_setOpen` | | +| `_unregister` | | +| `close` | Close the menu. If no menu is specified, then it will close any menu that is open. If a menu is specified, it will close that menu. | +| `createAnimation` | | +| `enable` | Used to enable or disable a menu. For example, there could be multiple left menus, but only one of them should be able to be opened at the same time. If there are multiple menus on the same side, then enabling one menu will also automatically disable all the others that are on the same side. | +| `get` | Used to get a menu instance. If a menu is not provided then it will return the first menu found. If the specified menu is `left` or `right`, then it will return the enabled menu on that side. Otherwise, it will try to find the menu using the menu's `id` property. If a menu is not found then it will return `null`. | +| `getMenus` | Returns an array of all menu instances. | +| `getOpen` | Returns the instance of the menu already opened, otherwise `null`. | +| `isAnimating` | Returns true if any menu is currently animating. | +| `isEnabled` | Returns true if the specified menu is enabled. | +| `isOpen` | Returns true if the specified menu is open. If the menu is not specified, it will return true if any menu is currently open. | +| `open` | Open the menu. | +| `registerAnimation` | | +| `swipeEnable` | Used to enable or disable the ability to swipe open the menu. | +| `toggle` | Toggle the menu. If it's closed, it will open, and if opened, it will close. | ---------------------------------------------- diff --git a/core/src/components/menu-toggle/readme.md b/core/src/components/menu-toggle/readme.md index ef6876d0d3..8055d248ae 100644 --- a/core/src/components/menu-toggle/readme.md +++ b/core/src/components/menu-toggle/readme.md @@ -11,51 +11,10 @@ In case it's desired to keep `ion-menu-toggle` always visible, the `autoHide` pr ## Properties -#### autoHide - -boolean - -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. - - -#### menu - -string - -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. - - -## Attributes - -#### auto-hide - -boolean - -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. - - -#### menu - -string - -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. - +| 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` | ---------------------------------------------- diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md index 7f88ed206c..a6237ec529 100644 --- a/core/src/components/menu/readme.md +++ b/core/src/components/menu/readme.md @@ -13,149 +13,37 @@ These can be controlled from the templates, or programmatically using the MenuCo ## Properties -#### contentId - -string - -The content's id the menu should use. - - -#### disabled - -boolean - -If true, the menu is disabled. Default `false`. - - -#### maxEdgeStart - -number - -The edge threshold for dragging the menu open. -If a drag/swipe happens over this value, the menu is not triggered. - - -#### menuId - -string - -An id for the menu. - - -#### side - -string - -Which side of the view the menu should be placed. Default `"start"`. - - -#### swipeEnabled - -boolean - -If true, swiping the menu is enabled. Default `true`. - - -#### type - -string - -The display type of the menu. -Available options: `"overlay"`, `"reveal"`, `"push"`. - - -## Attributes - -#### content-id - -string - -The content's id the menu should use. - - -#### disabled - -boolean - -If true, the menu is disabled. Default `false`. - - -#### max-edge-start - -number - -The edge threshold for dragging the menu open. -If a drag/swipe happens over this value, the menu is not triggered. - - -#### menu-id - -string - -An id for the menu. - - -#### side - -string - -Which side of the view the menu should be placed. Default `"start"`. - - -#### swipe-enabled - -boolean - -If true, swiping the menu is enabled. Default `true`. - - -#### type - -string - -The display type of the menu. -Available options: `"overlay"`, `"reveal"`, `"push"`. +| Property | Attribute | Description | Type | +| -------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------ | --------- | +| `contentId` | `content-id` | The content's id the menu should use. | `string` | +| `disabled` | `disabled` | If true, the menu is disabled. Default `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` | +| `side` | `side` | Which side of the view the menu should be placed. Default `"start"`. | `Side` | +| `swipeEnabled` | `swipe-enabled` | If true, swiping the menu is enabled. Default `true`. | `boolean` | +| `type` | `type` | The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. | `string` | ## Events -#### ionClose - -Emitted when the menu is closed. - - -#### ionMenuChange - -Emitted when the menu state is changed. - - -#### ionOpen - -Emitted when the menu is open. +| Event | Description | +| --------------- | --------------------------------------- | +| `ionClose` | Emitted when the menu is closed. | +| `ionMenuChange` | Emitted when the menu state is changed. | +| `ionOpen` | Emitted when the menu is open. | ## Methods -#### close() - - -#### getWidth() - - -#### isActive() - - -#### isOpen() - - -#### open() - - -#### setOpen() - - -#### toggle() - +| Method | Description | +| ---------- | ----------- | +| `close` | | +| `getWidth` | | +| `isActive` | | +| `isOpen` | | +| `open` | | +| `setOpen` | | +| `toggle` | | ---------------------------------------------- diff --git a/core/src/components/modal-controller/readme.md b/core/src/components/modal-controller/readme.md index 52fc4cf869..c3de38c3f1 100644 --- a/core/src/components/modal-controller/readme.md +++ b/core/src/components/modal-controller/readme.md @@ -8,20 +8,11 @@ Modal controllers programmatically control the modal component. Modals can be cr ## Methods -#### create() - -Create a modal overlay with modal options. - - -#### dismiss() - -Dismiss the open modal overlay. - - -#### getTop() - -Get the most recently opened modal overlay. - +| Method | Description | +| --------- | ------------------------------------------- | +| `create` | Create a modal overlay with modal options. | +| `dismiss` | Dismiss the open modal overlay. | +| `getTop` | Get the most recently opened modal overlay. | ---------------------------------------------- diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index 62416277be..a17ae69281 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -14,207 +14,41 @@ Modals can be created using a [Modal Controller](../../modal-controller/ModalCon ## Properties -#### component - -string - -The component to display inside of the modal. - - -#### componentProps - -ComponentProps - -The data to pass to the modal component. - - -#### cssClass - -string - -Additional classes to apply for custom CSS. If multiple classes are -provided they should be separated by spaces. - - -#### delegate - -FrameworkDelegate - - -#### enableBackdropDismiss - -boolean - -If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`. - - -#### enterAnimation - -AnimationBuilder - -Animation to use when the modal is presented. - - -#### keyboardClose - -boolean - - -#### leaveAnimation - -AnimationBuilder - -Animation to use when the modal is dismissed. - - -#### overlayId - -number - - -#### showBackdrop - -boolean - -If true, a backdrop will be displayed behind the modal. Defaults to `true`. - - -#### willAnimate - -boolean - -If true, the modal will animate. Defaults to `true`. - - -## Attributes - -#### component - -string - -The component to display inside of the modal. - - -#### component-props - - - -The data to pass to the modal component. - - -#### css-class - -string - -Additional classes to apply for custom CSS. If multiple classes are -provided they should be separated by spaces. - - -#### delegate - - - - -#### enable-backdrop-dismiss - -boolean - -If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`. - - -#### enter-animation - - - -Animation to use when the modal is presented. - - -#### keyboard-close - -boolean - - -#### leave-animation - - - -Animation to use when the modal is dismissed. - - -#### overlay-id - -number - - -#### show-backdrop - -boolean - -If true, a backdrop will be displayed behind the modal. Defaults to `true`. - - -#### will-animate - -boolean - -If true, the modal will animate. Defaults to `true`. +| Property | Attribute | Description | Type | +| ----------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------- | +| `componentProps` | -- | The data to pass to the modal component. | `ComponentProps` | +| `component` | `component` | The component to display inside of the modal. | `ComponentRef` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` | +| `delegate` | -- | | `FrameworkDelegate` | +| `enableBackdropDismiss` | `enable-backdrop-dismiss` | If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` | +| `enterAnimation` | -- | Animation to use when the modal is presented. | `AnimationBuilder` | +| `keyboardClose` | `keyboard-close` | | `boolean` | +| `leaveAnimation` | -- | Animation to use when the modal is dismissed. | `AnimationBuilder` | +| `overlayId` | `overlay-id` | | `number` | +| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the modal. Defaults to `true`. | `boolean` | +| `willAnimate` | `will-animate` | If true, the modal will animate. Defaults to `true`. | `boolean` | ## Events -#### ionModalDidDismiss - -Emitted after the modal has dismissed. - - -#### ionModalDidLoad - -Emitted after the modal has loaded. - - -#### ionModalDidPresent - -Emitted after the modal has presented. - - -#### ionModalDidUnload - -Emitted after the modal has unloaded. - - -#### ionModalWillDismiss - -Emitted before the modal has dismissed. - - -#### ionModalWillPresent - -Emitted before the modal has presented. +| Event | Description | +| --------------------- | --------------------------------------- | +| `ionModalDidDismiss` | Emitted after the modal has dismissed. | +| `ionModalDidLoad` | Emitted after the modal has loaded. | +| `ionModalDidPresent` | Emitted after the modal has presented. | +| `ionModalDidUnload` | Emitted after the modal has unloaded. | +| `ionModalWillDismiss` | Emitted before the modal has dismissed. | +| `ionModalWillPresent` | Emitted before the modal has presented. | ## Methods -#### dismiss() - -Dismiss the modal overlay after it has been presented. - - -#### onDidDismiss() - -Returns a promise that resolves when the modal did dismiss. It also accepts a callback -that is called in the same circustances. - - -#### onWillDismiss() - -Returns a promise that resolves when the modal will dismiss. It also accepts a callback -that is called in the same circustances. - - -#### present() - -Present the modal overlay after it has been created. - +| Method | Description | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `dismiss` | Dismiss the modal overlay after it has been presented. | +| `onDidDismiss` | Returns a promise that resolves when the modal did dismiss. It also accepts a callback that is called in the same circustances. | +| `onWillDismiss` | Returns a promise that resolves when the modal will dismiss. It also accepts a callback that is called in the same circustances. | +| `present` | Present the modal overlay after it has been created. | ---------------------------------------------- diff --git a/core/src/components/nav-pop/readme.md b/core/src/components/nav-pop/readme.md index e039fde009..234f9d0be2 100644 --- a/core/src/components/nav-pop/readme.md +++ b/core/src/components/nav-pop/readme.md @@ -6,7 +6,6 @@ - ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/nav-push/readme.md b/core/src/components/nav-push/readme.md index fdac091f28..a72626580e 100644 --- a/core/src/components/nav-push/readme.md +++ b/core/src/components/nav-push/readme.md @@ -9,35 +9,10 @@ It is the element from of `NavController.push()` ## Properties -#### component - -string - -Component to navigate to - - -#### componentProps - -ComponentProps - -Data you want to pass to the component as props - - -## Attributes - -#### component - -string - -Component to navigate to - - -#### component-props - - - -Data you want to pass to the component as props - +| Property | Attribute | Description | Type | +| ---------------- | ----------- | ----------------------------------------------- | ---------------- | +| `componentProps` | -- | Data you want to pass to the component as props | `ComponentProps` | +| `component` | `component` | Component to navigate to | `NavComponent` | ---------------------------------------------- diff --git a/core/src/components/nav-set-root/readme.md b/core/src/components/nav-set-root/readme.md index e273dbc798..ff0a51c292 100644 --- a/core/src/components/nav-set-root/readme.md +++ b/core/src/components/nav-set-root/readme.md @@ -9,35 +9,10 @@ It is the element form a calling `NavController.setRoot()` ## Properties -#### component - -string - -Component you want to make root for the navigation stack - - -#### componentProps - -ComponentProps - -Data you want to pass to the component as props - - -## Attributes - -#### component - -string - -Component you want to make root for the navigation stack - - -#### component-props - - - -Data you want to pass to the component as props - +| Property | Attribute | Description | Type | +| ---------------- | ----------- | -------------------------------------------------------- | ---------------- | +| `componentProps` | -- | Data you want to pass to the component as props | `ComponentProps` | +| `component` | `component` | Component you want to make root for the navigation stack | `NavComponent` | ---------------------------------------------- diff --git a/core/src/components/nav/readme.md b/core/src/components/nav/readme.md index f16a78c522..98f8f40b82 100644 --- a/core/src/components/nav/readme.md +++ b/core/src/components/nav/readme.md @@ -9,171 +9,45 @@ Unlike RouterOutlet, Nav is not tied to a particular router. Meaning that if we ## Properties -#### animated - -boolean - -If the nav should animate the components or not - - -#### delegate - -FrameworkDelegate - - -#### root - -string - -Root NavComponent to load - - -#### rootParams - -ComponentProps - -Any parameters for the root component - - -#### swipeBackEnabled - -boolean - -If the nav component should allow for swipe-to-go-back - - -## Attributes - -#### animated - -boolean - -If the nav should animate the components or not - - -#### delegate - - - - -#### root - -string - -Root NavComponent to load - - -#### root-params - - - -Any parameters for the root component - - -#### swipe-back-enabled - -boolean - -If the nav component should allow for swipe-to-go-back +| Property | Attribute | Description | Type | +| ------------------ | -------------------- | ------------------------------------------------------ | ------------------- | +| `animated` | `animated` | If the nav should animate the components or not | `boolean` | +| `delegate` | -- | | `FrameworkDelegate` | +| `rootParams` | -- | Any parameters for the root component | `ComponentProps` | +| `root` | `root` | Root NavComponent to load | `NavComponent` | +| `swipeBackEnabled` | `swipe-back-enabled` | If the nav component should allow for swipe-to-go-back | `boolean` | ## Events -#### 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 | +| ------------------ | ----------------------------------------------- | +| `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 | ## Methods -#### canGoBack() - -Returns true or false if the current view can go back - - -#### getActive() - -Gets the active view - - -#### getByIndex() - -Returns the view at the index - - -#### getLength() - - -#### getPrevious() - -Gets the previous view - - -#### getRouteId() - - -#### insert() - -Inserts a component into the nav stack at the specified index. This is useful if you need to add a component at any point in your navigation stack. - - -#### insertPages() - -Inserts an array of components into the nav stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view. - - -#### isAnimating() - -Returns the length of navigation stack - - -#### pop() - -Call to navigate back from a current component. Similar to push(), you can also pass navigation options. - - -#### popTo() - -Pop to a specific index in the navigation stack - - -#### popToRoot() - -Navigate back to the root of the stack, no matter how far back that is. - - -#### push() - -Push a new component onto the current navigation stack. Pass any aditional information along as an object. This additional information is accessible through NavParams - - -#### removeIndex() - -Removes a page from the nav stack at the specified index. - - -#### setPages() - -Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller.You can also pass any navigation params to the individual pages in the array. - - -#### setRoot() - -Set the root for the current navigation stack. - - -#### setRouteId() - +| Method | Description | +| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `canGoBack` | Returns true or false if the current view can go back | +| `getActive` | Gets the active view | +| `getByIndex` | Returns the view at the index | +| `getLength` | | +| `getPrevious` | Gets the previous view | +| `getRouteId` | | +| `insert` | Inserts a component into the nav stack at the specified index. This is useful if you need to add a component at any point in your navigation stack. | +| `insertPages` | Inserts an array of components into the nav stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view. | +| `isAnimating` | Returns the length of navigation stack | +| `pop` | Call to navigate back from a current component. Similar to push(), you can also pass navigation options. | +| `popTo` | Pop to a specific index in the navigation stack | +| `popToRoot` | Navigate back to the root of the stack, no matter how far back that is. | +| `push` | Push a new component onto the current navigation stack. Pass any aditional information along as an object. This additional information is accessible through NavParams | +| `removeIndex` | Removes a page from the nav stack at the specified index. | +| `setPages` | Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller.You can also pass any navigation params to the individual pages in the array. | +| `setRoot` | Set the root for the current navigation stack. | +| `setRouteId` | | ---------------------------------------------- diff --git a/core/src/components/note/readme.md b/core/src/components/note/readme.md index 7e5962ccab..d23009d987 100644 --- a/core/src/components/note/readme.md +++ b/core/src/components/note/readme.md @@ -8,41 +8,10 @@ Notes are text elements generally used as subtitles that provide more informatio ## Properties -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -## Attributes - -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - +| 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). | `Color` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | ---------------------------------------------- diff --git a/core/src/components/picker-column/readme.md b/core/src/components/picker-column/readme.md index 0970809833..5443576706 100644 --- a/core/src/components/picker-column/readme.md +++ b/core/src/components/picker-column/readme.md @@ -7,24 +7,9 @@ ## Properties -#### col - -PickerColumn - - -## Attributes - -#### col - - - - -## Events - -#### ionChange - -Emitted when the selected option has changed. - +| Property | Attribute | Description | Type | +| -------- | --------- | ----------- | -------------- | +| `col` | -- | | `PickerColumn` | ---------------------------------------------- diff --git a/core/src/components/picker-controller/readme.md b/core/src/components/picker-controller/readme.md index 73466f5850..2a8aab31f0 100644 --- a/core/src/components/picker-controller/readme.md +++ b/core/src/components/picker-controller/readme.md @@ -7,14 +7,11 @@ ## Methods -#### create() - - -#### dismiss() - - -#### getTop() - +| Method | Description | +| --------- | ----------- | +| `create` | | +| `dismiss` | | +| `getTop` | | ---------------------------------------------- diff --git a/core/src/components/picker/readme.md b/core/src/components/picker/readme.md index 263385eac6..466dee8b6c 100644 --- a/core/src/components/picker/readme.md +++ b/core/src/components/picker/readme.md @@ -9,220 +9,42 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a ## Properties -#### buttons - -PickerButton[] - -Array of buttons to be displayed at the top of the picker. - - -#### columns - -PickerColumn[] - -Array of columns to be displayed in the picker. - - -#### cssClass - -string - -Additional classes to apply for custom CSS. If multiple classes are -provided they should be separated by spaces. - - -#### duration - -number - -Number of milliseconds to wait before dismissing the picker. - - -#### enableBackdropDismiss - -boolean - -If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`. - - -#### enterAnimation - -AnimationBuilder - -Animation to use when the picker is presented. - - -#### keyboardClose - -boolean - -If the keyboard should be able to close the picker. Defaults to true. - - -#### leaveAnimation - -AnimationBuilder - -Animation to use when the picker is dismissed. - - -#### overlayId - -number - - -#### showBackdrop - -boolean - -If true, a backdrop will be displayed behind the picker. Defaults to `true`. - - -#### willAnimate - -boolean - -If true, the picker will animate. Defaults to `true`. - - -## Attributes - -#### buttons - - - -Array of buttons to be displayed at the top of the picker. - - -#### columns - - - -Array of columns to be displayed in the picker. - - -#### css-class - -string - -Additional classes to apply for custom CSS. If multiple classes are -provided they should be separated by spaces. - - -#### duration - -number - -Number of milliseconds to wait before dismissing the picker. - - -#### enable-backdrop-dismiss - -boolean - -If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`. - - -#### enter-animation - - - -Animation to use when the picker is presented. - - -#### keyboard-close - -boolean - -If the keyboard should be able to close the picker. Defaults to true. - - -#### leave-animation - - - -Animation to use when the picker is dismissed. - - -#### overlay-id - -number - - -#### show-backdrop - -boolean - -If true, a backdrop will be displayed behind the picker. Defaults to `true`. - - -#### will-animate - -boolean - -If true, the picker will animate. Defaults to `true`. +| Property | Attribute | Description | Type | +| ----------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------- | +| `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[]` | +| `duration` | `duration` | Number of milliseconds to wait before dismissing the picker. | `number` | +| `enableBackdropDismiss` | `enable-backdrop-dismiss` | If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` | +| `enterAnimation` | -- | Animation to use when the picker is presented. | `AnimationBuilder` | +| `keyboardClose` | `keyboard-close` | If the keyboard should be able to close the picker. Defaults to true. | `boolean` | +| `leaveAnimation` | -- | Animation to use when the picker is dismissed. | `AnimationBuilder` | +| `overlayId` | `overlay-id` | | `number` | +| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the picker. Defaults to `true`. | `boolean` | +| `willAnimate` | `will-animate` | If true, the picker will animate. Defaults to `true`. | `boolean` | ## Events -#### ionPickerDidDismiss - -Emitted after the picker has dismissed. - - -#### ionPickerDidLoad - -Emitted after the picker has loaded. - - -#### ionPickerDidPresent - -Emitted after the picker has presented. - - -#### ionPickerDidUnload - -Emitted after the picker has unloaded. - - -#### ionPickerWillDismiss - -Emitted before the picker has dismissed. - - -#### ionPickerWillPresent - -Emitted before the picker has presented. +| Event | Description | +| ---------------------- | ---------------------------------------- | +| `ionPickerDidDismiss` | Emitted after the picker has dismissed. | +| `ionPickerDidLoad` | Emitted after the picker has loaded. | +| `ionPickerDidPresent` | Emitted after the picker has presented. | +| `ionPickerDidUnload` | Emitted after the picker has unloaded. | +| `ionPickerWillDismiss` | Emitted before the picker has dismissed. | +| `ionPickerWillPresent` | Emitted before the picker has presented. | ## Methods -#### dismiss() - -Dismiss the picker overlay after it has been presented. - - -#### getColumn() - -Returns the column the matches the specified name - - -#### onDidDismiss() - -Returns a promise that resolves when the picker did dismiss. It also accepts a callback -that is called in the same circustances. - - -#### onWillDismiss() - -Returns a promise that resolves when the picker will dismiss. It also accepts a callback -that is called in the same circustances. - - -#### present() - -Present the picker overlay after it has been created. - +| Method | Description | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------- | +| `dismiss` | Dismiss the picker overlay after it has been presented. | +| `getColumn` | Returns the column the matches the specified name | +| `onDidDismiss` | Returns a promise that resolves when the picker did dismiss. It also accepts a callback that is called in the same circustances. | +| `onWillDismiss` | Returns a promise that resolves when the picker will dismiss. It also accepts a callback that is called in the same circustances. | +| `present` | Present the picker overlay after it has been created. | ---------------------------------------------- diff --git a/core/src/components/popover-controller/readme.md b/core/src/components/popover-controller/readme.md index 28ab8ceb78..3d07afe4c6 100644 --- a/core/src/components/popover-controller/readme.md +++ b/core/src/components/popover-controller/readme.md @@ -8,20 +8,11 @@ Popover controllers programmatically control the popover component. Popovers can ## Methods -#### create() - -Create a popover overlay with popover options. - - -#### dismiss() - -Dismiss the open popover overlay. - - -#### getTop() - -Get the most recently opened popover overlay. - +| Method | Description | +| --------- | ---------------------------------------------- | +| `create` | Create a popover overlay with popover options. | +| `dismiss` | Dismiss the open popover overlay. | +| `getTop` | Get the most recently opened popover overlay. | ---------------------------------------------- diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md index 0e8dd5556b..f7441e268b 100644 --- a/core/src/components/popover/readme.md +++ b/core/src/components/popover/readme.md @@ -16,269 +16,45 @@ To present a popover, call the `present` method on a popover instance. In order ## Properties -#### color - -string - -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). - - -#### component - -string - -The component to display inside of the popover. - - -#### componentProps - -ComponentProps - -The data to pass to the popover component. - - -#### cssClass - -string - -Additional classes to apply for custom CSS. If multiple classes are -provided they should be separated by spaces. - - -#### delegate - -FrameworkDelegate - - -#### enableBackdropDismiss - -boolean - -If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. - - -#### enterAnimation - -AnimationBuilder - -Animation to use when the popover is presented. - - -#### event - -any - -The event to pass to the popover animation. - - -#### keyboardClose - -boolean - - -#### leaveAnimation - -AnimationBuilder - -Animation to use when the popover is dismissed. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### overlayId - -number - - -#### showBackdrop - -boolean - -If true, a backdrop will be displayed behind the popover. Defaults to `true`. - - -#### translucent - -boolean - -If true, the popover will be translucent. Defaults to `false`. - - -#### willAnimate - -boolean - -If true, the popover will animate. Defaults to `true`. - - -## Attributes - -#### color - -string - -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). - - -#### component - -string - -The component to display inside of the popover. - - -#### component-props - - - -The data to pass to the popover component. - - -#### css-class - -string - -Additional classes to apply for custom CSS. If multiple classes are -provided they should be separated by spaces. - - -#### delegate - - - - -#### enable-backdrop-dismiss - -boolean - -If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. - - -#### enter-animation - - - -Animation to use when the popover is presented. - - -#### event - -any - -The event to pass to the popover animation. - - -#### keyboard-close - -boolean - - -#### leave-animation - - - -Animation to use when the popover is dismissed. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### overlay-id - -number - - -#### show-backdrop - -boolean - -If true, a backdrop will be displayed behind the popover. Defaults to `true`. - - -#### translucent - -boolean - -If true, the popover will be translucent. Defaults to `false`. - - -#### will-animate - -boolean - -If true, the popover will animate. Defaults to `true`. +| 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). | `Color` | +| `componentProps` | -- | The data to pass to the popover component. | `ComponentProps` | +| `component` | `component` | The component to display inside of the popover. | `ComponentRef` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` | +| `delegate` | -- | | `FrameworkDelegate` | +| `enableBackdropDismiss` | `enable-backdrop-dismiss` | If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` | +| `enterAnimation` | -- | Animation to use when the popover is presented. | `AnimationBuilder` | +| `event` | -- | The event to pass to the popover animation. | `any` | +| `keyboardClose` | `keyboard-close` | | `boolean` | +| `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `AnimationBuilder` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `overlayId` | `overlay-id` | | `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` | +| `willAnimate` | `will-animate` | If true, the popover will animate. Defaults to `true`. | `boolean` | ## Events -#### ionPopoverDidDismiss - -Emitted after the popover has dismissed. - - -#### ionPopoverDidLoad - -Emitted after the popover has loaded. - - -#### ionPopoverDidPresent - -Emitted after the popover has presented. - - -#### ionPopoverDidUnload - -Emitted after the popover has unloaded. - - -#### ionPopoverWillDismiss - -Emitted before the popover has dismissed. - - -#### ionPopoverWillPresent - -Emitted before the popover has presented. +| Event | Description | +| ----------------------- | ----------------------------------------- | +| `ionPopoverDidDismiss` | Emitted after the popover has dismissed. | +| `ionPopoverDidLoad` | Emitted after the popover has loaded. | +| `ionPopoverDidPresent` | Emitted after the popover has presented. | +| `ionPopoverDidUnload` | Emitted after the popover has unloaded. | +| `ionPopoverWillDismiss` | Emitted before the popover has dismissed. | +| `ionPopoverWillPresent` | Emitted before the popover has presented. | ## Methods -#### dismiss() - -Dismiss the popover overlay after it has been presented. - - -#### onDidDismiss() - -Returns a promise that resolves when the popover did dismiss. It also accepts a callback -that is called in the same circustances. - - -#### onWillDismiss() - -Returns a promise that resolves when the popover will dismiss. It also accepts a callback -that is called in the same circustances. - - -#### present() - -Present the popover overlay after it has been created. - +| Method | Description | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- | +| `dismiss` | Dismiss the popover overlay after it has been presented. | +| `onDidDismiss` | Returns a promise that resolves when the popover did dismiss. It also accepts a callback that is called in the same circustances. | +| `onWillDismiss` | Returns a promise that resolves when the popover will dismiss. It also accepts a callback that is called in the same circustances. | +| `present` | Present the popover overlay after it has been created. | ---------------------------------------------- diff --git a/core/src/components/radio-group/readme.md b/core/src/components/radio-group/readme.md index 7af2f5c5d9..5168c73a6d 100644 --- a/core/src/components/radio-group/readme.md +++ b/core/src/components/radio-group/readme.md @@ -13,66 +13,19 @@ radio button within the same group. ## Properties -#### allowEmptySelection - -boolean - - -#### disabled - -boolean - -Indicates that the user cannot interact with the control. - - -#### name - -string - -The name of the control, which is submitted with the form data. - - -#### value - -string - -the value of the radio group. - - -## Attributes - -#### allow-empty-selection - -boolean - - -#### disabled - -boolean - -Indicates that the user cannot interact with the control. - - -#### name - -string - -The name of the control, which is submitted with the form data. - - -#### value - -string - -the value of the radio group. +| Property | Attribute | Description | Type | +| --------------------- | ----------------------- | --------------------------------------------------------------- | --------- | +| `allowEmptySelection` | `allow-empty-selection` | | `boolean` | +| `disabled` | `disabled` | | `boolean` | +| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | +| `value` | `value` | the value of the radio group. | `string` | ## Events -#### ionChange - -Emitted when the value has changed. - +| Event | Description | +| ----------- | ----------------------------------- | +| `ionChange` | Emitted when the value has changed. | ---------------------------------------------- diff --git a/core/src/components/radio/readme.md b/core/src/components/radio/readme.md index 5e373298c0..4ca0e2c2cd 100644 --- a/core/src/components/radio/readme.md +++ b/core/src/components/radio/readme.md @@ -12,129 +12,26 @@ An `ion-radio-group` can be used to group a set of radios. When radios are insid ## Properties -#### checked - -boolean - -If true, the radio is selected. Defaults to `false`. - - -#### color - -string - -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). - - -#### disabled - -boolean - -Indicates that the user cannot interact with the control. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### name - -string - -The name of the control, which is submitted with the form data. - - -#### value - -string - -the value of the radio. - - -## Attributes - -#### checked - -boolean - -If true, the radio is selected. Defaults to `false`. - - -#### color - -string - -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). - - -#### disabled - -boolean - -Indicates that the user cannot interact with the control. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### name - -string - -The name of the control, which is submitted with the form data. - - -#### value - -string - -the value of the radio. +| 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). | `Color` | +| `disabled` | `disabled` | | `boolean` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | +| `value` | `value` | the value of the radio. | `string` | ## Events -#### 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 - -Emitted when the radio button is selected. - - -#### ionStyle - -Emitted when the styles change. - +| Event | 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` | Emitted when the radio button is selected. | +| `ionStyle` | Emitted when the styles change. | ---------------------------------------------- diff --git a/core/src/components/range/readme.md b/core/src/components/range/readme.md index fbbd00d6ab..128923df09 100644 --- a/core/src/components/range/readme.md +++ b/core/src/components/range/readme.md @@ -17,209 +17,30 @@ left or right of the range. ## Properties -#### color - -string - -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). - - -#### debounce - -number - -How long, in milliseconds, to wait to trigger the -`ionChange` event after each change in the range value. Default `0`. - - -#### disabled - -boolean - -Indicates that the user cannot interact with the control. - - -#### dualKnobs - -boolean - -Show two knobs. Defaults to `false`. - - -#### max - -number - -Maximum integer value of the range. Defaults to `100`. - - -#### min - -number - -Minimum integer value of the range. Defaults to `0`. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### name - -string - -The name of the control, which is submitted with the form data. - - -#### pin - -boolean - -If true, a pin with integer value is shown when the knob -is pressed. Defaults to `false`. - - -#### snaps - -boolean - -If true, the knob snaps to tick marks evenly spaced based -on the step property value. Defaults to `false`. - - -#### step - -number - -Specifies the value granularity. Defaults to `1`. - - -#### value - -number - -the value of the range. - - -## Attributes - -#### color - -string - -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). - - -#### debounce - -number - -How long, in milliseconds, to wait to trigger the -`ionChange` event after each change in the range value. Default `0`. - - -#### disabled - -boolean - -Indicates that the user cannot interact with the control. - - -#### dual-knobs - -boolean - -Show two knobs. Defaults to `false`. - - -#### max - -number - -Maximum integer value of the range. Defaults to `100`. - - -#### min - -number - -Minimum integer value of the range. Defaults to `0`. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### name - -string - -The name of the control, which is submitted with the form data. - - -#### pin - -boolean - -If true, a pin with integer value is shown when the knob -is pressed. Defaults to `false`. - - -#### snaps - -boolean - -If true, the knob snaps to tick marks evenly spaced based -on the step property value. Defaults to `false`. - - -#### step - -number - -Specifies the value granularity. Defaults to `1`. - - -#### value - -number - -the value of the range. +| 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). | `Color` | +| `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` | | `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"`. | `Mode` | +| `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. | `RangeValue` | ## Events -#### ionBlur - -Emitted when the range loses focus. - - -#### ionChange - -Emitted when the value property has changed. - - -#### ionFocus - -Emitted when the range has focus. - - -#### ionStyle - -Emitted when the styles change. - +| Event | Description | +| ----------- | -------------------------------------------- | +| `ionBlur` | Emitted when the range loses focus. | +| `ionChange` | Emitted when the value property has changed. | +| `ionFocus` | Emitted when the range has focus. | +| `ionStyle` | Emitted when the styles change. | ---------------------------------------------- diff --git a/core/src/components/refresher-content/readme.md b/core/src/components/refresher-content/readme.md index ccf4e9b0ab..466907cd04 100644 --- a/core/src/components/refresher-content/readme.md +++ b/core/src/components/refresher-content/readme.md @@ -9,63 +9,12 @@ The refresher content contains the text, icon and spinner to display during a pu ## Properties -#### pullingIcon - -string - -A static icon to display when you begin to pull down - - -#### pullingText - -string - -The text you want to display when you begin to pull down - - -#### refreshingSpinner - -string - -An animated SVG spinner that shows when refreshing begins - - -#### refreshingText - -string - -The text you want to display when performing a refresh - - -## Attributes - -#### pulling-icon - -string - -A static icon to display when you begin to pull down - - -#### pulling-text - -string - -The text you want to display when you begin to pull down - - -#### refreshing-spinner - -string - -An animated SVG spinner that shows when refreshing begins - - -#### refreshing-text - -string - -The text you want to display when performing a refresh - +| Property | Attribute | Description | Type | +| ------------------- | -------------------- | --------------------------------------------------------- | -------- | +| `pullingIcon` | `pulling-icon` | A static icon to display when you begin to pull down | `string` | +| `pullingText` | `pulling-text` | The text you want to display when you begin to pull down | `string` | +| `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `string` | +| `refreshingText` | `refreshing-text` | The text you want to display when performing a refresh | `string` | ---------------------------------------------- diff --git a/core/src/components/refresher/readme.md b/core/src/components/refresher/readme.md index 2001fb16c9..c030493509 100644 --- a/core/src/components/refresher/readme.md +++ b/core/src/components/refresher/readme.md @@ -15,132 +15,31 @@ refresher. ## Properties -#### closeDuration - -string - -Time it takes to close the refresher. Defaults to `280ms`. - - -#### disabled - -boolean - -If true, the refresher will be hidden. Defaults to `false`. - - -#### pullMax - -number - -The maximum distance of the pull until the refresher -will automatically go into the `refreshing` state. -Defaults to the result of `pullMin + 60`. - - -#### pullMin - -number - -The minimum distance the user must pull down until the -refresher will go into the `refreshing` state. Defaults to `60`. - - -#### snapbackDuration - -string - -Time it takes the refresher to to snap back to the `refreshing` state. Defaults to `280ms`. - - -## Attributes - -#### close-duration - -string - -Time it takes to close the refresher. Defaults to `280ms`. - - -#### disabled - -boolean - -If true, the refresher will be hidden. Defaults to `false`. - - -#### pull-max - -number - -The maximum distance of the pull until the refresher -will automatically go into the `refreshing` state. -Defaults to the result of `pullMin + 60`. - - -#### pull-min - -number - -The minimum distance the user must pull down until the -refresher will go into the `refreshing` state. Defaults to `60`. - - -#### snapback-duration - -string - -Time it takes the refresher to to snap back to the `refreshing` state. Defaults to `280ms`. +| 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` | ## Events -#### ionPull - -Emitted while the user is pulling down the content and exposing the refresher. - - -#### 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. - - -#### ionStart - -Emitted when the user begins to start pulling down. +| Event | Description | +| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ionPull` | Emitted while the user is pulling down the content and exposing the refresher. | +| `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. | +| `ionStart` | Emitted when the user begins to start pulling down. | ## Methods -#### cancel() - -Changes the refresher's state from `refreshing` to `cancelling`. - - -#### complete() - -Call `complete()` when your async operation has completed. -For example, the `refreshing` state is while the app is performing -an asynchronous operation, such as receiving more data from an -AJAX request. Once the data has been received, you then call this -method to signify that the refreshing has completed and to close -the refresher. This method also changes the refresher's state from -`refreshing` to `completing`. - - -#### getProgress() - -A number representing how far down the user has pulled. -The number `0` represents the user hasn't pulled down at all. The -number `1`, and anything greater than `1`, represents that the user -has pulled far enough down that when they let go then the refresh will -happen. If they let go and the number is less than `1`, then the -refresh will not happen, and the content will return to it's original -position. - +| Method | Description | +| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `cancel` | Changes the refresher's state from `refreshing` to `cancelling`. | +| `complete` | Call `complete()` when your async operation has completed. For example, the `refreshing` state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request. Once the data has been received, you then call this method to signify that the refreshing has completed and to close the refresher. This method also changes the refresher's state from `refreshing` to `completing`. | +| `getProgress` | A number representing how far down the user has pulled. The number `0` represents the user hasn't pulled down at all. The number `1`, and anything greater than `1`, represents that the user has pulled far enough down that when they let go then the refresh will happen. If they let go and the number is less than `1`, then the refresh will not happen, and the content will return to it's original position. | ---------------------------------------------- diff --git a/core/src/components/reorder-group/readme.md b/core/src/components/reorder-group/readme.md index 50212c8a9c..873291dbaa 100644 --- a/core/src/components/reorder-group/readme.md +++ b/core/src/components/reorder-group/readme.md @@ -7,21 +7,9 @@ The reorder group is a wrapper component for items with the `ion-reorder` compon ## Properties -#### disabled - -boolean - -If true, the reorder will be hidden. Defaults to `true`. - - -## Attributes - -#### disabled - -boolean - -If true, the reorder will be hidden. Defaults to `true`. - +| Property | Attribute | Description | Type | +| ---------- | ---------- | -------------------------------------------------------- | --------- | +| `disabled` | `disabled` | If true, the reorder will be hidden. Defaults to `true`. | `boolean` | ---------------------------------------------- diff --git a/core/src/components/reorder/readme.md b/core/src/components/reorder/readme.md index 99ed7b8863..bde4144e1d 100644 --- a/core/src/components/reorder/readme.md +++ b/core/src/components/reorder/readme.md @@ -6,7 +6,6 @@ Reorder is a component that allows an item to be dragged to change its order. It - ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/ripple-effect/readme.md b/core/src/components/ripple-effect/readme.md index bac0e8391a..64ab3c5056 100644 --- a/core/src/components/ripple-effect/readme.md +++ b/core/src/components/ripple-effect/readme.md @@ -8,38 +8,17 @@ The ripple effect component adds the [Material Design ink ripple interaction eff ## Properties -#### parent - -string - - -#### tapClick - -boolean - -If true, the ripple effect will listen to any click events and animate - - -## Attributes - -#### parent - -string - - -#### tap-click - -boolean - -If true, the ripple effect will listen to any click events and animate +| Property | Attribute | Description | Type | +| ---------- | ----------- | ---------------------------------------------------------------------- | ---------------------- | +| `parent` | `parent` | | `HTMLElement | string` | +| `tapClick` | `tap-click` | If true, the ripple effect will listen to any click events and animate | `boolean` | ## Methods -#### addRipple() - -Adds the ripple effect to the parent elment - +| Method | Description | +| ----------- | ------------------------------------------- | +| `addRipple` | Adds the ripple effect to the parent elment | ---------------------------------------------- diff --git a/core/src/components/route-redirect/readme.md b/core/src/components/route-redirect/readme.md index f5872c9c06..8ab6c85cad 100644 --- a/core/src/components/route-redirect/readme.md +++ b/core/src/components/route-redirect/readme.md @@ -71,75 +71,17 @@ Another approach is to modify the value of `to`, since given `to` the value of ` ## Properties -#### from - -string - -A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. -It needs to be an exact match of the navigated URL in order to apply. - -The path specified in this value is always an absolute path, even if the initial `/` slash -is not specified. - - -#### to - -string - -A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL. -When the defined `ion-route-redirect` rule matches, the router will redirect to the path -specified in this property. - -The value of this property is always an absolute path inside the scope of routes defined in -`ion-router` it can't be used with another router or to perfom a redirection to a different domain. - -Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's -a redirect inside the context of ion-router. - -When this property is not specified or his value is `undefined` the whole redirect route is noop, -even if the "from" value matches. - - -## Attributes - -#### from - -string - -A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. -It needs to be an exact match of the navigated URL in order to apply. - -The path specified in this value is always an absolute path, even if the initial `/` slash -is not specified. - - -#### to - -string - -A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL. -When the defined `ion-route-redirect` rule matches, the router will redirect to the path -specified in this property. - -The value of this property is always an absolute path inside the scope of routes defined in -`ion-router` it can't be used with another router or to perfom a redirection to a different domain. - -Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's -a redirect inside the context of ion-router. - -When this property is not specified or his value is `undefined` the whole redirect route is noop, -even if the "from" value matches. +| Property | Attribute | Description | Type | +| -------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| `from` | `from` | A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply. The path specified in this value is always an absolute path, even if the initial `/` slash is not specified. | `string` | +| `to` | `to` | A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL. When the defined `ion-route-redirect` rule matches, the router will redirect to the path specified in this property. The value of this property is always an absolute path inside the scope of routes defined in `ion-router` it can't be used with another router or to perfom a redirection to a different domain. Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's a redirect inside the context of ion-router. When this property is not specified or his value is `undefined` the whole redirect route is noop, even if the "from" value matches. | `string` | ## Events -#### ionRouteRedirectChanged - -Internal event that fires when any value of this rule is added/removed from the DOM, -or any of his public properties changes. - -`ion-router` captures this event in order to update his internal registry of router rules. - +| Event | Description | +| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ionRouteRedirectChanged` | Internal event that fires when any value of this rule is added/removed from the DOM, or any of his public properties changes. `ion-router` captures this event in order to update his internal registry of router rules. | ---------------------------------------------- diff --git a/core/src/components/route/readme.md b/core/src/components/route/readme.md index 0c924c622c..902dc32557 100644 --- a/core/src/components/route/readme.md +++ b/core/src/components/route/readme.md @@ -9,72 +9,18 @@ Router is a component that can take a component, and render it when the Browser ## Properties -#### component - -string - -Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) -when the route matches. - -The value of this property is not always the tagname of the component to load, -in ion-tabs it actually refers to the name of the `ion-tab` to select. - - -#### componentProps - -{[key: string]: any} - -A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed -to the defined component when rendered. - - -#### url - -string - -Relative path that needs to match in order for this route to apply. - -Accepts paths similar to expressjs so that you can define parameters -in the url /foo/:bar where bar would be available in incoming props. - - -## Attributes - -#### component - -string - -Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) -when the route matches. - -The value of this property is not always the tagname of the component to load, -in ion-tabs it actually refers to the name of the `ion-tab` to select. - - -#### component-props - - - -A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed -to the defined component when rendered. - - -#### url - -string - -Relative path that needs to match in order for this route to apply. - -Accepts paths similar to expressjs so that you can define parameters -in the url /foo/:bar where bar would be available in incoming props. +| Property | Attribute | Description | Type | +| ---------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | +| `componentProps` | -- | A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed to the defined component when rendered. | `{[key: string]: any}` | +| `component` | `component` | Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches. The value of this property is not always the tagname of the component to load, in ion-tabs it actually refers to the name of the `ion-tab` to select. | `string` | +| `url` | `url` | Relative path that needs to match in order for this route to apply. Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props. | `string` | ## Events -#### ionRouteDataChanged - -Used internaly by `ion-router` to know when this route did change. - +| Event | Description | +| --------------------- | ------------------------------------------------------------------ | +| `ionRouteDataChanged` | Used internaly by `ion-router` to know when this route did change. | ---------------------------------------------- diff --git a/core/src/components/router-outlet/readme.md b/core/src/components/router-outlet/readme.md index f5cea03c4c..4b62824969 100644 --- a/core/src/components/router-outlet/readme.md +++ b/core/src/components/router-outlet/readme.md @@ -13,66 +13,30 @@ While RouterOutlet has methods for navigating around, it's recommended to use th ## Properties -#### animated - -boolean - - -#### animationBuilder - -AnimationBuilder - - -#### delegate - -FrameworkDelegate - - -## Attributes - -#### animated - -boolean - - -#### animation-builder - - - - -#### delegate - - +| Property | Attribute | Description | Type | +| ------------------ | ---------- | ----------- | ------------------- | +| `animated` | `animated` | | `boolean` | +| `animationBuilder` | -- | | `AnimationBuilder` | +| `delegate` | -- | | `FrameworkDelegate` | ## Events -#### ionNavDidChange - - -#### ionNavWillChange - - -#### ionNavWillLoad +| Event | Description | +| ------------------ | ----------- | +| `ionNavDidChange` | | +| `ionNavWillChange` | | +| `ionNavWillLoad` | | ## Methods -#### commit() - - -#### getRouteId() - -Returns the ID for the current route - - -#### setRoot() - -Set the root component for the given navigation stack - - -#### setRouteId() - +| Method | Description | +| ------------ | ----------------------------------------------------- | +| `commit` | | +| `getRouteId` | Returns the ID for the current route | +| `setRoot` | Set the root component for the given navigation stack | +| `setRouteId` | | ---------------------------------------------- diff --git a/core/src/components/router/readme.md b/core/src/components/router/readme.md index ab019dcd6f..e84892ac25 100644 --- a/core/src/components/router/readme.md +++ b/core/src/components/router/readme.md @@ -20,84 +20,27 @@ If you're using Angular, please see [ion-router-outlet](../router-outlet) instea ## Properties -#### root - -string - -By default `ion-router` will match the routes at the root path ("/"). -That can be changed when - - -#### useHash - -boolean - -The router can work in two "modes": -- With hash: `/index.html#/path/to/page` -- Without hash: `/path/to/page` - -Using one or another might depend in the requirements of your app and/or where it's deployed. - -Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might -requires aditional server-side configuration in order to properly work. - -On the otherside hash-navigation is much easier to deploy, it even works over the file protocol. - -By default, this property is `true`, change to `false` to allow hash-less URLs. - - -## Attributes - -#### root - -string - -By default `ion-router` will match the routes at the root path ("/"). -That can be changed when - - -#### use-hash - -boolean - -The router can work in two "modes": -- With hash: `/index.html#/path/to/page` -- Without hash: `/path/to/page` - -Using one or another might depend in the requirements of your app and/or where it's deployed. - -Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might -requires aditional server-side configuration in order to properly work. - -On the otherside hash-navigation is much easier to deploy, it even works over the file protocol. - -By default, this property is `true`, change to `false` to allow hash-less URLs. +| Property | Attribute | Description | Type | +| --------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | +| `root` | `root` | By default `ion-router` will match the routes at the root path ("/"). That can be changed when | `string` | +| `useHash` | `use-hash` | The router can work in two "modes": - With hash: `/index.html#/path/to/page` - Without hash: `/path/to/page` Using one or another might depend in the requirements of your app and/or where it's deployed. Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might requires aditional server-side configuration in order to properly work. On the otherside hash-navigation is much easier to deploy, it even works over the file protocol. By default, this property is `true`, change to `false` to allow hash-less URLs. | `boolean` | ## Events -#### ionRouteDidChange - -Emitted when the route had changed - - -#### ionRouteWillChange - -Event emitted when the route is about to change +| Event | Description | +| -------------------- | ----------------------------------------------- | +| `ionRouteDidChange` | Emitted when the route had changed | +| `ionRouteWillChange` | Event emitted when the route is about to change | ## Methods -#### navChanged() - - -#### printDebug() - - -#### push() - -Navigate to the specified URL - +| Method | Description | +| ------------ | ----------------------------- | +| `navChanged` | | +| `printDebug` | | +| `push` | Navigate to the specified URL | ---------------------------------------------- diff --git a/core/src/components/row/readme.md b/core/src/components/row/readme.md index f52dc8b380..ff2b443ded 100644 --- a/core/src/components/row/readme.md +++ b/core/src/components/row/readme.md @@ -30,7 +30,6 @@ There are several attributes that can be added to a row to customize this behavi - ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md index c9c1b146f9..00dcabcb08 100644 --- a/core/src/components/searchbar/readme.md +++ b/core/src/components/searchbar/readme.md @@ -11,255 +11,35 @@ A Searchbar should be used instead of an input to search lists. A clear button i ## Properties -#### animated - -boolean - -If true, enable searchbar animation. Default `false`. - - -#### autocomplete - -string - -Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`. - - -#### autocorrect - -string - -Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`. - - -#### cancelButtonIcon - -string - -Set the cancel button icon. Only applies to `md` mode. Defaults to `"md-arrow-back"`. - - -#### cancelButtonText - -string - -Set the the cancel button text. Only applies to `ios` mode. Default: `"Cancel"`. - - -#### clearIcon - -string - -Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`. - - -#### color - -string - -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). - - -#### debounce - -number - -Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `250`. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### placeholder - -string - -Set the input's placeholder. Default `"Search"`. - - -#### searchIcon - -string - -The icon to use as the search icon. Defaults to `"search"`. - - -#### showCancelButton - -boolean - -If true, show the cancel button. Default `false`. - - -#### spellcheck - -boolean - -If true, enable spellcheck on the input. Default `false`. - - -#### type - -string - -Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`. - - -#### value - -string - -the value of the searchbar. - - -## Attributes - -#### animated - -boolean - -If true, enable searchbar animation. Default `false`. - - -#### autocomplete - -string - -Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`. - - -#### autocorrect - -string - -Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`. - - -#### cancel-button-icon - -string - -Set the cancel button icon. Only applies to `md` mode. Defaults to `"md-arrow-back"`. - - -#### cancel-button-text - -string - -Set the the cancel button text. Only applies to `ios` mode. Default: `"Cancel"`. - - -#### clear-icon - -string - -Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`. - - -#### color - -string - -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). - - -#### debounce - -number - -Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `250`. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### placeholder - -string - -Set the input's placeholder. Default `"Search"`. - - -#### search-icon - -string - -The icon to use as the search icon. Defaults to `"search"`. - - -#### show-cancel-button - -boolean - -If true, show the cancel button. Default `false`. - - -#### spellcheck - -boolean - -If true, enable spellcheck on the input. Default `false`. - - -#### type - -string - -Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`. - - -#### value - -string - -the value of the searchbar. +| Property | Attribute | Description | Type | +| ------------------ | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | +| `animated` | `animated` | If true, enable searchbar animation. Default `false`. | `boolean` | +| `autocomplete` | `autocomplete` | Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`. | `string` | +| `autocorrect` | `autocorrect` | Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`. | `string` | +| `cancelButtonIcon` | `cancel-button-icon` | Set the cancel button icon. Only applies to `md` mode. Defaults to `"md-arrow-back"`. | `string` | +| `cancelButtonText` | `cancel-button-text` | Set the the cancel button text. Only applies to `ios` mode. Default: `"Cancel"`. | `string` | +| `clearIcon` | `clear-icon` | Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`. | `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). | `Color` | +| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `250`. | `number` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `placeholder` | `placeholder` | Set the input's placeholder. Default `"Search"`. | `string` | +| `searchIcon` | `search-icon` | The icon to use as the search icon. Defaults to `"search"`. | `string` | +| `showCancelButton` | `show-cancel-button` | If true, show the cancel button. Default `false`. | `boolean` | +| `spellcheck` | `spellcheck` | If true, enable spellcheck on the input. Default `false`. | `boolean` | +| `type` | `type` | Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`. | `string` | +| `value` | `value` | the value of the searchbar. | `string` | ## Events -#### ionBlur - -Emitted when the input loses focus. - - -#### ionCancel - -Emitted when the cancel button is clicked. - - -#### ionChange - -Emitted when the value has changed. - - -#### ionClear - -Emitted when the clear input button is clicked. - - -#### ionFocus - -Emitted when the input has focus. - - -#### ionInput - -Emitted when a keyboard input ocurred. - +| Event | Description | +| ----------- | ----------------------------------------------- | +| `ionBlur` | Emitted when the input loses focus. | +| `ionCancel` | Emitted when the cancel button is clicked. | +| `ionChange` | Emitted when the value has changed. | +| `ionClear` | Emitted when the clear input button is clicked. | +| `ionFocus` | Emitted when the input has focus. | +| `ionInput` | Emitted when a keyboard input ocurred. | ---------------------------------------------- diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md index 9ff5c88027..ea6ef1091a 100644 --- a/core/src/components/segment-button/readme.md +++ b/core/src/components/segment-button/readme.md @@ -8,85 +8,20 @@ Segment buttons are groups of related buttons inside of a [Segment](../../segmen ## Properties -#### checked - -boolean - -If true, the segment button is selected. Defaults to `false`. - - -#### color - -string - -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). - - -#### disabled - -boolean - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### value - -string - -The value of the segment button. - - -## Attributes - -#### checked - -boolean - -If true, the segment button is selected. Defaults to `false`. - - -#### color - -string - -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). - - -#### disabled - -boolean - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### value - -string - -The value of the segment button. +| Property | Attribute | Description | Type | +| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | +| `checked` | `checked` | If true, the segment button 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). | `Color` | +| `disabled` | `disabled` | | `boolean` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `value` | `value` | The value of the segment button. | `string` | ## Events -#### ionSelect - -Emitted when the segment button is clicked. +| Event | Description | +| ----------- | ------------------------------------------- | +| `ionSelect` | Emitted when the segment button is clicked. | ## CSS Custom Properties diff --git a/core/src/components/segment/readme.md b/core/src/components/segment/readme.md index beb1fa35f0..68adb1b2c1 100644 --- a/core/src/components/segment/readme.md +++ b/core/src/components/segment/readme.md @@ -10,72 +10,19 @@ Their functionality is similar to tabs, where selecting one will deselect all ot ## Properties -#### color - -string - -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). - - -#### disabled - -boolean - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### value - -string - -the value of the segment. - - -## Attributes - -#### color - -string - -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). - - -#### disabled - -boolean - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### value - -string - -the value of the segment. +| 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). | `Color` | +| `disabled` | `disabled` | | `boolean` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `value` | `value` | the value of the segment. | `string` | ## Events -#### ionChange - -Emitted when the value property has changed. - +| Event | Description | +| ----------- | -------------------------------------------- | +| `ionChange` | Emitted when the value property has changed. | ---------------------------------------------- diff --git a/core/src/components/select-option/readme.md b/core/src/components/select-option/readme.md index 8227963c88..602b098cba 100644 --- a/core/src/components/select-option/readme.md +++ b/core/src/components/select-option/readme.md @@ -8,61 +8,19 @@ SelectOption is a component that is a child element of Select. For more informat ## Properties -#### disabled - -boolean - -If true, the user cannot interact with the select option. Defaults to `false`. - - -#### selected - -boolean - -If true, the element is selected. - - -#### value - -string - -The text value of the option. - - -## Attributes - -#### disabled - -boolean - -If true, the user cannot interact with the select option. Defaults to `false`. - - -#### selected - -boolean - -If true, the element is selected. - - -#### value - -string - -The text value of the option. +| Property | Attribute | Description | Type | +| ---------- | ---------- | ------------------------------------------------------------------------------ | --------- | +| `disabled` | `disabled` | If true, the user cannot interact with the select option. Defaults to `false`. | `boolean` | +| `selected` | `selected` | If true, the element is selected. | `boolean` | +| `value` | `value` | The text value of the option. | `string` | ## Events -#### ionSelectOptionDidLoad - -Emitted when the select option loads. - - -#### ionSelectOptionDidUnload - -Emitted when the select option unloads. - +| Event | Description | +| -------------------------- | --------------------------------------- | +| `ionSelectOptionDidLoad` | Emitted when the select option loads. | +| `ionSelectOptionDidUnload` | Emitted when the select option unloads. | ---------------------------------------------- diff --git a/core/src/components/select-popover/readme.md b/core/src/components/select-popover/readme.md index ef325290cf..b1a2864cd0 100644 --- a/core/src/components/select-popover/readme.md +++ b/core/src/components/select-popover/readme.md @@ -8,63 +8,12 @@ SelectPopover is an internal component that is used for create the popover inter ## Properties -#### header - -string - -Header text for the popover - - -#### message - -string - -Text for popover body - - -#### options - -SelectPopoverOption[] - -Array of options for the popover - - -#### subHeader - -string - -Subheader text for the popover - - -## Attributes - -#### header - -string - -Header text for the popover - - -#### message - -string - -Text for popover body - - -#### options - - - -Array of options for the popover - - -#### sub-header - -string - -Subheader text for the popover - +| Property | Attribute | Description | Type | +| ----------- | ------------ | -------------------------------- | ----------------------- | +| `header` | `header` | Header text for the popover | `string` | +| `message` | `message` | Text for popover body | `string` | +| `options` | -- | Array of options for the popover | `SelectPopoverOption[]` | +| `subHeader` | `sub-header` | Subheader text for the popover | `string` | ---------------------------------------------- diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md index 0841e2d82e..3fec762c20 100644 --- a/core/src/components/select/readme.md +++ b/core/src/components/select/readme.md @@ -41,182 +41,36 @@ Since select uses the alert, action sheet and popover interfaces, options can be ## Properties -#### cancelText - -string - -The text to display on the cancel button. Default: `Cancel`. - - -#### disabled - -boolean - -If true, the user cannot interact with the select. Defaults to `false`. - - -#### interface - -string - -The interface the select should use: `action-sheet`, `popover` or `alert`. Default: `alert`. - - -#### interfaceOptions - -any - -Any additional options that the `alert`, `action-sheet` or `popover` interface -can take. See the [AlertController API docs](../../alert/AlertController/#create), the -[ActionSheetController API docs](../../action-sheet/ActionSheetController/#create) and the -[PopoverController API docs](../../popover/PopoverController/#create) for the -create options for each interface. - - -#### multiple - -boolean - -If true, the select can accept multiple values. - - -#### name - -string - -The name of the control, which is submitted with the form data. - - -#### okText - -string - -The text to display on the ok button. Default: `OK`. - - -#### placeholder - -string - -The text to display when the select is empty. - - -#### selectedText - -string - -The text to display instead of the selected option's value. - - -#### value - -any - -the value of the select. - - -## Attributes - -#### cancel-text - -string - -The text to display on the cancel button. Default: `Cancel`. - - -#### disabled - -boolean - -If true, the user cannot interact with the select. Defaults to `false`. - - -#### interface - -string - -The interface the select should use: `action-sheet`, `popover` or `alert`. Default: `alert`. - - -#### interface-options - -any - -Any additional options that the `alert`, `action-sheet` or `popover` interface -can take. See the [AlertController API docs](../../alert/AlertController/#create), the -[ActionSheetController API docs](../../action-sheet/ActionSheetController/#create) and the -[PopoverController API docs](../../popover/PopoverController/#create) for the -create options for each interface. - - -#### multiple - -boolean - -If true, the select can accept multiple values. - - -#### name - -string - -The name of the control, which is submitted with the form data. - - -#### ok-text - -string - -The text to display on the ok button. Default: `OK`. - - -#### placeholder - -string - -The text to display when the select is empty. - - -#### selected-text - -string - -The text to display instead of the selected option's value. - - -#### value - -any - -the value of the select. +| Property | Attribute | Description | Type | +| ------------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | +| `cancelText` | `cancel-text` | The text to display on the cancel button. Default: `Cancel`. | `string` | +| `disabled` | `disabled` | If true, the user cannot interact with the select. Defaults to `false`. | `boolean` | +| `interfaceOptions` | -- | Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [AlertController API docs](../../alert/AlertController/#create), the [ActionSheetController API docs](../../action-sheet/ActionSheetController/#create) and the [PopoverController API docs](../../popover/PopoverController/#create) for the create options for each interface. | `any` | +| `interface` | `interface` | The interface the select should use: `action-sheet`, `popover` or `alert`. Default: `alert`. | `SelectInterface` | +| `multiple` | `multiple` | If true, the select can accept multiple values. | `boolean` | +| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | +| `okText` | `ok-text` | The text to display on the ok button. Default: `OK`. | `string` | +| `placeholder` | `placeholder` | The text to display when the select is empty. | `string` | +| `selectedText` | `selected-text` | The text to display instead of the selected option's value. | `string` | +| `value` | -- | the value of the select. | `any` | ## Events -#### ionBlur - -Emitted when the select loses focus. +| Event | Description | +| ----------- | ---------------------------------------- | +| `ionBlur` | Emitted when the select loses focus. | +| `ionCancel` | Emitted when the selection is cancelled. | +| `ionChange` | Emitted when the value has changed. | +| `ionFocus` | Emitted when the select has focus. | +| `ionStyle` | Emitted when the styles change. | -#### ionCancel - -Emitted when the selection is cancelled. - - -#### ionChange - -Emitted when the value has changed. - - -#### ionFocus - -Emitted when the select has focus. - - -#### ionStyle - -Emitted when the styles change. +## Methods +| Method | Description | +| ------ | ----------- | +| `open` | | ---------------------------------------------- diff --git a/core/src/components/show-when/readme.md b/core/src/components/show-when/readme.md index a7330a9769..65f5fe2c54 100644 --- a/core/src/components/show-when/readme.md +++ b/core/src/components/show-when/readme.md @@ -9,99 +9,14 @@ ShowWhen can watch for platform changes, mode changes, css media queries, and de ## Properties -#### mediaQuery - -string - -If the current media query matches this value, the element will show. - - -#### mode - -string - -If the current platform matches the given value, the element will show. -Accepts a comma separated list of modes to match against. - - -#### or - -boolean - -If false, and two or more conditions are set, the element will show when all are true. -If true, and two or more conditions are set, the element will show when at least one is true. - - -#### orientation - -string - -If the current orientation matches this value, the element will show. - - -#### platform - -string - -If the current platform matches the given value, the element will show. -Accepts a comma separated list of platform to match against. - - -#### size - -string - -If the current screen width matches the given size, the element will show. -Uses the build in sizes of xs, sm, md, lg, xl. - - -## Attributes - -#### media-query - -string - -If the current media query matches this value, the element will show. - - -#### mode - -string - -If the current platform matches the given value, the element will show. -Accepts a comma separated list of modes to match against. - - -#### or - -boolean - -If false, and two or more conditions are set, the element will show when all are true. -If true, and two or more conditions are set, the element will show when at least one is true. - - -#### orientation - -string - -If the current orientation matches this value, the element will show. - - -#### platform - -string - -If the current platform matches the given value, the element will show. -Accepts a comma separated list of platform to match against. - - -#### size - -string - -If the current screen width matches the given size, the element will show. -Uses the build in sizes of xs, sm, md, lg, xl. - +| Property | Attribute | Description | Type | +| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | +| `mediaQuery` | `media-query` | If the current media query matches this value, the element will show. | `string` | +| `mode` | `mode` | If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against. | `Mode` | +| `or` | `or` | If false, and two or more conditions are set, the element will show when all are true. If true, and two or more conditions are set, the element will show when at least one is true. | `boolean` | +| `orientation` | `orientation` | If the current orientation matches this value, the element will show. | `string` | +| `platform` | `platform` | If the current platform matches the given value, the element will show. Accepts a comma separated list of platform to match against. | `string` | +| `size` | `size` | If the current screen width matches the given size, the element will show. Uses the build in sizes of xs, sm, md, lg, xl. | `string` | ---------------------------------------------- diff --git a/core/src/components/skeleton-text/readme.md b/core/src/components/skeleton-text/readme.md index 4fb8aad18c..2ce99f92df 100644 --- a/core/src/components/skeleton-text/readme.md +++ b/core/src/components/skeleton-text/readme.md @@ -8,21 +8,9 @@ Skeleton Text is a component for rendering placeholder content. The element will ## Properties -#### width - -string - -Width for the element to render at. Default is 100% - - -## Attributes - -#### width - -string - -Width for the element to render at. Default is 100% - +| Property | Attribute | Description | Type | +| -------- | --------- | --------------------------------------------------- | -------- | +| `width` | `width` | Width for the element to render at. Default is 100% | `string` | ---------------------------------------------- diff --git a/core/src/components/slide/readme.md b/core/src/components/slide/readme.md index d34fbfd4af..e69070696d 100644 --- a/core/src/components/slide/readme.md +++ b/core/src/components/slide/readme.md @@ -10,7 +10,6 @@ See the [Slides API Docs](../slides) for more usage information. - ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/slides/readme.md b/core/src/components/slides/readme.md index 5f2092ddab..86301bfcaa 100644 --- a/core/src/components/slides/readme.md +++ b/core/src/components/slides/readme.md @@ -21,206 +21,53 @@ Licensed under MIT ## Properties -#### options - -any - -Options to pass to the swiper instance. -See http://idangero.us/swiper/api/ for valid options - - -#### pager - -boolean - -If true, show the pagination. Defaults to `false`. - - -#### scrollbar - -boolean - -If true, show the scrollbar. Defaults to `false`. - - -## Attributes - -#### options - -any - -Options to pass to the swiper instance. -See http://idangero.us/swiper/api/ for valid options - - -#### pager - -boolean - -If true, show the pagination. Defaults to `false`. - - -#### scrollbar - -boolean - -If true, show the scrollbar. Defaults to `false`. +| Property | Attribute | Description | Type | +| ----------- | ----------- | -------------------------------------------------------------------------------------------- | --------- | +| `options` | -- | Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options | `any` | +| `pager` | `pager` | If true, show the pagination. Defaults to `false`. | `boolean` | +| `scrollbar` | `scrollbar` | If true, show the scrollbar. Defaults to `false`. | `boolean` | ## Events -#### ionSlideDidChange - -Emitted after the active slide has changed. - - -#### ionSlideDoubleTap - -Emitted when the user double taps on the slide's container. - - -#### ionSlideDrag - -Emitted when the slider is actively being moved. - - -#### ionSlideNextEnd - -Emitted when the next slide has ended. - - -#### ionSlideNextStart - -Emitted when the next slide has started. - - -#### ionSlidePrevEnd - -Emitted when the previous slide has ended. - - -#### ionSlidePrevStart - -Emitted when the previous slide has started. - - -#### ionSlideReachEnd - -Emitted when the slider is at the last slide. - - -#### ionSlideReachStart - -Emitted when the slider is at its initial position. - - -#### ionSlideTap - -Emitted when the user taps/clicks on the slide's container. - - -#### ionSlideTouchEnd - -Emitted when the user releases the touch. - - -#### ionSlideTouchStart - -Emitted when the user first touches the slider. - - -#### ionSlideTransitionEnd - -Emitted when the slide transition has ended. - - -#### ionSlideTransitionStart - -Emitted when the slide transition has started. - - -#### ionSlideWillChange - -Emitted before the active slide has changed. - - -#### ionSlidesDidLoad - -Emitted after Swiper initialization +| Event | Description | +| ------------------------- | ----------------------------------------------------------- | +| `ionSlideDidChange` | Emitted after the active slide has changed. | +| `ionSlideDoubleTap` | Emitted when the user double taps on the slide's container. | +| `ionSlideDrag` | Emitted when the slider is actively being moved. | +| `ionSlideNextEnd` | Emitted when the next slide has ended. | +| `ionSlideNextStart` | Emitted when the next slide has started. | +| `ionSlidePrevEnd` | Emitted when the previous slide has ended. | +| `ionSlidePrevStart` | Emitted when the previous slide has started. | +| `ionSlideReachEnd` | Emitted when the slider is at the last slide. | +| `ionSlideReachStart` | Emitted when the slider is at its initial position. | +| `ionSlideTap` | Emitted when the user taps/clicks on the slide's container. | +| `ionSlideTouchEnd` | Emitted when the user releases the touch. | +| `ionSlideTouchStart` | Emitted when the user first touches the slider. | +| `ionSlideTransitionEnd` | Emitted when the slide transition has ended. | +| `ionSlideTransitionStart` | Emitted when the slide transition has started. | +| `ionSlideWillChange` | Emitted before the active slide has changed. | +| `ionSlidesDidLoad` | Emitted after Swiper initialization | ## Methods -#### getActiveIndex() - -Get the index of the active slide. - - -#### getPreviousIndex() - -Get the index of the previous slide. - - -#### isBeginning() - -Get whether or not the current slide is the first slide. - - -#### isEnd() - -Get whether or not the current slide is the last slide. - - -#### length() - -Get the total number of slides. - - -#### lockSwipeToNext() - -Lock or unlock the ability to slide to the next slides. - - -#### lockSwipeToPrev() - -Lock or unlock the ability to slide to the previous slides. - - -#### lockSwipes() - -Lock or unlock the ability to slide to change slides. - - -#### slideNext() - -Transition to the next slide. - - -#### slidePrev() - -Transition to the previous slide. - - -#### slideTo() - -Transition to the specified slide. - - -#### startAutoplay() - -Start auto play. - - -#### stopAutoplay() - -Stop auto play. - - -#### update() - -Update the underlying slider implementation. Call this if you've added or removed -child slides. - +| Method | Description | +| ------------------ | ----------------------------------------------------------------------------------------------- | +| `getActiveIndex` | Get the index of the active slide. | +| `getPreviousIndex` | Get the index of the previous slide. | +| `isBeginning` | Get whether or not the current slide is the first slide. | +| `isEnd` | Get whether or not the current slide is the last slide. | +| `length` | Get the total number of slides. | +| `lockSwipeToNext` | Lock or unlock the ability to slide to the next slides. | +| `lockSwipeToPrev` | Lock or unlock the ability to slide to the previous slides. | +| `lockSwipes` | Lock or unlock the ability to slide to change slides. | +| `slideNext` | Transition to the next slide. | +| `slidePrev` | Transition to the previous slide. | +| `slideTo` | Transition to the specified slide. | +| `startAutoplay` | Start auto play. | +| `stopAutoplay` | Stop auto play. | +| `update` | Update the underlying slider implementation. Call this if you've added or removed child slides. | ---------------------------------------------- diff --git a/core/src/components/spinner/readme.md b/core/src/components/spinner/readme.md index e550818b21..da25f4b9df 100644 --- a/core/src/components/spinner/readme.md +++ b/core/src/components/spinner/readme.md @@ -11,86 +11,13 @@ The default spinner to use is based on the platform. The default spinner for `io ## Properties -#### color - -string - -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). - - -#### duration - -number - -Duration of the spinner animation in milliseconds. The default varies based on the spinner. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### name - -string - -The name of the SVG spinner to use. If a name is not provided, the platform's default -spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, -`"circles"`, `"crescent"`. - - -#### paused - -boolean - -If true, the spinner's animation will be paused. Defaults to `false`. - - -## Attributes - -#### color - -string - -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). - - -#### duration - -number - -Duration of the spinner animation in milliseconds. The default varies based on the spinner. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### name - -string - -The name of the SVG spinner to use. If a name is not provided, the platform's default -spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, -`"circles"`, `"crescent"`. - - -#### paused - -boolean - -If true, the spinner's animation will be paused. Defaults to `false`. +| 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). | `Color` | +| `duration` | `duration` | Duration of the spinner animation in milliseconds. The default varies based on the spinner. | `number` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `name` | `name` | The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. | `string` | +| `paused` | `paused` | If true, the spinner's animation will be paused. Defaults to `false`. | `boolean` | ## CSS Custom Properties diff --git a/core/src/components/split-pane/readme.md b/core/src/components/split-pane/readme.md index 629b32082a..c8403abc64 100644 --- a/core/src/components/split-pane/readme.md +++ b/core/src/components/split-pane/readme.md @@ -42,61 +42,26 @@ SplitPane also provides some predefined media queries that can be used. ## Properties -#### disabled - -boolean - -If true, the split pane will be hidden. Defaults to `false`. - - -#### when - -any - -When the split-pane should be shown. -Can be a CSS media query expression, or a shortcut expression. -Can also be a boolean expression. - - -## Attributes - -#### disabled - -boolean - -If true, the split pane will be hidden. Defaults to `false`. - - -#### when - -any - -When the split-pane should be shown. -Can be a CSS media query expression, or a shortcut expression. -Can also be a boolean expression. +| Property | Attribute | Description | Type | +| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | +| `disabled` | `disabled` | If true, the split pane will be hidden. Defaults to `false`. | `boolean` | +| `when` | -- | When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression. | `string | boolean` | ## Events -#### ionChange - -Emitted when the split pane is visible. - - -#### ionSplitPaneVisible - -Expression to be called when the split-pane visibility has changed +| Event | Description | +| --------------------- | ------------------------------------------------------------------ | +| `ionChange` | Emitted when the split pane is visible. | +| `ionSplitPaneVisible` | Expression to be called when the split-pane visibility has changed | ## Methods -#### isPane() - - -#### isVisible() - -Returns if the split pane is toggled or not - +| Method | Description | +| ----------- | ------------------------------------------- | +| `isPane` | | +| `isVisible` | Returns if the split pane is toggled or not | ---------------------------------------------- diff --git a/core/src/components/tab-button/readme.md b/core/src/components/tab-button/readme.md index bc9d64413a..8c03793ad8 100644 --- a/core/src/components/tab-button/readme.md +++ b/core/src/components/tab-button/readme.md @@ -8,101 +8,17 @@ TabButton is an internal component for tabs. Please see the [Tab docs](../tab) f ## Properties -#### badge - -string - - -#### badgeColor - -string - - -#### color - -string - - -#### disabled - -boolean - - -#### href - -string - - -#### icon - -string - - -#### label - -string - - -#### mode - -string - - -#### selected - -boolean - -If true, the tab button will be selected. Defaults to `false`. - - -## Attributes - -#### badge - -string - - -#### badge-color - -string - - -#### color - -string - - -#### disabled - -boolean - - -#### href - -string - - -#### icon - -string - - -#### label - -string - - -#### mode - -string - - -#### selected - -boolean - -If true, the tab button will be selected. Defaults to `false`. - +| Property | Attribute | Description | Type | +| ------------ | ------------- | -------------------------------------------------------------- | --------- | +| `badgeColor` | `badge-color` | | `string` | +| `badge` | `badge` | | `string` | +| `color` | `color` | | `Color` | +| `disabled` | `disabled` | | `boolean` | +| `href` | `href` | | `string` | +| `icon` | `icon` | | `string` | +| `label` | `label` | | `string` | +| `mode` | `mode` | | `Mode` | +| `selected` | `selected` | If true, the tab button will be selected. Defaults to `false`. | `boolean` | ---------------------------------------------- diff --git a/core/src/components/tab/readme.md b/core/src/components/tab/readme.md index 1194e0e17c..429baf4841 100644 --- a/core/src/components/tab/readme.md +++ b/core/src/components/tab/readme.md @@ -12,227 +12,38 @@ See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs. ## Properties -#### active - -boolean - -If true, sets the tab as the active tab. - - -#### badge - -string - -The badge for the tab. - - -#### badgeColor - -string - -The badge color for the tab button. - - -#### btnId - -string - -hidden - - -#### component - -string - -The component to display inside of the tab. - - -#### delegate - -FrameworkDelegate - -hidden - - -#### disabled - -boolean - -If true, the user cannot interact with the tab. Defaults to `false`. - - -#### href - -string - -The URL which will be used as the `href` within this tab's `` anchor. - - -#### icon - -string - -The icon for the tab. - - -#### label - -string - -The label of the tab. - - -#### name - -string - -The name of the tab. - - -#### selected - -boolean - -If true, the tab will be selected. Defaults to `false`. - - -#### show - -boolean - -If true, the tab button is visible within the tabbar. Defaults to `true`. - - -#### tabsHideOnSubPages - -boolean - -If true, hide the tabs on child pages. - - -## Attributes - -#### active - -boolean - -If true, sets the tab as the active tab. - - -#### badge - -string - -The badge for the tab. - - -#### badge-color - -string - -The badge color for the tab button. - - -#### btn-id - -string - -hidden - - -#### component - -string - -The component to display inside of the tab. - - -#### delegate - - - -hidden - - -#### disabled - -boolean - -If true, the user cannot interact with the tab. Defaults to `false`. - - -#### href - -string - -The URL which will be used as the `href` within this tab's `` anchor. - - -#### icon - -string - -The icon for the tab. - - -#### label - -string - -The label of the tab. - - -#### name - -string - -The name of the tab. - - -#### selected - -boolean - -If true, the tab will be selected. Defaults to `false`. - - -#### show - -boolean - -If true, the tab button is visible within the tabbar. Defaults to `true`. - - -#### tabs-hide-on-sub-pages - -boolean - -If true, hide the tabs on child pages. +| Property | Attribute | Description | Type | +| -------------------- | ------------------------ | ------------------------------------------------------------------------------------- | ------------------- | +| `active` | `active` | If true, sets the tab as the active tab. | `boolean` | +| `badgeColor` | `badge-color` | The badge color for the tab button. | `Color` | +| `badge` | `badge` | The badge for the tab. | `string` | +| `btnId` | `btn-id` | hidden | `string` | +| `component` | `component` | The component to display inside of the tab. | `ComponentRef` | +| `delegate` | -- | hidden | `FrameworkDelegate` | +| `disabled` | `disabled` | If true, the user cannot interact with the tab. Defaults to `false`. | `boolean` | +| `href` | `href` | The URL which will be used as the `href` within this tab's `` anchor. | `string` | +| `icon` | `icon` | The icon for the tab. | `string` | +| `label` | `label` | The label of the tab. | `string` | +| `name` | `name` | The name of the tab. | `string` | +| `selected` | `selected` | If true, the tab will be selected. Defaults to `false`. | `boolean` | +| `show` | `show` | If true, the tab button is visible within the tabbar. Defaults to `true`. | `boolean` | +| `tabsHideOnSubPages` | `tabs-hide-on-sub-pages` | If true, hide the tabs on child pages. | `boolean` | ## Events -#### ionSelect - -Emitted when the current tab is selected. - - -#### ionTabMutated - -Emitted when the tab props mutates. Used internally. +| Event | Description | +| --------------- | ---------------------------------------------------- | +| `ionSelect` | Emitted when the current tab is selected. | +| `ionTabMutated` | Emitted when the tab props mutates. Used internally. | ## Methods -#### getTabId() - -Get the Id for the tab - - -#### setActive() - -Set the active component for the tab - +| Method | Description | +| ----------- | ------------------------------------ | +| `getTabId` | Get the Id for the tab | +| `setActive` | Set the active component for the tab | ---------------------------------------------- diff --git a/core/src/components/tabbar/readme.md b/core/src/components/tabbar/readme.md index 61053434b9..fc5e0d45fa 100644 --- a/core/src/components/tabbar/readme.md +++ b/core/src/components/tabbar/readme.md @@ -8,118 +8,23 @@ Tabbar is an internal component for Tabs. Please see the [Tabs documentation](.. ## Properties -#### color - -string - - -#### highlight - -boolean - -If true, show the tab highlight bar under the selected tab. - - -#### layout - -string - -Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`. - - -#### mode - -string - - -#### placement - -string - -Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`. - - -#### selectedTab - -HTMLIonTabElement - -The selected tab component - - -#### tabs - -HTMLIonTabElement[] - -The tabs to render - - -#### translucent - -boolean - -If true, the tabbar will be translucent. Defaults to `false`. - - -## Attributes - -#### color - -string - - -#### highlight - -boolean - -If true, show the tab highlight bar under the selected tab. - - -#### layout - -string - -Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`. - - -#### mode - -string - - -#### placement - -string - -Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`. - - -#### selected-tab - - - -The selected tab component - - -#### tabs - - - -The tabs to render - - -#### translucent - -boolean - -If true, the tabbar will be translucent. Defaults to `false`. +| Property | Attribute | Description | Type | +| ------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | +| `color` | `color` | | `Color` | +| `highlight` | `highlight` | If true, show the tab highlight bar under the selected tab. | `boolean` | +| `layout` | `layout` | Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`. | `TabbarLayout` | +| `mode` | `mode` | | `Mode` | +| `placement` | `placement` | Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`. | `TabbarPlacement` | +| `selectedTab` | -- | The selected tab component | `HTMLIonTabElement` | +| `tabs` | -- | The tabs to render | `HTMLIonTabElement[]` | +| `translucent` | `translucent` | If true, the tabbar will be translucent. Defaults to `false`. | `boolean` | ## Events -#### ionTabbarClick - -Emitted when the tab bar is clicked - +| Event | Description | +| ---------------- | ----------------------------------- | +| `ionTabbarClick` | Emitted when the tab bar is clicked | ---------------------------------------------- diff --git a/core/src/components/tabs/readme.md b/core/src/components/tabs/readme.md index 6087e36261..28e3c66a66 100644 --- a/core/src/components/tabs/readme.md +++ b/core/src/components/tabs/readme.md @@ -9,174 +9,37 @@ The component is a container of individual [Tab](../Tab/) components. ## Properties -#### color - -string - -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). - - -#### name - -string - -A unique name for the tabs. - - -#### tabbarHidden - -boolean - -If true, the tabbar will be hidden. Defaults to `false`. - - -#### tabbarHighlight - -boolean - -If true, show the tab highlight bar under the selected tab. - - -#### tabbarLayout - -string - -Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`. - - -#### tabbarPlacement - -string - -Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`. - - -#### translucent - -boolean - -If true, the tabs will be translucent. -Note: In order to scroll content behind the tabs, the `fullscreen` -attribute needs to be set on the content. -Defaults to `false`. - - -#### useRouter - -boolean - -If true, the tabs will use the router and `selectedTab` will not do anything. - - -## Attributes - -#### color - -string - -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). - - -#### name - -string - -A unique name for the tabs. - - -#### tabbar-hidden - -boolean - -If true, the tabbar will be hidden. Defaults to `false`. - - -#### tabbar-highlight - -boolean - -If true, show the tab highlight bar under the selected tab. - - -#### tabbar-layout - -string - -Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`. - - -#### tabbar-placement - -string - -Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`. - - -#### translucent - -boolean - -If true, the tabs will be translucent. -Note: In order to scroll content behind the tabs, the `fullscreen` -attribute needs to be set on the content. -Defaults to `false`. - - -#### use-router - -boolean - -If true, the tabs will use the router and `selectedTab` will not do anything. +| 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). | `Color` | +| `name` | `name` | A unique name for the tabs. | `string` | +| `tabbarHidden` | `tabbar-hidden` | If true, the tabbar will be hidden. Defaults to `false`. | `boolean` | +| `tabbarHighlight` | `tabbar-highlight` | If true, show the tab highlight bar under the selected tab. | `boolean` | +| `tabbarLayout` | `tabbar-layout` | Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`. | `TabbarLayout` | +| `tabbarPlacement` | `tabbar-placement` | Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`. | `TabbarPlacement` | +| `translucent` | `translucent` | If true, the tabs will be translucent. Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. | `boolean` | +| `useRouter` | `use-router` | If true, the tabs will use the router and `selectedTab` will not do anything. | `boolean` | ## Events -#### ionChange - -Emitted when the tab changes. - - -#### ionNavDidChange - -Emitted when the navigation has finished transitioning to a new component. - - -#### ionNavWillChange - -Emitted when the navigation is about to transition to a new component. - - -#### ionNavWillLoad - -Emitted when the navigation will load a component. +| Event | Description | +| ------------------ | -------------------------------------------------------------------------- | +| `ionChange` | Emitted when the tab changes. | +| `ionNavDidChange` | Emitted when the navigation has finished transitioning to a new component. | +| `ionNavWillChange` | Emitted when the navigation is about to transition to a new component. | +| `ionNavWillLoad` | Emitted when the navigation will load a component. | ## Methods -#### getRouteId() - - -#### getSelected() - -Get the currently selected tab - - -#### getTab() - -Get the tab at the given index - - -#### select() - -Index or the Tab instance, of the tab to select. - - -#### setRouteId() - +| Method | Description | +| ------------- | ------------------------------------------------ | +| `getRouteId` | | +| `getSelected` | Get the currently selected tab | +| `getTab` | Get the tab at the given index | +| `select` | Index or the Tab instance, of the tab to select. | +| `setRouteId` | | ---------------------------------------------- diff --git a/core/src/components/text/readme.md b/core/src/components/text/readme.md index 513518c357..05daa53f17 100644 --- a/core/src/components/text/readme.md +++ b/core/src/components/text/readme.md @@ -8,41 +8,10 @@ The text component is a simple component that can be used to style the text colo ## Properties -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -## Attributes - -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - +| 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). | `Color` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | ---------------------------------------------- diff --git a/core/src/components/textarea/readme.md b/core/src/components/textarea/readme.md index e8c1524977..2b8baa6d55 100644 --- a/core/src/components/textarea/readme.md +++ b/core/src/components/textarea/readme.md @@ -13,305 +13,38 @@ The textarea component accepts the [native textarea attributes](https://develope ## Properties -#### autocapitalize - -string - -Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. - - -#### autocomplete - -string - -Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`. - - -#### autofocus - -boolean - -This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. - - -#### clearOnEdit - -boolean - -If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. - - -#### color - -string - -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). - - -#### cols - -number - -The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. - - -#### debounce - -number - -Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`. - - -#### disabled - -boolean - -If true, the user cannot interact with the textarea. Defaults to `false`. - - -#### maxlength - -number - -If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. - - -#### minlength - -number - -If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### name - -string - -The name of the control, which is submitted with the form data. - - -#### placeholder - -string - -Instructional text that shows before the input has a value. - - -#### readonly - -boolean - -If true, the user cannot modify the value. Defaults to `false`. - - -#### required - -boolean - -If true, the user must fill in a value before submitting a form. - - -#### rows - -number - -The number of visible text lines for the control. - - -#### spellcheck - -boolean - -If true, the element will have its spelling and grammar checked. Defaults to `false`. - - -#### value - -string - -The value of the textarea. - - -#### wrap - -string - -Indicates how the control wraps text. Possible values are: `"hard"`, `"soft"`, `"off"`. - - -## Attributes - -#### autocapitalize - -string - -Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. - - -#### autocomplete - -string - -Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`. - - -#### autofocus - -boolean - -This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. - - -#### clear-on-edit - -boolean - -If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. - - -#### color - -string - -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). - - -#### cols - -number - -The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. - - -#### debounce - -number - -Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`. - - -#### disabled - -boolean - -If true, the user cannot interact with the textarea. Defaults to `false`. - - -#### maxlength - -number - -If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. - - -#### minlength - -number - -If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### name - -string - -The name of the control, which is submitted with the form data. - - -#### placeholder - -string - -Instructional text that shows before the input has a value. - - -#### readonly - -boolean - -If true, the user cannot modify the value. Defaults to `false`. - - -#### required - -boolean - -If true, the user must fill in a value before submitting a form. - - -#### rows - -number - -The number of visible text lines for the control. - - -#### spellcheck - -boolean - -If true, the element will have its spelling and grammar checked. Defaults to `false`. - - -#### value - -string - -The value of the textarea. - - -#### wrap - -string - -Indicates how the control wraps text. Possible values are: `"hard"`, `"soft"`, `"off"`. +| Property | Attribute | Description | Type | +| ---------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | +| `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` | +| `autofocus` | `autofocus` | This Boolean attribute lets you specify that a form control should have input focus when the page loads. 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` | +| `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). | `Color` | +| `cols` | `cols` | The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. | `number` | +| `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 textarea. Defaults to `false`. | `boolean` | +| `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` | +| `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` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | +| `placeholder` | `placeholder` | Instructional text that shows before the input has a value. | `string` | +| `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` | +| `rows` | `rows` | The number of visible text lines for the control. | `number` | +| `spellcheck` | `spellcheck` | If true, the element will have its spelling and grammar checked. Defaults to `false`. | `boolean` | +| `value` | `value` | The value of the textarea. | `string` | +| `wrap` | `wrap` | Indicates how the control wraps text. Possible values are: `"hard"`, `"soft"`, `"off"`. | `string` | ## Events -#### ionBlur - -Emitted when the input loses focus. - - -#### ionChange - -Emitted when the input value has changed. - - -#### ionFocus - -Emitted when the input has focus. - - -#### ionInput - -Emitted when a keyboard input ocurred. - - -#### ionStyle - -Emitted when the styles change. +| Event | Description | +| ----------- | ----------------------------------------- | +| `ionBlur` | Emitted when the input loses focus. | +| `ionChange` | Emitted when the input value has changed. | +| `ionFocus` | Emitted when the input has focus. | +| `ionInput` | Emitted when a keyboard input ocurred. | +| `ionStyle` | Emitted when the styles change. | ## CSS Custom Properties diff --git a/core/src/components/title/readme.md b/core/src/components/title/readme.md index 1a0721a76f..5924023feb 100644 --- a/core/src/components/title/readme.md +++ b/core/src/components/title/readme.md @@ -9,41 +9,10 @@ ## Properties -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -## Attributes - -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - +| 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). | `Color` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | ---------------------------------------------- diff --git a/core/src/components/toast-controller/readme.md b/core/src/components/toast-controller/readme.md index 3e22975303..aa6dc9c88f 100644 --- a/core/src/components/toast-controller/readme.md +++ b/core/src/components/toast-controller/readme.md @@ -8,20 +8,11 @@ ToastController is a component use to create Toast components. Please see the do ## Methods -#### create() - -Create a toast overlay with toast options. - - -#### dismiss() - -Dismiss the open toast overlay. - - -#### getTop() - -Get the most recently opened toast overlay. - +| Method | Description | +| --------- | ------------------------------------------- | +| `create` | Create a toast overlay with toast options. | +| `dismiss` | Dismiss the open toast overlay. | +| `getTop` | Get the most recently opened toast overlay. | ---------------------------------------------- diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index 74ce9ab3db..88e3b372f7 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -20,226 +20,42 @@ The toast can be dismissed automatically after a specific amount of time by pass ## Properties -#### closeButtonText - -string - -Text to display in the close button. - - -#### cssClass - -string - -Additional classes to apply for custom CSS. If multiple classes are -provided they should be separated by spaces. - - -#### duration - -number - -How many milliseconds to wait before hiding the toast. By default, it will show -until `dismiss()` is called. - - -#### enterAnimation - -AnimationBuilder - -Animation to use when the toast is presented. - - -#### keyboardClose - -boolean - - -#### leaveAnimation - -AnimationBuilder - -Animation to use when the toast is dismissed. - - -#### message - -string - -Message to be shown in the toast. - - -#### overlayId - -number - - -#### position - -string - -The position of the toast on the screen. Possible values: "top", "middle", "bottom". - - -#### showCloseButton - -boolean - -If true, the close button will be displayed. Defaults to `false`. - - -#### translucent - -boolean - -If true, the toast will be translucent. Defaults to `false`. - - -#### willAnimate - -boolean - -If true, the toast will animate. Defaults to `true`. - - -## Attributes - -#### close-button-text - -string - -Text to display in the close button. - - -#### css-class - -string - -Additional classes to apply for custom CSS. If multiple classes are -provided they should be separated by spaces. - - -#### duration - -number - -How many milliseconds to wait before hiding the toast. By default, it will show -until `dismiss()` is called. - - -#### enter-animation - - - -Animation to use when the toast is presented. - - -#### keyboard-close - -boolean - - -#### leave-animation - - - -Animation to use when the toast is dismissed. - - -#### message - -string - -Message to be shown in the toast. - - -#### overlay-id - -number - - -#### position - -string - -The position of the toast on the screen. Possible values: "top", "middle", "bottom". - - -#### show-close-button - -boolean - -If true, the close button will be displayed. Defaults to `false`. - - -#### translucent - -boolean - -If true, the toast will be translucent. Defaults to `false`. - - -#### will-animate - -boolean - -If true, the toast will animate. Defaults to `true`. +| Property | Attribute | Description | Type | +| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------- | +| `closeButtonText` | `close-button-text` | Text to display in the close button. | `string` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` | +| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | +| `enterAnimation` | -- | Animation to use when the toast is presented. | `AnimationBuilder` | +| `keyboardClose` | `keyboard-close` | | `boolean` | +| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `AnimationBuilder` | +| `message` | `message` | Message to be shown in the toast. | `string` | +| `overlayId` | `overlay-id` | | `number` | +| `position` | `position` | The position of the toast on the screen. Possible values: "top", "middle", "bottom". | `string` | +| `showCloseButton` | `show-close-button` | If true, the close button will be displayed. Defaults to `false`. | `boolean` | +| `translucent` | `translucent` | If true, the toast will be translucent. Defaults to `false`. | `boolean` | +| `willAnimate` | `will-animate` | If true, the toast will animate. Defaults to `true`. | `boolean` | ## Events -#### ionToastDidDismiss - -Emitted after the toast has dismissed. - - -#### ionToastDidLoad - -Emitted after the toast has loaded. - - -#### ionToastDidPresent - -Emitted after the toast has presented. - - -#### ionToastDidUnload - -Emitted after the toast has unloaded. - - -#### ionToastWillDismiss - -Emitted before the toast has dismissed. - - -#### ionToastWillPresent - -Emitted before the toast has presented. +| Event | Description | +| --------------------- | --------------------------------------- | +| `ionToastDidDismiss` | Emitted after the toast has dismissed. | +| `ionToastDidLoad` | Emitted after the toast has loaded. | +| `ionToastDidPresent` | Emitted after the toast has presented. | +| `ionToastDidUnload` | Emitted after the toast has unloaded. | +| `ionToastWillDismiss` | Emitted before the toast has dismissed. | +| `ionToastWillPresent` | Emitted before the toast has presented. | ## Methods -#### dismiss() - -Dismiss the toast overlay after it has been presented. - - -#### onDidDismiss() - -Returns a promise that resolves when the toast did dismiss. It also accepts a callback -that is called in the same circustances. - - -#### onWillDismiss() - -Returns a promise that resolves when the toast will dismiss. It also accepts a callback -that is called in the same circustances. - - -#### present() - -Present the toast overlay after it has been created. +| Method | Description | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `dismiss` | Dismiss the toast overlay after it has been presented. | +| `onDidDismiss` | Returns a promise that resolves when the toast did dismiss. It also accepts a callback that is called in the same circustances. | +| `onWillDismiss` | Returns a promise that resolves when the toast will dismiss. It also accepts a callback that is called in the same circustances. | +| `present` | Present the toast overlay after it has been created. | ## CSS Custom Properties diff --git a/core/src/components/toggle/readme.md b/core/src/components/toggle/readme.md index c87a506478..67e820f069 100644 --- a/core/src/components/toggle/readme.md +++ b/core/src/components/toggle/readme.md @@ -9,118 +9,24 @@ Toggles change the state of a single option. Toggles can be switched on or off b ## Properties -#### checked - -boolean - -If true, the toggle is selected. Defaults to `false`. - - -#### color - -string - -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). - - -#### disabled - -boolean - -Indicates that the user cannot interact with the control. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### name - -string - -The name of the control, which is submitted with the form data. - - -#### value - -string - -the value of the toggle. - - -## Attributes - -#### checked - -boolean - -If true, the toggle is selected. Defaults to `false`. - - -#### color - -string - -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). - - -#### disabled - -boolean - -Indicates that the user cannot interact with the control. - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -#### name - -string - -The name of the control, which is submitted with the form data. - - -#### value - -string - -the value of the toggle. +| Property | Attribute | Description | Type | +| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | +| `checked` | `checked` | If true, the toggle 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). | `Color` | +| `disabled` | `disabled` | | `boolean` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | +| `value` | `value` | the value of the toggle. | `string` | ## Events -#### ionBlur - -Emitted when the toggle loses focus. - - -#### ionChange - -Emitted when the value property has changed. - - -#### ionFocus - -Emitted when the toggle has focus. - - -#### ionStyle - -Emitted when the styles change. +| Event | Description | +| ----------- | -------------------------------------------- | +| `ionBlur` | Emitted when the toggle loses focus. | +| `ionChange` | Emitted when the value property has changed. | +| `ionFocus` | Emitted when the toggle has focus. | +| `ionStyle` | Emitted when the styles change. | ## CSS Custom Properties diff --git a/core/src/components/toolbar/readme.md b/core/src/components/toolbar/readme.md index 26297e52be..4449d1193a 100644 --- a/core/src/components/toolbar/readme.md +++ b/core/src/components/toolbar/readme.md @@ -26,40 +26,10 @@ In `md` mode, the `` will receive a box-shadow on the bottom, and th ## Properties -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. - - -## Attributes - -#### color - -string - -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). - - -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. +| 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). | `Color` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | ## CSS Custom Properties diff --git a/core/src/components/virtual-scroll/readme.md b/core/src/components/virtual-scroll/readme.md index e40cd0bd24..169b9d7a55 100644 --- a/core/src/components/virtual-scroll/readme.md +++ b/core/src/components/virtual-scroll/readme.md @@ -183,232 +183,29 @@ dataset, so please make sure they're performant. ## Properties -#### approxFooterHeight - -number - -The approximate width of each footer template's cell. -This dimension is used to help determine how many cells should -be created when initialized, and to help calculate the height of -the scrollable area. This value can use either `px` or `%` units. -Note that the actual rendered size of each cell comes from the -app's CSS, whereas this approximation is used to help calculate -initial dimensions before the item has been rendered. Default is `100%`. - - -#### approxHeaderHeight - -number - -The approximate height of each header template's cell. -This dimension is used to help determine how many cells should -be created when initialized, and to help calculate the height of -the scrollable area. This height value can only use `px` units. -Note that the actual rendered size of each cell comes from the -app's CSS, whereas this approximation is used to help calculate -initial dimensions before the item has been rendered. Default is `40px`. - - -#### approxItemHeight - -number - -It is important to provide this -if virtual item height will be significantly larger than the default -The approximate height of each virtual item template's cell. -This dimension is used to help determine how many cells should -be created when initialized, and to help calculate the height of -the scrollable area. This height value can only use `px` units. -Note that the actual rendered size of each cell comes from the -app's CSS, whereas this approximation is used to help calculate -initial dimensions before the item has been rendered. Default is -`45`. - - -#### domRender - -DomRenderFn - - -#### footerFn - -HeaderFn - -Section footers and the data used within its given -template can be dynamically created by passing a function to `footerFn`. -The logic within the footer function can decide if the footer template -should be used, and what data to give to the footer template. The function -must return `null` if a footer cell shouldn't be created. - - -#### headerFn - -HeaderFn - -Section headers and the data used within its given -template can be dynamically created by passing a function to `headerFn`. -For example, a large list of contacts usually has dividers between each -letter in the alphabet. App's can provide their own custom `headerFn` -which is called with each record within the dataset. The logic within -the header function can decide if the header template should be used, -and what data to give to the header template. The function must return -`null` if a header cell shouldn't be created. - - -#### itemHeight - -ItemHeightFn - - -#### items - -any[] - -The data that builds the templates within the virtual scroll. -It's important to note that when this data has changed, then the -entire virtual scroll is reset, which is an expensive operation and -should be avoided if possible. - - -#### nodeRender - -ItemRenderFn - - -#### renderFooter - -(item: any, index: number) => JSX.Element - - -#### renderHeader - -(item: any, index: number) => JSX.Element - - -#### renderItem - -(item: any, index: number) => JSX.Element - - -## Attributes - -#### approx-footer-height - -number - -The approximate width of each footer template's cell. -This dimension is used to help determine how many cells should -be created when initialized, and to help calculate the height of -the scrollable area. This value can use either `px` or `%` units. -Note that the actual rendered size of each cell comes from the -app's CSS, whereas this approximation is used to help calculate -initial dimensions before the item has been rendered. Default is `100%`. - - -#### approx-header-height - -number - -The approximate height of each header template's cell. -This dimension is used to help determine how many cells should -be created when initialized, and to help calculate the height of -the scrollable area. This height value can only use `px` units. -Note that the actual rendered size of each cell comes from the -app's CSS, whereas this approximation is used to help calculate -initial dimensions before the item has been rendered. Default is `40px`. - - -#### approx-item-height - -number - -It is important to provide this -if virtual item height will be significantly larger than the default -The approximate height of each virtual item template's cell. -This dimension is used to help determine how many cells should -be created when initialized, and to help calculate the height of -the scrollable area. This height value can only use `px` units. -Note that the actual rendered size of each cell comes from the -app's CSS, whereas this approximation is used to help calculate -initial dimensions before the item has been rendered. Default is -`45`. - - -#### dom-render - - - - -#### footer-fn - - - -Section footers and the data used within its given -template can be dynamically created by passing a function to `footerFn`. -The logic within the footer function can decide if the footer template -should be used, and what data to give to the footer template. The function -must return `null` if a footer cell shouldn't be created. - - -#### header-fn - - - -Section headers and the data used within its given -template can be dynamically created by passing a function to `headerFn`. -For example, a large list of contacts usually has dividers between each -letter in the alphabet. App's can provide their own custom `headerFn` -which is called with each record within the dataset. The logic within -the header function can decide if the header template should be used, -and what data to give to the header template. The function must return -`null` if a header cell shouldn't be created. - - -#### item-height - - - - -#### items - - - -The data that builds the templates within the virtual scroll. -It's important to note that when this data has changed, then the -entire virtual scroll is reset, which is an expensive operation and -should be avoided if possible. - - -#### node-render - - - - -#### render-footer - - - - -#### render-header - - - - -#### render-item - - +| Property | Attribute | Description | Type | +| -------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | +| `approxFooterHeight` | `approx-footer-height` | The approximate width of each footer template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This value can use either `px` or `%` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. Default is `100%`. | `number` | +| `approxHeaderHeight` | `approx-header-height` | The approximate height of each header template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. Default is `40px`. | `number` | +| `approxItemHeight` | `approx-item-height` | It is important to provide this if virtual item height will be significantly larger than the default The approximate height of each virtual item template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. Default is `45`. | `number` | +| `domRender` | -- | | `DomRenderFn` | +| `footerFn` | -- | Section footers and the data used within its given template can be dynamically created by passing a function to `footerFn`. The logic within the footer function can decide if the footer template should be used, and what data to give to the footer template. The function must return `null` if a footer cell shouldn't be created. | `HeaderFn` | +| `headerFn` | -- | Section headers and the data used within its given template can be dynamically created by passing a function to `headerFn`. For example, a large list of contacts usually has dividers between each letter in the alphabet. App's can provide their own custom `headerFn` which is called with each record within the dataset. The logic within the header function can decide if the header template should be used, and what data to give to the header template. The function must return `null` if a header cell shouldn't be created. | `HeaderFn` | +| `itemHeight` | -- | | `ItemHeightFn` | +| `items` | -- | The data that builds the templates within the virtual scroll. It's important to note that when this data has changed, then the entire virtual scroll is reset, which is an expensive operation and should be avoided if possible. | `any[]` | +| `nodeRender` | -- | | `ItemRenderFn` | +| `renderFooter` | -- | | `(item: any, index: number) => JSX.Element` | +| `renderHeader` | -- | | `(item: any, index: number) => JSX.Element` | +| `renderItem` | -- | | `(item: any, index: number) => JSX.Element` | ## Methods -#### markDirty() - - -#### markDirtyTail() - - -#### positionForItem() - +| Method | Description | +| ----------------- | ----------- | +| `markDirty` | | +| `markDirtyTail` | | +| `positionForItem` | | ----------------------------------------------