diff --git a/versioned_docs/version-v5/api/action-sheet.md b/versioned_docs/version-v5/api/action-sheet.md index ab518b39ee6..ef6046a15cc 100644 --- a/versioned_docs/version-v5/api/action-sheet.md +++ b/versioned_docs/version-v5/api/action-sheet.md @@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/action-sheet/props.md'; +import Events from '@ionic-internal/component-api/v5/action-sheet/events.md'; +import Methods from '@ionic-internal/component-api/v5/action-sheet/methods.md'; +import Parts from '@ionic-internal/component-api/v5/action-sheet/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/action-sheet/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/action-sheet/slots.md'; + # ion-action-sheet An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in `ios` mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop. @@ -505,168 +512,24 @@ Developers can also use this component directly in their template: ## Properties -### animated - -| | | -| --------------- | ----------------------------------------- | -| **Description** | If `true`, the action sheet will animate. | -| **Attribute** | `animated` | -| **Type** | `boolean` | -| **Default** | `true` | - -### backdropDismiss - -| | | -| --------------- | --------------------------------------------------------------------------- | -| **Description** | If `true`, the action sheet will be dismissed when the backdrop is clicked. | -| **Attribute** | `backdrop-dismiss` | -| **Type** | `boolean` | -| **Default** | `true` | - -### buttons - -| | | -| --------------- | ----------------------------------------- | -| **Description** | An array of buttons for the action sheet. | -| **Attribute** | `undefined` | -| **Type** | `(string \| ActionSheetButton)[]` | -| **Default** | `[]` | - -### cssClass - -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------- | -| **Description** | Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces. | -| **Attribute** | `css-class` | -| **Type** | `string \| string[] \| undefined` | -| **Default** | `undefined` | - -### enterAnimation - -| | | -| --------------- | ------------------------------------------------------- | -| **Description** | Animation to use when the action sheet is presented. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - -### header - -| | | -| --------------- | --------------------------- | -| **Description** | Title for the action sheet. | -| **Attribute** | `header` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### keyboardClose - -| | | -| --------------- | -------------------------------------------------------------------------------------- | -| **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | -| **Attribute** | `keyboard-close` | -| **Type** | `boolean` | -| **Default** | `true` | - -### leaveAnimation - -| | | -| --------------- | ------------------------------------------------------- | -| **Description** | Animation to use when the action sheet is dismissed. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - -### mode - -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - -### subHeader - -| | | -| --------------- | ------------------------------ | -| **Description** | Subtitle for the action sheet. | -| **Attribute** | `sub-header` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### translucent - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | If `true`, the action sheet will be translucent.
Only applies when the mode is `"ios"` and the device supports
[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | -| **Attribute** | `translucent` | -| **Type** | `boolean` | -| **Default** | `false` | + ## Events -| Name | Description | -| --------------------------- | --------------------------------------- | -| `ionActionSheetDidDismiss` | Emitted after the alert has dismissed. | -| `ionActionSheetDidPresent` | Emitted after the alert has presented. | -| `ionActionSheetWillDismiss` | Emitted before the alert has dismissed. | -| `ionActionSheetWillPresent` | Emitted before the alert has presented. | + ## Methods -### dismiss - -| | | -| --------------- | --------------------------------------------------------------------- | -| **Description** | Dismiss the action sheet overlay after it has been presented. | -| **Signature** | `dismiss(data?: any, role?: string \| undefined) => Promise` | - -### onDidDismiss + -| | | -| --------------- | ------------------------------------------------------------------ | -| **Description** | Returns a promise that resolves when the action sheet did dismiss. | -| **Signature** | `onDidDismiss() => Promise>` | +## CSS Shadow Parts -### onWillDismiss + -| | | -| --------------- | ------------------------------------------------------------------- | -| **Description** | Returns a promise that resolves when the action sheet will dismiss. | -| **Signature** | `onWillDismiss() => Promise>` | - -### present +## CSS Custom Properties -| | | -| --------------- | ----------------------------------------------------------- | -| **Description** | Present the action sheet overlay after it has been created. | -| **Signature** | `present() => Promise` | + -## CSS Custom Properties +## Slots -| Name | Description | -| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | -| `--backdrop-opacity` | Opacity of the backdrop | -| `--background` | Background of the action sheet group | -| `--button-background` | Background of the action sheet button | -| `--button-background-activated` | Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple. | -| `--button-background-activated-opacity` | Opacity of the action sheet button background when pressed | -| `--button-background-focused` | Background of the action sheet button when tabbed to | -| `--button-background-focused-opacity` | Opacity of the action sheet button background when tabbed to | -| `--button-background-hover` | Background of the action sheet button on hover | -| `--button-background-hover-opacity` | Opacity of the action sheet button background on hover | -| `--button-background-selected` | Background of the selected action sheet button | -| `--button-background-selected-opacity` | Opacity of the selected action sheet button background | -| `--button-color` | Color of the action sheet button | -| `--button-color-activated` | Color of the action sheet button when pressed | -| `--button-color-focused` | Color of the action sheet button when tabbed to | -| `--button-color-hover` | Color of the action sheet button on hover | -| `--button-color-selected` | Color of the selected action sheet button | -| `--color` | Color of the action sheet text | -| `--height` | height of the action sheet | -| `--max-height` | Maximum height of the action sheet | -| `--max-width` | Maximum width of the action sheet | -| `--min-height` | Minimum height of the action sheet | -| `--min-width` | Minimum width of the action sheet | -| `--width` | Width of the action sheet | + diff --git a/versioned_docs/version-v5/api/alert.md b/versioned_docs/version-v5/api/alert.md index 793cefa35e8..e61b7110365 100644 --- a/versioned_docs/version-v5/api/alert.md +++ b/versioned_docs/version-v5/api/alert.md @@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/alert/props.md'; +import Events from '@ionic-internal/component-api/v5/alert/events.md'; +import Methods from '@ionic-internal/component-api/v5/alert/methods.md'; +import Parts from '@ionic-internal/component-api/v5/alert/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/alert/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/alert/slots.md'; + # ion-alert An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a `header`, `subHeader` and `message`. @@ -1712,171 +1719,24 @@ Developers can also use this component directly in their template: ## Properties -### animated - -| | | -| --------------- | ---------------------------------- | -| **Description** | If `true`, the alert will animate. | -| **Attribute** | `animated` | -| **Type** | `boolean` | -| **Default** | `true` | - -### backdropDismiss - -| | | -| --------------- | -------------------------------------------------------------------- | -| **Description** | If `true`, the alert will be dismissed when the backdrop is clicked. | -| **Attribute** | `backdrop-dismiss` | -| **Type** | `boolean` | -| **Default** | `true` | - -### buttons - -| | | -| --------------- | ------------------------------------------ | -| **Description** | Array of buttons to be added to the alert. | -| **Attribute** | `undefined` | -| **Type** | `(string \| AlertButton)[]` | -| **Default** | `[]` | - -### cssClass - -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------- | -| **Description** | Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces. | -| **Attribute** | `css-class` | -| **Type** | `string \| string[] \| undefined` | -| **Default** | `undefined` | - -### enterAnimation - -| | | -| --------------- | ------------------------------------------------------- | -| **Description** | Animation to use when the alert is presented. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - -### header - -| | | -| --------------- | ------------------------------------------- | -| **Description** | The main title in the heading of the alert. | -| **Attribute** | `header` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### inputs - -| | | -| --------------- | ------------------------------------ | -| **Description** | Array of input to show in the alert. | -| **Attribute** | `undefined` | -| **Type** | `AlertInput[]` | -| **Default** | `[]` | - -### keyboardClose - -| | | -| --------------- | -------------------------------------------------------------------------------------- | -| **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | -| **Attribute** | `keyboard-close` | -| **Type** | `boolean` | -| **Default** | `true` | - -### leaveAnimation - -| | | -| --------------- | ------------------------------------------------------- | -| **Description** | Animation to use when the alert is dismissed. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - -### message - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | The main message to be displayed in the alert.
`message` can accept either plaintext or HTML as a string.
To display characters normally reserved for HTML, they
must be escaped. For example `` would become
`<Ionic>`

For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | -| **Attribute** | `message` | -| **Type** | `IonicSafeString \| string \| undefined` | -| **Default** | `undefined` | - -### mode - -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - -### subHeader - -| | | -| --------------- | -------------------------------------------------------------------- | -| **Description** | The subtitle in the heading of the alert. Displayed under the title. | -| **Attribute** | `sub-header` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### translucent - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | If `true`, the alert will be translucent.
Only applies when the mode is `"ios"` and the device supports
[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | -| **Attribute** | `translucent` | -| **Type** | `boolean` | -| **Default** | `false` | + ## Events -| Name | Description | -| --------------------- | --------------------------------------- | -| `ionAlertDidDismiss` | Emitted after the alert has dismissed. | -| `ionAlertDidPresent` | Emitted after the alert has presented. | -| `ionAlertWillDismiss` | Emitted before the alert has dismissed. | -| `ionAlertWillPresent` | Emitted before the alert has presented. | + ## Methods -### dismiss - -| | | -| --------------- | --------------------------------------------------------------------- | -| **Description** | Dismiss the alert overlay after it has been presented. | -| **Signature** | `dismiss(data?: any, role?: string \| undefined) => Promise` | - -### onDidDismiss + -| | | -| --------------- | ----------------------------------------------------------- | -| **Description** | Returns a promise that resolves when the alert did dismiss. | -| **Signature** | `onDidDismiss() => Promise>` | +## CSS Shadow Parts -### onWillDismiss + -| | | -| --------------- | ------------------------------------------------------------ | -| **Description** | Returns a promise that resolves when the alert will dismiss. | -| **Signature** | `onWillDismiss() => Promise>` | - -### present +## CSS Custom Properties -| | | -| --------------- | ---------------------------------------------------- | -| **Description** | Present the alert overlay after it has been created. | -| **Signature** | `present() => Promise` | + -## CSS Custom Properties +## Slots -| Name | Description | -| -------------------- | --------------------------- | -| `--backdrop-opacity` | Opacity of the backdrop | -| `--background` | Background of the alert | -| `--height` | Height of the alert | -| `--max-height` | Maximum height of the alert | -| `--max-width` | Maximum width of the alert | -| `--min-height` | Minimum height of the alert | -| `--min-width` | Minimum width of the alert | -| `--width` | Width of the alert | + diff --git a/versioned_docs/version-v5/api/app.md b/versioned_docs/version-v5/api/app.md index 512daea296b..e8c8f780701 100644 --- a/versioned_docs/version-v5/api/app.md +++ b/versioned_docs/version-v5/api/app.md @@ -5,6 +5,37 @@ sidebar_label: 'ion-app' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/app/props.md'; +import Events from '@ionic-internal/component-api/v5/app/events.md'; +import Methods from '@ionic-internal/component-api/v5/app/methods.md'; +import Parts from '@ionic-internal/component-api/v5/app/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/app/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/app/slots.md'; + # ion-app App is a container element for an Ionic application. There should only be one `` element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the `` when they are presented. + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v5/api/avatar.md b/versioned_docs/version-v5/api/avatar.md index b13bd7c9c80..88bc0486560 100644 --- a/versioned_docs/version-v5/api/avatar.md +++ b/versioned_docs/version-v5/api/avatar.md @@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/avatar/props.md'; +import Events from '@ionic-internal/component-api/v5/avatar/events.md'; +import Methods from '@ionic-internal/component-api/v5/avatar/methods.md'; +import Parts from '@ionic-internal/component-api/v5/avatar/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/avatar/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/avatar/slots.md'; + # ion-avatar Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object. @@ -171,8 +178,26 @@ export class AvatarExample { +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + ## CSS Custom Properties -| Name | Description | -| ----------------- | ------------------------------------------- | -| `--border-radius` | Border radius of the avatar and inner image | + + +## Slots + + diff --git a/versioned_docs/version-v5/api/back-button.md b/versioned_docs/version-v5/api/back-button.md index dd34fe6df6e..aaf5aaeb74c 100644 --- a/versioned_docs/version-v5/api/back-button.md +++ b/versioned_docs/version-v5/api/back-button.md @@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/back-button/props.md'; +import Events from '@ionic-internal/component-api/v5/back-button/events.md'; +import Methods from '@ionic-internal/component-api/v5/back-button/methods.md'; +import Parts from '@ionic-internal/component-api/v5/back-button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/back-button/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/back-button/slots.md'; + # ion-back-button The back button navigates back in the app's history upon click. It is smart enough to know what to render based on the mode and when to show based on the navigation stack. @@ -316,119 +323,24 @@ export class BackButtonExample { ## Properties -### color - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### defaultHref - -| | | -| --------------- | ---------------------------------------------------------------- | -| **Description** | The url to navigate back to by default when there is no history. | -| **Attribute** | `default-href` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### disabled - -| | | -| --------------- | ---------------------------------------------------- | -| **Description** | If `true`, the user cannot interact with the button. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - -### icon - -| | | -| --------------- | ----------------------------------------- | -| **Description** | The icon name to use for the back button. | -| **Attribute** | `icon` | -| **Type** | `null \| string \| undefined` | -| **Default** | `undefined` | - -### mode - -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - -### routerAnimation - -| | | -| --------------- | ------------------------------------------------------------------------------------------------ | -| **Description** | When using a router, it specifies the transition animation when navigating to
another page. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - -### text - -| | | -| --------------- | --------------------------------------- | -| **Description** | The text to display in the back button. | -| **Attribute** | `text` | -| **Type** | `null \| string \| undefined` | -| **Default** | `undefined` | - -### type - -| | | -| --------------- | --------------------------------- | -| **Description** | The type of the button. | -| **Attribute** | `type` | -| **Type** | `"button" \| "reset" \| "submit"` | -| **Default** | `'button'` | + + +## Events + + + +## Methods + + ## CSS Shadow Parts -| Name | Description | -| -------- | ------------------------------------------------------------- | -| `icon` | The back button icon (uses ion-icon). | -| `native` | The native HTML button element that wraps all child elements. | -| `text` | The back button text. | + ## CSS Custom Properties -| Name | Description | -| ------------------------------ | -------------------------------------------------------------------------------------------------------------- | -| `--background` | Background of the button | -| `--background-focused` | Background of the button when focused with the tab key | -| `--background-focused-opacity` | Opacity of the button background when focused with the tab key | -| `--background-hover` | Background of the button on hover | -| `--background-hover-opacity` | Opacity of the background on hover | -| `--border-radius` | Border radius of the button | -| `--color` | Text color of the button | -| `--color-focused` | Text color of the button when focused with the tab key | -| `--color-hover` | Text color of the button on hover | -| `--icon-font-size` | Font size of the button icon | -| `--icon-font-weight` | Font weight of the button icon | -| `--icon-margin-bottom` | Bottom margin of the button icon | -| `--icon-margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon | -| `--icon-margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon | -| `--icon-margin-top` | Top margin of the button icon | -| `--icon-padding-bottom` | Bottom padding of the button icon | -| `--icon-padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon | -| `--icon-padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon | -| `--icon-padding-top` | Top padding of the button icon | -| `--margin-bottom` | Bottom margin of the button | -| `--margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button | -| `--margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button | -| `--margin-top` | Top margin of the button | -| `--min-height` | Minimum height of the button | -| `--min-width` | Minimum width of the button | -| `--opacity` | Opacity of the button | -| `--padding-bottom` | Bottom padding of the button | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button | -| `--padding-top` | Top padding of the button | -| `--ripple-color` | Color of the button ripple effect | -| `--transition` | Transition of the button | + + +## Slots + + diff --git a/versioned_docs/version-v5/api/backdrop.md b/versioned_docs/version-v5/api/backdrop.md index e83c7df7c92..a0478deee0b 100644 --- a/versioned_docs/version-v5/api/backdrop.md +++ b/versioned_docs/version-v5/api/backdrop.md @@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/backdrop/props.md'; +import Events from '@ionic-internal/component-api/v5/backdrop/events.md'; +import Methods from '@ionic-internal/component-api/v5/backdrop/methods.md'; +import Parts from '@ionic-internal/component-api/v5/backdrop/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/backdrop/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/backdrop/slots.md'; + # ion-backdrop Backdrops are full screen components that overlay other components. They are useful behind components that transition in on top of other content and can be used to dismiss that component. @@ -192,35 +199,24 @@ export class BackdropExample { ## Properties -### stopPropagation + -| | | -| --------------- | ----------------------------------------------------- | -| **Description** | If `true`, the backdrop will stop propagation on tap. | -| **Attribute** | `stop-propagation` | -| **Type** | `boolean` | -| **Default** | `true` | +## Events -### tappable + -| | | -| --------------- | ------------------------------------------------------------------------------------- | -| **Description** | If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event. | -| **Attribute** | `tappable` | -| **Type** | `boolean` | -| **Default** | `true` | +## Methods -### visible + -| | | -| --------------- | ---------------------------------------- | -| **Description** | If `true`, the backdrop will be visible. | -| **Attribute** | `visible` | -| **Type** | `boolean` | -| **Default** | `true` | +## CSS Shadow Parts -## Events + + +## CSS Custom Properties + + + +## Slots -| Name | Description | -| ---------------- | ------------------------------------ | -| `ionBackdropTap` | Emitted when the backdrop is tapped. | + diff --git a/versioned_docs/version-v5/api/badge.md b/versioned_docs/version-v5/api/badge.md index 1d29c784d3f..0826e4734b1 100644 --- a/versioned_docs/version-v5/api/badge.md +++ b/versioned_docs/version-v5/api/badge.md @@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/badge/props.md'; +import Events from '@ionic-internal/component-api/v5/badge/events.md'; +import Methods from '@ionic-internal/component-api/v5/badge/methods.md'; +import Parts from '@ionic-internal/component-api/v5/badge/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/badge/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/badge/slots.md'; + # ion-badge Badges are inline block elements that usually appear near another element. Typically they contain a number or other characters. They can be used as a notification that there are additional items associated with an element and indicate how many items there are. @@ -186,31 +193,24 @@ export class BadgeExample { ## Properties -### color + + +## Events + + -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | +## Methods -### mode + -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | +## CSS Shadow Parts + + ## CSS Custom Properties -| Name | Description | -| ------------------ | -------------------------------------------------------------------------------------------------------- | -| `--background` | Background of the badge | -| `--color` | Text color of the badge | -| `--padding-bottom` | Bottom padding of the badge | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge | -| `--padding-top` | Top padding of the badge | + + +## Slots + + diff --git a/versioned_docs/version-v5/api/button.md b/versioned_docs/version-v5/api/button.md index 069d29a01da..434a59408d8 100644 --- a/versioned_docs/version-v5/api/button.md +++ b/versioned_docs/version-v5/api/button.md @@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/button/props.md'; +import Events from '@ionic-internal/component-api/v5/button/events.md'; +import Methods from '@ionic-internal/component-api/v5/button/methods.md'; +import Parts from '@ionic-internal/component-api/v5/button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/button/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/button/slots.md'; + # ion-button Buttons provide a clickable element, which can be used in forms, or anywhere that needs simple, standard button functionality. They may display text, icons, or both. Buttons can be styled with several attributes to look a specific way. @@ -367,196 +374,24 @@ export class ButtonExample { ## Properties -### buttonType - -| | | -| --------------- | ------------------- | -| **Description** | The type of button. | -| **Attribute** | `button-type` | -| **Type** | `string` | -| **Default** | `'button'` | - -### color - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### disabled - -| | | -| --------------- | ---------------------------------------------------- | -| **Description** | If `true`, the user cannot interact with the button. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - -### download - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | This attribute instructs browsers to download a URL instead of navigating to
it, so the user will be prompted to save it as a local file. If the attribute
has a value, it is used as the pre-filled file name in the Save prompt
(the user can still change the file name if they want). | -| **Attribute** | `download` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### expand - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------- | -| **Description** | Set to `"block"` for a full-width button or to `"full"` for a full-width button
without left and right borders. | -| **Attribute** | `expand` | -| **Type** | `"block" \| "full" \| undefined` | -| **Default** | `undefined` | - -### fill - -| | | -| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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"`. | -| **Attribute** | `fill` | -| **Type** | `"clear" \| "default" \| "outline" \| "solid" \| undefined` | -| **Default** | `undefined` | - -### href - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Contains a URL or a URL fragment that the hyperlink points to.
If this property is set, an anchor tag will be rendered. | -| **Attribute** | `href` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### mode - -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - -### rel - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Specifies the relationship of the target object to the link object.
The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | -| **Attribute** | `rel` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### routerAnimation - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------- | -| **Description** | When using a router, it specifies the transition animation when navigating to
another page using `href`. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - -### routerDirection - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------- | -| **Description** | When using a router, it specifies the transition direction when navigating to
another page using `href`. | -| **Attribute** | `router-direction` | -| **Type** | `"back" \| "forward" \| "root"` | -| **Default** | `'forward'` | - -### shape - -| | | -| --------------- | ---------------------- | -| **Description** | The button shape. | -| **Attribute** | `shape` | -| **Type** | `"round" \| undefined` | -| **Default** | `undefined` | - -### size - -| | | -| --------------- | ---------------------------------------------- | -| **Description** | The button size. | -| **Attribute** | `size` | -| **Type** | `"default" \| "large" \| "small" \| undefined` | -| **Default** | `undefined` | - -### strong - -| | | -| --------------- | --------------------------------------------------------- | -| **Description** | If `true`, activates a button with a heavier font weight. | -| **Attribute** | `strong` | -| **Type** | `boolean` | -| **Default** | `false` | - -### target - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Specifies where to display the linked URL.
Only applies when an `href` is provided.
Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | -| **Attribute** | `target` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### type - -| | | -| --------------- | --------------------------------- | -| **Description** | The type of the button. | -| **Attribute** | `type` | -| **Type** | `"button" \| "reset" \| "submit"` | -| **Default** | `'button'` | + ## Events -| Name | Description | -| ---------- | ------------------------------------ | -| `ionBlur` | Emitted when the button loses focus. | -| `ionFocus` | Emitted when the button has focus. | + + +## Methods + + ## CSS Shadow Parts -| Name | Description | -| -------- | ----------------------------------------------------------------------- | -| `native` | The native HTML button or anchor element that wraps all child elements. | + ## CSS Custom Properties -| Name | Description | -| -------------------------------- | --------------------------------------------------------------------------------------------------------- | -| `--background` | Background of the button | -| `--background-activated` | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. | -| `--background-activated-opacity` | Opacity of the button when pressed | -| `--background-focused` | Background of the button when focused with the tab key | -| `--background-focused-opacity` | Opacity of the button when focused with the tab key | -| `--background-hover` | Background of the button on hover | -| `--background-hover-opacity` | Opacity of the background on hover | -| `--border-color` | Border color of the button | -| `--border-radius` | Border radius of the button | -| `--border-style` | Border style of the button | -| `--border-width` | Border width of the button | -| `--box-shadow` | Box shadow of the button | -| `--color` | Text color of the button | -| `--color-activated` | Text color of the button when pressed | -| `--color-focused` | Text color of the button when focused with the tab key | -| `--color-hover` | Text color of the button when hover | -| `--opacity` | Opacity of the button | -| `--padding-bottom` | Bottom padding of the button | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button | -| `--padding-top` | Top padding of the button | -| `--ripple-color` | Color of the button ripple effect | -| `--transition` | Transition of the button | + ## Slots -| Name | Description | -| ----------- | --------------------------------------------------------------------------------- | -| `` | Content is placed between the named slots if provided without a slot. | -| `end` | Content is placed to the right of the button text in LTR, and to the left in RTL. | -| `icon-only` | Should be used on an icon in a button that has no text. | -| `start` | Content is placed to the left of the button text in LTR, and to the right in RTL. | + diff --git a/versioned_docs/version-v5/api/buttons.md b/versioned_docs/version-v5/api/buttons.md index fa762f3408a..9a9f5b41ecb 100644 --- a/versioned_docs/version-v5/api/buttons.md +++ b/versioned_docs/version-v5/api/buttons.md @@ -7,6 +7,13 @@ sidebar_label: 'ion-buttons' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/buttons/props.md'; +import Events from '@ionic-internal/component-api/v5/buttons/events.md'; +import Methods from '@ionic-internal/component-api/v5/buttons/methods.md'; +import Parts from '@ionic-internal/component-api/v5/buttons/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/buttons/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/buttons/slots.md'; + # ion-buttons The Buttons component is a container element. Buttons placed in a toolbar should be placed inside of the `` element. @@ -338,11 +345,24 @@ export class ButtonsExample { ## Properties -### collapse + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | If true, buttons will disappear when its
parent toolbar has fully collapsed if the toolbar
is not the first toolbar. If the toolbar is the
first toolbar, the buttons will be hidden and will
only be shown once all toolbars have fully collapsed.

Only applies in `ios` mode with `collapse` set to
`true` on `ion-header`.

Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles) | -| **Attribute** | `collapse` | -| **Type** | `boolean` | -| **Default** | `false` | + diff --git a/versioned_docs/version-v5/api/card-content.md b/versioned_docs/version-v5/api/card-content.md index adb32f2e83c..71234694dfb 100644 --- a/versioned_docs/version-v5/api/card-content.md +++ b/versioned_docs/version-v5/api/card-content.md @@ -5,6 +5,13 @@ sidebar_label: 'ion-card-content' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/card-content/props.md'; +import Events from '@ionic-internal/component-api/v5/card-content/events.md'; +import Methods from '@ionic-internal/component-api/v5/card-content/methods.md'; +import Parts from '@ionic-internal/component-api/v5/card-content/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/card-content/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/card-content/slots.md'; + # ion-card-content `ion-card-content` is child component of `ion-card` that adds some content padding. @@ -12,11 +19,24 @@ It is recommended that any text content for a card should be placed in an `ion-c ## Properties -### mode + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | + diff --git a/versioned_docs/version-v5/api/card-header.md b/versioned_docs/version-v5/api/card-header.md index 7df2c9078a2..631941c5b27 100644 --- a/versioned_docs/version-v5/api/card-header.md +++ b/versioned_docs/version-v5/api/card-header.md @@ -5,35 +5,37 @@ sidebar_label: 'ion-card-header' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/card-header/props.md'; +import Events from '@ionic-internal/component-api/v5/card-header/events.md'; +import Methods from '@ionic-internal/component-api/v5/card-header/methods.md'; +import Parts from '@ionic-internal/component-api/v5/card-header/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/card-header/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/card-header/slots.md'; + # ion-card-header `ion-card-header` is a header component for `ion-card`. ## Properties -### color + + +## Events + + + +## Methods + + + +## CSS Shadow Parts -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | + -### mode +## CSS Custom Properties -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | + -### translucent +## Slots -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | If `true`, the card header will be translucent.
Only applies when the mode is `"ios"` and the device supports
[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | -| **Attribute** | `translucent` | -| **Type** | `boolean` | -| **Default** | `false` | + diff --git a/versioned_docs/version-v5/api/card-subtitle.md b/versioned_docs/version-v5/api/card-subtitle.md index c6c585fd8a0..5e78baa2985 100644 --- a/versioned_docs/version-v5/api/card-subtitle.md +++ b/versioned_docs/version-v5/api/card-subtitle.md @@ -5,32 +5,37 @@ sidebar_label: 'ion-card-subtitle' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/card-subtitle/props.md'; +import Events from '@ionic-internal/component-api/v5/card-subtitle/events.md'; +import Methods from '@ionic-internal/component-api/v5/card-subtitle/methods.md'; +import Parts from '@ionic-internal/component-api/v5/card-subtitle/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/card-subtitle/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/card-subtitle/slots.md'; + # ion-card-subtitle `ion-card-subtitle` is a child component of `ion-card` ## Properties -### color + + +## Events + + -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | +## Methods -### mode + -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | +## CSS Shadow Parts + + ## CSS Custom Properties -| Name | Description | -| --------- | -------------------------- | -| `--color` | Color of the card subtitle | + + +## Slots + + diff --git a/versioned_docs/version-v5/api/card-title.md b/versioned_docs/version-v5/api/card-title.md index d425df949c2..b4b5f8690ae 100644 --- a/versioned_docs/version-v5/api/card-title.md +++ b/versioned_docs/version-v5/api/card-title.md @@ -5,32 +5,37 @@ sidebar_label: 'ion-card-title' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/card-title/props.md'; +import Events from '@ionic-internal/component-api/v5/card-title/events.md'; +import Methods from '@ionic-internal/component-api/v5/card-title/methods.md'; +import Parts from '@ionic-internal/component-api/v5/card-title/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/card-title/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/card-title/slots.md'; + # ion-card-title `ion-card-title` is a child component of `ion-card` ## Properties -### color + + +## Events + + -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | +## Methods -### mode + -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | +## CSS Shadow Parts + + ## CSS Custom Properties -| Name | Description | -| --------- | ----------------------- | -| `--color` | Color of the card title | + + +## Slots + + diff --git a/versioned_docs/version-v5/api/card.md b/versioned_docs/version-v5/api/card.md index 1f612efa174..f0b0dabc2a6 100644 --- a/versioned_docs/version-v5/api/card.md +++ b/versioned_docs/version-v5/api/card.md @@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/card/props.md'; +import Events from '@ionic-internal/component-api/v5/card/events.md'; +import Methods from '@ionic-internal/component-api/v5/card/methods.md'; +import Parts from '@ionic-internal/component-api/v5/card/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/card/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/card/slots.md'; + # ion-card Cards are a standard piece of UI that serves as an entry point to more detailed @@ -346,114 +353,24 @@ export class CardExample { ## Properties -### button - -| | | -| --------------- | ----------------------------------------------------------------------- | -| **Description** | If `true`, a button tag will be rendered and the card will be tappable. | -| **Attribute** | `button` | -| **Type** | `boolean` | -| **Default** | `false` | - -### color - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### disabled - -| | | -| --------------- | -------------------------------------------------- | -| **Description** | If `true`, the user cannot interact with the card. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - -### download - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | This attribute instructs browsers to download a URL instead of navigating to
it, so the user will be prompted to save it as a local file. If the attribute
has a value, it is used as the pre-filled file name in the Save prompt
(the user can still change the file name if they want). | -| **Attribute** | `download` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### href - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Contains a URL or a URL fragment that the hyperlink points to.
If this property is set, an anchor tag will be rendered. | -| **Attribute** | `href` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### mode - -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - -### rel - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Specifies the relationship of the target object to the link object.
The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | -| **Attribute** | `rel` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### routerAnimation - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------- | -| **Description** | When using a router, it specifies the transition animation when navigating to
another page using `href`. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - -### routerDirection - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------- | -| **Description** | When using a router, it specifies the transition direction when navigating to
another page using `href`. | -| **Attribute** | `router-direction` | -| **Type** | `"back" \| "forward" \| "root"` | -| **Default** | `'forward'` | - -### target - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Specifies where to display the linked URL.
Only applies when an `href` is provided.
Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | -| **Attribute** | `target` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### type - -| | | -| --------------- | ------------------------------------------------------------------------------------ | -| **Description** | The type of the button. Only used when an `onclick` or `button` property is present. | -| **Attribute** | `type` | -| **Type** | `"button" \| "reset" \| "submit"` | -| **Default** | `'button'` | + + +## Events + + + +## Methods + + ## CSS Shadow Parts -| Name | Description | -| -------- | ----------------------------------------------------------------------------- | -| `native` | The native HTML button, anchor, or div element that wraps all child elements. | + ## CSS Custom Properties -| Name | Description | -| -------------- | ---------------------- | -| `--background` | Background of the card | -| `--color` | Color of the card | + + +## Slots + + diff --git a/versioned_docs/version-v5/api/checkbox.md b/versioned_docs/version-v5/api/checkbox.md index f99c29c8e33..81c3f9ee622 100644 --- a/versioned_docs/version-v5/api/checkbox.md +++ b/versioned_docs/version-v5/api/checkbox.md @@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/checkbox/props.md'; +import Events from '@ionic-internal/component-api/v5/checkbox/events.md'; +import Methods from '@ionic-internal/component-api/v5/checkbox/methods.md'; +import Parts from '@ionic-internal/component-api/v5/checkbox/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/checkbox/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/checkbox/slots.md'; + # ion-checkbox Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property. @@ -278,96 +285,24 @@ export class CheckboxExample { ## Properties -### checked - -| | | -| --------------- | ------------------------------------ | -| **Description** | If `true`, the checkbox is selected. | -| **Attribute** | `checked` | -| **Type** | `boolean` | -| **Default** | `false` | - -### color - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### disabled - -| | | -| --------------- | ------------------------------------------------------ | -| **Description** | If `true`, the user cannot interact with the checkbox. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - -### indeterminate - -| | | -| --------------- | -------------------------------------------------------------- | -| **Description** | If `true`, the checkbox will visually appear as indeterminate. | -| **Attribute** | `indeterminate` | -| **Type** | `boolean` | -| **Default** | `false` | - -### mode - -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - -### name - -| | | -| --------------- | --------------------------------------------------------------- | -| **Description** | The name of the control, which is submitted with the form data. | -| **Attribute** | `name` | -| **Type** | `string` | -| **Default** | `this.inputId` | - -### value - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | The value of the checkbox does not mean if it's checked or not, use the `checked`
property for that.

The value of a checkbox is analogous to the value of an ``,
it's only used when the checkbox participates in a native `
`. | -| **Attribute** | `value` | -| **Type** | `string` | -| **Default** | `'on'` | + ## Events -| Name | Description | -| ----------- | ---------------------------------------------- | -| `ionBlur` | Emitted when the checkbox loses focus. | -| `ionChange` | Emitted when the checked property has changed. | -| `ionFocus` | Emitted when the checkbox has focus. | + + +## Methods + + ## CSS Shadow Parts -| Name | Description | -| ----------- | ------------------------------------------------- | -| `container` | The container for the checkbox mark. | -| `mark` | The checkmark used to indicate the checked state. | + ## CSS Custom Properties -| Name | Description | -| ------------------------ | ---------------------------------------------- | -| `--background` | Background of the checkbox icon | -| `--background-checked` | Background of the checkbox icon when checked | -| `--border-color` | Border color of the checkbox icon | -| `--border-color-checked` | Border color of the checkbox icon when checked | -| `--border-radius` | Border radius of the checkbox icon | -| `--border-style` | Border style of the checkbox icon | -| `--border-width` | Border width of the checkbox icon | -| `--checkmark-color` | Color of the checkbox checkmark when checked | -| `--checkmark-width` | Stroke width of the checkbox checkmark | -| `--size` | Size of the checkbox icon | -| `--transition` | Transition of the checkbox icon | + + +## Slots + + diff --git a/versioned_docs/version-v5/api/chip.md b/versioned_docs/version-v5/api/chip.md index 00ad72fa2a9..a5c4a754592 100644 --- a/versioned_docs/version-v5/api/chip.md +++ b/versioned_docs/version-v5/api/chip.md @@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/chip/props.md'; +import Events from '@ionic-internal/component-api/v5/chip/events.md'; +import Methods from '@ionic-internal/component-api/v5/chip/methods.md'; +import Parts from '@ionic-internal/component-api/v5/chip/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/chip/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/chip/slots.md'; + # ion-chip Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons. @@ -327,45 +334,24 @@ export class ChipExample { ## Properties -### color - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | + -### disabled +## Events -| | | -| --------------- | -------------------------------------------------- | -| **Description** | If `true`, the user cannot interact with the chip. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | + -### mode +## Methods -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | + -### outline +## CSS Shadow Parts -| | | -| --------------- | -------------------------------- | -| **Description** | Display an outline style button. | -| **Attribute** | `outline` | -| **Type** | `boolean` | -| **Default** | `false` | + ## CSS Custom Properties -| Name | Description | -| -------------- | ---------------------- | -| `--background` | Background of the chip | -| `--color` | Color of the chip | + + +## Slots + + diff --git a/versioned_docs/version-v5/api/col.md b/versioned_docs/version-v5/api/col.md index cba07ac2f45..5885753ccb1 100644 --- a/versioned_docs/version-v5/api/col.md +++ b/versioned_docs/version-v5/api/col.md @@ -5,6 +5,13 @@ sidebar_label: 'ion-col' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/col/props.md'; +import Events from '@ionic-internal/component-api/v5/col/events.md'; +import Methods from '@ionic-internal/component-api/v5/col/methods.md'; +import Parts from '@ionic-internal/component-api/v5/col/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/col/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/col/slots.md'; + # ion-col Columns are cellular components of the [grid](grid.md) system and go inside of a [row](row.md). @@ -18,230 +25,24 @@ By default, columns will stretch to fill the entire height of the row. Columns a ## Properties -### offset - -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------- | -| **Description** | The amount to offset the column, in terms of how many columns it should shift to the end
of the total available. | -| **Attribute** | `offset` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### offsetLg - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | The amount to offset the column for lg screens, in terms of how many columns it should shift
to the end of the total available. | -| **Attribute** | `offset-lg` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### offsetMd - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | The amount to offset the column for md screens, in terms of how many columns it should shift
to the end of the total available. | -| **Attribute** | `offset-md` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### offsetSm - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | The amount to offset the column for sm screens, in terms of how many columns it should shift
to the end of the total available. | -| **Attribute** | `offset-sm` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### offsetXl - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | The amount to offset the column for xl screens, in terms of how many columns it should shift
to the end of the total available. | -| **Attribute** | `offset-xl` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### offsetXs - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | The amount to offset the column for xs screens, in terms of how many columns it should shift
to the end of the total available. | -| **Attribute** | `offset-xs` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### pull - -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------- | -| **Description** | The amount to pull the column, in terms of how many columns it should shift to the start of
the total available. | -| **Attribute** | `pull` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### pullLg - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | The amount to pull the column for lg screens, in terms of how many columns it should shift
to the start of the total available. | -| **Attribute** | `pull-lg` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### pullMd - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | The amount to pull the column for md screens, in terms of how many columns it should shift
to the start of the total available. | -| **Attribute** | `pull-md` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### pullSm - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | The amount to pull the column for sm screens, in terms of how many columns it should shift
to the start of the total available. | -| **Attribute** | `pull-sm` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### pullXl - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | The amount to pull the column for xl screens, in terms of how many columns it should shift
to the start of the total available. | -| **Attribute** | `pull-xl` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### pullXs - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | The amount to pull the column for xs screens, in terms of how many columns it should shift
to the start of the total available. | -| **Attribute** | `pull-xs` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### push - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------- | -| **Description** | The amount to push the column, in terms of how many columns it should shift to the end
of the total available. | -| **Attribute** | `push` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### pushLg - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | The amount to push the column for lg screens, in terms of how many columns it should shift
to the end of the total available. | -| **Attribute** | `push-lg` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### pushMd - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | The amount to push the column for md screens, in terms of how many columns it should shift
to the end of the total available. | -| **Attribute** | `push-md` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### pushSm - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | The amount to push the column for sm screens, in terms of how many columns it should shift
to the end of the total available. | -| **Attribute** | `push-sm` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### pushXl - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | The amount to push the column for xl screens, in terms of how many columns it should shift
to the end of the total available. | -| **Attribute** | `push-xl` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### pushXs - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | The amount to push the column for xs screens, in terms of how many columns it should shift
to the end of the total available. | -| **Attribute** | `push-xs` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### size - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `size` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### sizeLg - -| | | -| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `size-lg` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### sizeMd - -| | | -| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `size-md` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### sizeSm - -| | | -| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `size-sm` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### sizeXl - -| | | -| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `size-xl` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### sizeXs - -| | | -| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `size-xs` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + ## CSS Custom Properties -| Name | Description | -| ------------------------------ | ------------------------------------------- | -| `--ion-grid-column-padding` | Padding for the Column | -| `--ion-grid-column-padding-lg` | Padding for the Column on lg screens and up | -| `--ion-grid-column-padding-md` | Padding for the Column on md screens and up | -| `--ion-grid-column-padding-sm` | Padding for the Column on sm screens and up | -| `--ion-grid-column-padding-xl` | Padding for the Column on xl screens and up | -| `--ion-grid-column-padding-xs` | Padding for the Column on xs screens and up | -| `--ion-grid-columns` | The number of total Columns in the Grid | + + +## Slots + + diff --git a/versioned_docs/version-v5/api/content.md b/versioned_docs/version-v5/api/content.md index ac74bb56cc9..733c38c252c 100644 --- a/versioned_docs/version-v5/api/content.md +++ b/versioned_docs/version-v5/api/content.md @@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/content/props.md'; +import Events from '@ionic-internal/component-api/v5/content/events.md'; +import Methods from '@ionic-internal/component-api/v5/content/methods.md'; +import Parts from '@ionic-internal/component-api/v5/content/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/content/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/content/slots.md'; + # ion-content The content component provides an easy to use content area with some useful methods @@ -160,130 +167,24 @@ export class ContentExample { ## Properties -### color - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### forceOverscroll - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `force-overscroll` | -| **Type** | `boolean \| undefined` | -| **Default** | `undefined` | - -### fullscreen - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | If `true`, the content will scroll behind the headers
and footers. This effect can easily be seen by setting the toolbar
to transparent. | -| **Attribute** | `fullscreen` | -| **Type** | `boolean` | -| **Default** | `false` | - -### scrollEvents - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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`. | -| **Attribute** | `scroll-events` | -| **Type** | `boolean` | -| **Default** | `false` | - -### scrollX - -| | | -| --------------- | --------------------------------------------------------------------------------------- | -| **Description** | If you want to enable the content scrolling in the X axis, set this property to `true`. | -| **Attribute** | `scroll-x` | -| **Type** | `boolean` | -| **Default** | `false` | - -### scrollY - -| | | -| --------------- | ----------------------------------------------------------------------------------------- | -| **Description** | If you want to disable the content scrolling in the Y axis, set this property to `false`. | -| **Attribute** | `scroll-y` | -| **Type** | `boolean` | -| **Default** | `true` | + ## Events -| Name | 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 - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Get the element where the actual scrolling takes place.
This element can be used to subscribe to `scroll` events or manually modify
`scrollTop`. However, it's recommended to use the API provided by `ion-content`:

i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events
and `scrollToPoint()` to scroll the content into a certain point. | -| **Signature** | `getScrollElement() => Promise` | - -### scrollByPoint - -| | | -| --------------- | ------------------------------------------------------------------------ | -| **Description** | Scroll by a specified X/Y distance in the component. | -| **Signature** | `scrollByPoint(x: number, y: number, duration: number) => Promise` | - -### scrollToBottom - -| | | -| --------------- | ---------------------------------------------------- | -| **Description** | Scroll to the bottom of the component. | -| **Signature** | `scrollToBottom(duration?: number) => Promise` | - -### scrollToPoint - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------- | -| **Description** | Scroll to a specified X/Y location in the component. | -| **Signature** | `scrollToPoint(x: number \| undefined \| null, y: number \| undefined \| null, duration?: number) => Promise` | - -### scrollToTop - -| | | -| --------------- | ------------------------------------------------- | -| **Description** | Scroll to the top of the component. | -| **Signature** | `scrollToTop(duration?: number) => Promise` | + ## CSS Shadow Parts -| Name | Description | -| ------------ | ---------------------------------------- | -| `background` | The background of the content. | -| `scroll` | The scrollable container of the content. | + ## CSS Custom Properties -| Name | Description | -| ------------------- | ---------------------------------------------------------------------------------------------------------- | -| `--background` | Background of the content | -| `--color` | Color of the content | -| `--keyboard-offset` | Keyboard offset of the content | -| `--offset-bottom` | Offset bottom of the content | -| `--offset-top` | Offset top of the content | -| `--padding-bottom` | Bottom padding of the content | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content | -| `--padding-top` | Top padding of the content | + ## Slots -| Name | Description | -| ------- | -------------------------------------------------------------------- | -| `` | Content is placed in the scrollable area if provided without a slot. | -| `fixed` | Should be used for fixed content that should not scroll. | + diff --git a/versioned_docs/version-v5/api/datetime.md b/versioned_docs/version-v5/api/datetime.md index 5e493d5d540..13596f1b72e 100644 --- a/versioned_docs/version-v5/api/datetime.md +++ b/versioned_docs/version-v5/api/datetime.md @@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/datetime/props.md'; +import Events from '@ionic-internal/component-api/v5/datetime/events.md'; +import Methods from '@ionic-internal/component-api/v5/datetime/methods.md'; +import Parts from '@ionic-internal/component-api/v5/datetime/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/datetime/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/datetime/slots.md'; + # ion-datetime Datetimes present a picker interface from the bottom of a page, making it easy for @@ -987,244 +994,24 @@ export class DatetimeExample { ## Properties -### cancelText - -| | | -| --------------- | -------------------------------------------------- | -| **Description** | The text to display on the picker's cancel button. | -| **Attribute** | `cancel-text` | -| **Type** | `string` | -| **Default** | `'Cancel'` | - -### dayNames - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------ | -| **Description** | Full day of the week names. This can be used to provide
locale names for each day in the week. Defaults to English. | -| **Attribute** | `day-names` | -| **Type** | `string \| string[] \| undefined` | -| **Default** | `undefined` | - -### dayShortNames - -| | | -| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Short abbreviated day of the week names. This can be used to provide
locale names for each day in the week. Defaults to English.
Defaults to: `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']` | -| **Attribute** | `day-short-names` | -| **Type** | `string \| string[] \| undefined` | -| **Default** | `undefined` | - -### dayValues - -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `day-values` | -| **Type** | `number \| number[] \| string \| undefined` | -| **Default** | `undefined` | - -### disabled - -| | | -| --------------- | ------------------------------------------------------ | -| **Description** | If `true`, the user cannot interact with the datetime. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - -### displayFormat - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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`. | -| **Attribute** | `display-format` | -| **Type** | `string` | -| **Default** | `'MMM D, YYYY'` | - -### displayTimezone - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | The timezone to use for display purposes only. See
[Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString)
for a list of supported timezones. If no value is provided, the
component will default to displaying times in the user's local timezone. | -| **Attribute** | `display-timezone` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### doneText - -| | | -| --------------- | -------------------------------------------------- | -| **Description** | The text to display on the picker's "Done" button. | -| **Attribute** | `done-text` | -| **Type** | `string` | -| **Default** | `'Done'` | - -### hourValues - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | 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. | -| **Attribute** | `hour-values` | -| **Type** | `number \| number[] \| string \| undefined` | -| **Default** | `undefined` | - -### max - -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `max` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### min - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | 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. | -| **Attribute** | `min` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### minuteValues - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Values used to create the list of selectable minutes. By default
the minutes range from `0` to `59`. However, to control exactly which minutes to display,
the `minuteValues` input can take a number, an array of numbers, or a string of comma
separated numbers. For example, if the minute selections should only be every 15 minutes,
then this input value would be `minuteValues="0,15,30,45"`. | -| **Attribute** | `minute-values` | -| **Type** | `number \| number[] \| string \| undefined` | -| **Default** | `undefined` | - -### mode - -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - -### monthNames - -| | | -| --------------- | --------------------------------------------------------------------------------------------------------- | -| **Description** | Full names for each month name. This can be used to provide
locale month names. Defaults to English. | -| **Attribute** | `month-names` | -| **Type** | `string \| string[] \| undefined` | -| **Default** | `undefined` | - -### monthShortNames - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------- | -| **Description** | Short abbreviated names for each month name. This can be used to provide
locale month names. Defaults to English. | -| **Attribute** | `month-short-names` | -| **Type** | `string \| string[] \| undefined` | -| **Default** | `undefined` | - -### monthValues - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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`. | -| **Attribute** | `month-values` | -| **Type** | `number \| number[] \| string \| undefined` | -| **Default** | `undefined` | - -### name - -| | | -| --------------- | --------------------------------------------------------------- | -| **Description** | The name of the control, which is submitted with the form data. | -| **Attribute** | `name` | -| **Type** | `string` | -| **Default** | `this.inputId` | - -### pickerFormat - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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`. | -| **Attribute** | `picker-format` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### pickerOptions - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Any additional options that the picker interface can accept.
See the [Picker API docs](picker.md) for the picker options. | -| **Attribute** | `undefined` | -| **Type** | `undefined \| { columns?: PickerColumn[] \| undefined; buttons?: PickerButton[] \| undefined; cssClass?: string \| string[] \| undefined; showBackdrop?: boolean \| undefined; backdropDismiss?: boolean \| undefined; animated?: boolean \| undefined; mode?: Mode \| undefined; keyboardClose?: boolean \| undefined; id?: string \| undefined; enterAnimation?: AnimationBuilder \| undefined; leaveAnimation?: AnimationBuilder \| undefined; }` | -| **Default** | `undefined` | - -### placeholder - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------- | -| **Description** | The text to display when there's no date selected yet.
Using lowercase to match the input attribute | -| **Attribute** | `placeholder` | -| **Type** | `null \| string \| undefined` | -| **Default** | `undefined` | - -### readonly - -| | | -| --------------- | -------------------------------------------------------------- | -| **Description** | If `true`, the datetime appears normal but is not interactive. | -| **Attribute** | `readonly` | -| **Type** | `boolean` | -| **Default** | `false` | - -### value - -| | | -| --------------- | -------------------------------------------------------------- | -| **Description** | The value of the datetime as a valid ISO 8601 datetime string. | -| **Attribute** | `value` | -| **Type** | `null \| string \| undefined` | -| **Default** | `undefined` | - -### yearValues - -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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"`. | -| **Attribute** | `year-values` | -| **Type** | `number \| number[] \| string \| undefined` | -| **Default** | `undefined` | + ## Events -| Name | Description | -| ----------- | --------------------------------------------------- | -| `ionBlur` | Emitted when the datetime loses focus. | -| `ionCancel` | Emitted when the datetime selection was cancelled. | -| `ionChange` | Emitted when the value (selected date) has changed. | -| `ionFocus` | Emitted when the datetime has focus. | + ## Methods -### open - -| | | -| --------------- | --------------------------- | -| **Description** | Opens the datetime overlay. | -| **Signature** | `open() => Promise` | + ## CSS Shadow Parts -| Name | Description | -| ------------- | -------------------------------- | -| `placeholder` | The placeholder of the datetime. | -| `text` | The value of the datetime. | + ## CSS Custom Properties -| Name | Description | -| --------------------- | ----------------------------------------------------------------------------------------------------------- | -| `--padding-bottom` | Bottom padding of the datetime | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the datetime | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the datetime | -| `--padding-top` | Top padding of the datetime | -| `--placeholder-color` | Color of the datetime placeholder | + + +## Slots + + diff --git a/versioned_docs/version-v5/api/fab-button.md b/versioned_docs/version-v5/api/fab-button.md index d746232444b..3f94f28ed9a 100644 --- a/versioned_docs/version-v5/api/fab-button.md +++ b/versioned_docs/version-v5/api/fab-button.md @@ -7,6 +7,13 @@ sidebar_label: 'ion-fab-button' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/fab-button/props.md'; +import Events from '@ionic-internal/component-api/v5/fab-button/events.md'; +import Methods from '@ionic-internal/component-api/v5/fab-button/methods.md'; +import Parts from '@ionic-internal/component-api/v5/fab-button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/fab-button/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/fab-button/slots.md'; + # ion-fab-button Floating Action Buttons (FABs) represent the primary action in an application. By default, they have a circular shape. When pressed, the button may open more related actions. As the name suggests, FABs generally float over the content in a fixed position. This is not achieved exclusively by using an `FAB`. They need to be wrapped with an `` component in order to be fixed over the content. @@ -179,179 +186,24 @@ export class FabButtonExample { ## Properties -### activated - -| | | -| --------------- | ---------------------------------------------------- | -| **Description** | If `true`, the fab button will be show a close icon. | -| **Attribute** | `activated` | -| **Type** | `boolean` | -| **Default** | `false` | - -### closeIcon - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | The icon name to use for the close icon. This will appear when the fab button
is pressed. Only applies if it is the main button inside of a fab containing a
fab list. | -| **Attribute** | `close-icon` | -| **Type** | `string` | -| **Default** | `'close'` | - -### color - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### disabled - -| | | -| --------------- | -------------------------------------------------------- | -| **Description** | If `true`, the user cannot interact with the fab button. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - -### download - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | This attribute instructs browsers to download a URL instead of navigating to
it, so the user will be prompted to save it as a local file. If the attribute
has a value, it is used as the pre-filled file name in the Save prompt
(the user can still change the file name if they want). | -| **Attribute** | `download` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### href - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Contains a URL or a URL fragment that the hyperlink points to.
If this property is set, an anchor tag will be rendered. | -| **Attribute** | `href` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### mode - -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - -### rel - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Specifies the relationship of the target object to the link object.
The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | -| **Attribute** | `rel` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### routerAnimation - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------- | -| **Description** | When using a router, it specifies the transition animation when navigating to
another page using `href`. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - -### routerDirection - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------- | -| **Description** | When using a router, it specifies the transition direction when navigating to
another page using `href`. | -| **Attribute** | `router-direction` | -| **Type** | `"back" \| "forward" \| "root"` | -| **Default** | `'forward'` | - -### show - -| | | -| --------------- | ------------------------------------------------------- | -| **Description** | If `true`, the fab button will show when in a fab-list. | -| **Attribute** | `show` | -| **Type** | `boolean` | -| **Default** | `false` | - -### size - -| | | -| --------------- | ------------------------------------------------------------------------------- | -| **Description** | The size of the button. Set this to `small` in order to have a mini fab button. | -| **Attribute** | `size` | -| **Type** | `"small" \| undefined` | -| **Default** | `undefined` | - -### target - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Specifies where to display the linked URL.
Only applies when an `href` is provided.
Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | -| **Attribute** | `target` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### translucent - -| | | -| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | If `true`, the fab button will be translucent.
Only applies when the mode is `"ios"` and the device supports
[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | -| **Attribute** | `translucent` | -| **Type** | `boolean` | -| **Default** | `false` | - -### type - -| | | -| --------------- | --------------------------------- | -| **Description** | The type of the button. | -| **Attribute** | `type` | -| **Type** | `"button" \| "reset" \| "submit"` | -| **Default** | `'button'` | + ## Events -| Name | Description | -| ---------- | ------------------------------------ | -| `ionBlur` | Emitted when the button loses focus. | -| `ionFocus` | Emitted when the button has focus. | + + +## Methods + + ## CSS Shadow Parts -| Name | Description | -| ------------ | ----------------------------------------------------------------------- | -| `close-icon` | The close icon that is displayed when a fab list opens (uses ion-icon). | -| `native` | The native HTML button or anchor element that wraps all child elements. | + ## CSS Custom Properties -| Name | Description | -| -------------------------------- | --------------------------------------------------------------------------------------------------------- | -| `--background` | Background of the button | -| `--background-activated` | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. | -| `--background-activated-opacity` | Opacity of the button background when pressed | -| `--background-focused` | Background of the button when focused with the tab key | -| `--background-focused-opacity` | Opacity of the button background when focused with the tab key | -| `--background-hover` | Background of the button on hover | -| `--background-hover-opacity` | Opacity of the button background on hover | -| `--border-color` | Border color of the button | -| `--border-radius` | Border radius of the button | -| `--border-style` | Border style of the button | -| `--border-width` | Border width of the button | -| `--box-shadow` | Box shadow of the button | -| `--close-icon-font-size` | Font size of the close icon | -| `--color` | Text color of the button | -| `--color-activated` | Text color of the button when pressed | -| `--color-focused` | Text color of the button when focused with the tab key | -| `--color-hover` | Text color of the button on hover | -| `--padding-bottom` | Bottom padding of the button | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button | -| `--padding-top` | Top padding of the button | -| `--ripple-color` | Color of the button ripple effect | -| `--transition` | Transition of the button | + + +## Slots + + diff --git a/versioned_docs/version-v5/api/fab-list.md b/versioned_docs/version-v5/api/fab-list.md index b83b816c89a..68ca6717a59 100644 --- a/versioned_docs/version-v5/api/fab-list.md +++ b/versioned_docs/version-v5/api/fab-list.md @@ -5,6 +5,13 @@ sidebar_label: 'ion-fab-list' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/fab-list/props.md'; +import Events from '@ionic-internal/component-api/v5/fab-list/events.md'; +import Methods from '@ionic-internal/component-api/v5/fab-list/methods.md'; +import Parts from '@ionic-internal/component-api/v5/fab-list/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/fab-list/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/fab-list/slots.md'; + # ion-fab-list The `ion-fab-list` element is a container for multiple fab buttons. This collection of fab buttons contains actions related to the main fab button and is flung out on click. To specify what side the buttons should appear on, set the `side` property to 'start', 'end', 'top', 'bottom' @@ -309,20 +316,24 @@ export class FabListExample { ## Properties -### activated + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties -| | | -| --------------- | -------------------------------------------------------------- | -| **Description** | If `true`, the fab list will show all fab buttons in the list. | -| **Attribute** | `activated` | -| **Type** | `boolean` | -| **Default** | `false` | + -### side +## Slots -| | | -| --------------- | ------------------------------------------------------------------- | -| **Description** | The side the fab list will show on relative to the main fab button. | -| **Attribute** | `side` | -| **Type** | `"bottom" \| "end" \| "start" \| "top"` | -| **Default** | `'bottom'` | + diff --git a/versioned_docs/version-v5/api/fab.md b/versioned_docs/version-v5/api/fab.md index 52e799dbcfb..722f8bb7634 100644 --- a/versioned_docs/version-v5/api/fab.md +++ b/versioned_docs/version-v5/api/fab.md @@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/fab/props.md'; +import Events from '@ionic-internal/component-api/v5/fab/events.md'; +import Methods from '@ionic-internal/component-api/v5/fab/methods.md'; +import Parts from '@ionic-internal/component-api/v5/fab/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/fab/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/fab/slots.md'; + # ion-fab Fabs are container elements that contain one or more fab buttons. They should be placed in a fixed position that does not scroll with the content. Fab should have one main fab-button. Fabs can also contain fab-lists which contain related buttons that show when the main fab button is clicked. The same fab container can contain several [fab-list](fab-list.md) elements with different side values. @@ -633,47 +640,24 @@ export class FabExample { ## Properties -### activated + -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.
That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible. | -| **Attribute** | `activated` | -| **Type** | `boolean` | -| **Default** | `false` | +## Events -### edge + -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | 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. | -| **Attribute** | `edge` | -| **Type** | `boolean` | -| **Default** | `false` | +## Methods -### horizontal + -| | | -| --------------- | ---------------------------------------------------- | -| **Description** | Where to align the fab horizontally in the viewport. | -| **Attribute** | `horizontal` | -| **Type** | `"center" \| "end" \| "start" \| undefined` | -| **Default** | `undefined` | +## CSS Shadow Parts -### vertical + -| | | -| --------------- | -------------------------------------------------- | -| **Description** | Where to align the fab vertically in the viewport. | -| **Attribute** | `vertical` | -| **Type** | `"bottom" \| "center" \| "top" \| undefined` | -| **Default** | `undefined` | +## CSS Custom Properties -## Methods + -### close +## Slots -| | | -| --------------- | ----------------------------------- | -| **Description** | Close an active FAB list container. | -| **Signature** | `close() => Promise` | + diff --git a/versioned_docs/version-v5/api/footer.md b/versioned_docs/version-v5/api/footer.md index a2ffb3b8d35..0d0ffd979e7 100644 --- a/versioned_docs/version-v5/api/footer.md +++ b/versioned_docs/version-v5/api/footer.md @@ -7,6 +7,13 @@ sidebar_label: 'ion-footer' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/footer/props.md'; +import Events from '@ionic-internal/component-api/v5/footer/events.md'; +import Methods from '@ionic-internal/component-api/v5/footer/methods.md'; +import Parts from '@ionic-internal/component-api/v5/footer/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/footer/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/footer/slots.md'; + # ion-footer Footer is a root component of a page that sits at the bottom of the page. @@ -155,20 +162,24 @@ export class FooterExample { ## Properties -### mode + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | + -### translucent +## Slots -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | If `true`, the footer will be translucent.
Only applies when the mode is `"ios"` and the device supports
[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).

Note: In order to scroll content behind the footer, the `fullscreen`
attribute needs to be set on the content. | -| **Attribute** | `translucent` | -| **Type** | `boolean` | -| **Default** | `false` | + diff --git a/versioned_docs/version-v5/api/grid.md b/versioned_docs/version-v5/api/grid.md index b7e430e896c..e5d5b74338d 100644 --- a/versioned_docs/version-v5/api/grid.md +++ b/versioned_docs/version-v5/api/grid.md @@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/grid/props.md'; +import Events from '@ionic-internal/component-api/v5/grid/events.md'; +import Methods from '@ionic-internal/component-api/v5/grid/methods.md'; +import Parts from '@ionic-internal/component-api/v5/grid/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/grid/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/grid/slots.md'; + # ion-grid The grid is a powerful mobile-first flexbox system for building custom layouts. @@ -648,28 +655,24 @@ export class GridExample { ## Properties -### fixed + + +## Events + + + +## Methods -| | | -| --------------- | --------------------------------------------------------------------- | -| **Description** | If `true`, the grid will have a fixed width based on the screen size. | -| **Attribute** | `fixed` | -| **Type** | `boolean` | -| **Default** | `false` | + + +## CSS Shadow Parts + + ## CSS Custom Properties -| Name | Description | -| ----------------------- | ------------------------------------- | -| `--ion-grid-padding` | Padding for the Grid | -| `--ion-grid-padding-lg` | Padding for the Grid on lg screens | -| `--ion-grid-padding-md` | Padding for the Grid on md screens | -| `--ion-grid-padding-sm` | Padding for the Grid on sm screens | -| `--ion-grid-padding-xl` | Padding for the Grid on xl screens | -| `--ion-grid-padding-xs` | Padding for the Grid on xs screens | -| `--ion-grid-width` | Width of the fixed Grid | -| `--ion-grid-width-lg` | Width of the fixed Grid on lg screens | -| `--ion-grid-width-md` | Width of the fixed Grid on md screens | -| `--ion-grid-width-sm` | Width of the fixed Grid on sm screens | -| `--ion-grid-width-xl` | Width of the fixed Grid on xl screens | -| `--ion-grid-width-xs` | Width of the fixed Grid on xs screens | + + +## Slots + + diff --git a/versioned_docs/version-v5/api/header.md b/versioned_docs/version-v5/api/header.md index 408f8372613..97c021ee8da 100644 --- a/versioned_docs/version-v5/api/header.md +++ b/versioned_docs/version-v5/api/header.md @@ -7,6 +7,13 @@ sidebar_label: 'ion-header' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/header/props.md'; +import Events from '@ionic-internal/component-api/v5/header/events.md'; +import Methods from '@ionic-internal/component-api/v5/header/methods.md'; +import Parts from '@ionic-internal/component-api/v5/header/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/header/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/header/slots.md'; + # ion-header Header is a parent component that holds the toolbar component. @@ -227,29 +234,24 @@ export class HeaderExample { ## Properties -### collapse + + +## Events + + + +## Methods + + + +## CSS Shadow Parts -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Describes the scroll effect that will be applied to the header
`condense` only applies in iOS mode.

Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles) | -| **Attribute** | `collapse` | -| **Type** | `"condense" \| undefined` | -| **Default** | `undefined` | + -### mode +## CSS Custom Properties -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | + -### translucent +## Slots -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | If `true`, the header will be translucent.
Only applies when the mode is `"ios"` and the device supports
[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).

Note: In order to scroll content behind the header, the `fullscreen`
attribute needs to be set on the content. | -| **Attribute** | `translucent` | -| **Type** | `boolean` | -| **Default** | `false` | + diff --git a/versioned_docs/version-v5/api/img.md b/versioned_docs/version-v5/api/img.md index 9be6a58b969..d0921940945 100644 --- a/versioned_docs/version-v5/api/img.md +++ b/versioned_docs/version-v5/api/img.md @@ -7,6 +7,13 @@ sidebar_label: 'ion-img' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/img/props.md'; +import Events from '@ionic-internal/component-api/v5/img/events.md'; +import Methods from '@ionic-internal/component-api/v5/img/methods.md'; +import Parts from '@ionic-internal/component-api/v5/img/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/img/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/img/slots.md'; + # ion-img Img is a tag that will lazily load an image when ever the tag is in the viewport. This is extremely useful when generating a large list as images are only loaded when they're visible. The component uses [Intersection Observer](https://caniuse.com/#feat=intersectionobserver) internally, which is supported in most modern browser, but falls back to a `setTimeout` when it is not supported. @@ -151,34 +158,24 @@ export class ImgExample { ## Properties -### alt - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `alt` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | + -### src +## Events -| | | -| --------------- | ------------------------------------------------------------------- | -| **Description** | The image URL. This attribute is mandatory for the `` element. | -| **Attribute** | `src` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | + -## Events +## Methods -| Name | Description | -| ---------------- | ------------------------------------------- | -| `ionError` | Emitted when the img fails to load | -| `ionImgDidLoad` | Emitted when the image has finished loading | -| `ionImgWillLoad` | Emitted when the img src has been set | + ## CSS Shadow Parts -| Name | Description | -| ------- | ------------------------ | -| `image` | The inner `img` element. | + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v5/api/infinite-scroll-content.md b/versioned_docs/version-v5/api/infinite-scroll-content.md index 2d86064b740..a3a4cd63eb3 100644 --- a/versioned_docs/version-v5/api/infinite-scroll-content.md +++ b/versioned_docs/version-v5/api/infinite-scroll-content.md @@ -5,6 +5,13 @@ sidebar_label: 'ion-infinite-scroll-content' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/infinite-scroll-content/props.md'; +import Events from '@ionic-internal/component-api/v5/infinite-scroll-content/events.md'; +import Methods from '@ionic-internal/component-api/v5/infinite-scroll-content/methods.md'; +import Parts from '@ionic-internal/component-api/v5/infinite-scroll-content/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/infinite-scroll-content/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/infinite-scroll-content/slots.md'; + # ion-infinite-scroll-content The `ion-infinite-scroll-content` component is the default child used by the `ion-infinite-scroll`. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the `loadingSpinner` and `loadingText` properties. @@ -111,20 +118,24 @@ export default defineComponent({ ## Properties -### loadingSpinner + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------- | -| **Description** | An animated SVG spinner that shows while loading. | -| **Attribute** | `loading-spinner` | -| **Type** | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | -| **Default** | `undefined` | + -### loadingText +## Slots -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Optional text to display while loading.
`loadingText` can accept either plaintext or HTML as a string.
To display characters normally reserved for HTML, they
must be escaped. For example `` would become
`<Ionic>`

For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | -| **Attribute** | `loading-text` | -| **Type** | `IonicSafeString \| string \| undefined` | -| **Default** | `undefined` | + diff --git a/versioned_docs/version-v5/api/infinite-scroll.md b/versioned_docs/version-v5/api/infinite-scroll.md index b4fc0e0856f..0f5e576abfd 100644 --- a/versioned_docs/version-v5/api/infinite-scroll.md +++ b/versioned_docs/version-v5/api/infinite-scroll.md @@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/infinite-scroll/props.md'; +import Events from '@ionic-internal/component-api/v5/infinite-scroll/events.md'; +import Methods from '@ionic-internal/component-api/v5/infinite-scroll/methods.md'; +import Parts from '@ionic-internal/component-api/v5/infinite-scroll/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/infinite-scroll/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/infinite-scroll/slots.md'; + # ion-infinite-scroll The Infinite Scroll component calls an action to be performed when the user scrolls a specified distance from the bottom or top of the page. @@ -292,48 +299,24 @@ export class InfiniteScrollExample { ## Properties -### disabled - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | + -### position +## Events -| | | -| --------------- | -------------------------------------------------------------------------------------------- | -| **Description** | The position of the infinite scroll element.
The value can be either `top` or `bottom`. | -| **Attribute** | `position` | -| **Type** | `"bottom" \| "top"` | -| **Default** | `'bottom'` | + -### threshold +## Methods -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `threshold` | -| **Type** | `string` | -| **Default** | `'15%'` | + -## Events +## CSS Shadow Parts -| Name | 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. | +## CSS Custom Properties -## Methods + -### complete +## Slots -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Call `complete()` within the `ionInfinite` 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`. | -| **Signature** | `complete() => Promise` | + diff --git a/versioned_docs/version-v5/api/input.md b/versioned_docs/version-v5/api/input.md index e0d9bbccfba..c7c408fd1ab 100644 --- a/versioned_docs/version-v5/api/input.md +++ b/versioned_docs/version-v5/api/input.md @@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/input/props.md'; +import Events from '@ionic-internal/component-api/v5/input/events.md'; +import Methods from '@ionic-internal/component-api/v5/input/methods.md'; +import Parts from '@ionic-internal/component-api/v5/input/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/input/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/input/slots.md'; + # ion-input The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input, but works great on desktop devices and integrates with the keyboard on mobile devices. @@ -331,294 +338,24 @@ export class InputExample { ## Properties -### accept - -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `accept` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### autocapitalize - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`. | -| **Attribute** | `autocapitalize` | -| **Type** | `string` | -| **Default** | `'off'` | - -### autocomplete - -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Indicates whether the value of the control can be automatically completed by the browser. | -| **Attribute** | `autocomplete` | -| **Type** | `"on" \| "off" \| "name" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"` | -| **Default** | `'off'` | - -### autocorrect - -| | | -| --------------- | ------------------------------------------------------------------------------------------- | -| **Description** | Whether auto correction should be enabled when the user is entering/editing the text value. | -| **Attribute** | `autocorrect` | -| **Type** | `"off" \| "on"` | -| **Default** | `'off'` | - -### autofocus - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------- | -| **Description** | This Boolean attribute lets you specify that a form control should have input focus when the page loads. | -| **Attribute** | `autofocus` | -| **Type** | `boolean` | -| **Default** | `false` | - -### clearInput - -| | | -| --------------- | ----------------------------------------------------------------------------------------------------- | -| **Description** | If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. | -| **Attribute** | `clear-input` | -| **Type** | `boolean` | -| **Default** | `false` | - -### clearOnEdit - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. | -| **Attribute** | `clear-on-edit` | -| **Type** | `boolean \| undefined` | -| **Default** | `undefined` | - -### color - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### debounce - -| | | -| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`. | -| **Attribute** | `debounce` | -| **Type** | `number` | -| **Default** | `0` | - -### disabled - -| | | -| --------------- | --------------------------------------------------- | -| **Description** | If `true`, the user cannot interact with the input. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - -### enterkeyhint - -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | A hint to the browser for which enter key to display.
Possible values: `"enter"`, `"done"`, `"go"`, `"next"`,
`"previous"`, `"search"`, and `"send"`. | -| **Attribute** | `enterkeyhint` | -| **Type** | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | -| **Default** | `undefined` | - -### inputmode - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | A hint to the browser for which keyboard to display.
Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
`"email"`, `"numeric"`, `"decimal"`, and `"search"`. | -| **Attribute** | `inputmode` | -| **Type** | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined` | -| **Default** | `undefined` | - -### max - -| | | -| --------------- | --------------------------------------------------------------------------------- | -| **Description** | The maximum value, which must not be less than its minimum (min attribute) value. | -| **Attribute** | `max` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### maxlength - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `maxlength` | -| **Type** | `number \| undefined` | -| **Default** | `undefined` | - -### min - -| | | -| --------------- | ------------------------------------------------------------------------------------ | -| **Description** | The minimum value, which must not be greater than its maximum (max attribute) value. | -| **Attribute** | `min` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### minlength - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `minlength` | -| **Type** | `number \| undefined` | -| **Default** | `undefined` | - -### mode - -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - -### multiple - -| | | -| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `multiple` | -| **Type** | `boolean \| undefined` | -| **Default** | `undefined` | - -### name - -| | | -| --------------- | --------------------------------------------------------------- | -| **Description** | The name of the control, which is submitted with the form data. | -| **Attribute** | `name` | -| **Type** | `string` | -| **Default** | `this.inputId` | - -### pattern - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | 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"`, `"date"`, or `"password"`, otherwise it is ignored. When the type attribute is `"date"`, `pattern` will only be used in browsers that do not support the `"date"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information. | -| **Attribute** | `pattern` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### placeholder - -| | | -| --------------- | ----------------------------------------------------------- | -| **Description** | Instructional text that shows before the input has a value. | -| **Attribute** | `placeholder` | -| **Type** | `null \| string \| undefined` | -| **Default** | `undefined` | - -### readonly - -| | | -| --------------- | -------------------------------------------- | -| **Description** | If `true`, the user cannot modify the value. | -| **Attribute** | `readonly` | -| **Type** | `boolean` | -| **Default** | `false` | - -### required - -| | | -| --------------- | ------------------------------------------------------------------ | -| **Description** | If `true`, the user must fill in a value before submitting a form. | -| **Attribute** | `required` | -| **Type** | `boolean` | -| **Default** | `false` | - -### size - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `size` | -| **Type** | `number \| undefined` | -| **Default** | `undefined` | - -### spellcheck - -| | | -| --------------- | ------------------------------------------------------------------ | -| **Description** | If `true`, the element will have its spelling and grammar checked. | -| **Attribute** | `spellcheck` | -| **Type** | `boolean` | -| **Default** | `false` | - -### step - -| | | -| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `step` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### type - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | The type of control to display. The default type is text. | -| **Attribute** | `type` | -| **Type** | `"date" \| "datetime-local" \| "email" \| "month" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "time" \| "url" \| "week"` | -| **Default** | `'text'` | - -### value - -| | | -| --------------- | --------------------------------------- | -| **Description** | The value of the input. | -| **Attribute** | `value` | -| **Type** | `null \| number \| string \| undefined` | -| **Default** | `''` | + ## Events -| Name | 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 occurred. | + ## Methods -### getInputElement - -| | | -| --------------- | --------------------------------------------------------- | -| **Description** | Returns the native `` element used under the hood. | -| **Signature** | `getInputElement() => Promise` | + -### setFocus +## CSS Shadow Parts -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------ | -| **Description** | Sets focus on the native `input` in `ion-input`. Use this method instead of the global
`input.focus()`. | -| **Signature** | `setFocus() => Promise` | + ## CSS Custom Properties -| Name | Description | -| --------------------------- | -------------------------------------------------------------------------------------------------------- | -| `--background` | Background of the input | -| `--color` | Color of the input text | -| `--padding-bottom` | Bottom padding of the input | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input | -| `--padding-top` | Top padding of the input | -| `--placeholder-color` | Color of the input placeholder text | -| `--placeholder-font-style` | Font style of the input placeholder text | -| `--placeholder-font-weight` | Font weight of the input placeholder text | -| `--placeholder-opacity` | Opacity of the input placeholder text | + + +## Slots + + diff --git a/versioned_docs/version-v5/api/item-divider.md b/versioned_docs/version-v5/api/item-divider.md index e1ff65306db..96791a1d85f 100644 --- a/versioned_docs/version-v5/api/item-divider.md +++ b/versioned_docs/version-v5/api/item-divider.md @@ -7,6 +7,13 @@ sidebar_label: 'ion-item-divider' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/item-divider/props.md'; +import Events from '@ionic-internal/component-api/v5/item-divider/events.md'; +import Methods from '@ionic-internal/component-api/v5/item-divider/methods.md'; +import Parts from '@ionic-internal/component-api/v5/item-divider/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/item-divider/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/item-divider/slots.md'; + # ion-item-divider Item Dividers are block elements that can be used to separate items in a list. They are similar to list headers, but instead of being placed at the top of a list, they should go in between groups of items. @@ -274,52 +281,24 @@ export class ItemDividerExample { ## Properties -### color + + +## Events -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | + -### mode +## Methods -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | + -### sticky +## CSS Shadow Parts -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | When it's set to `true`, the item-divider will stay visible when it reaches the top
of the viewport until the next `ion-item-divider` replaces it.

This feature relies in `position:sticky`:
https://caniuse.com/#feat=css-sticky | -| **Attribute** | `sticky` | -| **Type** | `boolean` | -| **Default** | `false` | + ## CSS Custom Properties -| Name | Description | -| ------------------------ | --------------------------------------------------------------------------------------------------------------- | -| `--background` | Background of the item divider | -| `--color` | Color of the item divider | -| `--inner-padding-bottom` | Bottom inner padding of the item divider | -| `--inner-padding-end` | End inner padding of the item divider | -| `--inner-padding-start` | Start inner padding of the item divider | -| `--inner-padding-top` | Top inner padding of the item divider | -| `--padding-bottom` | Bottom padding of the item divider | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider | -| `--padding-top` | Top padding of the item divider | + ## Slots -| Name | Description | -| ------- | ---------------------------------------------------------------------------------- | -| `` | Content is placed between the named slots if provided without a slot. | -| `end` | Content is placed to the right of the divider text in LTR, and to the left in RTL. | -| `start` | Content is placed to the left of the divider text in LTR, and to the right in RTL. | + diff --git a/versioned_docs/version-v5/api/item-group.md b/versioned_docs/version-v5/api/item-group.md index 933806a402f..d0452a390d6 100644 --- a/versioned_docs/version-v5/api/item-group.md +++ b/versioned_docs/version-v5/api/item-group.md @@ -5,6 +5,13 @@ sidebar_label: 'ion-item-group' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/item-group/props.md'; +import Events from '@ionic-internal/component-api/v5/item-group/events.md'; +import Methods from '@ionic-internal/component-api/v5/item-group/methods.md'; +import Parts from '@ionic-internal/component-api/v5/item-group/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/item-group/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/item-group/slots.md'; + # ion-item-group Item groups are containers that organize similar items together. They can contain item dividers to divide the items into multiple sections. They can also be used to group sliding items. @@ -558,3 +565,27 @@ export class ItemGroupExample { + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v5/api/item-option.md b/versioned_docs/version-v5/api/item-option.md index e7fe775368a..258d25563f1 100644 --- a/versioned_docs/version-v5/api/item-option.md +++ b/versioned_docs/version-v5/api/item-option.md @@ -5,6 +5,13 @@ sidebar_label: 'ion-item-option' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/item-option/props.md'; +import Events from '@ionic-internal/component-api/v5/item-option/events.md'; +import Methods from '@ionic-internal/component-api/v5/item-option/methods.md'; +import Parts from '@ionic-internal/component-api/v5/item-option/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/item-option/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/item-option/slots.md'; + # ion-item-option The option button for an `ion-item-sliding`. Must be placed inside of an ``. @@ -13,107 +20,24 @@ action for the item. ## Properties -### color - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### disabled - -| | | -| --------------- | --------------------------------------------------------- | -| **Description** | If `true`, the user cannot interact with the item option. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - -### download - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | This attribute instructs browsers to download a URL instead of navigating to
it, so the user will be prompted to save it as a local file. If the attribute
has a value, it is used as the pre-filled file name in the Save prompt
(the user can still change the file name if they want). | -| **Attribute** | `download` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### expandable - -| | | -| --------------- | --------------------------------------------------------------------------------------------- | -| **Description** | If `true`, the option will expand to take up the available width and cover any other options. | -| **Attribute** | `expandable` | -| **Type** | `boolean` | -| **Default** | `false` | - -### href - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Contains a URL or a URL fragment that the hyperlink points to.
If this property is set, an anchor tag will be rendered. | -| **Attribute** | `href` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### mode - -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - -### rel - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Specifies the relationship of the target object to the link object.
The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | -| **Attribute** | `rel` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### target - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Specifies where to display the linked URL.
Only applies when an `href` is provided.
Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | -| **Attribute** | `target` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### type - -| | | -| --------------- | --------------------------------- | -| **Description** | The type of the button. | -| **Attribute** | `type` | -| **Type** | `"button" \| "reset" \| "submit"` | -| **Default** | `'button'` | + + +## Events + + + +## Methods + + ## CSS Shadow Parts -| Name | Description | -| -------- | ----------------------------------------------------------------------- | -| `native` | The native HTML button or anchor element that wraps all child elements. | + ## CSS Custom Properties -| Name | Description | -| -------------- | ----------------------------- | -| `--background` | Background of the item option | -| `--color` | Color of the item option | + ## Slots -| Name | Description | -| ----------- | --------------------------------------------------------------------------------- | -| `` | Content is placed between the named slots if provided without a slot. | -| `bottom` | Content is placed below the option text. | -| `end` | Content is placed to the right of the option text in LTR, and to the left in RTL. | -| `icon-only` | Should be used on an icon in an option that has no text. | -| `start` | Content is placed to the left of the option text in LTR, and to the right in RTL. | -| `top` | Content is placed above the option text. | + diff --git a/versioned_docs/version-v5/api/item-options.md b/versioned_docs/version-v5/api/item-options.md index 238485f673f..570a3a48299 100644 --- a/versioned_docs/version-v5/api/item-options.md +++ b/versioned_docs/version-v5/api/item-options.md @@ -5,6 +5,13 @@ sidebar_label: 'ion-item-options' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/item-options/props.md'; +import Events from '@ionic-internal/component-api/v5/item-options/events.md'; +import Methods from '@ionic-internal/component-api/v5/item-options/methods.md'; +import Parts from '@ionic-internal/component-api/v5/item-options/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/item-options/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/item-options/slots.md'; + # ion-item-options The option buttons for an `ion-item-sliding`. These buttons can be placed either on the [start or end side](#side-description). @@ -19,17 +26,24 @@ You can combine the `ionSwipe` event plus the `expandable` directive to create a ## Properties -### side - -| | | -| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each. | -| **Attribute** | `side` | -| **Type** | `"end" \| "start"` | -| **Default** | `'end'` | + ## Events -| Name | Description | -| ---------- | -------------------------------------------- | -| `ionSwipe` | Emitted when the item has been fully swiped. | + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v5/api/item-sliding.md b/versioned_docs/version-v5/api/item-sliding.md index 6c5e5b76b7f..f9c56ffb372 100644 --- a/versioned_docs/version-v5/api/item-sliding.md +++ b/versioned_docs/version-v5/api/item-sliding.md @@ -7,6 +7,13 @@ sidebar_label: 'ion-item-sliding' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/item-sliding/props.md'; +import Events from '@ionic-internal/component-api/v5/item-sliding/events.md'; +import Methods from '@ionic-internal/component-api/v5/item-sliding/methods.md'; +import Parts from '@ionic-internal/component-api/v5/item-sliding/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/item-sliding/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/item-sliding/slots.md'; + # ion-item-sliding A sliding item contains an item that can be dragged to reveal buttons. It requires an [item](item.md) component as a child. All options to reveal should be placed in the [item options](item-options.md) element. @@ -791,54 +798,24 @@ export class ItemSlidingExample { ## Properties -### disabled - -| | | -| --------------- | ---------------------------------------------------------- | -| **Description** | If `true`, the user cannot interact with the sliding item. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | + ## Events -| Name | Description | -| --------- | ------------------------------------------ | -| `ionDrag` | Emitted when the sliding position changes. | + ## Methods -### close - -| | | -| --------------- | -------------------------------------------------------------------------- | -| **Description** | Close the sliding item. Items can also be closed from the [List](list.md). | -| **Signature** | `close() => Promise` | - -### closeOpened - -| | | -| --------------- | ---------------------------------------------------------------------------------------------- | -| **Description** | Close all of the sliding items in the list. Items can also be closed from the [List](list.md). | -| **Signature** | `closeOpened() => Promise` | + -### getOpenAmount +## CSS Shadow Parts -| | | -| --------------- | ------------------------------------------ | -| **Description** | Get the amount the item is open in pixels. | -| **Signature** | `getOpenAmount() => Promise` | + -### getSlidingRatio +## CSS Custom Properties -| | | -| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Signature** | `getSlidingRatio() => Promise` | + -### open +## Slots -| | | -| --------------- | ------------------------------------------------ | -| **Description** | Open the sliding item. | -| **Signature** | `open(side: Side \| undefined) => Promise` | + diff --git a/versioned_docs/version-v5/api/item.md b/versioned_docs/version-v5/api/item.md index 94fce2549fd..0634078f29d 100644 --- a/versioned_docs/version-v5/api/item.md +++ b/versioned_docs/version-v5/api/item.md @@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/item/props.md'; +import Events from '@ionic-internal/component-api/v5/item/events.md'; +import Methods from '@ionic-internal/component-api/v5/item/methods.md'; +import Parts from '@ionic-internal/component-api/v5/item/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/item/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/item/slots.md'; + # ion-item Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. Generally they are placed in a list with other items. Items can be swiped, deleted, reordered, edited, and more. @@ -1686,183 +1693,24 @@ export class ItemExample { ## Properties -### button - -| | | -| --------------- | ----------------------------------------------------------------------- | -| **Description** | If `true`, a button tag will be rendered and the item will be tappable. | -| **Attribute** | `button` | -| **Type** | `boolean` | -| **Default** | `false` | - -### color - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### detail - -| | | -| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode`
is `ios` and an `href` or `button` property is present. | -| **Attribute** | `detail` | -| **Type** | `boolean \| undefined` | -| **Default** | `undefined` | - -### detailIcon - -| | | -| --------------- | ----------------------------------------------- | -| **Description** | The icon to use when `detail` is set to `true`. | -| **Attribute** | `detail-icon` | -| **Type** | `string` | -| **Default** | `'chevron-forward'` | - -### disabled - -| | | -| --------------- | -------------------------------------------------- | -| **Description** | If `true`, the user cannot interact with the item. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - -### download - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | This attribute instructs browsers to download a URL instead of navigating to
it, so the user will be prompted to save it as a local file. If the attribute
has a value, it is used as the pre-filled file name in the Save prompt
(the user can still change the file name if they want). | -| **Attribute** | `download` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### href - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Contains a URL or a URL fragment that the hyperlink points to.
If this property is set, an anchor tag will be rendered. | -| **Attribute** | `href` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### lines - -| | | -| --------------- | ------------------------------------------------------ | -| **Description** | How the bottom border should be displayed on the item. | -| **Attribute** | `lines` | -| **Type** | `"full" \| "inset" \| "none" \| undefined` | -| **Default** | `undefined` | - -### mode - -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - -### rel - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Specifies the relationship of the target object to the link object.
The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | -| **Attribute** | `rel` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### routerAnimation - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------- | -| **Description** | When using a router, it specifies the transition animation when navigating to
another page using `href`. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - -### routerDirection - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------- | -| **Description** | When using a router, it specifies the transition direction when navigating to
another page using `href`. | -| **Attribute** | `router-direction` | -| **Type** | `"back" \| "forward" \| "root"` | -| **Default** | `'forward'` | - -### target - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Specifies where to display the linked URL.
Only applies when an `href` is provided.
Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | -| **Attribute** | `target` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### type - -| | | -| --------------- | ------------------------------------------------------------------------------------ | -| **Description** | The type of the button. Only used when an `onclick` or `button` property is present. | -| **Attribute** | `type` | -| **Type** | `"button" \| "reset" \| "submit"` | -| **Default** | `'button'` | + + +## Events + + + +## Methods + + ## CSS Shadow Parts -| Name | Description | -| ------------- | ---------------------------------------------------------------------------- | -| `detail-icon` | The chevron icon for the item. Only applies when `detail="true"`. | -| `native` | The native HTML button, anchor or div element that wraps all child elements. | + ## CSS Custom Properties -| Name | Description | -| -------------------------------- | ------------------------------------------------------------------------------------------------------------- | -| `--background` | Background of the item | -| `--background-activated` | Background of the item when pressed. Note: setting this will interfere with the Material Design ripple. | -| `--background-activated-opacity` | Opacity of the item background when pressed | -| `--background-focused` | Background of the item when focused with the tab key | -| `--background-focused-opacity` | Opacity of the item background when focused with the tab key | -| `--background-hover` | Background of the item on hover | -| `--background-hover-opacity` | Opacity of the background of the item on hover | -| `--border-color` | Color of the item border | -| `--border-radius` | Radius of the item border | -| `--border-style` | Style of the item border | -| `--border-width` | Width of the item border | -| `--color` | Color of the item | -| `--color-activated` | Color of the item when pressed | -| `--color-focused` | Color of the item when focused with the tab key | -| `--color-hover` | Color of the item on hover | -| `--detail-icon-color` | Color of the item detail icon | -| `--detail-icon-font-size` | Font size of the item detail icon | -| `--detail-icon-opacity` | Opacity of the item detail icon | -| `--highlight-color-focused` | The color of the highlight on the item when focused | -| `--highlight-color-invalid` | The color of the highlight on the item when invalid | -| `--highlight-color-valid` | The color of the highlight on the item when valid | -| `--highlight-height` | The height of the highlight on the item | -| `--inner-border-width` | Width of the item inner border | -| `--inner-box-shadow` | Box shadow of the item inner | -| `--inner-padding-bottom` | Bottom padding of the item inner | -| `--inner-padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner | -| `--inner-padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner | -| `--inner-padding-top` | Top padding of the item inner | -| `--min-height` | Minimum height of the item | -| `--padding-bottom` | Bottom padding of the item | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item | -| `--padding-top` | Top padding of the item | -| `--ripple-color` | Color of the item ripple effect | -| `--transition` | Transition of the item | + ## Slots -| Name | Description | -| ------- | ------------------------------------------------------------------------------- | -| `` | Content is placed between the named slots if provided without a slot. | -| `end` | Content is placed to the right of the item text in LTR, and to the left in RTL. | -| `start` | Content is placed to the left of the item text in LTR, and to the right in RTL. | + diff --git a/versioned_docs/version-v5/api/label.md b/versioned_docs/version-v5/api/label.md index e69b075440f..c7594979a4e 100644 --- a/versioned_docs/version-v5/api/label.md +++ b/versioned_docs/version-v5/api/label.md @@ -7,6 +7,13 @@ sidebar_label: 'ion-label' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/label/props.md'; +import Events from '@ionic-internal/component-api/v5/label/events.md'; +import Methods from '@ionic-internal/component-api/v5/label/methods.md'; +import Parts from '@ionic-internal/component-api/v5/label/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/label/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/label/slots.md'; + # ion-label Label is a wrapper element that can be used in combination with `ion-item`, `ion-input`, `ion-toggle`, and more. The position of the label inside of an item can be inline, fixed, stacked, or floating. @@ -351,35 +358,24 @@ export class LabelExample { ## Properties -### color + + +## Events -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | + -### mode +## Methods -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | + -### position +## CSS Shadow Parts -| | | -| --------------- | ----------------------------------------------------------------------- | -| **Description** | The position determines where and how the label behaves inside an item. | -| **Attribute** | `position` | -| **Type** | `"fixed" \| "floating" \| "stacked" \| undefined` | -| **Default** | `undefined` | + ## CSS Custom Properties -| Name | Description | -| --------- | ------------------ | -| `--color` | Color of the label | + + +## Slots + + diff --git a/versioned_docs/version-v5/api/list-header.md b/versioned_docs/version-v5/api/list-header.md index 4e1498df2af..d674b14a0c6 100644 --- a/versioned_docs/version-v5/api/list-header.md +++ b/versioned_docs/version-v5/api/list-header.md @@ -5,6 +5,13 @@ sidebar_label: 'ion-list-header' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/list-header/props.md'; +import Events from '@ionic-internal/component-api/v5/list-header/events.md'; +import Methods from '@ionic-internal/component-api/v5/list-header/methods.md'; +import Parts from '@ionic-internal/component-api/v5/list-header/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/list-header/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/list-header/slots.md'; + # ion-list-header ListHeader a header component for a list. @@ -393,40 +400,24 @@ export class ListHeaderExample { ## Properties -### color + + +## Events -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | + -### lines +## Methods -| | | -| --------------- | ------------------------------------------------------------- | -| **Description** | How the bottom border should be displayed on the list header. | -| **Attribute** | `lines` | -| **Type** | `"full" \| "inset" \| "none" \| undefined` | -| **Default** | `undefined` | + -### mode +## CSS Shadow Parts -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | + ## CSS Custom Properties -| Name | Description | -| ---------------------- | ------------------------------------- | -| `--background` | Background of the list header | -| `--border-color` | Color of the list header border | -| `--border-style` | Style of the list header border | -| `--border-width` | Width of the list header border | -| `--color` | Color of the list header text | -| `--inner-border-width` | Width of the inner list header border | + + +## Slots + + diff --git a/versioned_docs/version-v5/api/list.md b/versioned_docs/version-v5/api/list.md index 007d2b42236..4f483d30931 100644 --- a/versioned_docs/version-v5/api/list.md +++ b/versioned_docs/version-v5/api/list.md @@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/list/props.md'; +import Events from '@ionic-internal/component-api/v5/list/events.md'; +import Methods from '@ionic-internal/component-api/v5/list/methods.md'; +import Parts from '@ionic-internal/component-api/v5/list/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/list/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/list/slots.md'; + # ion-list Lists are made up of multiple rows of items which can contain text, buttons, toggles, @@ -420,38 +427,24 @@ export class ListExample { ## Properties -### inset + -| | | -| --------------- | ------------------------------------------------------------------- | -| **Description** | If `true`, the list will have margin around it and rounded corners. | -| **Attribute** | `inset` | -| **Type** | `boolean` | -| **Default** | `false` | +## Events -### lines + -| | | -| --------------- | ------------------------------------------------------- | -| **Description** | How the bottom border should be displayed on all items. | -| **Attribute** | `lines` | -| **Type** | `"full" \| "inset" \| "none" \| undefined` | -| **Default** | `undefined` | +## Methods -### mode + -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | +## CSS Shadow Parts -## Methods + + +## CSS Custom Properties + + -### closeSlidingItems +## Slots -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | If `ion-item-sliding` are used inside the list, this method closes
any open sliding item.

Returns `true` if an actual `ion-item-sliding` is closed. | -| **Signature** | `closeSlidingItems() => Promise` | + diff --git a/versioned_docs/version-v5/api/loading.md b/versioned_docs/version-v5/api/loading.md index ec3606ab74e..1cdddf62752 100644 --- a/versioned_docs/version-v5/api/loading.md +++ b/versioned_docs/version-v5/api/loading.md @@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/loading/props.md'; +import Events from '@ionic-internal/component-api/v5/loading/events.md'; +import Methods from '@ionic-internal/component-api/v5/loading/methods.md'; +import Parts from '@ionic-internal/component-api/v5/loading/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/loading/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/loading/slots.md'; + # ion-loading An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting `showBackdrop: false` upon creation. @@ -351,163 +358,24 @@ Developers can also use this component directly in their template: ## Properties -### animated - -| | | -| --------------- | ---------------------------------------------- | -| **Description** | If `true`, the loading indicator will animate. | -| **Attribute** | `animated` | -| **Type** | `boolean` | -| **Default** | `true` | - -### backdropDismiss - -| | | -| --------------- | -------------------------------------------------------------------------------- | -| **Description** | If `true`, the loading indicator will be dismissed when the backdrop is clicked. | -| **Attribute** | `backdrop-dismiss` | -| **Type** | `boolean` | -| **Default** | `false` | - -### cssClass - -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------- | -| **Description** | Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces. | -| **Attribute** | `css-class` | -| **Type** | `string \| string[] \| undefined` | -| **Default** | `undefined` | - -### duration - -| | | -| --------------- | ----------------------------------------------------------------------- | -| **Description** | Number of milliseconds to wait before dismissing the loading indicator. | -| **Attribute** | `duration` | -| **Type** | `number` | -| **Default** | `0` | - -### enterAnimation - -| | | -| --------------- | --------------------------------------------------------- | -| **Description** | Animation to use when the loading indicator is presented. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - -### keyboardClose - -| | | -| --------------- | -------------------------------------------------------------------------------------- | -| **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | -| **Attribute** | `keyboard-close` | -| **Type** | `boolean` | -| **Default** | `true` | - -### leaveAnimation - -| | | -| --------------- | --------------------------------------------------------- | -| **Description** | Animation to use when the loading indicator is dismissed. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - -### message - -| | | -| --------------- | ---------------------------------------------------------- | -| **Description** | Optional text content to display in the loading indicator. | -| **Attribute** | `message` | -| **Type** | `IonicSafeString \| string \| undefined` | -| **Default** | `undefined` | - -### mode - -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - -### showBackdrop - -| | | -| --------------- | --------------------------------------------------------------------- | -| **Description** | If `true`, a backdrop will be displayed behind the loading indicator. | -| **Attribute** | `show-backdrop` | -| **Type** | `boolean` | -| **Default** | `true` | - -### spinner - -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------- | -| **Description** | The name of the spinner to display. | -| **Attribute** | `spinner` | -| **Type** | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | -| **Default** | `undefined` | - -### translucent - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | If `true`, the loading indicator will be translucent.
Only applies when the mode is `"ios"` and the device supports
[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | -| **Attribute** | `translucent` | -| **Type** | `boolean` | -| **Default** | `false` | + ## Events -| Name | Description | -| ----------------------- | ----------------------------------------- | -| `ionLoadingDidDismiss` | Emitted after the loading has dismissed. | -| `ionLoadingDidPresent` | Emitted after the loading has presented. | -| `ionLoadingWillDismiss` | Emitted before the loading has dismissed. | -| `ionLoadingWillPresent` | Emitted before the loading has presented. | + ## Methods -### dismiss - -| | | -| --------------- | --------------------------------------------------------------------- | -| **Description** | Dismiss the loading overlay after it has been presented. | -| **Signature** | `dismiss(data?: any, role?: string \| undefined) => Promise` | - -### onDidDismiss + -| | | -| --------------- | ------------------------------------------------------------- | -| **Description** | Returns a promise that resolves when the loading did dismiss. | -| **Signature** | `onDidDismiss() => Promise>` | +## CSS Shadow Parts -### onWillDismiss + -| | | -| --------------- | -------------------------------------------------------------- | -| **Description** | Returns a promise that resolves when the loading will dismiss. | -| **Signature** | `onWillDismiss() => Promise>` | - -### present +## CSS Custom Properties -| | | -| --------------- | ------------------------------------------------------ | -| **Description** | Present the loading overlay after it has been created. | -| **Signature** | `present() => Promise` | + -## CSS Custom Properties +## Slots -| Name | Description | -| -------------------- | ------------------------------------ | -| `--backdrop-opacity` | Opacity of the backdrop | -| `--background` | Background of the loading dialog | -| `--height` | Height of the loading dialog | -| `--max-height` | Maximum height of the loading dialog | -| `--max-width` | Maximum width of the loading dialog | -| `--min-height` | Minimum height of the loading dialog | -| `--min-width` | Minimum width of the loading dialog | -| `--spinner-color` | Color of the loading spinner | -| `--width` | Width of the loading dialog | + diff --git a/versioned_docs/version-v5/api/menu-button.md b/versioned_docs/version-v5/api/menu-button.md index 0fae697af58..cc27f399f79 100644 --- a/versioned_docs/version-v5/api/menu-button.md +++ b/versioned_docs/version-v5/api/menu-button.md @@ -5,87 +5,37 @@ sidebar_label: 'ion-menu-button' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/menu-button/props.md'; +import Events from '@ionic-internal/component-api/v5/menu-button/events.md'; +import Methods from '@ionic-internal/component-api/v5/menu-button/methods.md'; +import Parts from '@ionic-internal/component-api/v5/menu-button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/menu-button/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/menu-button/slots.md'; + # ion-menu-button Menu Button is component that automatically creates the icon and functionality to open a menu on a page. ## Properties -### autoHide - -| | | -| --------------- | ----------------------------------------------------------------------------- | -| **Description** | Automatically hides the menu button when the corresponding menu is not active | -| **Attribute** | `auto-hide` | -| **Type** | `boolean` | -| **Default** | `true` | - -### color - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### disabled + -| | | -| --------------- | --------------------------------------------------------- | -| **Description** | If `true`, the user cannot interact with the menu button. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | +## Events -### menu + -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | 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 | -| **Attribute** | `menu` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | +## Methods -### mode - -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - -### type - -| | | -| --------------- | --------------------------------- | -| **Description** | The type of the button. | -| **Attribute** | `type` | -| **Type** | `"button" \| "reset" \| "submit"` | -| **Default** | `'button'` | + ## CSS Shadow Parts -| Name | Description | -| -------- | ------------------------------------------------------------- | -| `icon` | The menu button icon (uses ion-icon). | -| `native` | The native HTML button element that wraps all child elements. | + ## CSS Custom Properties -| Name | Description | -| ------------------------------ | --------------------------------------------------------------------------------------------------------- | -| `--background` | Background of the menu button | -| `--background-focused` | Background of the menu button when focused with the tab key | -| `--background-focused-opacity` | Opacity of the menu button background when focused with the tab key | -| `--background-hover` | Background of the menu button on hover | -| `--background-hover-opacity` | Opacity of the background on hover | -| `--border-radius` | Border radius of the menu button | -| `--color` | Color of the menu button | -| `--color-focused` | Color of the menu button when focused with the tab key | -| `--color-hover` | Color of the menu button on hover | -| `--padding-bottom` | Bottom padding of the button | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button | -| `--padding-top` | Top padding of the button | + + +## Slots + + diff --git a/versioned_docs/version-v5/api/menu-toggle.md b/versioned_docs/version-v5/api/menu-toggle.md index 80d144c8b60..b810836b81a 100644 --- a/versioned_docs/version-v5/api/menu-toggle.md +++ b/versioned_docs/version-v5/api/menu-toggle.md @@ -5,6 +5,13 @@ sidebar_label: 'ion-menu-toggle' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/menu-toggle/props.md'; +import Events from '@ionic-internal/component-api/v5/menu-toggle/events.md'; +import Methods from '@ionic-internal/component-api/v5/menu-toggle/methods.md'; +import Parts from '@ionic-internal/component-api/v5/menu-toggle/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/menu-toggle/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/menu-toggle/slots.md'; + # ion-menu-toggle The MenuToggle component can be used to toggle a menu open or closed. @@ -15,20 +22,24 @@ In case it's desired to keep `ion-menu-toggle` always visible, the `autoHide` pr ## Properties -### autoHide + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `auto-hide` | -| **Type** | `boolean` | -| **Default** | `true` | + -### menu +## Slots -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `menu` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | + diff --git a/versioned_docs/version-v5/api/menu.md b/versioned_docs/version-v5/api/menu.md index e897499f7a8..19fc5ca7349 100644 --- a/versioned_docs/version-v5/api/menu.md +++ b/versioned_docs/version-v5/api/menu.md @@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/menu/props.md'; +import Events from '@ionic-internal/component-api/v5/menu/events.md'; +import Methods from '@ionic-internal/component-api/v5/menu/methods.md'; +import Parts from '@ionic-internal/component-api/v5/menu/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/menu/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/menu/slots.md'; + # ion-menu The Menu component is a navigation drawer that slides in from the side of the current view. @@ -494,137 +501,24 @@ export class MenuExample { ## Properties -### contentId - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | The `id` of the main content. When using
a router this is typically `ion-router-outlet`.
When not using a router, this is typically
your main view's `ion-content`. This is not the
id of the `ion-content` inside of your `ion-menu`. | -| **Attribute** | `content-id` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### disabled - -| | | -| --------------- | -------------------------------- | -| **Description** | If `true`, the menu is disabled. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - -### maxEdgeStart - -| | | -| --------------- | ----------------------------------------------------------------------------------------------------------------------- | -| **Description** | The edge threshold for dragging the menu open.
If a drag/swipe happens over this value, the menu is not triggered. | -| **Attribute** | `max-edge-start` | -| **Type** | `number` | -| **Default** | `50` | - -### menuId - -| | | -| --------------- | --------------------- | -| **Description** | An id for the menu. | -| **Attribute** | `menu-id` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### side - -| | | -| --------------- | ------------------------------------------------- | -| **Description** | Which side of the view the menu should be placed. | -| **Attribute** | `side` | -| **Type** | `"end" \| "start"` | -| **Default** | `'start'` | - -### swipeGesture - -| | | -| --------------- | --------------------------------------- | -| **Description** | If `true`, swiping the menu is enabled. | -| **Attribute** | `swipe-gesture` | -| **Type** | `boolean` | -| **Default** | `true` | - -### type - -| | | -| --------------- | ---------------------------------------------------------------------------------------- | -| **Description** | The display type of the menu.
Available options: `"overlay"`, `"reveal"`, `"push"`. | -| **Attribute** | `type` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | + ## Events -| Name | Description | -| -------------- | -------------------------------------------- | -| `ionDidClose` | Emitted when the menu is closed. | -| `ionDidOpen` | Emitted when the menu is open. | -| `ionWillClose` | Emitted when the menu is about to be closed. | -| `ionWillOpen` | Emitted when the menu is about to be opened. | + ## Methods -### close - -| | | -| --------------- | ---------------------------------------------------------------------------------------------- | -| **Description** | Closes the menu. If the menu is already closed or it can't be closed,
it returns `false`. | -| **Signature** | `close(animated?: boolean) => Promise` | - -### isActive - -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Returns `true` is the menu is active.

A menu is active when it can be opened or closed, meaning it's enabled
and it's not part of a `ion-split-pane`. | -| **Signature** | `isActive() => Promise` | - -### isOpen - -| | | -| --------------- | ----------------------------------- | -| **Description** | Returns `true` is the menu is open. | -| **Signature** | `isOpen() => Promise` | - -### open - -| | | -| --------------- | ------------------------------------------------------------------------------------------- | -| **Description** | Opens the menu. If the menu is already open or it can't be opened,
it returns `false`. | -| **Signature** | `open(animated?: boolean) => Promise` | - -### setOpen - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------ | -| **Description** | Opens or closes the button.
If the operation can't be completed successfully, it returns `false`. | -| **Signature** | `setOpen(shouldOpen: boolean, animated?: boolean) => Promise` | - -### toggle - -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.
If the operation can't be completed successfully, it returns `false`. | -| **Signature** | `toggle(animated?: boolean) => Promise` | + ## CSS Shadow Parts -| Name | Description | -| ----------- | ---------------------------------------------------------------------- | -| `backdrop` | The backdrop that appears over the main content when the menu is open. | -| `container` | The container for the menu content. | + ## CSS Custom Properties -| Name | Description | -| -------------- | -------------------------- | -| `--background` | Background of the menu | -| `--height` | Height of the menu | -| `--max-height` | Maximum height of the menu | -| `--max-width` | Maximum width of the menu | -| `--min-height` | Minimum height of the menu | -| `--min-width` | Minimum width of the menu | -| `--width` | Width of the menu | + + +## Slots + + diff --git a/versioned_docs/version-v5/api/modal.md b/versioned_docs/version-v5/api/modal.md index 950fd13faf8..6d1a76c21e5 100644 --- a/versioned_docs/version-v5/api/modal.md +++ b/versioned_docs/version-v5/api/modal.md @@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/modal/props.md'; +import Events from '@ionic-internal/component-api/v5/modal/events.md'; +import Methods from '@ionic-internal/component-api/v5/modal/methods.md'; +import Parts from '@ionic-internal/component-api/v5/modal/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/modal/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/modal/slots.md'; + # ion-modal A Modal is a dialog that appears on top of the app's content, and must be dismissed by the app before interaction can resume. It is useful as a select component when there are a lot of options to choose from, or when filtering items in a list, as well as many other use cases. @@ -745,166 +752,24 @@ Developers can also use this component directly in their template: ## Properties -### animated - -| | | -| --------------- | ---------------------------------- | -| **Description** | If `true`, the modal will animate. | -| **Attribute** | `animated` | -| **Type** | `boolean` | -| **Default** | `true` | - -### backdropDismiss - -| | | -| --------------- | -------------------------------------------------------------------- | -| **Description** | If `true`, the modal will be dismissed when the backdrop is clicked. | -| **Attribute** | `backdrop-dismiss` | -| **Type** | `boolean` | -| **Default** | `true` | - -### component - -| | | -| --------------- | --------------------------------------------- | -| **Description** | The component to display inside of the modal. | -| **Attribute** | `component` | -| **Type** | `Function \| HTMLElement \| null \| string` | -| **Default** | `undefined` | - -### componentProps - -| | | -| --------------- | ---------------------------------------- | -| **Description** | The data to pass to the modal component. | -| **Attribute** | `undefined` | -| **Type** | `undefined \| { [key: string]: any; }` | -| **Default** | `undefined` | - -### cssClass - -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------- | -| **Description** | Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces. | -| **Attribute** | `css-class` | -| **Type** | `string \| string[] \| undefined` | -| **Default** | `undefined` | - -### enterAnimation - -| | | -| --------------- | ------------------------------------------------------- | -| **Description** | Animation to use when the modal is presented. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - -### keyboardClose - -| | | -| --------------- | -------------------------------------------------------------------------------------- | -| **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | -| **Attribute** | `keyboard-close` | -| **Type** | `boolean` | -| **Default** | `true` | - -### leaveAnimation - -| | | -| --------------- | ------------------------------------------------------- | -| **Description** | Animation to use when the modal is dismissed. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - -### mode - -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - -### presentingElement - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | The element that presented the modal. This is used for card presentation effects
and for stacking multiple modals on top of each other. Only applies in iOS mode. | -| **Attribute** | `undefined` | -| **Type** | `HTMLElement \| undefined` | -| **Default** | `undefined` | - -### showBackdrop - -| | | -| --------------- | --------------------------------------------------------- | -| **Description** | If `true`, a backdrop will be displayed behind the modal. | -| **Attribute** | `show-backdrop` | -| **Type** | `boolean` | -| **Default** | `true` | - -### swipeToClose - -| | | -| --------------- | ------------------------------------------------------------------------ | -| **Description** | If `true`, the modal can be swiped to dismiss. Only applies in iOS mode. | -| **Attribute** | `swipe-to-close` | -| **Type** | `boolean` | -| **Default** | `false` | + ## Events -| Name | Description | -| --------------------- | --------------------------------------- | -| `ionModalDidDismiss` | Emitted after the modal has dismissed. | -| `ionModalDidPresent` | Emitted after the modal has presented. | -| `ionModalWillDismiss` | Emitted before the modal has dismissed. | -| `ionModalWillPresent` | Emitted before the modal has presented. | + ## Methods -### dismiss - -| | | -| --------------- | --------------------------------------------------------------------- | -| **Description** | Dismiss the modal overlay after it has been presented. | -| **Signature** | `dismiss(data?: any, role?: string \| undefined) => Promise` | - -### onDidDismiss + -| | | -| --------------- | ----------------------------------------------------------- | -| **Description** | Returns a promise that resolves when the modal did dismiss. | -| **Signature** | `onDidDismiss() => Promise>` | +## CSS Shadow Parts -### onWillDismiss + -| | | -| --------------- | ------------------------------------------------------------ | -| **Description** | Returns a promise that resolves when the modal will dismiss. | -| **Signature** | `onWillDismiss() => Promise>` | - -### present +## CSS Custom Properties -| | | -| --------------- | ---------------------------------------------------- | -| **Description** | Present the modal overlay after it has been created. | -| **Signature** | `present() => Promise` | + -## CSS Custom Properties +## Slots -| Name | Description | -| -------------------- | ---------------------------------- | -| `--backdrop-opacity` | Opacity of the backdrop | -| `--background` | Background of the modal content | -| `--border-color` | Border color of the modal content | -| `--border-radius` | Border radius of the modal content | -| `--border-style` | Border style of the modal content | -| `--border-width` | Border width of the modal content | -| `--height` | Height of the modal | -| `--max-height` | Maximum height of the modal | -| `--max-width` | Maximum width of the modal | -| `--min-height` | Minimum height of the modal | -| `--min-width` | Minimum width of the modal | -| `--width` | Width of the modal | + diff --git a/versioned_docs/version-v5/api/nav-link.md b/versioned_docs/version-v5/api/nav-link.md index f17596d480b..b24a7a92892 100644 --- a/versioned_docs/version-v5/api/nav-link.md +++ b/versioned_docs/version-v5/api/nav-link.md @@ -5,6 +5,13 @@ sidebar_label: 'ion-nav-link' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/nav-link/props.md'; +import Events from '@ionic-internal/component-api/v5/nav-link/events.md'; +import Methods from '@ionic-internal/component-api/v5/nav-link/methods.md'; +import Parts from '@ionic-internal/component-api/v5/nav-link/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/nav-link/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/nav-link/slots.md'; + # ion-nav-link A navigation link is used to navigate to a specified component. The component can be navigated to by going `forward`, `back` or as a `root` component. @@ -13,38 +20,24 @@ It is the element form of calling the `push()`, `pop()`, and `setRoot()` methods ## Properties -### component - -| | | -| --------------- | ---------------------------------------------------------------------------------------- | -| **Description** | Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`. | -| **Attribute** | `component` | -| **Type** | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | -| **Default** | `undefined` | - -### componentProps - -| | | -| --------------- | ----------------------------------------------------------------------------------------------------------------- | -| **Description** | Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`. | -| **Attribute** | `undefined` | -| **Type** | `undefined \| { [key: string]: any; }` | -| **Default** | `undefined` | - -### routerAnimation - -| | | -| --------------- | --------------------------------------------------------- | -| **Description** | The transition animation when navigating to another page. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - -### routerDirection - -| | | -| --------------- | --------------------------------------------------------- | -| **Description** | The transition direction when navigating to another page. | -| **Attribute** | `router-direction` | -| **Type** | `"back" \| "forward" \| "root"` | -| **Default** | `'forward'` | + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v5/api/nav.md b/versioned_docs/version-v5/api/nav.md index d4660a3c691..7c07064fc0a 100644 --- a/versioned_docs/version-v5/api/nav.md +++ b/versioned_docs/version-v5/api/nav.md @@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/nav/props.md'; +import Events from '@ionic-internal/component-api/v5/nav/events.md'; +import Methods from '@ionic-internal/component-api/v5/nav/methods.md'; +import Parts from '@ionic-internal/component-api/v5/nav/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/nav/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/nav/slots.md'; + # ion-nav Nav is a standalone component for loading arbitrary components and pushing new components on to the stack. @@ -17,147 +24,24 @@ Unlike Router Outlet, Nav is not tied to a particular router. This means that if ## Properties -### animated - -| | | -| --------------- | --------------------------------------------------------------- | -| **Description** | If `true`, the nav should animate the transition of components. | -| **Attribute** | `animated` | -| **Type** | `boolean` | -| **Default** | `true` | - -### animation - -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | By default `ion-nav` animates transition between pages based in the mode (ios or material design).
However, this property allows to create custom transition using `AnimateBuilder` functions. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - -### root - -| | | -| --------------- | -------------------------------------------------------------------------- | -| **Description** | Root NavComponent to load | -| **Attribute** | `root` | -| **Type** | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | -| **Default** | `undefined` | - -### rootParams - -| | | -| --------------- | -------------------------------------- | -| **Description** | Any parameters for the root component | -| **Attribute** | `undefined` | -| **Type** | `undefined \| { [key: string]: any; }` | -| **Default** | `undefined` | - -### swipeGesture - -| | | -| --------------- | ------------------------------------------------------- | -| **Description** | If the nav component should allow for swipe-to-go-back. | -| **Attribute** | `swipe-gesture` | -| **Type** | `boolean \| undefined` | -| **Default** | `undefined` | + ## Events -| Name | Description | -| ------------------ | ----------------------------------------------- | -| `ionNavDidChange` | Event fired when the nav has changed components | -| `ionNavWillChange` | Event fired when the nav will change components | + ## Methods -### canGoBack - -| | | -| --------------- | ------------------------------------------------------------------- | -| **Description** | Returns `true` if the current view can go back. | -| **Signature** | `canGoBack(view?: ViewController \| undefined) => Promise` | - -### getActive - -| | | -| --------------- | ----------------------------------------------------- | -| **Description** | Get the active view. | -| **Signature** | `getActive() => Promise` | - -### getByIndex - -| | | -| --------------- | ------------------------------------------------------------------- | -| **Description** | Get the view at the specified index. | -| **Signature** | `getByIndex(index: number) => Promise` | - -### getPrevious - -| | | -| --------------- | ----------------------------------------------------------------------------------------- | -| **Description** | Get the previous view. | -| **Signature** | `getPrevious(view?: ViewController \| undefined) => Promise` | - -### insert - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | Inserts a component into the navigation stack at the specified index.
This is useful to add a component at any point in the navigation stack. | -| **Signature** | `insert(insertIndex: number, component: T, componentProps?: ComponentProps \| null \| undefined, opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | - -### insertPages - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Inserts an array of components into the navigation 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. | -| **Signature** | `insertPages(insertIndex: number, insertComponents: NavComponent[] \| NavComponentWithProps[], opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | - -### pop - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------- | -| **Description** | Pop a component off of the navigation stack. Navigates back from the current
component. | -| **Signature** | `pop(opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | - -### popTo - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Pop to a specific index in the navigation stack. | -| **Signature** | `popTo(indexOrViewCtrl: number \| ViewController, opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | - -### popToRoot - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------- | -| **Description** | Navigate back to the root of the stack, no matter how far back that is. | -| **Signature** | `popToRoot(opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | - -### push - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Push a new component onto the current navigation stack. Pass any additional
information along as an object. This additional information is accessible
through NavParams. | -| **Signature** | `push(component: T, componentProps?: ComponentProps \| null \| undefined, opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | + -### removeIndex +## CSS Shadow Parts -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Removes a component from the navigation stack at the specified index. | -| **Signature** | `removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | + -### setPages +## CSS Custom Properties -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. Navigation parameters can also be passed to the
individual pages in the array. | -| **Signature** | `setPages(views: NavComponent[] \| NavComponentWithProps[], opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | + -### setRoot +## Slots -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Set the root for the current navigation stack to a component. | -| **Signature** | `setRoot(component: T, componentProps?: ComponentProps \| null \| undefined, opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | + diff --git a/versioned_docs/version-v5/api/note.md b/versioned_docs/version-v5/api/note.md index 96109f1c8da..95271404b31 100644 --- a/versioned_docs/version-v5/api/note.md +++ b/versioned_docs/version-v5/api/note.md @@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/note/props.md'; +import Events from '@ionic-internal/component-api/v5/note/events.md'; +import Methods from '@ionic-internal/component-api/v5/note/methods.md'; +import Parts from '@ionic-internal/component-api/v5/note/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/note/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/note/slots.md'; + # ion-note Notes are text elements generally used as subtitles that provide more information. Notes are styled to appear grey by default. Notes can be used in an item as metadata text. @@ -200,26 +207,24 @@ export class NoteExample { ## Properties -### color + + +## Events + + -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | +## Methods -### mode + -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | +## CSS Shadow Parts + + ## CSS Custom Properties -| Name | Description | -| --------- | ----------------- | -| `--color` | Color of the note | + + +## Slots + + diff --git a/versioned_docs/version-v5/api/picker.md b/versioned_docs/version-v5/api/picker.md index a39534dc134..65d399459f2 100644 --- a/versioned_docs/version-v5/api/picker.md +++ b/versioned_docs/version-v5/api/picker.md @@ -7,254 +7,37 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/picker/props.md'; +import Events from '@ionic-internal/component-api/v5/picker/events.md'; +import Methods from '@ionic-internal/component-api/v5/picker/methods.md'; +import Parts from '@ionic-internal/component-api/v5/picker/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/picker/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/picker/slots.md'; + # ion-picker A Picker is a dialog that displays a row of buttons and columns underneath. It appears on top of the app's content, and at the bottom of the viewport. -## Usage - -```tsx -/* Using with useIonPicker Hook */ - -import React, { useState } from 'react'; -import { IonButton, IonContent, IonPage, useIonPicker } from '@ionic/react'; - -const PickerExample: React.FC = () => { - const [present] = useIonPicker(); - const [value, setValue] = useState(''); - return ( - - - - present({ - buttons: [ - { - text: 'Confirm', - handler: (selected) => { - setValue(selected.animal.value); - }, - }, - ], - columns: [ - { - name: 'animal', - options: [ - { text: 'Dog', value: 'dog' }, - { text: 'Cat', value: 'cat' }, - { text: 'Bird', value: 'bird' }, - ], - }, - ], - }) - } - > - Show Picker - - - present( - [ - { - name: 'animal', - options: [ - { text: 'Dog', value: 'dog' }, - { text: 'Cat', value: 'cat' }, - { text: 'Bird', value: 'bird' }, - ], - }, - { - name: 'vehicle', - options: [ - { text: 'Car', value: 'car' }, - { text: 'Truck', value: 'truck' }, - { text: 'Bike', value: 'bike' }, - ], - }, - ], - [ - { - text: 'Confirm', - handler: (selected) => { - setValue(`${selected.animal.value}, ${selected.vehicle.value}`); - }, - }, - ] - ) - } - > - Show Picker using params - - {value &&
Selected Value: {value}
} - - - ); -}; -``` - ## Properties -### animated - -| | | -| --------------- | ----------------------------------- | -| **Description** | If `true`, the picker will animate. | -| **Attribute** | `animated` | -| **Type** | `boolean` | -| **Default** | `true` | - -### backdropDismiss - -| | | -| --------------- | --------------------------------------------------------------------- | -| **Description** | If `true`, the picker will be dismissed when the backdrop is clicked. | -| **Attribute** | `backdrop-dismiss` | -| **Type** | `boolean` | -| **Default** | `true` | - -### buttons - -| | | -| --------------- | ---------------------------------------------------------- | -| **Description** | Array of buttons to be displayed at the top of the picker. | -| **Attribute** | `undefined` | -| **Type** | `PickerButton[]` | -| **Default** | `[]` | - -### columns - -| | | -| --------------- | ----------------------------------------------- | -| **Description** | Array of columns to be displayed in the picker. | -| **Attribute** | `undefined` | -| **Type** | `PickerColumn[]` | -| **Default** | `[]` | - -### cssClass - -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------- | -| **Description** | Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces. | -| **Attribute** | `css-class` | -| **Type** | `string \| string[] \| undefined` | -| **Default** | `undefined` | - -### duration - -| | | -| --------------- | ------------------------------------------------------------ | -| **Description** | Number of milliseconds to wait before dismissing the picker. | -| **Attribute** | `duration` | -| **Type** | `number` | -| **Default** | `0` | - -### enterAnimation - -| | | -| --------------- | ------------------------------------------------------- | -| **Description** | Animation to use when the picker is presented. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - -### keyboardClose - -| | | -| --------------- | -------------------------------------------------------------------------------------- | -| **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | -| **Attribute** | `keyboard-close` | -| **Type** | `boolean` | -| **Default** | `true` | - -### leaveAnimation - -| | | -| --------------- | ------------------------------------------------------- | -| **Description** | Animation to use when the picker is dismissed. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - -### mode - -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - -### showBackdrop - -| | | -| --------------- | ---------------------------------------------------------- | -| **Description** | If `true`, a backdrop will be displayed behind the picker. | -| **Attribute** | `show-backdrop` | -| **Type** | `boolean` | -| **Default** | `true` | + ## Events -| Name | Description | -| ---------------------- | ---------------------------------------- | -| `ionPickerDidDismiss` | Emitted after the picker has dismissed. | -| `ionPickerDidPresent` | Emitted after the picker has presented. | -| `ionPickerWillDismiss` | Emitted before the picker has dismissed. | -| `ionPickerWillPresent` | Emitted before the picker has presented. | + ## Methods -### dismiss - -| | | -| --------------- | --------------------------------------------------------------------- | -| **Description** | Dismiss the picker overlay after it has been presented. | -| **Signature** | `dismiss(data?: any, role?: string \| undefined) => Promise` | - -### getColumn - -| | | -| --------------- | --------------------------------------------------------------- | -| **Description** | Get the column that matches the specified name. | -| **Signature** | `getColumn(name: string) => Promise` | + -### onDidDismiss +## CSS Shadow Parts -| | | -| --------------- | ------------------------------------------------------------ | -| **Description** | Returns a promise that resolves when the picker did dismiss. | -| **Signature** | `onDidDismiss() => Promise>` | + -### onWillDismiss - -| | | -| --------------- | ------------------------------------------------------------- | -| **Description** | Returns a promise that resolves when the picker will dismiss. | -| **Signature** | `onWillDismiss() => Promise>` | - -### present +## CSS Custom Properties -| | | -| --------------- | ----------------------------------------------------- | -| **Description** | Present the picker overlay after it has been created. | -| **Signature** | `present() => Promise` | + -## CSS Custom Properties +## Slots -| Name | Description | -| -------------------- | -------------------------------------- | -| `--backdrop-opacity` | Opacity of the backdrop | -| `--background` | Background of the picker | -| `--background-rgb` | Background of the picker in rgb format | -| `--border-color` | Border color of the picker | -| `--border-radius` | Border radius of the picker | -| `--border-style` | Border style of the picker | -| `--border-width` | Border width of the picker | -| `--height` | Height of the picker | -| `--max-height` | Maximum height of the picker | -| `--max-width` | Maximum width of the picker | -| `--min-height` | Minimum height of the picker | -| `--min-width` | Minimum width of the picker | -| `--width` | Width of the picker | + diff --git a/versioned_docs/version-v5/api/popover.md b/versioned_docs/version-v5/api/popover.md index c70ee6f34ba..856c41273ef 100644 --- a/versioned_docs/version-v5/api/popover.md +++ b/versioned_docs/version-v5/api/popover.md @@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/popover/props.md'; +import Events from '@ionic-internal/component-api/v5/popover/events.md'; +import Methods from '@ionic-internal/component-api/v5/popover/methods.md'; +import Parts from '@ionic-internal/component-api/v5/popover/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/popover/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/popover/slots.md'; + # ion-popover A Popover is a dialog that appears on top of the current page. It can be used for anything, but generally it is used for overflow actions that don't fit in the navigation bar. @@ -366,163 +373,24 @@ Developers can also use this component directly in their template: ## Properties -### animated - -| | | -| --------------- | ------------------------------------ | -| **Description** | If `true`, the popover will animate. | -| **Attribute** | `animated` | -| **Type** | `boolean` | -| **Default** | `true` | - -### backdropDismiss - -| | | -| --------------- | ---------------------------------------------------------------------- | -| **Description** | If `true`, the popover will be dismissed when the backdrop is clicked. | -| **Attribute** | `backdrop-dismiss` | -| **Type** | `boolean` | -| **Default** | `true` | - -### component - -| | | -| --------------- | ----------------------------------------------- | -| **Description** | The component to display inside of the popover. | -| **Attribute** | `component` | -| **Type** | `Function \| HTMLElement \| null \| string` | -| **Default** | `undefined` | - -### componentProps - -| | | -| --------------- | ------------------------------------------ | -| **Description** | The data to pass to the popover component. | -| **Attribute** | `undefined` | -| **Type** | `undefined \| { [key: string]: any; }` | -| **Default** | `undefined` | - -### cssClass - -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------- | -| **Description** | Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces. | -| **Attribute** | `css-class` | -| **Type** | `string \| string[] \| undefined` | -| **Default** | `undefined` | - -### enterAnimation - -| | | -| --------------- | ------------------------------------------------------- | -| **Description** | Animation to use when the popover is presented. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - -### event - -| | | -| --------------- | ------------------------------------------- | -| **Description** | The event to pass to the popover animation. | -| **Attribute** | `event` | -| **Type** | `any` | -| **Default** | `undefined` | - -### keyboardClose - -| | | -| --------------- | -------------------------------------------------------------------------------------- | -| **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | -| **Attribute** | `keyboard-close` | -| **Type** | `boolean` | -| **Default** | `true` | - -### leaveAnimation - -| | | -| --------------- | ------------------------------------------------------- | -| **Description** | Animation to use when the popover is dismissed. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - -### mode - -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - -### showBackdrop - -| | | -| --------------- | ----------------------------------------------------------- | -| **Description** | If `true`, a backdrop will be displayed behind the popover. | -| **Attribute** | `show-backdrop` | -| **Type** | `boolean` | -| **Default** | `true` | - -### translucent - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | If `true`, the popover will be translucent.
Only applies when the mode is `"ios"` and the device supports
[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | -| **Attribute** | `translucent` | -| **Type** | `boolean` | -| **Default** | `false` | + ## Events -| Name | Description | -| ----------------------- | ----------------------------------------- | -| `ionPopoverDidDismiss` | Emitted after the popover has dismissed. | -| `ionPopoverDidPresent` | Emitted after the popover has presented. | -| `ionPopoverWillDismiss` | Emitted before the popover has dismissed. | -| `ionPopoverWillPresent` | Emitted before the popover has presented. | + ## Methods -### dismiss - -| | | -| --------------- | --------------------------------------------------------------------- | -| **Description** | Dismiss the popover overlay after it has been presented. | -| **Signature** | `dismiss(data?: any, role?: string \| undefined) => Promise` | - -### onDidDismiss + -| | | -| --------------- | ------------------------------------------------------------- | -| **Description** | Returns a promise that resolves when the popover did dismiss. | -| **Signature** | `onDidDismiss() => Promise>` | +## CSS Shadow Parts -### onWillDismiss + -| | | -| --------------- | -------------------------------------------------------------- | -| **Description** | Returns a promise that resolves when the popover will dismiss. | -| **Signature** | `onWillDismiss() => Promise>` | - -### present +## CSS Custom Properties -| | | -| --------------- | ------------------------------------------------------ | -| **Description** | Present the popover overlay after it has been created. | -| **Signature** | `present() => Promise` | + -## CSS Custom Properties +## Slots -| Name | Description | -| -------------------- | ----------------------------- | -| `--backdrop-opacity` | Opacity of the backdrop | -| `--background` | Background of the popover | -| `--box-shadow` | Box shadow of the popover | -| `--height` | Height of the popover | -| `--max-height` | Maximum height of the popover | -| `--max-width` | Maximum width of the popover | -| `--min-height` | Minimum height of the popover | -| `--min-width` | Minimum width of the popover | -| `--width` | Width of the popover | + diff --git a/versioned_docs/version-v5/api/progress-bar.md b/versioned_docs/version-v5/api/progress-bar.md index 1653e4fa596..da1c3dedd37 100644 --- a/versioned_docs/version-v5/api/progress-bar.md +++ b/versioned_docs/version-v5/api/progress-bar.md @@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/progress-bar/props.md'; +import Events from '@ionic-internal/component-api/v5/progress-bar/events.md'; +import Methods from '@ionic-internal/component-api/v5/progress-bar/methods.md'; +import Parts from '@ionic-internal/component-api/v5/progress-bar/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/progress-bar/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/progress-bar/slots.md'; + # ion-progress-bar Progress bars inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. There are two types of progress bars: `determinate` and `indeterminate`. @@ -175,73 +182,24 @@ export class ProgressBarExample { ## Properties -### buffer - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------- | -| **Description** | If the buffer and value are smaller than 1, the buffer circles will show.
The buffer should be between [0, 1]. | -| **Attribute** | `buffer` | -| **Type** | `number` | -| **Default** | `1` | - -### color - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### mode + -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | +## Events -### reversed + -| | | -| --------------- | -------------------------------------------- | -| **Description** | If true, reverse the progress bar direction. | -| **Attribute** | `reversed` | -| **Type** | `boolean` | -| **Default** | `false` | +## Methods -### type - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | The state of the progress bar, based on if the time the process takes is known or not.
Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right). | -| **Attribute** | `type` | -| **Type** | `"determinate" \| "indeterminate"` | -| **Default** | `'determinate'` | - -### value - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | The value determines how much of the active bar should display when the
`type` is `"determinate"`.
The value should be between [0, 1]. | -| **Attribute** | `value` | -| **Type** | `number` | -| **Default** | `0` | + ## CSS Shadow Parts -| Name | Description | -| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -| `progress` | The progress bar that shows the current value when `type` is `"determinate"` and slides back and forth when `type` is `"indeterminate"`. | -| `stream` | The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `"determinate"`. | -| `track` | The track bar behind the progress bar. If the `buffer` property is set and `type` is `"determinate"` the track will be the | -| width of the `buffer` value. | + ## CSS Custom Properties -| Name | Description | -| ----------------------- | ---------------------------------------------------------------------- | -| `--background` | Background of the progress track, or the buffer bar if `buffer` is set | -| `--buffer-background` | DEPRECATED, use `--background` instead | -| `--progress-background` | Background of the progress bar representing the current value | + + +## Slots + + diff --git a/versioned_docs/version-v5/api/radio-group.md b/versioned_docs/version-v5/api/radio-group.md index 4395ccdc306..3cbaf9cd831 100644 --- a/versioned_docs/version-v5/api/radio-group.md +++ b/versioned_docs/version-v5/api/radio-group.md @@ -5,6 +5,13 @@ sidebar_label: 'ion-radio-group' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/radio-group/props.md'; +import Events from '@ionic-internal/component-api/v5/radio-group/events.md'; +import Methods from '@ionic-internal/component-api/v5/radio-group/methods.md'; +import Parts from '@ionic-internal/component-api/v5/radio-group/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/radio-group/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/radio-group/slots.md'; + # ion-radio-group A radio group is a group of [radio buttons](radio.md). It allows @@ -252,35 +259,24 @@ export class RadioGroupExample { ## Properties -### allowEmptySelection + -| | | -| --------------- | ---------------------------------------- | -| **Description** | If `true`, the radios can be deselected. | -| **Attribute** | `allow-empty-selection` | -| **Type** | `boolean` | -| **Default** | `false` | +## Events -### name + -| | | -| --------------- | --------------------------------------------------------------- | -| **Description** | The name of the control, which is submitted with the form data. | -| **Attribute** | `name` | -| **Type** | `string` | -| **Default** | `this.inputId` | +## Methods -### value + -| | | -| --------------- | ----------------------------- | -| **Description** | the value of the radio group. | -| **Attribute** | `value` | -| **Type** | `any` | -| **Default** | `undefined` | +## CSS Shadow Parts -## Events + + +## CSS Custom Properties + + + +## Slots -| Name | Description | -| ----------- | ----------------------------------- | -| `ionChange` | Emitted when the value has changed. | + diff --git a/versioned_docs/version-v5/api/radio.md b/versioned_docs/version-v5/api/radio.md index a9d205b5edd..8f2522e953a 100644 --- a/versioned_docs/version-v5/api/radio.md +++ b/versioned_docs/version-v5/api/radio.md @@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/radio/props.md'; +import Events from '@ionic-internal/component-api/v5/radio/events.md'; +import Methods from '@ionic-internal/component-api/v5/radio/methods.md'; +import Parts from '@ionic-internal/component-api/v5/radio/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/radio/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/radio/slots.md'; + # ion-radio Radios should be used inside of an [`ion-radio-group`](radio-group.md). Pressing on a radio will check it. They can also be checked programmatically by setting the value property of the parent `ion-radio-group` to the value of the radio. @@ -228,70 +235,24 @@ export class RadioExample { ## Properties -### color - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### disabled - -| | | -| --------------- | --------------------------------------------------- | -| **Description** | If `true`, the user cannot interact with the radio. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - -### mode - -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | + -### name - -| | | -| --------------- | --------------------------------------------------------------- | -| **Description** | The name of the control, which is submitted with the form data. | -| **Attribute** | `name` | -| **Type** | `string` | -| **Default** | `this.inputId` | - -### value +## Events -| | | -| --------------- | ----------------------- | -| **Description** | the value of the radio. | -| **Attribute** | `value` | -| **Type** | `any` | -| **Default** | `undefined` | + -## Events +## Methods -| Name | Description | -| ---------- | ------------------------------------------ | -| `ionBlur` | Emitted when the radio button loses focus. | -| `ionFocus` | Emitted when the radio button has focus. | + ## CSS Shadow Parts -| Name | Description | -| ----------- | -------------------------------------------------------- | -| `container` | The container for the radio mark. | -| `mark` | The checkmark or dot used to indicate the checked state. | + ## CSS Custom Properties -| Name | Description | -| ----------------------- | ---------------------------------------- | -| `--border-radius` | Border radius of the radio | -| `--color` | Color of the radio | -| `--color-checked` | Color of the checked radio | -| `--inner-border-radius` | Border radius of the inner checked radio | + + +## Slots + + diff --git a/versioned_docs/version-v5/api/range.md b/versioned_docs/version-v5/api/range.md index f79748d6e38..7f935e3f481 100644 --- a/versioned_docs/version-v5/api/range.md +++ b/versioned_docs/version-v5/api/range.md @@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/range/props.md'; +import Events from '@ionic-internal/component-api/v5/range/events.md'; +import Methods from '@ionic-internal/component-api/v5/range/methods.md'; +import Parts from '@ionic-internal/component-api/v5/range/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/range/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/range/slots.md'; + # ion-range The Range slider lets users select from a range of values by moving @@ -304,161 +311,24 @@ export class RangeExample { ## Properties -### color - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - -### debounce - -| | | -| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | How long, in milliseconds, to wait to trigger the
`ionChange` event after each change in the range value.
This also impacts form bindings such as `ngModel` or `v-model`. | -| **Attribute** | `debounce` | -| **Type** | `number` | -| **Default** | `0` | - -### disabled - -| | | -| --------------- | --------------------------------------------------- | -| **Description** | If `true`, the user cannot interact with the range. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - -### dualKnobs - -| | | -| --------------- | --------------- | -| **Description** | Show two knobs. | -| **Attribute** | `dual-knobs` | -| **Type** | `boolean` | -| **Default** | `false` | - -### max - -| | | -| --------------- | ----------------------------------- | -| **Description** | Maximum integer value of the range. | -| **Attribute** | `max` | -| **Type** | `number` | -| **Default** | `100` | - -### min - -| | | -| --------------- | ----------------------------------- | -| **Description** | Minimum integer value of the range. | -| **Attribute** | `min` | -| **Type** | `number` | -| **Default** | `0` | - -### mode - -| | | -| --------------- | ------------------------------------------------- | -| **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - -### name - -| | | -| --------------- | --------------------------------------------------------------- | -| **Description** | The name of the control, which is submitted with the form data. | -| **Attribute** | `name` | -| **Type** | `string` | -| **Default** | `''` | - -### pin - -| | | -| --------------- | --------------------------------------------------------------------------- | -| **Description** | If `true`, a pin with integer value is shown when the knob
is pressed. | -| **Attribute** | `pin` | -| **Type** | `boolean` | -| **Default** | `false` | - -### snaps - -| | | -| --------------- | -------------------------------------------------------------------------------------------- | -| **Description** | If `true`, the knob snaps to tick marks evenly spaced based
on the step property value. | -| **Attribute** | `snaps` | -| **Type** | `boolean` | -| **Default** | `false` | - -### step - -| | | -| --------------- | -------------------------------- | -| **Description** | Specifies the value granularity. | -| **Attribute** | `step` | -| **Type** | `number` | -| **Default** | `1` | - -### ticks - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------ | -| **Description** | If `true`, tick marks are displayed based on the step value.
Only applies when `snaps` is `true`. | -| **Attribute** | `ticks` | -| **Type** | `boolean` | -| **Default** | `true` | - -### value - -| | | -| --------------- | --------------------------------------------- | -| **Description** | the value of the range. | -| **Attribute** | `value` | -| **Type** | `number \| { lower: number; upper: number; }` | -| **Default** | `0` | + ## Events -| Name | Description | -| ----------- | -------------------------------------------- | -| `ionBlur` | Emitted when the range loses focus. | -| `ionChange` | Emitted when the value property has changed. | -| `ionFocus` | Emitted when the range has focus. | + + +## Methods + + ## CSS Shadow Parts -| Name | Description | -| ------------- | ------------------------------------------ | -| `bar` | The inactive part of the bar. | -| `bar-active` | The active part of the bar. | -| `knob` | The handle that is used to drag the range. | -| `pin` | The counter that appears above a knob. | -| `tick` | An inactive tick mark. | -| `tick-active` | An active tick mark. | + ## CSS Custom Properties -| Name | Description | -| ------------------------- | ---------------------------------- | -| `--bar-background` | Background of the range bar | -| `--bar-background-active` | Background of the active range bar | -| `--bar-border-radius` | Border radius of the range bar | -| `--bar-height` | Height of the range bar | -| `--height` | Height of the range | -| `--knob-background` | Background of the range knob | -| `--knob-border-radius` | Border radius of the range knob | -| `--knob-box-shadow` | Box shadow of the range knob | -| `--knob-size` | Size of the range knob | -| `--pin-background` | Background of the range pin | -| `--pin-color` | Color of the range pin | + ## Slots -| Name | Description | -| ------- | ---------------------------------------------------------------------------------- | -| `end` | Content is placed to the right of the range slider in LTR, and to the left in RTL. | -| `start` | Content is placed to the left of the range slider in LTR, and to the right in RTL. | + diff --git a/versioned_docs/version-v5/api/refresher-content.md b/versioned_docs/version-v5/api/refresher-content.md index bbaa2f63a0c..cf72c8fef92 100644 --- a/versioned_docs/version-v5/api/refresher-content.md +++ b/versioned_docs/version-v5/api/refresher-content.md @@ -5,44 +5,37 @@ sidebar_label: 'ion-refresher-content' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/refresher-content/props.md'; +import Events from '@ionic-internal/component-api/v5/refresher-content/events.md'; +import Methods from '@ionic-internal/component-api/v5/refresher-content/methods.md'; +import Parts from '@ionic-internal/component-api/v5/refresher-content/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/refresher-content/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/refresher-content/slots.md'; + # ion-refresher-content The refresher content contains the text, icon and spinner to display during a pull-to-refresh. Ionic provides the pulling icon and refreshing spinner based on the platform. However, the default icon, spinner, and text can be customized based on the state of the refresher. ## Properties -### pullingIcon - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | A static icon or a spinner to display when you begin to pull down.
A spinner name can be provided to gradually show tick marks
when pulling down on iOS devices. | -| **Attribute** | `pulling-icon` | -| **Type** | `null \| string \| undefined` | -| **Default** | `undefined` | - -### pullingText - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | The text you want to display when you begin to pull down.
`pullingText` can accept either plaintext or HTML as a string.
To display characters normally reserved for HTML, they
must be escaped. For example `` would become
`<Ionic>`

For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | -| **Attribute** | `pulling-text` | -| **Type** | `IonicSafeString \| string \| undefined` | -| **Default** | `undefined` | - -### refreshingSpinner - -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------- | -| **Description** | An animated SVG spinner that shows when refreshing begins | -| **Attribute** | `refreshing-spinner` | -| **Type** | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | -| **Default** | `undefined` | - -### refreshingText - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | The text you want to display when performing a refresh.
`refreshingText` can accept either plaintext or HTML as a string.
To display characters normally reserved for HTML, they
must be escaped. For example `` would become
`<Ionic>`

For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | -| **Attribute** | `refreshing-text` | -| **Type** | `IonicSafeString \| string \| undefined` | -| **Default** | `undefined` | + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v5/api/refresher.md b/versioned_docs/version-v5/api/refresher.md index 4bd0152a243..76f40d3715c 100644 --- a/versioned_docs/version-v5/api/refresher.md +++ b/versioned_docs/version-v5/api/refresher.md @@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/refresher/props.md'; +import Events from '@ionic-internal/component-api/v5/refresher/events.md'; +import Methods from '@ionic-internal/component-api/v5/refresher/methods.md'; +import Parts from '@ionic-internal/component-api/v5/refresher/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/refresher/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/refresher/slots.md'; + # ion-refresher The refresher provides pull-to-refresh functionality on a content component. @@ -288,91 +295,24 @@ export class RefresherExample { ## Properties -### closeDuration - -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Time it takes to close the refresher.
Does not apply when the refresher content uses a spinner,
enabling the native refresher. | -| **Attribute** | `close-duration` | -| **Type** | `string` | -| **Default** | `'280ms'` | - -### disabled - -| | | -| --------------- | ---------------------------------------- | -| **Description** | If `true`, the refresher will be hidden. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - -### pullFactor - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| **Description** | How much to multiply the pull speed by. To slow the pull animation down,
pass a number less than `1`. To speed up the pull, pass a number greater
than `1`. The default value is `1` which is equal to the speed of the cursor.
If a negative value is passed in, the factor will be `1` instead.

For example: If the value passed is `1.2` and the content is dragged by
`10` pixels, instead of `10` pixels the content will be pulled by `12` pixels
(an increase of 20 percent). If the value passed is `0.8`, the dragged amount
will be `8` pixels, less than the amount the cursor has moved.

Does not apply when the refresher content uses a spinner,
enabling the native refresher. | -| **Attribute** | `pull-factor` | -| **Type** | `number` | -| **Default** | `1` | - -### pullMax - -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | The maximum distance of the pull until the refresher
will automatically go into the `refreshing` state.
Defaults to the result of `pullMin + 60`.
Does not apply when the refresher content uses a spinner,
enabling the native refresher. | -| **Attribute** | `pull-max` | -| **Type** | `number` | -| **Default** | `this.pullMin + 60` | - -### pullMin - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | The minimum distance the user must pull down until the
refresher will go into the `refreshing` state.
Does not apply when the refresher content uses a spinner,
enabling the native refresher. | -| **Attribute** | `pull-min` | -| **Type** | `number` | -| **Default** | `60` | - -### snapbackDuration - -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Time it takes the refresher to to snap back to the `refreshing` state.
Does not apply when the refresher content uses a spinner,
enabling the native refresher. | -| **Attribute** | `snapback-duration` | -| **Type** | `string` | -| **Default** | `'280ms'` | + ## Events -| Name | 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 + + +## CSS Shadow Parts -| | | -| --------------- | ---------------------------------------------------------------- | -| **Description** | Changes the refresher's state from `refreshing` to `cancelling`. | -| **Signature** | `cancel() => Promise` | + -### complete +## CSS Custom Properties -| | | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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`. | -| **Signature** | `complete() => Promise` | + -### getProgress +## Slots -| | | -| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Signature** | `getProgress() => Promise` | + diff --git a/versioned_docs/version-v5/api/reorder-group.md b/versioned_docs/version-v5/api/reorder-group.md index 2c08bab05fa..9d605927575 100644 --- a/versioned_docs/version-v5/api/reorder-group.md +++ b/versioned_docs/version-v5/api/reorder-group.md @@ -5,6 +5,13 @@ sidebar_label: 'ion-reorder-group' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/reorder-group/props.md'; +import Events from '@ionic-internal/component-api/v5/reorder-group/events.md'; +import Methods from '@ionic-internal/component-api/v5/reorder-group/methods.md'; +import Parts from '@ionic-internal/component-api/v5/reorder-group/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/reorder-group/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/reorder-group/slots.md'; + # ion-reorder-group The reorder group is a wrapper component for items using the `ion-reorder` component. See the [Reorder documentation](reorder.md) for further information about the anchor component that is used to drag items within the `ion-reorder-group`. @@ -586,29 +593,24 @@ export class ReorderGroupExample { ## Properties -### disabled - -| | | -| --------------- | -------------------------------------- | -| **Description** | If `true`, the reorder will be hidden. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `true` | + ## Events -| Name | Description | -| ---------------- | --------------------------------------------------------------------------- | -| `ionItemReorder` | Event that needs to be listened to in order to complete the reorder action. | - -Once the event has been emitted, the `complete()` method then needs -to be called in order to finalize the reorder action. | + ## Methods -### complete + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Completes the reorder operation. Must be called by the `ionItemReorder` event.

If a list of items is passed, the list will be reordered and returned in the
proper order.

If no parameters are passed or if `true` is passed in, the reorder will complete
and the item will remain in the position it was dragged to. If `false` is passed,
the reorder will complete and the item will bounce back to its original position. | -| **Signature** | `complete(listOrReorder?: boolean \| any[] \| undefined) => Promise` | + diff --git a/versioned_docs/version-v5/api/reorder.md b/versioned_docs/version-v5/api/reorder.md index 83d5d654594..04d5d40b244 100644 --- a/versioned_docs/version-v5/api/reorder.md +++ b/versioned_docs/version-v5/api/reorder.md @@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/reorder/props.md'; +import Events from '@ionic-internal/component-api/v5/reorder/events.md'; +import Methods from '@ionic-internal/component-api/v5/reorder/methods.md'; +import Parts from '@ionic-internal/component-api/v5/reorder/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/reorder/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/reorder/slots.md'; + # ion-reorder Reorder is a component that allows an item in a group of items to be dragged to change its order within that group. It must be used within an `ion-reorder-group` to provide a visual drag and drop interface. @@ -355,8 +362,26 @@ export class ReorderExample { +## Properties + + + +## Events + + + +## Methods + + + ## CSS Shadow Parts -| Name | Description | -| ------ | ----------------------------------------------- | -| `icon` | The icon of the reorder handle (uses ion-icon). | + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v5/api/ripple-effect.md b/versioned_docs/version-v5/api/ripple-effect.md index 61161bba68f..cf5401e0428 100644 --- a/versioned_docs/version-v5/api/ripple-effect.md +++ b/versioned_docs/version-v5/api/ripple-effect.md @@ -5,6 +5,13 @@ sidebar_label: 'ion-ripple-effect' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/ripple-effect/props.md'; +import Events from '@ionic-internal/component-api/v5/ripple-effect/events.md'; +import Methods from '@ionic-internal/component-api/v5/ripple-effect/methods.md'; +import Parts from '@ionic-internal/component-api/v5/ripple-effect/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/ripple-effect/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/ripple-effect/slots.md'; + # ion-ripple-effect The ripple effect component adds the [Material Design ink ripple interaction effect](https://material.io/develop/web/components/ripples/). This component can only be used inside of an `` and can be added to any component. @@ -235,20 +242,24 @@ export class RippleEffectExample { ## Properties -### type + + +## Events -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | Sets the type of ripple-effect:

- `bounded`: the ripple effect expands from the user's click position
- `unbounded`: the ripple effect expands from the center of the button and overflows the container.

NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,
while surfaces for unbounded ripples should have it set to visible. | -| **Attribute** | `type` | -| **Type** | `"bounded" \| "unbounded"` | -| **Default** | `'bounded'` | + ## Methods -### addRipple + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots -| | | -| --------------- | -------------------------------------------------------- | -| **Description** | Adds the ripple effect to the parent element. | -| **Signature** | `addRipple(x: number, y: number) => Promise<() => void>` | + diff --git a/versioned_docs/version-v5/api/route-redirect.md b/versioned_docs/version-v5/api/route-redirect.md index 0e614ef9c83..867f8908a8e 100644 --- a/versioned_docs/version-v5/api/route-redirect.md +++ b/versioned_docs/version-v5/api/route-redirect.md @@ -5,6 +5,13 @@ sidebar_label: 'ion-route-redirect' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/route-redirect/props.md'; +import Events from '@ionic-internal/component-api/v5/route-redirect/events.md'; +import Methods from '@ionic-internal/component-api/v5/route-redirect/methods.md'; +import Parts from '@ionic-internal/component-api/v5/route-redirect/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/route-redirect/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/route-redirect/slots.md'; + # ion-route-redirect A route redirect can only be used with an `ion-router` as a direct child of it. @@ -81,30 +88,24 @@ routeRedirect.setAttribute('to', isLoggedIn ? undefined : '/login'); ## Properties -### from + -| | | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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. | -| **Attribute** | `from` | -| **Type** | `string` | -| **Default** | `undefined` | +## Events -### to + -| | | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Description** | 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 perform 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. | -| **Attribute** | `to` | -| **Type** | `null \| string \| undefined` | -| **Default** | `undefined` | +## Methods -## Events + + +## CSS Shadow Parts + + + +## CSS Custom Properties -| Name | 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. +## Slots -`ion-router` captures this event in order to update his internal registry of router rules. | + diff --git a/versioned_docs/version-v5/api/route.md b/versioned_docs/version-v5/api/route.md index ff5821af469..437fb32ef7b 100644 --- a/versioned_docs/version-v5/api/route.md +++ b/versioned_docs/version-v5/api/route.md @@ -5,6 +5,13 @@ sidebar_label: 'ion-route' import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Props from '@ionic-internal/component-api/v5/route/props.md'; +import Events from '@ionic-internal/component-api/v5/route/events.md'; +import Methods from '@ionic-internal/component-api/v5/route/methods.md'; +import Parts from '@ionic-internal/component-api/v5/route/parts.md'; +import CustomProps from '@ionic-internal/component-api/v5/route/custom-props.md'; +import Slots from '@ionic-internal/component-api/v5/route/slots.md'; + # ion-route The route component takes a component and renders it when the Browser URL matches the url property. @@ -69,10 +76,10 @@ const hasUnsavedDataGuard = async () => { }; const confirmDiscardChanges = async () => { - const alert = document.createElement('ion-alert'); - alert.header = 'Discard Unsaved Changes?'; - alert.message = 'Are you sure you want to leave? Any unsaved changed will be lost.'; - alert.buttons = [ + const route = document.createElement('ion-route'); + route.header = 'Discard Unsaved Changes?'; + route.message = 'Are you sure you want to leave? Any unsaved changed will be lost.'; + route.buttons = [ { text: 'Cancel', role: 'Cancel', @@ -83,11 +90,11 @@ const confirmDiscardChanges = async () => { }, ]; - document.body.appendChild(alert); + document.body.appendChild(route); - await alert.present(); + await route.present(); - const { role } = await alert.onDidDismiss(); + const { role } = await route.onDidDismiss(); return role === 'Cancel' ? false : true; }; @@ -99,7 +106,7 @@ const confirmDiscardChanges = async () => { ```tsx import { Component, h } from '@stencil/core'; -import { alertController } from '@ionic/core'; +import { routeController } from '@ionic/core'; @Component({ tag: 'router-example', @@ -139,7 +146,7 @@ const hasUnsavedDataGuard = async () => { }; const confirmDiscardChanges = async () => { - const alert = await alertController.create({ + const route = await routeController.create({ header: 'Discard Unsaved Changes?', message: 'Are you sure you want to leave? Any unsaved changed will be lost.', buttons: [ @@ -154,9 +161,9 @@ const confirmDiscardChanges = async () => { ], }); - await alert.present(); + await route.present(); - const { role } = await alert.onDidDismiss(); + const { role } = await route.onDidDismiss(); return role === 'Cancel' ? false : true; }; @@ -177,7 +184,7 @@ const confirmDiscardChanges = async () => {