` so that the component dimensions are still computed properly.\n\n#### Passing Data\n\nDuring creation of a modal, data can be passed in through the `componentProps`.\nThe previous example can be written to include data:\n\n```typescript\nasync presentModal() {\n const modal = await this.modalController.create({\n component: ModalPage,\n cssClass: 'my-custom-class',\n componentProps: {\n 'firstName': 'Douglas',\n 'lastName': 'Adams',\n 'middleInitial': 'N'\n }\n });\n return await modal.present();\n}\n```\n\nTo get the data passed into the `componentProps`, set it as an `@Input`:\n\n```typescript\nexport class ModalPage {\n\n // Data passed in by componentProps\n @Input() firstName: string;\n @Input() lastName: string;\n @Input() middleInitial: string;\n\n}\n```\n\n#### Dismissing a Modal\n\nA modal can be dismissed by calling the dismiss method on the modal controller and optionally passing any data from the modal.\n\n```javascript\nexport class ModalPage {\n ...\n\n dismiss() {\n // using the injected ModalController this page\n // can \"dismiss\" itself and optionally pass back data\n this.modalController.dismiss({\n 'dismissed': true\n });\n }\n}\n```\n\nAfter being dismissed, the data can be read in through the `onWillDismiss` or `onDidDismiss` attached to the modal after creation:\n\n```javascript\nconst { data } = await modal.onWillDismiss();\nconsole.log(data);\n```\n\n\n#### Lazy Loading\n\nWhen lazy loading a modal, it's important to note that the modal will not be loaded when it is opened, but rather when the module that imports the modal's module is loaded.\n\nFor example, say there exists a `CalendarComponent` and an `EventModal`. The modal is presented by clicking a button in the `CalendarComponent`. In Angular, the `EventModalModule` would need to be included in the `CalendarComponentModule` since the modal is created in the `CalendarComponent`:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { IonicModule } from '@ionic/angular';\n\nimport { CalendarComponent } from './calendar.component';\nimport { EventModalModule } from '../modals/event/event.module';\n\n@NgModule({\n declarations: [\n CalendarComponent\n ],\n imports: [\n IonicModule,\n CommonModule,\n EventModalModule\n ],\n exports: [\n CalendarComponent\n ]\n})\n\nexport class CalendarComponentModule {}\n```\n\n#### Card Modals\n\nModals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.\n\n> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect.\n\nIf you are creating an application that uses `ion-tabs`, it is recommended that you get the parent `ion-router-outlet` using `this.routerOutlet.parentOutlet.nativeEl`, otherwise the tabbar will not scale down when the modal opens.\n\n```javascript\nimport { IonRouterOutlet } from '@ionic/angular';\n\nconstructor(private routerOutlet: IonRouterOutlet) {}\n\nasync presentModal() {\n const modal = await this.modalController.create({\n component: ModalPage,\n cssClass: 'my-custom-class',\n swipeToClose: true,\n presentingElement: this.routerOutlet.nativeEl\n });\n return await modal.present();\n}\n```\n\nIn most scenarios, using the `ion-router-outlet` element as the `presentingElement` is fine. In cases where you are presenting a card-style modal from within another modal, you should pass in the top-most `ion-modal` element as the `presentingElement`.\n\n```javascript\nimport { ModalController } from '@ionic/angular';\n\nconstructor(private modalController: ModalController) {}\n\nasync presentModal() {\n const modal = await this.modalController.create({\n component: ModalPage,\n cssClass: 'my-custom-class',\n swipeToClose: true,\n presentingElement: await this.modalController.getTop() // Get the top-most ion-modal\n });\n return await modal.present();\n}\n```\n\n#### Sheet Modals\n\n```javascript\nimport { IonRouterOutlet } from '@ionic/angular';\n\nconstructor(private routerOutlet: IonRouterOutlet) {}\n\nasync presentModal() {\n const modal = await this.modalController.create({\n component: ModalPage,\n initialBreakpoint: 0.5,\n breakpoints: [0, 0.5, 1]\n });\n return await modal.present();\n}\n```\n\n### Style Placement\n\nIn Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Modal can be presented from within a page, the `ion-modal` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config).\n",
- "javascript": "### Inline Modal\n\n```html\n\n
\n Modal Content\n\n\n\n
Click to open modal\n
\n Modal Content\n\n\n\n
\n Modal Content\n\n\n\n
\n Modal Content\n\n\n\n```\n\n### Using JavaScript\n\n```javascript\ncustomElements.define('modal-page', class extends HTMLElement {\n connectedCallback() {\n this.innerHTML = `\n
\n \n Modal Header\n \n \n \n \n \n \n\n
\n Modal Content\n`;\n }\n});\n\nfunction presentModal() {\n // create the modal with the `modal-page` component\n const modalElement = document.createElement('ion-modal');\n modalElement.component = 'modal-page';\n modalElement.cssClass = 'my-custom-class';\n\n // present the modal\n document.body.appendChild(modalElement);\n return modalElement.present();\n}\n```\n\n> If you need a wrapper element inside of your modal component, we recommend using a `
` so that the component dimensions are still computed properly.\n\n### Passing Data\n\nDuring creation of a modal, data can be passed in through the `componentProps`. The previous example can be written to include data:\n\n```javascript\nconst modalElement = document.createElement('ion-modal');\nmodalElement.component = 'modal-page';\nmodalElement.cssClass = 'my-custom-class';\nmodalElement.componentProps = {\n 'firstName': 'Douglas',\n 'lastName': 'Adams',\n 'middleInitial': 'N'\n};\n```\n\nTo get the data passed into the `componentProps`, query for the modal in the `modal-page`:\n\n```js\ncustomElements.define('modal-page', class extends HTMLElement {\n connectedCallback() {\n const modalElement = document.querySelector('ion-modal');\n console.log(modalElement.componentProps.firstName);\n\n ...\n }\n}\n```\n\n\n### Dismissing a Modal\n\nA modal can be dismissed by calling the dismiss method and optionally passing any data from the modal.\n\n```javascript\nasync function dismissModal() {\n await modal.dismiss({\n 'dismissed': true\n });\n}\n```\n\nAfter being dismissed, the data can be read in through the `onWillDismiss` or `onDidDismiss` attached to the modal after creation:\n\n```javascript\nconst { data } = await modalElement.onWillDismiss();\nconsole.log(data);\n```\n\n\n### Card Modals\n\nModals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.\n\n> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect.\n\n```javascript\nconst modalElement = document.createElement('ion-modal');\nmodalElement.component = 'modal-page';\nmodalElement.cssClass = 'my-custom-class';\nmodalElement.swipeToClose = true;\nmodalElement.presentingElement = document.querySelector('ion-nav');\n```\n\nIn most scenarios, using the `ion-nav` element as the `presentingElement` is fine. In cases where you are presenting a card-style modal from within a modal, you should pass in the top-most `ion-modal` element as the `presentingElement`.\n\n```javascript\nconst modalElement = document.createElement('ion-modal');\nmodalElement.component = 'modal-page';\nmodalElement.cssClass = 'my-custom-class';\nmodalElement.swipeToClose = true;\nmodalElement.presentingElement = await modalController.getTop(); // Get the top-most ion-modal\n```\n\n### Sheet Modals\n\n```javascript\nconst modalElement = document.createElement('ion-modal');\nmodalElement.component = 'modal-page';\nmodalElement.initialBreakpoint = 0.5;\nmodalElement.breakpoints = [0, 0.5, 1];\n```",
- "react": "### Inline Modal\n\n```tsx\nimport { React, useRef } from 'react';\nconst App: React.FC = () => {\n const routerRef = useRef
(null);\n \n return (\n \n \n \n } exact={true} />\n \n \n \n )\n};\n\n...\n\ninterface Props {\n router: HTMLIonRouterOutletElement | null;\n}\n\nimport React from 'react';\nimport AppReactComponent from './AppReactComponent';\nimport { IonModal, IonContent, IonButton } from '@ionic/react';\nexport const ModalExample: React.FC = ({ router }) => {\n return (\n <>\n {/* Default */}\n \n Modal Content\n \n \n {/* Use a trigger */}\n Click to open modal\n \n Modal Content\n \n \n {/* Sheet Modal */}\n \n Modal Content\n \n \n {/* Card Modal */}\n \n Modal Content\n \n \n {/* Passing Props */}\n \n \n \n \n );\n};\n```\n\n\n### useIonModal Hook\n\n> `useIonModal` requires being a descendant of ``. If you need to use a modal outside of an ``, consider using the component method instead.\n\n\n```tsx\n/* Using with useIonModal Hook */ \n\nimport React, { useState } from 'react';\nimport { IonButton, IonContent, IonPage, useIonModal } from '@ionic/react';\n\nconst Body: React.FC<{\n count: number;\n onDismiss: () => void;\n onIncrement: () => void;\n}> = ({ count, onDismiss, onIncrement }) => (\n \n count: {count}\n onIncrement()}>\n Increment Count\n \n onDismiss()}>\n Close\n \n
\n);\n\nconst ModalExample: React.FC = () => {\n const [count, setCount] = useState(0);\n\n const handleIncrement = () => {\n setCount(count + 1);\n };\n\n const handleDismiss = () => {\n dismiss();\n };\n\n /**\n * First parameter is the component to show, second is the props to pass\n */\n const [present, dismiss] = useIonModal(Body, {\n count,\n onDismiss: handleDismiss,\n onIncrement: handleIncrement,\n });\n\n return (\n \n \n {\n present({\n cssClass: 'my-class',\n });\n }}\n >\n Show Modal\n \n Count: {count}
\n \n \n );\n};\n```\n\n```tsx\n/* Using with IonModal Component */\n\nimport React, { useState } from 'react';\nimport { IonModal, IonButton, IonContent } from '@ionic/react';\n\nexport const ModalExample: React.FC = () => {\n const [showModal, setShowModal] = useState(false);\n\n return (\n \n \n This is modal content
\n setShowModal(false)}>Close Modal\n \n setShowModal(true)}>Show Modal\n \n );\n};\n```\n\n#### Card Modals\n\nModals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.\n\n> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect.\n\n```tsx\nconst App: React.FC = () => {\n const routerRef = useRef(null);\n \n return (\n \n \n \n } exact={true} />\n \n \n \n )\n};\n\n...\n\ninterface HomePageProps {\n router: HTMLIonRouterOutletElement | null;\n}\n\nconst Home: React.FC = ({ router }) => {\n const [showModal, setShowModal] = useState(false);\n \n return (\n \n \n setShowModal(false)}>\n This is modal content
\n \n \n \n );\n};\n\n```\n\nIn most scenarios, setting a ref on `IonRouterOutlet` and passing that ref's `current` value to `presentingElement` is fine. In cases where you are presenting a card-style modal from within another modal, you should pass in the top-most `IonModal` ref as the `presentingElement`.\n\n```tsx\n setShowModal(false)}>\n This is modal content
\n setShow2ndModal(true)}>Show 2nd Modal\n setShowModal(false)}>Close Modal\n\n setShow2ndModal(false)}>\n This is more modal content
\n setShow2ndModal(false)}>Close Modal\n\n```\n\n\n#### Sheet Modals\n\n```tsx\nconst App: React.FC = () => {\n const routerRef = useRef(null);\n \n return (\n \n \n \n } exact={true} />\n \n \n \n )\n};\n\n...\n\nconst Home: React.FC = () => {\n const [showModal, setShowModal] = useState(false);\n \n return (\n \n \n setShowModal(false)}>\n This is modal content
\n \n \n \n );\n};\n\n```\n",
- "stencil": "### Inline Modal\n\n```tsx\nimport { Component, Element, h } from '@stencil/core';\n\n@Component({\n tag: 'modal-example',\n styleUrl: 'modal-example.css'\n})\nexport class ModalExample {\n @Element() el: any;\n \n componentDidLoad() {\n this.routerOutlet = this.el.closest('ion-router-outlet');\n }\n \n render() {\n return (\n \n {/* Default */}\n
\n Modal Content\n \n \n {/* Use a trigger */}\n
Click to open modal\n
\n Modal Content\n \n \n {/* Sheet Modal */}\n
\n Modal Content\n \n \n {/* Card Modal */}\n \n Modal Content\n \n \n {/* Passing Props */}\n \n \n \n ` so that the component dimensions are still computed properly.\n\n### Passing Data\n\nDuring creation of a modal, data can be passed in through the `componentProps`.\nThe previous example can be written to include data:\n\n```tsx\nasync presentModal() {\n const modal = await modalController.create({\n component: 'page-modal',\n cssClass: 'my-custom-class',\n componentProps: {\n 'firstName': 'Douglas',\n 'lastName': 'Adams',\n 'middleInitial': 'N'\n }\n });\n await modal.present();\n}\n```\n\nTo get the data passed into the `componentProps`, set each one as a `@Prop`:\n\n```tsx\nimport { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'page-modal',\n styleUrl: 'page-modal.css',\n})\nexport class PageModal {\n // Data passed in by componentProps\n @Prop() firstName: string;\n @Prop() lastName: string;\n @Prop() middleInitial: string;\n}\n```\n\n### Dismissing a Modal\n\nA modal can be dismissed by calling the dismiss method on the modal controller and optionally passing any data from the modal.\n\n```tsx\nexport class ModalPage {\n ...\n\n dismiss(data?: any) {\n // dismiss the closest modal and optionally pass back data\n (this.el.closest('ion-modal') as any).dismiss({\n 'dismissed': true\n });\n }\n}\n```\n\nAfter being dismissed, the data can be read in through the `onWillDismiss` or `onDidDismiss` attached to the modal after creation:\n\n```tsx\nconst { data } = await modal.onWillDismiss();\nconsole.log(data);\n```\n\n### Card Modals\n\nModals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.\n\n> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect.\n\n```tsx\nimport { Component, Element, h } from '@stencil/core';\n\nimport { modalController } from '@ionic/core';\n\n@Component({\n tag: 'modal-example',\n styleUrl: 'modal-example.css'\n})\nexport class ModalExample {\n @Element() el: any;\n\n async presentModal() {\n const modal = await modalController.create({\n component: 'page-modal',\n cssClass: 'my-custom-class',\n swipeToClose: true,\n presentingElement: this.el.closest('ion-router-outlet'),\n });\n await modal.present();\n }\n\n}\n```\n\nIn most scenarios, using the `ion-router-outlet` element as the `presentingElement` is fine. In cases where you are presenting a card-style modal from within another modal, you should pass in the top-most `ion-modal` element as the `presentingElement`.\n\n```tsx\nasync presentModal() {\n const modal = await modalController.create({\n component: 'page-modal',\n cssClass: 'my-custom-class',\n swipeToClose: true,\n presentingElement: await modalController.getTop() // Get the top-most ion-modal\n });\n await modal.present();\n}\n```\n\n\n### Sheet Modals\n\n**Controller**\n```tsx\nimport { Component, Element, h } from '@stencil/core';\n\nimport { modalController } from '@ionic/core';\n\n@Component({\n tag: 'modal-example',\n styleUrl: 'modal-example.css'\n})\nexport class ModalExample {\n @Element() el: any;\n\n async presentModal() {\n const modal = await modalController.create({\n component: 'page-modal',\n initialBreakpoint: 0.5,\n breakpoints: [0, 0.5, 1]\n \n });\n await modal.present();\n }\n}\n```\n\n**Inline**\n```tsx\nimport { Component, State, h } from '@stencil/core';\n\n@Component({\n tag: 'modal-example',\n styleUrl: 'modal-example.css'\n})\nexport class ModalExample {\n @State() isModalOpen: boolean = false;\n\n render() {\n return [\n
\n \n \n ]\n }\n}\n```\n",
- "vue": "### Inline Modal\n\n```html\n\n\n Modal Content\n\n\n\nClick to open modal\n\n Modal Content\n\n\n\n\n Modal Content\n\n\n\n\n Modal Content\n\n\n\n\n \n\n\n\n```\n\n### Modal Controller\n\n```html\n\n \n \n {{ title }}\n \n \n \n {{ content }}\n \n\n\n\n```\n\n```html\n\n \n \n Open Modal\n \n \n\n\n\n```\n\nDevelopers can also use this component directly in their template:\n\n```html\n\n Show Modal\n \n \n \n\n\n\n```\n\n> If you need a wrapper element inside of your modal component, we recommend using an `` so that the component dimensions are still computed properly.\n\n#### Card Modals\n\nModals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.\n\n> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect.\n\n```html\n\n \n \n Show Modal\n \n \n \n \n \n\n\n\n```\n\n#### Sheet Modals\n\n```html\n\n \n \n Open Modal\n \n \n\n\n\n```"
- },
- "props": [
- {
- "name": "animated",
- "type": "boolean",
- "mutable": false,
- "attr": "animated",
- "reflectToAttr": false,
- "docs": "If `true`, the modal will animate.",
- "docsTags": [],
- "default": "true",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "backdropBreakpoint",
- "type": "number",
- "mutable": false,
- "attr": "backdrop-breakpoint",
- "reflectToAttr": false,
- "docs": "A decimal value between 0 and 1 that indicates the\npoint after which the backdrop will begin to fade in\nwhen using a sheet modal. Prior to this point, the\nbackdrop will be hidden and the content underneath\nthe sheet can be interacted with. This value is exclusive\nmeaning the backdrop will become active after the value\nspecified.",
- "docsTags": [],
- "default": "0",
- "values": [
- {
- "type": "number"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "backdropDismiss",
- "type": "boolean",
- "mutable": false,
- "attr": "backdrop-dismiss",
- "reflectToAttr": false,
- "docs": "If `true`, the modal will be dismissed when the backdrop is clicked.",
- "docsTags": [],
- "default": "true",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "breakpoints",
- "type": "number[] | undefined",
- "mutable": false,
- "reflectToAttr": false,
- "docs": "The breakpoints to use when creating a sheet modal. Each value in the\narray must be a decimal between 0 and 1 where 0 indicates the modal is fully\nclosed and 1 indicates the modal is fully open. Values are relative\nto the height of the modal, not the height of the screen. One of the values in this\narray must be the value of the `initialBreakpoint` property.\nFor example: [0, .25, .5, 1]",
- "docsTags": [],
- "values": [
- {
- "type": "number[]"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "enterAnimation",
- "type": "((baseEl: any, opts?: any) => Animation) | undefined",
- "mutable": false,
- "reflectToAttr": false,
- "docs": "Animation to use when the modal is presented.",
- "docsTags": [],
- "values": [
- {
- "type": "((baseEl: any, opts?: any) => Animation)"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "handle",
- "type": "boolean | undefined",
- "mutable": false,
- "attr": "handle",
- "reflectToAttr": false,
- "docs": "The horizontal line that displays at the top of a sheet modal. It is `true` by default when\nsetting the `breakpoints` and `initialBreakpoint` properties.",
- "docsTags": [],
- "values": [
- {
- "type": "boolean"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "htmlAttributes",
- "type": "ModalAttributes | undefined",
- "mutable": false,
- "reflectToAttr": false,
- "docs": "Additional attributes to pass to the modal.",
- "docsTags": [],
- "values": [
- {
- "type": "ModalAttributes"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "initialBreakpoint",
- "type": "number | undefined",
- "mutable": false,
- "attr": "initial-breakpoint",
- "reflectToAttr": false,
- "docs": "A decimal value between 0 and 1 that indicates the\ninitial point the modal will open at when creating a\nsheet modal. This value must also be listed in the\n`breakpoints` array.",
- "docsTags": [],
- "values": [
- {
- "type": "number"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "isOpen",
- "type": "boolean",
- "mutable": false,
- "attr": "is-open",
- "reflectToAttr": false,
- "docs": "If `true`, the modal will open. If `false`, the modal will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the modalController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe modal dismisses. You will need to do that in your code.",
- "docsTags": [],
- "default": "false",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "keyboardClose",
- "type": "boolean",
- "mutable": false,
- "attr": "keyboard-close",
- "reflectToAttr": false,
- "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
- "docsTags": [],
- "default": "true",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "leaveAnimation",
- "type": "((baseEl: any, opts?: any) => Animation) | undefined",
- "mutable": false,
- "reflectToAttr": false,
- "docs": "Animation to use when the modal is dismissed.",
- "docsTags": [],
- "values": [
- {
- "type": "((baseEl: any, opts?: any) => Animation)"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "mode",
- "type": "\"ios\" | \"md\"",
- "mutable": false,
- "attr": "mode",
- "reflectToAttr": false,
- "docs": "The mode determines which platform styles to use.",
- "docsTags": [],
- "values": [
- {
- "value": "ios",
- "type": "string"
- },
- {
- "value": "md",
- "type": "string"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "presentingElement",
- "type": "HTMLElement | undefined",
- "mutable": false,
- "reflectToAttr": false,
- "docs": "The element that presented the modal. This is used for card presentation effects\nand for stacking multiple modals on top of each other. Only applies in iOS mode.",
- "docsTags": [],
- "values": [
- {
- "type": "HTMLElement"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "showBackdrop",
- "type": "boolean",
- "mutable": false,
- "attr": "show-backdrop",
- "reflectToAttr": false,
- "docs": "If `true`, a backdrop will be displayed behind the modal.",
- "docsTags": [],
- "default": "true",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "swipeToClose",
- "type": "boolean",
- "mutable": false,
- "attr": "swipe-to-close",
- "reflectToAttr": false,
- "docs": "If `true`, the modal can be swiped to dismiss. Only applies in iOS mode.",
- "docsTags": [],
- "default": "false",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "trigger",
- "type": "string | undefined",
- "mutable": false,
- "attr": "trigger",
- "reflectToAttr": false,
- "docs": "An ID corresponding to the trigger element that\ncauses the modal to open when clicked.",
- "docsTags": [],
- "values": [
- {
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": false,
- "required": false
- }
- ],
- "methods": [
- {
- "name": "dismiss",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "signature": "dismiss(data?: any, role?: string | undefined) => Promise",
- "parameters": [],
- "docs": "Dismiss the modal overlay after it has been presented.",
- "docsTags": [
- {
- "name": "param",
- "text": "data Any data to emit in the dismiss events."
- },
- {
- "name": "param",
- "text": "role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'."
- }
- ]
- },
- {
- "name": "onDidDismiss",
- "returns": {
- "type": "Promise>",
- "docs": ""
- },
- "signature": "onDidDismiss() => Promise>",
- "parameters": [],
- "docs": "Returns a promise that resolves when the modal did dismiss.",
- "docsTags": []
- },
- {
- "name": "onWillDismiss",
- "returns": {
- "type": "Promise>",
- "docs": ""
- },
- "signature": "onWillDismiss() => Promise>",
- "parameters": [],
- "docs": "Returns a promise that resolves when the modal will dismiss.",
- "docsTags": []
- },
- {
- "name": "present",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "signature": "present() => Promise",
- "parameters": [],
- "docs": "Present the modal overlay after it has been created.",
- "docsTags": []
- }
- ],
- "events": [
- {
- "event": "didDismiss",
- "detail": "OverlayEventDetail",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted after the modal has dismissed.\nShorthand for ionModalDidDismiss.",
- "docsTags": []
- },
- {
- "event": "didPresent",
- "detail": "void",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted after the modal has presented.\nShorthand for ionModalWillDismiss.",
- "docsTags": []
- },
- {
- "event": "ionModalDidDismiss",
- "detail": "OverlayEventDetail",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted after the modal has dismissed.",
- "docsTags": []
- },
- {
- "event": "ionModalDidPresent",
- "detail": "void",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted after the modal has presented.",
- "docsTags": []
- },
- {
- "event": "ionModalWillDismiss",
- "detail": "OverlayEventDetail",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted before the modal has dismissed.",
- "docsTags": []
- },
- {
- "event": "ionModalWillPresent",
- "detail": "void",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted before the modal has presented.",
- "docsTags": []
- },
- {
- "event": "willDismiss",
- "detail": "OverlayEventDetail",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted before the modal has dismissed.\nShorthand for ionModalWillDismiss.",
- "docsTags": []
- },
- {
- "event": "willPresent",
- "detail": "void",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted before the modal has presented.\nShorthand for ionModalWillPresent.",
- "docsTags": []
- }
- ],
- "listeners": [],
- "styles": [
- {
- "name": "--backdrop-opacity",
- "annotation": "prop",
- "docs": "Opacity of the backdrop"
- },
- {
- "name": "--background",
- "annotation": "prop",
- "docs": "Background of the modal content"
- },
- {
- "name": "--border-color",
- "annotation": "prop",
- "docs": "Border color of the modal content"
- },
- {
- "name": "--border-radius",
- "annotation": "prop",
- "docs": "Border radius of the modal content"
- },
- {
- "name": "--border-style",
- "annotation": "prop",
- "docs": "Border style of the modal content"
- },
- {
- "name": "--border-width",
- "annotation": "prop",
- "docs": "Border width of the modal content"
- },
- {
- "name": "--height",
- "annotation": "prop",
- "docs": "Height of the modal"
- },
- {
- "name": "--max-height",
- "annotation": "prop",
- "docs": "Maximum height of the modal"
- },
- {
- "name": "--max-width",
- "annotation": "prop",
- "docs": "Maximum width of the modal"
- },
- {
- "name": "--min-height",
- "annotation": "prop",
- "docs": "Minimum height of the modal"
- },
- {
- "name": "--min-width",
- "annotation": "prop",
- "docs": "Minimum width of the modal"
- },
- {
- "name": "--width",
- "annotation": "prop",
- "docs": "Width of the modal"
- }
- ],
- "slots": [
- {
- "name": "",
- "docs": "Content is placed inside of the `.modal-content` element."
- }
- ],
- "parts": [
- {
- "name": "backdrop",
- "docs": "The `ion-backdrop` element."
- },
- {
- "name": "content",
- "docs": "The wrapper element for the default slot."
- },
- {
- "name": "handle",
- "docs": "The handle that is displayed at the top of the sheet modal when `handle=\"true\"`."
- }
- ],
- "dependents": [],
- "dependencies": [
- "ion-backdrop"
- ],
- "dependencyGraph": {
- "ion-modal": [
- "ion-backdrop"
- ]
- }
- },
- {
- "filePath": "./src/components/nav/nav.tsx",
- "encapsulation": "shadow",
- "tag": "ion-nav",
- "readme": "# ion-nav\n\nNav is a standalone component for loading arbitrary components and pushing new components on to the stack.\n\nUnlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.\n\n## Interfaces\n\n### NavCustomEvent\n\nWhile not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.\n\n```typescript\ninterface NavCustomEvent extends CustomEvent {\n target: HTMLIonNavElement;\n}\n```\n",
- "docs": "Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.\n\nUnlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.",
- "docsTags": [],
- "usage": {},
- "props": [
- {
- "name": "animated",
- "type": "boolean",
- "mutable": false,
- "attr": "animated",
- "reflectToAttr": false,
- "docs": "If `true`, the nav should animate the transition of components.",
- "docsTags": [],
- "default": "true",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "animation",
- "type": "((baseEl: any, opts?: any) => Animation) | undefined",
- "mutable": false,
- "reflectToAttr": false,
- "docs": "By default `ion-nav` animates transition between pages based in the mode (ios or material design).\nHowever, this property allows to create custom transition using `AnimateBuilder` functions.",
- "docsTags": [],
- "values": [
- {
- "type": "((baseEl: any, opts?: any) => Animation)"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "root",
- "type": "Function | HTMLElement | ViewController | null | string | undefined",
- "mutable": false,
- "attr": "root",
- "reflectToAttr": false,
- "docs": "Root NavComponent to load",
- "docsTags": [],
- "values": [
- {
- "type": "Function"
- },
- {
- "type": "HTMLElement"
- },
- {
- "type": "ViewController"
- },
- {
- "type": "null"
- },
- {
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "rootParams",
- "type": "undefined | { [key: string]: any; }",
- "mutable": false,
- "reflectToAttr": false,
- "docs": "Any parameters for the root component",
- "docsTags": [],
- "values": [
- {
- "type": "undefined"
- },
- {
- "type": "{ [key: string]: any; }"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "swipeGesture",
- "type": "boolean | undefined",
- "mutable": true,
- "attr": "swipe-gesture",
- "reflectToAttr": false,
- "docs": "If the nav component should allow for swipe-to-go-back.",
- "docsTags": [],
- "values": [
- {
- "type": "boolean"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- }
- ],
- "methods": [
- {
- "name": "canGoBack",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "signature": "canGoBack(view?: ViewController | undefined) => Promise",
- "parameters": [],
- "docs": "Returns `true` if the current view can go back.",
- "docsTags": [
- {
- "name": "param",
- "text": "view The view to check."
- }
- ]
- },
- {
- "name": "getActive",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "signature": "getActive() => Promise",
- "parameters": [],
- "docs": "Get the active view.",
- "docsTags": []
- },
- {
- "name": "getByIndex",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "signature": "getByIndex(index: number) => Promise",
- "parameters": [],
- "docs": "Get the view at the specified index.",
- "docsTags": [
- {
- "name": "param",
- "text": "index The index of the view."
- }
- ]
- },
- {
- "name": "getPrevious",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "signature": "getPrevious(view?: ViewController | undefined) => Promise",
- "parameters": [],
- "docs": "Get the previous view.",
- "docsTags": [
- {
- "name": "param",
- "text": "view The view to get."
- }
- ]
- },
- {
- "name": "insert",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "signature": "insert(insertIndex: number, component: T, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise",
- "parameters": [],
- "docs": "Inserts a component into the navigation stack at the specified index.\nThis is useful to add a component at any point in the navigation stack.",
- "docsTags": [
- {
- "name": "param",
- "text": "insertIndex The index to insert the component at in the stack."
- },
- {
- "name": "param",
- "text": "component The component to insert into the navigation stack."
- },
- {
- "name": "param",
- "text": "componentProps Any properties of the component."
- },
- {
- "name": "param",
- "text": "opts The navigation options."
- },
- {
- "name": "param",
- "text": "done The transition complete function."
- }
- ]
- },
- {
- "name": "insertPages",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "signature": "insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise",
- "parameters": [],
- "docs": "Inserts an array of components into the navigation stack at the specified index.\nThe last component in the array will become instantiated as a view, and animate\nin to become the active view.",
- "docsTags": [
- {
- "name": "param",
- "text": "insertIndex The index to insert the components at in the stack."
- },
- {
- "name": "param",
- "text": "insertComponents The components to insert into the navigation stack."
- },
- {
- "name": "param",
- "text": "opts The navigation options."
- },
- {
- "name": "param",
- "text": "done The transition complete function."
- }
- ]
- },
- {
- "name": "pop",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "signature": "pop(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise",
- "parameters": [],
- "docs": "Pop a component off of the navigation stack. Navigates back from the current\ncomponent.",
- "docsTags": [
- {
- "name": "param",
- "text": "opts The navigation options."
- },
- {
- "name": "param",
- "text": "done The transition complete function."
- }
- ]
- },
- {
- "name": "popTo",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "signature": "popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise",
- "parameters": [],
- "docs": "Pop to a specific index in the navigation stack.",
- "docsTags": [
- {
- "name": "param",
- "text": "indexOrViewCtrl The index or view controller to pop to."
- },
- {
- "name": "param",
- "text": "opts The navigation options."
- },
- {
- "name": "param",
- "text": "done The transition complete function."
- }
- ]
- },
- {
- "name": "popToRoot",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "signature": "popToRoot(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise",
- "parameters": [],
- "docs": "Navigate back to the root of the stack, no matter how far back that is.",
- "docsTags": [
- {
- "name": "param",
- "text": "opts The navigation options."
- },
- {
- "name": "param",
- "text": "done The transition complete function."
- }
- ]
- },
- {
- "name": "push",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "signature": "push(component: T, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise",
- "parameters": [],
- "docs": "Push a new component onto the current navigation stack. Pass any additional\ninformation along as an object. This additional information is accessible\nthrough NavParams.",
- "docsTags": [
- {
- "name": "param",
- "text": "component The component to push onto the navigation stack."
- },
- {
- "name": "param",
- "text": "componentProps Any properties of the component."
- },
- {
- "name": "param",
- "text": "opts The navigation options."
- },
- {
- "name": "param",
- "text": "done The transition complete function."
- }
- ]
- },
- {
- "name": "removeIndex",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "signature": "removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise",
- "parameters": [],
- "docs": "Removes a component from the navigation stack at the specified index.",
- "docsTags": [
- {
- "name": "param",
- "text": "startIndex The number to begin removal at."
- },
- {
- "name": "param",
- "text": "removeCount The number of components to remove."
- },
- {
- "name": "param",
- "text": "opts The navigation options."
- },
- {
- "name": "param",
- "text": "done The transition complete function."
- }
- ]
- },
- {
- "name": "setPages",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "signature": "setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise",
- "parameters": [],
- "docs": "Set the views of the current navigation stack and navigate to the last view.\nBy default animations are disabled, but they can be enabled by passing options\nto the navigation controller. Navigation parameters can also be passed to the\nindividual pages in the array.",
- "docsTags": [
- {
- "name": "param",
- "text": "views The list of views to set as the navigation stack."
- },
- {
- "name": "param",
- "text": "opts The navigation options."
- },
- {
- "name": "param",
- "text": "done The transition complete function."
- }
- ]
- },
- {
- "name": "setRoot",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "signature": "setRoot(component: T, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise",
- "parameters": [],
- "docs": "Set the root for the current navigation stack to a component.",
- "docsTags": [
- {
- "name": "param",
- "text": "component The component to set as the root of the navigation stack."
- },
- {
- "name": "param",
- "text": "componentProps Any properties of the component."
- },
- {
- "name": "param",
- "text": "opts The navigation options."
- },
- {
- "name": "param",
- "text": "done The transition complete function."
- }
- ]
- }
- ],
- "events": [
- {
- "event": "ionNavDidChange",
- "detail": "void",
- "bubbles": false,
- "cancelable": true,
- "composed": true,
- "docs": "Event fired when the nav has changed components",
- "docsTags": []
- },
- {
- "event": "ionNavWillChange",
- "detail": "void",
- "bubbles": false,
- "cancelable": true,
- "composed": true,
- "docs": "Event fired when the nav will change components",
- "docsTags": []
- }
- ],
- "listeners": [],
- "styles": [],
- "slots": [],
- "parts": [],
- "dependents": [],
- "dependencies": [],
- "dependencyGraph": {}
- },
- {
- "filePath": "./src/components/nav-link/nav-link.tsx",
- "encapsulation": "none",
- "tag": "ion-nav-link",
- "readme": "# ion-nav-link\n\nA 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.\n\nIt is the element form of calling the `push()`, `pop()`, and `setRoot()` methods on the navigation controller.\n\n",
- "docs": "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.\n\nIt is the element form of calling the `push()`, `pop()`, and `setRoot()` methods on the navigation controller.",
- "docsTags": [],
- "usage": {},
- "props": [
- {
- "name": "component",
- "type": "Function | HTMLElement | ViewController | null | string | undefined",
- "mutable": false,
- "attr": "component",
- "reflectToAttr": false,
- "docs": "Component to navigate to. Only used if the `routerDirection` is `\"forward\"` or `\"root\"`.",
- "docsTags": [],
- "values": [
- {
- "type": "Function"
- },
- {
- "type": "HTMLElement"
- },
- {
- "type": "ViewController"
- },
- {
- "type": "null"
- },
- {
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "componentProps",
- "type": "undefined | { [key: string]: any; }",
- "mutable": false,
- "reflectToAttr": false,
- "docs": "Data you want to pass to the component as props. Only used if the `\"routerDirection\"` is `\"forward\"` or `\"root\"`.",
- "docsTags": [],
- "values": [
- {
- "type": "undefined"
- },
- {
- "type": "{ [key: string]: any; }"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "routerAnimation",
- "type": "((baseEl: any, opts?: any) => Animation) | undefined",
- "mutable": false,
- "reflectToAttr": false,
- "docs": "The transition animation when navigating to another page.",
- "docsTags": [],
- "values": [
- {
- "type": "((baseEl: any, opts?: any) => Animation)"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "routerDirection",
- "type": "\"back\" | \"forward\" | \"root\"",
- "mutable": false,
- "attr": "router-direction",
- "reflectToAttr": false,
- "docs": "The transition direction when navigating to another page.",
- "docsTags": [],
- "default": "'forward'",
- "values": [
- {
- "value": "back",
- "type": "string"
- },
- {
- "value": "forward",
- "type": "string"
- },
- {
- "value": "root",
- "type": "string"
- }
- ],
- "optional": false,
- "required": false
- }
- ],
- "methods": [],
- "events": [],
- "listeners": [],
- "styles": [],
- "slots": [],
- "parts": [],
- "dependents": [],
- "dependencies": [],
- "dependencyGraph": {}
- },
- {
- "filePath": "./src/components/note/note.tsx",
- "encapsulation": "shadow",
- "tag": "ion-note",
- "readme": "# ion-note\n\nNotes 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.\n\n",
- "docs": "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.",
- "docsTags": [
- {
- "name": "virtualProp",
- "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
- }
- ],
- "usage": {
- "angular": "```html\n\nDefault Note\n\n\nPrimary Note\nSecondary Note\nDanger Note\nLight Note\nDark Note\n\n\n\n \n Note (End)\n On\n \n\n \n Off\n Note (Start)\n \n\n```\n",
- "javascript": "```html\n\nDefault Note\n\n\nPrimary Note\nSecondary Note\nDanger Note\nLight Note\nDark Note\n\n\n\n \n Note (End)\n On\n \n\n \n Off\n Note (Start)\n \n\n```\n",
- "react": "```tsx\nimport React from 'react';\nimport { IonNote, IonList, IonItem, IonLabel, IonContent } from '@ionic/react';\n\nexport const NoteExample: React.FC = () => (\n \n {/*-- Default Note --*/}\n Default Note
\n\n {/*-- Note Colors --*/}\n Primary Note
\n Secondary Note
\n Danger Note
\n Light Note
\n Dark Note
\n\n {/*-- Notes in a List --*/}\n \n \n Note (End)\n On\n \n\n \n Off\n Note (Start)\n \n \n \n);\n```",
- "stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'note-example',\n styleUrl: 'note-example.css'\n})\nexport class NoteExample {\n render() {\n return [\n // Default Note\n Default Note,\n\n // Note Colors\n Primary Note,\n Secondary Note,\n Danger Note,\n Light Note,\n Dark Note,\n\n // Notes in a List\n \n \n Note (End)\n On\n \n\n \n Off\n Note (Start)\n \n \n ];\n }\n}\n```\n",
- "vue": "```html\n\n \n Default Note\n\n \n Primary Note\n Secondary Note\n Danger Note\n Light Note\n Dark Note\n\n \n \n \n Note (End)\n On\n \n\n \n Off\n Note (Start)\n \n \n\n\n\n```\n"
- },
- "props": [
- {
- "name": "color",
- "type": "string | undefined",
- "mutable": false,
- "attr": "color",
- "reflectToAttr": true,
- "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "docsTags": [],
- "values": [
- {
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "mode",
- "type": "\"ios\" | \"md\"",
- "mutable": false,
- "attr": "mode",
- "reflectToAttr": false,
- "docs": "The mode determines which platform styles to use.",
- "docsTags": [],
- "values": [
- {
- "value": "ios",
- "type": "string"
- },
- {
- "value": "md",
- "type": "string"
- }
- ],
- "optional": true,
- "required": false
- }
- ],
- "methods": [],
- "events": [],
- "listeners": [],
- "styles": [
- {
- "name": "--color",
- "annotation": "prop",
- "docs": "Color of the note"
- }
- ],
- "slots": [],
- "parts": [],
- "dependents": [
- "ion-item"
- ],
- "dependencies": [],
- "dependencyGraph": {
- "ion-item": [
- "ion-note"
- ]
- }
- },
- {
- "filePath": "./src/components/picker/picker.tsx",
- "encapsulation": "scoped",
- "tag": "ion-picker",
- "readme": "# ion-picker\n\nA 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.\n\n## Interfaces\n\n### PickerButton\n\n```typescript\ninterface PickerButton {\n text?: string;\n role?: string;\n cssClass?: string | string[];\n handler?: (value: any) => boolean | void;\n}\n```\n\n### PickerColumn\n\n```typescript\ninterface PickerColumn {\n name: string;\n align?: string;\n selectedIndex?: number;\n prevSelected?: number;\n prefix?: string;\n suffix?: string;\n options: PickerColumnOption[];\n cssClass?: string | string[];\n columnWidth?: string;\n prefixWidth?: string;\n suffixWidth?: string;\n optionsWidth?: string;\n refresh?: () => void;\n}\n```\n\n### PickerColumnOption\n\n```typescript\ninterface PickerColumnOption {\n text?: string;\n value?: any;\n disabled?: boolean;\n duration?: number;\n transform?: string;\n selected?: boolean;\n}\n```\n\n### PickerOptions\n\n```typescript\ninterface PickerOptions {\n columns: PickerColumn[];\n buttons?: PickerButton[];\n cssClass?: string | string[];\n showBackdrop?: boolean;\n backdropDismiss?: boolean;\n animated?: boolean;\n\n mode?: Mode;\n keyboardClose?: boolean;\n id?: string;\n htmlAttributes?: PickerAttributes;\n\n enterAnimation?: AnimationBuilder;\n leaveAnimation?: AnimationBuilder;\n}\n```\n\n### PickerAttributes\n\n```typescript\ninterface PickerAttributes extends JSXBase.HTMLAttributes {}\n```\n",
- "docs": "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.",
- "docsTags": [
- {
- "name": "virtualProp",
- "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
- }
- ],
- "usage": {
- "react": "```tsx\n/* Using with useIonPicker Hook */\n\nimport React, { useState } from 'react';\nimport { IonButton, IonContent, IonPage, useIonPicker } from '@ionic/react';\n\nconst PickerExample: React.FC = () => {\n const [present] = useIonPicker();\n const [value, setValue] = useState('');\n return (\n \n \n \n present({\n buttons: [\n {\n text: 'Confirm',\n handler: (selected) => {\n setValue(selected.animal.value)\n },\n },\n ],\n columns: [\n {\n name: 'animal',\n options: [\n { text: 'Dog', value: 'dog' },\n { text: 'Cat', value: 'cat' },\n { text: 'Bird', value: 'bird' },\n ],\n },\n ],\n })\n }\n >\n Show Picker\n \n \n present(\n [\n {\n name: 'animal',\n options: [\n { text: 'Dog', value: 'dog' },\n { text: 'Cat', value: 'cat' },\n { text: 'Bird', value: 'bird' },\n ],\n },\n {\n name: 'vehicle',\n options: [\n { text: 'Car', value: 'car' },\n { text: 'Truck', value: 'truck' },\n { text: 'Bike', value: 'bike' },\n ],\n },\n ],\n [\n {\n text: 'Confirm',\n handler: (selected) => {\n setValue(`${selected.animal.value}, ${selected.vehicle.value}`)\n },\n },\n ]\n )\n }\n >\n Show Picker using params\n \n {value && (\n Selected Value: {value}
\n )}\n \n \n );\n};\n```",
- "vue": "```vue\n\n \n
SHOW PICKER\n
picked: {{ picked.animal.text }}
\n
This is popover content
\n \n {\n e.persist();\n setShowPopover({ showPopover: true, event: e })\n }}\n >\n Show Popover\n \n \n );\n};\n```\n\n### useIonPopover Hook\n\n> `useIonPopover` requires being a descendant of ``. If you need to use a popover outside of an ``, consider using the component method instead.\n\n```tsx\nimport React from 'react';\nimport {\n IonButton,\n IonContent,\n IonItem,\n IonList,\n IonListHeader,\n IonPage,\n useIonPopover,\n} from '@ionic/react';\n\nconst PopoverList: React.FC<{\n onHide: () => void;\n}> = ({ onHide }) => (\n \n Ionic\n Learn Ionic\n Documentation\n Showcase\n GitHub Repo\n \n Close\n \n \n);\n\nconst PopoverExample: React.FC = () => {\n const [present, dismiss] = useIonPopover(PopoverList, { onHide: () => dismiss() });\n \n return (\n \n \n \n present({\n event: e.nativeEvent,\n })\n }\n >\n Show Popover\n \n \n \n );\n};\n```",
- "stencil": "### Inline Popover\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'popover-example',\n styleUrl: 'popover-example.css'\n})\nexport class PopoverExample {\n render() {\n return [\n \n {/* Default */}\n \n Popover Content\n \n \n {/* No Arrow */}\n \n Popover Content\n \n \n {/* Use a trigger */}\n Click to open popover\n \n Popover Content\n \n \n {/* Hover over trigger to open */}\n Hover to open popover\n \n Popover Content\n \n \n {/* Show popover above trigger */}\n Click to open popover\n \n Popover Content\n \n \n {/* Align popover to end of trigger */}\n Click to open popover\n \n Popover Content\n \n \n {/* Make popover the same size as the trigger */}\n Click to open popover\n \n Popover Content\n \n \n {/* Make popover show relative to click coordinates rather than trigger */}\n Click to open popover\n \n Popover Content\n \n \n {/* Nested Popover */}\n Click to open popover\n \n \n \n \n Option 1\n \n \n Option 2\n \n \n Option 3\n \n \n \n \n \n Nested Option\n \n \n \n \n \n \n \n ];\n }\n}\n```\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'page-popover',\n styleUrl: 'page-popover.css',\n})\nexport class PagePopover {\n render() {\n return [\n \n \n Documentation\n \n \n Feedback\n \n \n Settings\n \n \n ];\n }\n}\n```\n\n### Popover Controller\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\nimport { popoverController } from '@ionic/core';\n\n@Component({\n tag: 'popover-example',\n styleUrl: 'popover-example.css'\n})\nexport class PopoverExample {\n async presentPopover(ev: any) {\n const popover = await popoverController.create({\n component: 'page-popover',\n cssClass: 'my-custom-class',\n event: ev,\n translucent: true\n });\n await popover.present();\n \n const { role } = await popover.onDidDismiss();\n console.log('onDidDismiss resolved with role', role);\n }\n\n render() {\n return [\n \n this.presentPopover(ev)}>Present Popover\n \n ];\n }\n}\n```\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'page-popover',\n styleUrl: 'page-popover.css',\n})\nexport class PagePopover {\n render() {\n return [\n \n \n Documentation\n \n \n Feedback\n \n \n Settings\n \n \n ];\n }\n}\n```",
- "vue": "### Inline Popover\n\n```html\n\n \n \n Popover Content\n \n \n \n \n Popover Content\n \n \n \n Click to open popover\n \n Popover Content\n \n \n \n Hover to open popover\n \n Popover Content\n \n \n \n Click to open popover\n \n Popover Content\n \n \n \n Click to open popover\n \n Popover Content\n \n \n \n Click to open popover\n \n Popover Content\n \n \n \n Click to open popover\n \n Popover Content\n \n \n \n Click to open popover\n \n \n \n \n Option 1\n \n \n Option 2\n \n \n Option 3\n \n \n \n \n \n Nested Option\n \n \n \n \n \n \n\n\n\n```\n\n\n### Inline Popover with State\n\n```html\n\n Show Popover\n \n \n \n\n\n\n```\n\n### Popover Controller\n\n```html\n\n \n Popover Content\n \n\n\n\n```\n\n```html\n\n \n \n Open Popover\n \n \n\n\n\n```"
- },
- "props": [
- {
- "name": "alignment",
- "type": "\"center\" | \"end\" | \"start\" | undefined",
- "mutable": true,
- "attr": "alignment",
- "reflectToAttr": false,
- "docs": "Describes how to align the popover content with the `reference` point.\nDefaults to `'center'` for `ios` mode, and `'start'` for `md` mode.",
- "docsTags": [],
- "values": [
- {
- "value": "center",
- "type": "string"
- },
- {
- "value": "end",
- "type": "string"
- },
- {
- "value": "start",
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "animated",
- "type": "boolean",
- "mutable": false,
- "attr": "animated",
- "reflectToAttr": false,
- "docs": "If `true`, the popover will animate.",
- "docsTags": [],
- "default": "true",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "arrow",
- "type": "boolean",
- "mutable": false,
- "attr": "arrow",
- "reflectToAttr": false,
- "docs": "If `true`, the popover will display an arrow\nthat points at the `reference` when running in `ios` mode\non mobile. Does not apply in `md` mode or on desktop.",
- "docsTags": [],
- "default": "true",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "backdropDismiss",
- "type": "boolean",
- "mutable": false,
- "attr": "backdrop-dismiss",
- "reflectToAttr": false,
- "docs": "If `true`, the popover will be dismissed when the backdrop is clicked.",
- "docsTags": [],
- "default": "true",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "component",
- "type": "Function | HTMLElement | null | string | undefined",
- "mutable": false,
- "attr": "component",
- "reflectToAttr": false,
- "docs": "The component to display inside of the popover.\nYou only need to use this if you are not using\na JavaScript framework. Otherwise, you can just\nslot your component inside of `ion-popover`.",
- "docsTags": [],
- "values": [
- {
- "type": "Function"
- },
- {
- "type": "HTMLElement"
- },
- {
- "type": "null"
- },
- {
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "componentProps",
- "type": "undefined | { [key: string]: any; }",
- "mutable": false,
- "reflectToAttr": false,
- "docs": "The data to pass to the popover component.\nYou only need to use this if you are not using\na JavaScript framework. Otherwise, you can just\nset the props directly on your component.",
- "docsTags": [],
- "values": [
- {
- "type": "undefined"
- },
- {
- "type": "{ [key: string]: any; }"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "dismissOnSelect",
- "type": "boolean",
- "mutable": false,
- "attr": "dismiss-on-select",
- "reflectToAttr": false,
- "docs": "If `true`, the popover will be automatically\ndismissed when the content has been clicked.",
- "docsTags": [],
- "default": "false",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "enterAnimation",
- "type": "((baseEl: any, opts?: any) => Animation) | undefined",
- "mutable": false,
- "reflectToAttr": false,
- "docs": "Animation to use when the popover is presented.",
- "docsTags": [],
- "values": [
- {
- "type": "((baseEl: any, opts?: any) => Animation)"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "event",
- "type": "any",
- "mutable": false,
- "attr": "event",
- "reflectToAttr": false,
- "docs": "The event to pass to the popover animation.",
- "docsTags": [],
- "values": [
- {
- "type": "any"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "htmlAttributes",
- "type": "PopoverAttributes | undefined",
- "mutable": false,
- "reflectToAttr": false,
- "docs": "Additional attributes to pass to the popover.",
- "docsTags": [],
- "values": [
- {
- "type": "PopoverAttributes"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "isOpen",
- "type": "boolean",
- "mutable": false,
- "attr": "is-open",
- "reflectToAttr": false,
- "docs": "If `true`, the popover will open. If `false`, the popover will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the popoverController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe popover dismisses. You will need to do that in your code.",
- "docsTags": [],
- "default": "false",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "keyboardClose",
- "type": "boolean",
- "mutable": false,
- "attr": "keyboard-close",
- "reflectToAttr": false,
- "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
- "docsTags": [],
- "default": "true",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "leaveAnimation",
- "type": "((baseEl: any, opts?: any) => Animation) | undefined",
- "mutable": false,
- "reflectToAttr": false,
- "docs": "Animation to use when the popover is dismissed.",
- "docsTags": [],
- "values": [
- {
- "type": "((baseEl: any, opts?: any) => Animation)"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "mode",
- "type": "\"ios\" | \"md\"",
- "mutable": false,
- "attr": "mode",
- "reflectToAttr": false,
- "docs": "The mode determines which platform styles to use.",
- "docsTags": [],
- "values": [
- {
- "value": "ios",
- "type": "string"
- },
- {
- "value": "md",
- "type": "string"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "reference",
- "type": "\"event\" | \"trigger\"",
- "mutable": false,
- "attr": "reference",
- "reflectToAttr": false,
- "docs": "Describes what to position the popover relative to.\nIf `'trigger'`, the popover will be positioned relative\nto the trigger button. If passing in an event, this is\ndetermined via event.target.\nIf `'event'`, the popover will be positioned relative\nto the x/y coordinates of the trigger action. If passing\nin an event, this is determined via event.clientX and event.clientY.",
- "docsTags": [],
- "default": "'trigger'",
- "values": [
- {
- "value": "event",
- "type": "string"
- },
- {
- "value": "trigger",
- "type": "string"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "showBackdrop",
- "type": "boolean",
- "mutable": false,
- "attr": "show-backdrop",
- "reflectToAttr": false,
- "docs": "If `true`, a backdrop will be displayed behind the popover.",
- "docsTags": [],
- "default": "true",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "side",
- "type": "\"bottom\" | \"end\" | \"left\" | \"right\" | \"start\" | \"top\"",
- "mutable": false,
- "attr": "side",
- "reflectToAttr": false,
- "docs": "Describes which side of the `reference` point to position\nthe popover on. The `'start'` and `'end'` values are RTL-aware,\nand the `'left'` and `'right'` values are not.",
- "docsTags": [],
- "default": "'bottom'",
- "values": [
- {
- "value": "bottom",
- "type": "string"
- },
- {
- "value": "end",
- "type": "string"
- },
- {
- "value": "left",
- "type": "string"
- },
- {
- "value": "right",
- "type": "string"
- },
- {
- "value": "start",
- "type": "string"
- },
- {
- "value": "top",
- "type": "string"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "size",
- "type": "\"auto\" | \"cover\"",
- "mutable": false,
- "attr": "size",
- "reflectToAttr": false,
- "docs": "Describes how to calculate the popover width.\nIf `'cover'`, the popover width will match the width of the trigger.\nIf `'auto'`, the popover width will be determined by the content in\nthe popover.",
- "docsTags": [],
- "default": "'auto'",
- "values": [
- {
- "value": "auto",
- "type": "string"
- },
- {
- "value": "cover",
- "type": "string"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "translucent",
- "type": "boolean",
- "mutable": false,
- "attr": "translucent",
- "reflectToAttr": false,
- "docs": "If `true`, the popover will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).",
- "docsTags": [],
- "default": "false",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "trigger",
- "type": "string | undefined",
- "mutable": false,
- "attr": "trigger",
- "reflectToAttr": false,
- "docs": "An ID corresponding to the trigger element that\ncauses the popover to open. Use the `trigger-action`\nproperty to customize the interaction that results in\nthe popover opening.",
- "docsTags": [],
- "values": [
- {
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "triggerAction",
- "type": "\"click\" | \"context-menu\" | \"hover\"",
- "mutable": false,
- "attr": "trigger-action",
- "reflectToAttr": false,
- "docs": "Describes what kind of interaction with the trigger that\nshould cause the popover to open. Does not apply when the `trigger`\nproperty is `undefined`.\nIf `'click'`, the popover will be presented when the trigger is left clicked.\nIf `'hover'`, the popover will be presented when a pointer hovers over the trigger.\nIf `'context-menu'`, the popover will be presented when the trigger is right\nclicked on desktop and long pressed on mobile. This will also prevent your\ndevice's normal context menu from appearing.",
- "docsTags": [],
- "default": "'click'",
- "values": [
- {
- "value": "click",
- "type": "string"
- },
- {
- "value": "context-menu",
- "type": "string"
- },
- {
- "value": "hover",
- "type": "string"
- }
- ],
- "optional": false,
- "required": false
- }
- ],
- "methods": [
- {
- "name": "dismiss",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "signature": "dismiss(data?: any, role?: string | undefined, dismissParentPopover?: boolean) => Promise",
- "parameters": [],
- "docs": "Dismiss the popover overlay after it has been presented.",
- "docsTags": [
- {
- "name": "param",
- "text": "data Any data to emit in the dismiss events."
- },
- {
- "name": "param",
- "text": "role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'."
- },
- {
- "name": "param",
- "text": "dismissParentPopover If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`."
- }
- ]
- },
- {
- "name": "onDidDismiss",
- "returns": {
- "type": "Promise>",
- "docs": ""
- },
- "signature": "onDidDismiss() => Promise>",
- "parameters": [],
- "docs": "Returns a promise that resolves when the popover did dismiss.",
- "docsTags": []
- },
- {
- "name": "onWillDismiss",
- "returns": {
- "type": "Promise>",
- "docs": ""
- },
- "signature": "onWillDismiss() => Promise>",
- "parameters": [],
- "docs": "Returns a promise that resolves when the popover will dismiss.",
- "docsTags": []
- },
- {
- "name": "present",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "signature": "present(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent | undefined) => Promise",
- "parameters": [],
- "docs": "Present the popover overlay after it has been created.\nDevelopers can pass a mouse, touch, or pointer event\nto position the popover relative to where that event\nwas dispatched.",
- "docsTags": []
- }
- ],
- "events": [
- {
- "event": "didDismiss",
- "detail": "OverlayEventDetail",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted after the popover has dismissed.\nShorthand for ionPopoverDidDismiss.",
- "docsTags": []
- },
- {
- "event": "didPresent",
- "detail": "void",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted after the popover has presented.\nShorthand for ionPopoverWillDismiss.",
- "docsTags": []
- },
- {
- "event": "ionPopoverDidDismiss",
- "detail": "OverlayEventDetail",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted after the popover has dismissed.",
- "docsTags": []
- },
- {
- "event": "ionPopoverDidPresent",
- "detail": "void",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted after the popover has presented.",
- "docsTags": []
- },
- {
- "event": "ionPopoverWillDismiss",
- "detail": "OverlayEventDetail",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted before the popover has dismissed.",
- "docsTags": []
- },
- {
- "event": "ionPopoverWillPresent",
- "detail": "void",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted before the popover has presented.",
- "docsTags": []
- },
- {
- "event": "willDismiss",
- "detail": "OverlayEventDetail",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted before the popover has dismissed.\nShorthand for ionPopoverWillDismiss.",
- "docsTags": []
- },
- {
- "event": "willPresent",
- "detail": "void",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted before the popover has presented.\nShorthand for ionPopoverWillPresent.",
- "docsTags": []
- }
- ],
- "listeners": [],
- "styles": [
- {
- "name": "--backdrop-opacity",
- "annotation": "prop",
- "docs": "Opacity of the backdrop"
- },
- {
- "name": "--background",
- "annotation": "prop",
- "docs": "Background of the popover"
- },
- {
- "name": "--box-shadow",
- "annotation": "prop",
- "docs": "Box shadow of the popover"
- },
- {
- "name": "--height",
- "annotation": "prop",
- "docs": "Height of the popover"
- },
- {
- "name": "--max-height",
- "annotation": "prop",
- "docs": "Maximum height of the popover"
- },
- {
- "name": "--max-width",
- "annotation": "prop",
- "docs": "Maximum width of the popover"
- },
- {
- "name": "--min-height",
- "annotation": "prop",
- "docs": "Minimum height of the popover"
- },
- {
- "name": "--min-width",
- "annotation": "prop",
- "docs": "Minimum width of the popover"
- },
- {
- "name": "--offset-x",
- "annotation": "prop",
- "docs": "The amount to move the popover by on the x-axis"
- },
- {
- "name": "--offset-y",
- "annotation": "prop",
- "docs": "The amount to move the popover by on the y-axis"
- },
- {
- "name": "--width",
- "annotation": "prop",
- "docs": "Width of the popover"
- }
- ],
- "slots": [
- {
- "name": "",
- "docs": "Content is placed inside of the `.popover-content` element."
- }
- ],
- "parts": [
- {
- "name": "arrow",
- "docs": "The arrow that points to the reference element. Only applies on `ios` mode."
- },
- {
- "name": "backdrop",
- "docs": "The `ion-backdrop` element."
- },
- {
- "name": "content",
- "docs": "The wrapper element for the default slot."
- }
- ],
- "dependents": [
- "ion-datetime",
- "ion-select"
- ],
- "dependencies": [
- "ion-backdrop"
- ],
- "dependencyGraph": {
- "ion-popover": [
- "ion-backdrop"
- ],
- "ion-datetime": [
- "ion-popover"
- ],
- "ion-select": [
- "ion-popover"
- ]
- }
- },
- {
- "filePath": "./src/components/progress-bar/progress-bar.tsx",
- "encapsulation": "shadow",
- "tag": "ion-progress-bar",
- "readme": "# ion-progress-bar\n\nProgress 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`.\n\n## Progress Type\n\n### Determinate\n\nDeterminate is the default type. It should be used when the percentage of an operation is known. The progress is represented by setting the `value` property. This can be used to show the progress increasing from 0 to 100% of the track.\n\nIf the `buffer` property is set, a buffer stream will show with animated circles to indicate activity. The value of the `buffer` property will also be represented by how much visible track there is. If the value of `buffer` is less than the `value` property, there will be no visible track. If `buffer` is equal to `1` then the buffer stream will be hidden.\n\n### Indeterminate\n\nThe indeterminate type should be used when it is unknown how long the process will take. The progress bar is not tied to the `value`, instead it continually slides along the track until the process is complete.\n",
- "docs": "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`.",
- "docsTags": [
- {
- "name": "virtualProp",
- "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
- },
- {
- "name": "part",
- "text": "progress - The progress bar that shows the current value when `type` is `\"determinate\"` and slides back and forth when `type` is `\"indeterminate\"`."
- },
- {
- "name": "part",
- "text": "stream - The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `\"determinate\"`."
- },
- {
- "name": "part",
- "text": "track - The track bar behind the progress bar. If the `buffer` property is set and `type` is `\"determinate\"` the track will be the\nwidth of the `buffer` value."
- }
- ],
- "usage": {
- "angular": "```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n",
- "javascript": "```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n",
- "react": "```tsx\nimport React from 'react';\nimport { IonProgressBar, IonContent } from '@ionic/react';\n\nexport const ProgressbarExample: React.FC = () => (\n \n {/*-- Default Progressbar --*/}\n
\n\n {/*-- Default Progressbar with 50 percent --*/}\n
\n\n {/*-- Colorize Progressbar --*/}\n
\n
\n\n {/*-- Other types --*/}\n
\n
\n
\n \n);\n```\n",
- "stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'progress-bar-example',\n styleUrl: 'progress-bar-example.css'\n})\nexport class ProgressBarExample {\n render() {\n return [\n // Default Progressbar\n ,\n\n // Default Progressbar with 50 percent\n ,\n\n // Colorize Progressbar\n ,\n ,\n\n // Other types\n ,\n ,\n \n ];\n }\n}\n```\n",
- "vue": "```html\n\n \n \n\n \n \n\n \n \n \n\n \n \n \n \n\n\n\n```\n"
- },
- "props": [
- {
- "name": "buffer",
- "type": "number",
- "mutable": false,
- "attr": "buffer",
- "reflectToAttr": false,
- "docs": "If the buffer and value are smaller than 1, the buffer circles will show.\nThe buffer should be between [0, 1].",
- "docsTags": [],
- "default": "1",
- "values": [
- {
- "type": "number"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "color",
- "type": "string | undefined",
- "mutable": false,
- "attr": "color",
- "reflectToAttr": true,
- "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "docsTags": [],
- "values": [
- {
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "mode",
- "type": "\"ios\" | \"md\"",
- "mutable": false,
- "attr": "mode",
- "reflectToAttr": false,
- "docs": "The mode determines which platform styles to use.",
- "docsTags": [],
- "values": [
- {
- "value": "ios",
- "type": "string"
- },
- {
- "value": "md",
- "type": "string"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "reversed",
- "type": "boolean",
- "mutable": false,
- "attr": "reversed",
- "reflectToAttr": false,
- "docs": "If true, reverse the progress bar direction.",
- "docsTags": [],
- "default": "false",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "type",
- "type": "\"determinate\" | \"indeterminate\"",
- "mutable": false,
- "attr": "type",
- "reflectToAttr": false,
- "docs": "The state of the progress bar, based on if the time the process takes is known or not.\nDefault options are: `\"determinate\"` (no animation), `\"indeterminate\"` (animate from left to right).",
- "docsTags": [],
- "default": "'determinate'",
- "values": [
- {
- "value": "determinate",
- "type": "string"
- },
- {
- "value": "indeterminate",
- "type": "string"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "value",
- "type": "number",
- "mutable": false,
- "attr": "value",
- "reflectToAttr": false,
- "docs": "The value determines how much of the active bar should display when the\n`type` is `\"determinate\"`.\nThe value should be between [0, 1].",
- "docsTags": [],
- "default": "0",
- "values": [
- {
- "type": "number"
- }
- ],
- "optional": false,
- "required": false
- }
- ],
- "methods": [],
- "events": [],
- "listeners": [],
- "styles": [
- {
- "name": "--background",
- "annotation": "prop",
- "docs": "Background of the progress track, or the buffer bar if `buffer` is set"
- },
- {
- "name": "--buffer-background",
- "annotation": "prop",
- "docs": "DEPRECATED, use `--background` instead"
- },
- {
- "name": "--progress-background",
- "annotation": "prop",
- "docs": "Background of the progress bar representing the current value"
- }
- ],
- "slots": [],
- "parts": [
- {
- "name": "progress",
- "docs": "The progress bar that shows the current value when `type` is `\"determinate\"` and slides back and forth when `type` is `\"indeterminate\"`."
- },
- {
- "name": "stream",
- "docs": "The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `\"determinate\"`."
- },
- {
- "name": "track",
- "docs": "The track bar behind the progress bar. If the `buffer` property is set and `type` is `\"determinate\"` the track will be the\nwidth of the `buffer` value."
- }
- ],
- "dependents": [],
- "dependencies": [],
- "dependencyGraph": {}
- },
- {
- "filePath": "./src/components/radio/radio.tsx",
- "encapsulation": "shadow",
- "tag": "ion-radio",
- "readme": "# ion-radio\n\nRadios should be used inside of an [`ion-radio-group`](../radio-group). 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.\n\nWhen radios are inside of a radio group, only one radio in the group will be checked at any time. Pressing a radio will check it and uncheck the previously selected radio, if there is one. If a radio is not in a group with another radio, then both radios will have the ability to be checked at the same time.\n\n\n\n",
- "docs": "Radios should be used inside of an [`ion-radio-group`](../radio-group). 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.\n\nWhen radios are inside of a radio group, only one radio in the group will be checked at any time. Pressing a radio will check it and uncheck the previously selected radio, if there is one. If a radio is not in a group with another radio, then both radios will have the ability to be checked at the same time.",
- "docsTags": [
- {
- "name": "virtualProp",
- "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
- },
- {
- "name": "part",
- "text": "container - The container for the radio mark."
- },
- {
- "name": "part",
- "text": "mark - The checkmark or dot used to indicate the checked state."
- }
- ],
- "usage": {
- "angular": "```html\n\n \n \n Name\n \n\n \n Biff\n \n \n\n \n Griff\n \n \n\n \n Buford\n \n \n \n\n```\n",
- "javascript": "```html\n\n \n \n Name\n \n\n \n Biff\n \n \n\n \n Griff\n \n \n\n \n Buford\n \n \n \n\n```\n",
- "react": "```tsx\nimport React, { useState } from 'react';\nimport { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, IonItemDivider } from '@ionic/react';\n\nexport const RadioExamples: React.FC = () => {\n const [selected, setSelected] = useState('biff');\n return (\n \n \n \n Radio Examples\n \n \n \n \n setSelected(e.detail.value)}>\n \n Name\n \n\n \n Biff\n \n \n\n \n Griff\n \n \n\n \n Buford\n \n \n \n Your Selection\n {selected ?? '(none selected'}\n \n \n \n );\n};\n```",
- "stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'radio-example',\n styleUrl: 'radio-example.css'\n})\nexport class RadioExample {\n render() {\n return [\n \n \n \n Name\n \n\n \n Biff\n \n \n\n \n Griff\n \n \n\n \n Buford\n \n \n \n \n ];\n }\n}\n```\n",
- "vue": "```html\n\n \n \n \n Name\n \n\n \n Biff\n \n \n\n \n Griff\n \n \n\n \n Buford\n \n \n \n \n\n\n\n```\n"
- },
- "props": [
- {
- "name": "color",
- "type": "string | undefined",
- "mutable": false,
- "attr": "color",
- "reflectToAttr": true,
- "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "docsTags": [],
- "values": [
- {
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "disabled",
- "type": "boolean",
- "mutable": false,
- "attr": "disabled",
- "reflectToAttr": false,
- "docs": "If `true`, the user cannot interact with the radio.",
- "docsTags": [],
- "default": "false",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "mode",
- "type": "\"ios\" | \"md\"",
- "mutable": false,
- "attr": "mode",
- "reflectToAttr": false,
- "docs": "The mode determines which platform styles to use.",
- "docsTags": [],
- "values": [
- {
- "value": "ios",
- "type": "string"
- },
- {
- "value": "md",
- "type": "string"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "name",
- "type": "string",
- "mutable": false,
- "attr": "name",
- "reflectToAttr": false,
- "docs": "The name of the control, which is submitted with the form data.",
- "docsTags": [],
- "default": "this.inputId",
- "values": [
- {
- "type": "string"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "value",
- "type": "any",
- "mutable": false,
- "attr": "value",
- "reflectToAttr": false,
- "docs": "the value of the radio.",
- "docsTags": [],
- "values": [
- {
- "type": "any"
- }
- ],
- "optional": true,
- "required": false
- }
- ],
- "methods": [],
- "events": [
- {
- "event": "ionBlur",
- "detail": "void",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted when the radio button loses focus.",
- "docsTags": []
- },
- {
- "event": "ionFocus",
- "detail": "void",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted when the radio button has focus.",
- "docsTags": []
- }
- ],
- "listeners": [],
- "styles": [
- {
- "name": "--border-radius",
- "annotation": "prop",
- "docs": "Border radius of the radio"
- },
- {
- "name": "--color",
- "annotation": "prop",
- "docs": "Color of the radio"
- },
- {
- "name": "--color-checked",
- "annotation": "prop",
- "docs": "Color of the checked radio"
- },
- {
- "name": "--inner-border-radius",
- "annotation": "prop",
- "docs": "Border radius of the inner checked radio"
- }
- ],
- "slots": [],
- "parts": [
- {
- "name": "container",
- "docs": "The container for the radio mark."
- },
- {
- "name": "mark",
- "docs": "The checkmark or dot used to indicate the checked state."
- }
- ],
- "dependents": [
- "ion-select-popover"
- ],
- "dependencies": [],
- "dependencyGraph": {
- "ion-select-popover": [
- "ion-radio"
- ]
- }
- },
- {
- "filePath": "./src/components/radio-group/radio-group.tsx",
- "encapsulation": "none",
- "tag": "ion-radio-group",
- "readme": "# ion-radio-group\n\nA radio group is a group of [radio buttons](../radio). It allows\na user to select at most one radio button from a set. Checking one radio\nbutton that belongs to a radio group unchecks any previous checked\nradio button within the same group.\n\n## Interfaces\n\n### RadioGroupChangeEventDetail\n\n```typescript\ninterface RadioGroupChangeEventDetail {\n value: T;\n}\n```\n\n### RadioGroupCustomEvent\n\nWhile not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.\n\n```typescript\ninterface RadioGroupCustomEvent extends CustomEvent {\n detail: RadioGroupChangeEventDetail;\n target: HTMLIonRadioGroupElement;\n}\n```\n",
- "docs": "A radio group is a group of [radio buttons](../radio). It allows\na user to select at most one radio button from a set. Checking one radio\nbutton that belongs to a radio group unchecks any previous checked\nradio button within the same group.",
- "docsTags": [],
- "usage": {
- "angular": "```html\n\n \n \n \n Auto Manufacturers\n \n \n\n \n Cord\n \n \n\n \n Duesenberg\n \n \n\n \n Hudson\n \n \n\n \n Packard\n \n \n\n \n Studebaker\n \n \n \n\n```\n",
- "javascript": "```html\n\n \n \n \n Auto Manufacturers\n \n \n\n \n Cord\n \n \n\n \n Duesenberg\n \n \n\n \n Hudson\n \n \n\n \n Packard\n \n \n\n \n Studebaker\n \n \n \n\n```\n",
- "react": "```tsx\nimport React from 'react';\nimport { IonList, IonRadioGroup, IonListHeader, IonLabel, IonRadio, IonItem, IonContent } from '@ionic/react';\n\nexport const RadioGroupExample: React.FC = () => (\n \n \n \n \n \n Auto Manufacturers\n \n \n\n \n Cord\n \n \n\n \n Duesenberg\n \n \n\n \n Hudson\n \n \n\n \n Packard\n \n \n\n \n Studebaker\n \n \n \n \n \n);\n```",
- "stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'radio-group-example',\n styleUrl: 'radio-group-example.css'\n})\nexport class RadioGroupExample {\n render() {\n return [\n \n \n \n \n Auto Manufacturers\n \n \n\n \n Cord\n \n \n\n \n Duesenberg\n \n \n\n \n Hudson\n \n \n\n \n Packard\n \n \n\n \n Studebaker\n \n \n \n \n ];\n }\n}\n```\n",
- "vue": "```html\n\n \n \n \n \n Auto Manufacturers\n \n \n\n \n Cord\n \n \n\n \n Duesenberg\n \n \n\n \n Hudson\n \n \n\n \n Packard\n \n \n\n \n Studebaker\n \n \n \n \n\n\n\n```\n"
- },
- "props": [
- {
- "name": "allowEmptySelection",
- "type": "boolean",
- "mutable": false,
- "attr": "allow-empty-selection",
- "reflectToAttr": false,
- "docs": "If `true`, the radios can be deselected.",
- "docsTags": [],
- "default": "false",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "name",
- "type": "string",
- "mutable": false,
- "attr": "name",
- "reflectToAttr": false,
- "docs": "The name of the control, which is submitted with the form data.",
- "docsTags": [],
- "default": "this.inputId",
- "values": [
- {
- "type": "string"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "value",
- "type": "any",
- "mutable": true,
- "attr": "value",
- "reflectToAttr": false,
- "docs": "the value of the radio group.",
- "docsTags": [],
- "values": [
- {
- "type": "any"
- }
- ],
- "optional": true,
- "required": false
- }
- ],
- "methods": [],
- "events": [
- {
- "event": "ionChange",
- "detail": "RadioGroupChangeEventDetail",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted when the value has changed.",
- "docsTags": []
- }
- ],
- "listeners": [
- {
- "event": "keydown",
- "target": "document",
- "capture": false,
- "passive": false
- }
- ],
- "styles": [],
- "slots": [],
- "parts": [],
- "dependents": [
- "ion-select-popover"
- ],
- "dependencies": [],
- "dependencyGraph": {
- "ion-select-popover": [
- "ion-radio-group"
- ]
- }
- },
- {
- "filePath": "./src/components/range/range.tsx",
- "encapsulation": "shadow",
- "tag": "ion-range",
- "readme": "# ion-range\n\nThe Range slider lets users select from a range of values by moving\nthe slider knob. It can accept dual knobs, but by default one knob\ncontrols the value of the range.\n\n## Range Labels\n\nLabels can be placed on either side of the range by adding the\n`slot=\"start\"` or `slot=\"end\"` to the element. The element doesn't have to\nbe an `ion-label`, it can be added to any element to place it to the\nleft or right of the range.\n\n## Custom Pin Formatters\n\nWhen using a pin, the default behavior is to round the value that gets displayed using `Math.round()`. This behavior can be customized by passing in a formatter function to the `pinFormatter` property. See the [Usage](#usage) section for an example.\n\n## Interfaces\n\n### RangeChangeEventDetail\n\n```typescript\ninterface RangeChangeEventDetail {\n value: RangeValue;\n}\n```\n\n### RangeCustomEvent\n\nWhile not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.\n\n```typescript\ninterface RangeCustomEvent extends CustomEvent {\n detail: RangeChangeEventDetail;\n target: HTMLIonRangeElement;\n}\n```\n\n## Types\n\n### RangeValue\n\n```typescript\ntype RangeValue = number | { lower: number, upper: number };\n```\n",
- "docs": "The Range slider lets users select from a range of values by moving\nthe slider knob. It can accept dual knobs, but by default one knob\ncontrols the value of the range.",
- "docsTags": [
- {
- "name": "virtualProp",
- "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
- },
- {
- "name": "slot",
- "text": "start - Content is placed to the left of the range slider in LTR, and to the right in RTL."
- },
- {
- "name": "slot",
- "text": "end - Content is placed to the right of the range slider in LTR, and to the left in RTL."
- },
- {
- "name": "part",
- "text": "tick - An inactive tick mark."
- },
- {
- "name": "part",
- "text": "tick-active - An active tick mark."
- },
- {
- "name": "part",
- "text": "pin - The counter that appears above a knob."
- },
- {
- "name": "part",
- "text": "knob - The handle that is used to drag the range."
- },
- {
- "name": "part",
- "text": "bar - The inactive part of the bar."
- },
- {
- "name": "part",
- "text": "bar-active - The active part of the bar."
- }
- ],
- "usage": {
- "angular": "```html\n\n \n \n \n\n \n \n -200\n 200\n \n \n\n \n \n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n\n```\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({…})\nexport class MyComponent {\n constructor() {}\n \n public customFormatter(value: number) {\n return `${value}%`\n }\n}\n```",
- "javascript": "```html\n\n \n \n \n\n \n \n -200\n 200\n \n \n\n \n \n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n\n\n\n```\n",
- "react": "```tsx\nimport React, { useState } from 'react';\nimport { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonItem, IonRange, IonLabel, IonIcon, IonItemDivider } from '@ionic/react';\nimport { sunny } from 'ionicons/icons';\nimport { RangeValue } from '@ionic/core';\n\nexport const RangeExamples: React.FC = () => {\n\n const [value, setValue] = useState(0);\n const [rangeValue, setRangeValue] = useState<{\n lower: number;\n upper: number;\n }>({ lower: 0, upper: 0 });\n \n const customFormatter = (value: number) => `${value}%`;\n\n return (\n \n \n \n IonRange Examples\n \n \n \n \n Default\n \n setValue(e.detail.value as number)} />\n \n \n Value: {value}\n \n\n Min & Max\n \n \n -200\n 200\n \n \n\n Icons\n \n \n \n \n \n \n\n With Snaps & Ticks\n \n \n \n\n With Snaps & No Ticks\n \n \n \n\n Dual Knobs\n \n setRangeValue(e.detail.value as any)} />\n \n \n Value: lower: {rangeValue.lower} upper: {rangeValue.upper}\n \n \n \n \n \n \n \n \n );\n};\n```\n",
- "stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'range-example',\n styleUrl: 'range-example.css'\n})\nexport class RangeExample {\n private customFormatter = (value: number) => `${value}%`;\n \n render() {\n return [\n \n \n \n \n\n \n \n -200\n 200\n \n \n\n \n \n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n ];\n }\n}\n```\n",
- "vue": "```html\n\n \n \n \n \n\n \n \n -200\n 200\n \n \n\n \n \n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n\n\n\n```\n"
- },
- "props": [
- {
- "name": "color",
- "type": "string | undefined",
- "mutable": false,
- "attr": "color",
- "reflectToAttr": true,
- "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "docsTags": [],
- "values": [
- {
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "debounce",
- "type": "number",
- "mutable": false,
- "attr": "debounce",
- "reflectToAttr": false,
- "docs": "How long, in milliseconds, to wait to trigger the\n`ionChange` event after each change in the range value.\nThis also impacts form bindings such as `ngModel` or `v-model`.",
- "docsTags": [],
- "default": "0",
- "values": [
- {
- "type": "number"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "disabled",
- "type": "boolean",
- "mutable": false,
- "attr": "disabled",
- "reflectToAttr": false,
- "docs": "If `true`, the user cannot interact with the range.",
- "docsTags": [],
- "default": "false",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "dualKnobs",
- "type": "boolean",
- "mutable": false,
- "attr": "dual-knobs",
- "reflectToAttr": false,
- "docs": "Show two knobs.",
- "docsTags": [],
- "default": "false",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "max",
- "type": "number",
- "mutable": false,
- "attr": "max",
- "reflectToAttr": false,
- "docs": "Maximum integer value of the range.",
- "docsTags": [],
- "default": "100",
- "values": [
- {
- "type": "number"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "min",
- "type": "number",
- "mutable": false,
- "attr": "min",
- "reflectToAttr": false,
- "docs": "Minimum integer value of the range.",
- "docsTags": [],
- "default": "0",
- "values": [
- {
- "type": "number"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "mode",
- "type": "\"ios\" | \"md\"",
- "mutable": false,
- "attr": "mode",
- "reflectToAttr": false,
- "docs": "The mode determines which platform styles to use.",
- "docsTags": [],
- "values": [
- {
- "value": "ios",
- "type": "string"
- },
- {
- "value": "md",
- "type": "string"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "name",
- "type": "string",
- "mutable": false,
- "attr": "name",
- "reflectToAttr": false,
- "docs": "The name of the control, which is submitted with the form data.",
- "docsTags": [],
- "default": "''",
- "values": [
- {
- "type": "string"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "pin",
- "type": "boolean",
- "mutable": false,
- "attr": "pin",
- "reflectToAttr": false,
- "docs": "If `true`, a pin with integer value is shown when the knob\nis pressed.",
- "docsTags": [],
- "default": "false",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "pinFormatter",
- "type": "(value: number) => string | number",
- "mutable": false,
- "reflectToAttr": false,
- "docs": "A callback used to format the pin text.\nBy default the pin text is set to `Math.round(value)`.",
- "docsTags": [],
- "default": "(value: number): number => Math.round(value)",
- "values": [
- {
- "type": "(value: number) => string"
- },
- {
- "type": "number"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "snaps",
- "type": "boolean",
- "mutable": false,
- "attr": "snaps",
- "reflectToAttr": false,
- "docs": "If `true`, the knob snaps to tick marks evenly spaced based\non the step property value.",
- "docsTags": [],
- "default": "false",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "step",
- "type": "number",
- "mutable": false,
- "attr": "step",
- "reflectToAttr": false,
- "docs": "Specifies the value granularity.",
- "docsTags": [],
- "default": "1",
- "values": [
- {
- "type": "number"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "ticks",
- "type": "boolean",
- "mutable": false,
- "attr": "ticks",
- "reflectToAttr": false,
- "docs": "If `true`, tick marks are displayed based on the step value.\nOnly applies when `snaps` is `true`.",
- "docsTags": [],
- "default": "true",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "value",
- "type": "number | { lower: number; upper: number; }",
- "mutable": true,
- "attr": "value",
- "reflectToAttr": false,
- "docs": "the value of the range.",
- "docsTags": [],
- "default": "0",
- "values": [
- {
- "type": "number"
- },
- {
- "type": "{ lower: number; upper: number; }"
- }
- ],
- "optional": false,
- "required": false
- }
- ],
- "methods": [],
- "events": [
- {
- "event": "ionBlur",
- "detail": "void",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted when the range loses focus.",
- "docsTags": []
- },
- {
- "event": "ionChange",
- "detail": "RangeChangeEventDetail",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted when the value property has changed.",
- "docsTags": []
- },
- {
- "event": "ionFocus",
- "detail": "void",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted when the range has focus.",
- "docsTags": []
- }
- ],
- "listeners": [],
- "styles": [
- {
- "name": "--bar-background",
- "annotation": "prop",
- "docs": "Background of the range bar"
- },
- {
- "name": "--bar-background-active",
- "annotation": "prop",
- "docs": "Background of the active range bar"
- },
- {
- "name": "--bar-border-radius",
- "annotation": "prop",
- "docs": "Border radius of the range bar"
- },
- {
- "name": "--bar-height",
- "annotation": "prop",
- "docs": "Height of the range bar"
- },
- {
- "name": "--height",
- "annotation": "prop",
- "docs": "Height of the range"
- },
- {
- "name": "--knob-background",
- "annotation": "prop",
- "docs": "Background of the range knob"
- },
- {
- "name": "--knob-border-radius",
- "annotation": "prop",
- "docs": "Border radius of the range knob"
- },
- {
- "name": "--knob-box-shadow",
- "annotation": "prop",
- "docs": "Box shadow of the range knob"
- },
- {
- "name": "--knob-size",
- "annotation": "prop",
- "docs": "Size of the range knob"
- },
- {
- "name": "--pin-background",
- "annotation": "prop",
- "docs": "Background of the range pin"
- },
- {
- "name": "--pin-color",
- "annotation": "prop",
- "docs": "Color of the range pin"
- }
- ],
- "slots": [
- {
- "name": "end",
- "docs": "Content is placed to the right of the range slider in LTR, and to the left in RTL."
- },
- {
- "name": "start",
- "docs": "Content is placed to the left of the range slider in LTR, and to the right in RTL."
- }
- ],
- "parts": [
- {
- "name": "bar",
- "docs": "The inactive part of the bar."
- },
- {
- "name": "bar-active",
- "docs": "The active part of the bar."
- },
- {
- "name": "knob",
- "docs": "The handle that is used to drag the range."
- },
- {
- "name": "pin",
- "docs": "The counter that appears above a knob."
- },
- {
- "name": "tick",
- "docs": "An inactive tick mark."
- },
- {
- "name": "tick-active",
- "docs": "An active tick mark."
- }
- ],
- "dependents": [],
- "dependencies": [],
- "dependencyGraph": {}
- },
- {
- "filePath": "./src/components/refresher/refresher.tsx",
- "encapsulation": "none",
- "tag": "ion-refresher",
- "readme": "# ion-refresher\n\nThe refresher provides pull-to-refresh functionality on a content component.\nThe pull-to-refresh pattern lets a user pull down on a list of data using touch\nin order to retrieve more data.\n\nData should be modified during the refresher's output events. Once the async\noperation has completed and the refreshing should end, call `complete()` on the\nrefresher.\n\n## Native Refreshers\n\nBoth iOS and Android platforms provide refreshers that take advantage of properties exposed by their respective devices that give pull to refresh a fluid, native-like feel.\n\nCertain properties such as `pullMin` and `snapbackDuration` are not compatible because much of the native refreshers are scroll-based. See [Refresher Properties](#properties) for more information.\n\n### iOS Usage\n\nUsing the iOS native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [Spinner Documentation](../spinner#properties) for accepted values. The `pullingIcon` defaults to the `lines` spinner on iOS. The spinner tick marks will be progressively shown as the user pulls down on the page.\n\nThe iOS native `ion-refresher` relies on rubber band scrolling in order to work properly and is only compatible with iOS devices as a result. We provide a fallback refresher for apps running in iOS mode on devices that do not support rubber band scrolling.\n\n### Android Usage\n\nUsing the MD native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [ion-spinner Documentation](../spinner#properties) for accepted values. `pullingIcon` defaults to the `circular` spinner on MD.\n\n## Interfaces\n\n### RefresherEventDetail\n\n```typescript\ninterface RefresherEventDetail {\n complete(): void;\n}\n```\n\n### RefresherCustomEvent\n\nWhile not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.\n\n```typescript\ninterface RefresherCustomEvent extends CustomEvent {\n detail: RefresherEventDetail;\n target: HTMLIonRefresherElement;\n}\n```\n",
- "docs": "The refresher provides pull-to-refresh functionality on a content component.\nThe pull-to-refresh pattern lets a user pull down on a list of data using touch\nin order to retrieve more data.\n\nData should be modified during the refresher's output events. Once the async\noperation has completed and the refreshing should end, call `complete()` on the\nrefresher.",
- "docsTags": [],
- "usage": {
- "angular": "```html\n\n\n \n \n \n\n\n\n\n \n \n \n\n\n\n\n \n \n \n \n\n```\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'refresher-example',\n templateUrl: 'refresher-example.html',\n styleUrls: ['./refresher-example.css'],\n})\nexport class RefresherExample {\n constructor() {}\n\n doRefresh(event) {\n console.log('Begin async operation');\n\n setTimeout(() => {\n console.log('Async operation has ended');\n event.target.complete();\n }, 2000);\n }\n}\n```",
- "javascript": "```html\n\n\n \n \n \n\n\n\n\n \n \n \n\n\n\n\n \n \n \n \n\n```",
- "react": "```tsx\nimport React from 'react';\nimport { IonContent, IonRefresher, IonRefresherContent } from '@ionic/react';\nimport { RefresherEventDetail } from '@ionic/core';\nimport { chevronDownCircleOutline } from 'ionicons/icons';\n\nfunction doRefresh(event: CustomEvent) {\n console.log('Begin async operation');\n\n setTimeout(() => {\n console.log('Async operation has ended');\n event.detail.complete();\n }, 2000);\n}\n\nexport const RefresherExample: React.FC = () => (\n \n {/*-- Default Refresher --*/}\n \n \n \n \n \n\n {/*-- Custom Refresher Properties --*/}\n \n \n \n \n \n\n {/*-- Custom Refresher Content --*/}\n \n \n \n \n \n \n \n);\n```",
- "stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'refresher-example',\n styleUrl: 'refresher-example.css'\n})\nexport class RefresherExample {\n doRefresh(ev: any) {\n console.log('Begin async operation');\n\n setTimeout(() => {\n console.log('Async operation has ended');\n ev.target.complete();\n }, 2000);\n }\n\n render() {\n return [\n // Default Refresher\n \n this.doRefresh(ev)}>\n \n \n ,\n\n // Custom Refresher Properties\n \n \n \n \n ,\n\n // Custom Refresher Content\n \n this.doRefresh(ev)}>\n \n \n \n \n ];\n }\n}\n```",
- "vue": "```html\n\n \n \n \n \n \n \n\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n\n\n```"
- },
- "props": [
- {
- "name": "closeDuration",
- "type": "string",
- "mutable": false,
- "attr": "close-duration",
- "reflectToAttr": false,
- "docs": "Time it takes to close the refresher.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.",
- "docsTags": [],
- "default": "'280ms'",
- "values": [
- {
- "type": "string"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "disabled",
- "type": "boolean",
- "mutable": false,
- "attr": "disabled",
- "reflectToAttr": false,
- "docs": "If `true`, the refresher will be hidden.",
- "docsTags": [],
- "default": "false",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "pullFactor",
- "type": "number",
- "mutable": false,
- "attr": "pull-factor",
- "reflectToAttr": false,
- "docs": "How much to multiply the pull speed by. To slow the pull animation down,\npass a number less than `1`. To speed up the pull, pass a number greater\nthan `1`. The default value is `1` which is equal to the speed of the cursor.\nIf a negative value is passed in, the factor will be `1` instead.\n\nFor example: If the value passed is `1.2` and the content is dragged by\n`10` pixels, instead of `10` pixels the content will be pulled by `12` pixels\n(an increase of 20 percent). If the value passed is `0.8`, the dragged amount\nwill be `8` pixels, less than the amount the cursor has moved.\n\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.",
- "docsTags": [],
- "default": "1",
- "values": [
- {
- "type": "number"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "pullMax",
- "type": "number",
- "mutable": false,
- "attr": "pull-max",
- "reflectToAttr": false,
- "docs": "The maximum distance of the pull until the refresher\nwill automatically go into the `refreshing` state.\nDefaults to the result of `pullMin + 60`.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.",
- "docsTags": [],
- "default": "this.pullMin + 60",
- "values": [
- {
- "type": "number"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "pullMin",
- "type": "number",
- "mutable": false,
- "attr": "pull-min",
- "reflectToAttr": false,
- "docs": "The minimum distance the user must pull down until the\nrefresher will go into the `refreshing` state.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.",
- "docsTags": [],
- "default": "60",
- "values": [
- {
- "type": "number"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "snapbackDuration",
- "type": "string",
- "mutable": false,
- "attr": "snapback-duration",
- "reflectToAttr": false,
- "docs": "Time it takes the refresher to snap back to the `refreshing` state.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.",
- "docsTags": [],
- "default": "'280ms'",
- "values": [
- {
- "type": "string"
- }
- ],
- "optional": false,
- "required": false
- }
- ],
- "methods": [
- {
- "name": "cancel",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "signature": "cancel() => Promise",
- "parameters": [],
- "docs": "Changes the refresher's state from `refreshing` to `cancelling`.",
- "docsTags": []
- },
- {
- "name": "complete",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "signature": "complete() => Promise",
- "parameters": [],
- "docs": "Call `complete()` when your async operation has completed.\nFor example, the `refreshing` state is while the app is performing\nan asynchronous operation, such as receiving more data from an\nAJAX request. Once the data has been received, you then call this\nmethod to signify that the refreshing has completed and to close\nthe refresher. This method also changes the refresher's state from\n`refreshing` to `completing`.",
- "docsTags": []
- },
- {
- "name": "getProgress",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "signature": "getProgress() => Promise",
- "parameters": [],
- "docs": "A number representing how far down the user has pulled.\nThe number `0` represents the user hasn't pulled down at all. The\nnumber `1`, and anything greater than `1`, represents that the user\nhas pulled far enough down that when they let go then the refresh will\nhappen. If they let go and the number is less than `1`, then the\nrefresh will not happen, and the content will return to it's original\nposition.",
- "docsTags": []
- }
- ],
- "events": [
- {
- "event": "ionPull",
- "detail": "void",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted while the user is pulling down the content and exposing the refresher.",
- "docsTags": []
- },
- {
- "event": "ionRefresh",
- "detail": "RefresherEventDetail",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted when the user lets go of the content and has pulled down\nfurther than the `pullMin` or pulls the content down and exceeds the pullMax.\nUpdates the refresher state to `refreshing`. The `complete()` method should be\ncalled when the async operation has completed.",
- "docsTags": []
- },
- {
- "event": "ionStart",
- "detail": "void",
- "bubbles": true,
- "cancelable": true,
- "composed": true,
- "docs": "Emitted when the user begins to start pulling down.",
- "docsTags": []
- }
- ],
- "listeners": [],
- "styles": [],
- "slots": [],
- "parts": [],
- "dependents": [],
- "dependencies": [],
- "dependencyGraph": {}
- },
- {
- "filePath": "./src/components/refresher-content/refresher-content.tsx",
- "encapsulation": "none",
- "tag": "ion-refresher-content",
- "readme": "# ion-refresher-content\n\nThe 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.\n\n\n",
- "docs": "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.",
- "docsTags": [],
- "usage": {},
- "props": [
- {
- "name": "pullingIcon",
- "type": "null | string | undefined",
- "mutable": true,
- "attr": "pulling-icon",
- "reflectToAttr": false,
- "docs": "A static icon or a spinner to display when you begin to pull down.\nA spinner name can be provided to gradually show tick marks\nwhen pulling down on iOS devices.",
- "docsTags": [],
- "values": [
- {
- "type": "null"
- },
- {
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "pullingText",
- "type": "IonicSafeString | string | undefined",
- "mutable": false,
- "attr": "pulling-text",
- "reflectToAttr": false,
- "docs": "The text you want to display when you begin to pull down.\n`pullingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `` would become\n`<Ionic>`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
- "docsTags": [],
- "values": [
- {
- "type": "IonicSafeString"
- },
- {
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "refreshingSpinner",
- "type": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
- "mutable": true,
- "attr": "refreshing-spinner",
- "reflectToAttr": false,
- "docs": "An animated SVG spinner that shows when refreshing begins",
- "docsTags": [],
- "values": [
- {
- "value": "bubbles",
- "type": "string"
- },
- {
- "value": "circles",
- "type": "string"
- },
- {
- "value": "circular",
- "type": "string"
- },
- {
- "value": "crescent",
- "type": "string"
- },
- {
- "value": "dots",
- "type": "string"
- },
- {
- "value": "lines",
- "type": "string"
- },
- {
- "value": "lines-sharp",
- "type": "string"
- },
- {
- "value": "lines-sharp-small",
- "type": "string"
- },
- {
- "value": "lines-small",
- "type": "string"
- },
- {
- "type": "null"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "refreshingText",
- "type": "IonicSafeString | string | undefined",
- "mutable": false,
- "attr": "refreshing-text",
- "reflectToAttr": false,
- "docs": "The text you want to display when performing a refresh.\n`refreshingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `` would become\n`<Ionic>`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
- "docsTags": [],
- "values": [
- {
- "type": "IonicSafeString"
- },
- {
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- }
- ],
- "methods": [],
- "events": [],
- "listeners": [],
- "styles": [],
- "slots": [],
- "parts": [],
- "dependents": [],
- "dependencies": [
- "ion-spinner",
- "ion-icon"
- ],
- "dependencyGraph": {
- "ion-refresher-content": [
- "ion-spinner",
- "ion-icon"
- ]
- }
- },
- {
- "filePath": "./src/components/reorder/reorder.tsx",
- "encapsulation": "shadow",
- "tag": "ion-reorder",
- "readme": "# ion-reorder\n\nReorder 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.\n\n`ion-reorder` is the anchor used to drag and drop the items inside of the `ion-reorder-group`. See the [Reorder Group](../reorder-group) for more information on how to complete the reorder operation.\n\n",
- "docs": "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.\n\n`ion-reorder` is the anchor used to drag and drop the items inside of the `ion-reorder-group`. See the [Reorder Group](../reorder-group) for more information on how to complete the reorder operation.",
- "docsTags": [
- {
- "name": "part",
- "text": "icon - The icon of the reorder handle (uses ion-icon)."
- }
- ],
- "usage": {
- "angular": "\n```html\n\n\n \n \n \n Item 1\n \n \n \n\n \n \n Item 2\n \n \n \n\n \n \n \n \n Item 3\n \n \n\n \n \n \n Item 4\n \n \n\n \n \n \n Item 5\n \n \n \n \n \n\n \n \n Item 6\n \n \n \n \n \n\n \n \n \n \n Item 7\n \n \n \n\n \n \n \n Item 8\n \n \n \n\n```",
- "javascript": "\n```html\n\n\n \n \n \n Item 1\n \n \n \n\n \n \n Item 2\n \n \n \n\n \n \n \n \n Item 3\n \n \n\n \n \n \n Item 4\n \n \n\n \n \n \n Item 5\n \n \n \n \n \n\n \n \n Item 6\n \n \n \n \n \n\n \n \n \n \n Item 7\n \n \n \n\n \n \n \n Item 8\n \n \n \n\n```",
- "react": "```tsx\nimport React from 'react';\nimport { IonIcon, IonItem, IonLabel, IonReorder, IonReorderGroup, IonContent } from '@ionic/react';\nimport { pizza } from 'ionicons/icons';\n\nexport const ReorderExample: React.FC = () => (\n \n {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}\n \n {/*-- Default reorder icon, end aligned items --*/}\n \n Item 1\n \n \n\n \n Item 2\n \n \n\n {/*-- Default reorder icon, start aligned items --*/}\n \n \n Item 3\n \n\n \n \n Item 4\n \n\n {/*-- Custom reorder icon end items --*/}\n \n Item 5\n \n \n \n \n\n \n Item 6\n \n \n \n \n\n {/*-- Items wrapped in a reorder, entire item can be dragged --*/}\n \n \n Item 7\n \n \n\n \n \n Item 8\n \n \n \n \n);\n```\n",
- "stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'reorder-example',\n styleUrl: 'reorder-example.css'\n})\nexport class ReorderExample {\n render() {\n return [\n // The reorder gesture is disabled by default, enable it to drag and drop items\n \n {/* Default reorder icon, end aligned items */}\n \n \n Item 1\n \n \n \n\n \n \n Item 2\n \n \n \n\n {/* Default reorder icon, start aligned items */}\n \n \n \n Item 3\n \n \n\n \n \n \n Item 4\n \n \n\n {/* Custom reorder icon end items */}\n \n \n Item 5\n \n \n \n \n \n\n \n \n Item 6\n \n \n \n \n \n\n {/* Items wrapped in a reorder, entire item can be dragged */}\n \n \n \n Item 7\n \n \n \n\n \n \n \n Item 8\n \n \n \n \n ];\n }\n}\n```\n",
- "vue": "```html\n\n \n \n \n \n \n Item 1\n \n \n \n\n \n \n Item 2\n \n \n \n\n \n \n \n \n Item 3\n \n \n\n \n \n \n Item 4\n \n \n\n \n \n \n Item 5\n \n \n \n \n \n\n \n \n Item 6\n \n \n \n \n \n\n \n \n \n \n Item 7\n \n \n \n\n \n \n \n Item 8\n \n \n \n \n\n\n\n```"
- },
- "props": [],
- "methods": [],
- "events": [],
- "listeners": [
- {
- "event": "click",
- "capture": true,
- "passive": false
- }
- ],
- "styles": [],
- "slots": [],
- "parts": [
- {
- "name": "icon",
- "docs": "The icon of the reorder handle (uses ion-icon)."
- }
- ],
- "dependents": [],
- "dependencies": [
- "ion-icon"
- ],
- "dependencyGraph": {
- "ion-reorder": [
- "ion-icon"
- ]
- }
- },
- {
- "filePath": "./src/components/reorder-group/reorder-group.tsx",
- "encapsulation": "none",
- "tag": "ion-reorder-group",
- "readme": "# ion-reorder-group\n\nThe reorder group is a wrapper component for items using the `ion-reorder` component. See the [Reorder documentation](../reorder/) for further information about the anchor component that is used to drag items within the `ion-reorder-group`.\n\nOnce the user drags an item and drops it in a new position, the `ionItemReorder` event is dispatched. A handler for it should be implemented that calls the `complete()` method.\n\nThe `detail` property of the `ionItemReorder` event includes all of the relevant information about the reorder operation, including the `from` and `to` indexes. In the context of reordering, an item moves `from` an index `to` a new index.\n\n## Interfaces\n\n### ItemReorderEventDetail\n\n```typescript\ninterface ItemReorderEventDetail {\n from: number;\n to: number;\n complete: (data?: boolean | any[]) => any;\n}\n```\n\n### ItemReorderCustomEvent\n\nWhile not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.\n\n```typescript\ninterface ItemReorderCustomEvent extends CustomEvent {\n detail: ItemReorderEventDetail;\n target: HTMLIonReorderGroupElement;\n}\n```\n",
- "docs": "The reorder group is a wrapper component for items using the `ion-reorder` component. See the [Reorder documentation](../reorder/) for further information about the anchor component that is used to drag items within the `ion-reorder-group`.\n\nOnce the user drags an item and drops it in a new position, the `ionItemReorder` event is dispatched. A handler for it should be implemented that calls the `complete()` method.\n\nThe `detail` property of the `ionItemReorder` event includes all of the relevant information about the reorder operation, including the `from` and `to` indexes. In the context of reordering, an item moves `from` an index `to` a new index.",
- "docsTags": [],
- "usage": {
- "angular": "```html\n\n\n \n \n \n Item 1\n \n \n \n\n \n \n Item 2\n \n \n \n\n \n \n \n \n Item 3\n \n \n\n \n \n \n Item 4\n \n \n\n \n \n \n Item 5\n \n \n \n \n \n\n \n \n Item 6\n \n \n \n \n \n\n \n \n \n \n Item 7\n \n \n \n\n \n \n \n Item 8\n \n \n \n\n```\n\n```javascript\nimport { Component, ViewChild } from '@angular/core';\nimport { IonReorderGroup } from '@ionic/angular';\nimport { ItemReorderEventDetail } from '@ionic/core';\n\n@Component({\n selector: 'reorder-group-example',\n templateUrl: 'reorder-group-example.html',\n styleUrls: ['./reorder-group-example.css']\n})\nexport class ReorderGroupExample {\n @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;\n\n constructor() {}\n\n doReorder(ev: CustomEvent) {\n // The `from` and `to` properties contain the index of the item\n // when the drag started and ended, respectively\n console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);\n\n // Finish the reorder and position the item in the DOM based on\n // where the gesture ended. This method can also be called directly\n // by the reorder group\n ev.detail.complete();\n }\n\n toggleReorderGroup() {\n this.reorderGroup.disabled = !this.reorderGroup.disabled;\n }\n}\n```\n\n### Updating Data\n\n```javascript\nimport { Component, ViewChild } from '@angular/core';\nimport { IonReorderGroup } from '@ionic/angular';\nimport { ItemReorderEventDetail } from '@ionic/core';\n\n@Component({\n selector: 'reorder-group-example',\n templateUrl: 'reorder-group-example.html',\n styleUrls: ['./reorder-group-example.css']\n})\nexport class ReorderGroupExample {\n items = [1, 2, 3, 4, 5];\n\n @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;\n\n constructor() {}\n\n doReorder(ev: CustomEvent) {\n // Before complete is called with the items they will remain in the\n // order before the drag\n console.log('Before complete', this.items);\n\n // Finish the reorder and position the item in the DOM based on\n // where the gesture ended. Update the items variable to the\n // new order of items\n this.items = ev.detail.complete(this.items);\n\n // After complete is called the items will be in the new order\n console.log('After complete', this.items);\n }\n}\n```\n",
- "javascript": "```html\n\n\n \n \n \n Item 1\n \n \n \n\n \n \n Item 2\n \n \n \n\n \n \n \n \n Item 3\n \n \n\n \n \n \n Item 4\n \n \n\n \n \n \n Item 5\n \n \n ![](\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\")
\n![](\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\"/)
\n