Skip to content

Instantly share code, notes, and snippets.

@alicewriteswrongs
Last active April 5, 2023 15:48
Show Gist options
  • Save alicewriteswrongs/948dca45a1697317e9da4c1542cab417 to your computer and use it in GitHub Desktop.
Save alicewriteswrongs/948dca45a1697317e9da4c1542cab417 to your computer and use it in GitHub Desktop.
{
"timestamp": "2023-04-05T15:47:46",
"compiler": {
"name": "@stencil/core",
"version": "3.2.0-dev.1680709325.13a58f4",
"typescriptVersion": "4.9.5"
},
"components": [
{
"filePath": "./src/components/accordion/accordion.tsx",
"encapsulation": "shadow",
"tag": "ion-accordion",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "slot",
"text": "header - Content is placed at the top and is used to\nexpand or collapse the accordion item."
},
{
"name": "slot",
"text": "content - Content is placed below the header and is\nshown or hidden based on expanded state."
},
{
"name": "part",
"text": "header - The wrapper element for the header slot."
},
{
"name": "part",
"text": "content - The wrapper element for the content slot."
},
{
"name": "part",
"text": "expanded - The expanded element. Can be used in combination\nwith the `header` and `content` parts (i.e. `::part(header expanded)`)."
}
],
"usage": {},
"props": [
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the accordion cannot be interacted with.",
"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": "readonly",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "readonly",
"reflectToAttr": false,
"docs": "If `true`, the accordion cannot be interacted with,\nbut does not alter the opacity.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "toggleIcon",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "toggle-icon",
"reflectToAttr": false,
"docs": "The toggle icon to use. This icon will be\nrotated when the accordion is expanded\nor collapsed.",
"docsTags": [],
"default": "chevronDown",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "toggleIconSlot",
"type": "\"end\" | \"start\"",
"complexType": {
"original": "'start' | 'end'",
"resolved": "\"end\" | \"start\"",
"references": {}
},
"mutable": false,
"attr": "toggle-icon-slot",
"reflectToAttr": false,
"docs": "The slot inside of `ion-item` to\nplace the toggle icon. Defaults to `\"end\"`.",
"docsTags": [],
"default": "'end'",
"values": [
{
"value": "end",
"type": "string"
},
{
"value": "start",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "value",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "value",
"reflectToAttr": false,
"docs": "The value of the accordion. Defaults to an autogenerated\nvalue.",
"docsTags": [],
"default": "`ion-accordion-${accordionIds++}`",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [],
"slots": [
{
"name": "content",
"docs": "Content is placed below the header and is\nshown or hidden based on expanded state."
},
{
"name": "header",
"docs": "Content is placed at the top and is used to\nexpand or collapse the accordion item."
}
],
"parts": [
{
"name": "content",
"docs": "The wrapper element for the content slot."
},
{
"name": "expanded",
"docs": "The expanded element. Can be used in combination\nwith the `header` and `content` parts (i.e. `::part(header expanded)`)."
},
{
"name": "header",
"docs": "The wrapper element for the header slot."
}
],
"dependents": [],
"dependencies": [
"ion-icon"
],
"dependencyGraph": {
"ion-accordion": [
"ion-icon"
]
}
},
{
"filePath": "./src/components/accordion-group/accordion-group.tsx",
"encapsulation": "shadow",
"tag": "ion-accordion-group",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "animated",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "animated",
"reflectToAttr": false,
"docs": "If `true`, all accordions inside of the\naccordion group will animate when expanding\nor collapsing.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the accordion group cannot be interacted with.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "expand",
"type": "\"compact\" | \"inset\"",
"complexType": {
"original": "'compact' | 'inset'",
"resolved": "\"compact\" | \"inset\"",
"references": {}
},
"mutable": false,
"attr": "expand",
"reflectToAttr": false,
"docs": "Describes the expansion behavior for each accordion.\nPossible values are `\"compact\"` and `\"inset\"`.\nDefaults to `\"compact\"`.",
"docsTags": [],
"default": "'compact'",
"values": [
{
"value": "compact",
"type": "string"
},
{
"value": "inset",
"type": "string"
}
],
"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": "multiple",
"type": "boolean | undefined",
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"mutable": false,
"attr": "multiple",
"reflectToAttr": false,
"docs": "If `true`, the accordion group can have multiple\naccordion components expanded at the same time.",
"docsTags": [],
"values": [
{
"type": "boolean"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "readonly",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "readonly",
"reflectToAttr": false,
"docs": "If `true`, the accordion group cannot be interacted with,\nbut does not alter the opacity.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "value",
"type": "null | string | string[] | undefined",
"complexType": {
"original": "string | string[] | null",
"resolved": "null | string | string[] | undefined",
"references": {}
},
"mutable": true,
"attr": "value",
"reflectToAttr": false,
"docs": "The value of the accordion group. This controls which\naccordions are expanded.\nThis should be an array of strings only when `multiple=\"true\"`",
"docsTags": [],
"values": [
{
"type": "null"
},
{
"type": "string"
},
{
"type": "string[]"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
}
],
"methods": [],
"events": [
{
"event": "ionChange",
"detail": "AccordionGroupChangeEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "AccordionGroupChangeEventDetail",
"resolved": "AccordionGroupChangeEventDetail<any>",
"references": {
"AccordionGroupChangeEventDetail": {
"location": "import",
"path": "./accordion-group-interface",
"id": "src/components/accordion-group/accordion-group-interface.ts::AccordionGroupChangeEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the value property has changed\nas a result of a user action such as a click.\nThis event will not emit when programmatically setting\nthe value property.",
"docsTags": []
}
],
"listeners": [
{
"event": "keydown",
"capture": false,
"passive": false
}
],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/action-sheet/action-sheet.tsx",
"encapsulation": "scoped",
"tag": "ion-action-sheet",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "animated",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "animated",
"reflectToAttr": false,
"docs": "If `true`, the action sheet will animate.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "backdropDismiss",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "backdrop-dismiss",
"reflectToAttr": false,
"docs": "If `true`, the action sheet will be dismissed when the backdrop is clicked.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "buttons",
"type": "(string | ActionSheetButton<any>)[]",
"complexType": {
"original": "(ActionSheetButton | string)[]",
"resolved": "(string | ActionSheetButton<any>)[]",
"references": {
"ActionSheetButton": {
"location": "import",
"path": "./action-sheet-interface",
"id": "src/components/action-sheet/action-sheet-interface.ts::ActionSheetButton"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "An array of buttons for the action sheet.",
"docsTags": [],
"default": "[]",
"values": [
{
"type": "(string"
},
{
"type": "ActionSheetButton<any>)[]"
}
],
"optional": false,
"required": false
},
{
"name": "cssClass",
"type": "string | string[] | undefined",
"complexType": {
"original": "string | string[]",
"resolved": "string | string[] | undefined",
"references": {}
},
"mutable": false,
"attr": "css-class",
"reflectToAttr": false,
"docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "string[]"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "enterAnimation",
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"complexType": {
"original": "AnimationBuilder",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Animation to use when the action sheet is presented.",
"docsTags": [],
"values": [
{
"type": "((baseEl: any, opts?: any) => Animation)"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "header",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "header",
"reflectToAttr": false,
"docs": "Title for the action sheet.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "htmlAttributes",
"type": "undefined | { [key: string]: any; }",
"complexType": {
"original": "{ [key: string]: any }",
"resolved": "undefined | { [key: string]: any; }",
"references": {}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Additional attributes to pass to the action sheet.",
"docsTags": [],
"values": [
{
"type": "undefined"
},
{
"type": "{ [key: string]: any; }"
}
],
"optional": true,
"required": false
},
{
"name": "isOpen",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "is-open",
"reflectToAttr": false,
"docs": "If `true`, the action sheet will open. If `false`, the action sheet will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the actionSheetController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe action sheet dismisses. You will need to do that in your code.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "keyboardClose",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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",
"complexType": {
"original": "AnimationBuilder",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Animation to use when the action sheet 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": "subHeader",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "sub-header",
"reflectToAttr": false,
"docs": "Subtitle for the action sheet.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "translucent",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "translucent",
"reflectToAttr": false,
"docs": "If `true`, the action sheet 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",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "trigger",
"reflectToAttr": false,
"docs": "An ID corresponding to the trigger element that\ncauses the action sheet to open when clicked.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
}
],
"methods": [
{
"name": "dismiss",
"returns": {
"type": "Promise<boolean>",
"docs": ""
},
"complexType": {
"signature": "(data?: any, role?: string) => Promise<boolean>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "data Any data to emit in the dismiss events."
}
],
"text": "Any data to emit in the dismiss events."
},
{
"tags": [
{
"name": "param",
"text": "role The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
}
],
"text": "The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<boolean>"
},
"signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
"parameters": [],
"docs": "Dismiss the action sheet 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 action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
}
]
},
{
"name": "onDidDismiss",
"returns": {
"type": "Promise<OverlayEventDetail<T>>",
"docs": ""
},
"complexType": {
"signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
},
"T": {
"location": "global",
"id": "src/components/action-sheet/action-sheet.tsx::T"
}
},
"return": "Promise<OverlayEventDetail<T>>"
},
"signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"docs": "Returns a promise that resolves when the action sheet did dismiss.",
"docsTags": []
},
{
"name": "onWillDismiss",
"returns": {
"type": "Promise<OverlayEventDetail<T>>",
"docs": ""
},
"complexType": {
"signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
},
"T": {
"location": "global",
"id": "src/components/action-sheet/action-sheet.tsx::T"
}
},
"return": "Promise<OverlayEventDetail<T>>"
},
"signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"docs": "Returns a promise that resolves when the action sheet will dismiss.",
"docsTags": []
},
{
"name": "present",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<void>"
},
"signature": "present() => Promise<void>",
"parameters": [],
"docs": "Present the action sheet overlay after it has been created.",
"docsTags": []
}
],
"events": [
{
"event": "didDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the action sheet has dismissed.\nShorthand for ionActionSheetDidDismiss.",
"docsTags": []
},
{
"event": "didPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the action sheet has presented.\nShorthand for ionActionSheetWillDismiss.",
"docsTags": []
},
{
"event": "ionActionSheetDidDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the action sheet has dismissed.",
"docsTags": []
},
{
"event": "ionActionSheetDidPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the action sheet has presented.",
"docsTags": []
},
{
"event": "ionActionSheetWillDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the action sheet has dismissed.",
"docsTags": []
},
{
"event": "ionActionSheetWillPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the action sheet has presented.",
"docsTags": []
},
{
"event": "willDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the action sheet has dismissed.\nShorthand for ionActionSheetWillDismiss.",
"docsTags": []
},
{
"event": "willPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the action sheet has presented.\nShorthand for ionActionSheetWillPresent.",
"docsTags": []
}
],
"listeners": [],
"styles": [
{
"name": "--backdrop-opacity",
"annotation": "prop",
"docs": "Opacity of the backdrop"
},
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the action sheet group"
},
{
"name": "--button-background",
"annotation": "prop",
"docs": "Background of the action sheet button"
},
{
"name": "--button-background-activated",
"annotation": "prop",
"docs": "Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple."
},
{
"name": "--button-background-activated-opacity",
"annotation": "prop",
"docs": "Opacity of the action sheet button background when pressed"
},
{
"name": "--button-background-focused",
"annotation": "prop",
"docs": "Background of the action sheet button when tabbed to"
},
{
"name": "--button-background-focused-opacity",
"annotation": "prop",
"docs": "Opacity of the action sheet button background when tabbed to"
},
{
"name": "--button-background-hover",
"annotation": "prop",
"docs": "Background of the action sheet button on hover"
},
{
"name": "--button-background-hover-opacity",
"annotation": "prop",
"docs": "Opacity of the action sheet button background on hover"
},
{
"name": "--button-background-selected",
"annotation": "prop",
"docs": "Background of the selected action sheet button"
},
{
"name": "--button-background-selected-opacity",
"annotation": "prop",
"docs": "Opacity of the selected action sheet button background"
},
{
"name": "--button-color",
"annotation": "prop",
"docs": "Color of the action sheet button"
},
{
"name": "--button-color-activated",
"annotation": "prop",
"docs": "Color of the action sheet button when pressed"
},
{
"name": "--button-color-focused",
"annotation": "prop",
"docs": "Color of the action sheet button when tabbed to"
},
{
"name": "--button-color-hover",
"annotation": "prop",
"docs": "Color of the action sheet button on hover"
},
{
"name": "--button-color-selected",
"annotation": "prop",
"docs": "Color of the selected action sheet button"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Color of the action sheet text"
},
{
"name": "--height",
"annotation": "prop",
"docs": "height of the action sheet"
},
{
"name": "--max-height",
"annotation": "prop",
"docs": "Maximum height of the action sheet"
},
{
"name": "--max-width",
"annotation": "prop",
"docs": "Maximum width of the action sheet"
},
{
"name": "--min-height",
"annotation": "prop",
"docs": "Minimum height of the action sheet"
},
{
"name": "--min-width",
"annotation": "prop",
"docs": "Minimum width of the action sheet"
},
{
"name": "--width",
"annotation": "prop",
"docs": "Width of the action sheet"
}
],
"slots": [],
"parts": [],
"dependents": [
"ion-select"
],
"dependencies": [
"ion-backdrop",
"ion-icon",
"ion-ripple-effect"
],
"dependencyGraph": {
"ion-action-sheet": [
"ion-backdrop",
"ion-icon",
"ion-ripple-effect"
],
"ion-select": [
"ion-action-sheet"
]
}
},
{
"filePath": "./src/components/alert/alert.tsx",
"encapsulation": "scoped",
"tag": "ion-alert",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "animated",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "animated",
"reflectToAttr": false,
"docs": "If `true`, the alert will animate.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "backdropDismiss",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "backdrop-dismiss",
"reflectToAttr": false,
"docs": "If `true`, the alert will be dismissed when the backdrop is clicked.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "buttons",
"type": "(string | AlertButton)[]",
"complexType": {
"original": "(AlertButton | string)[]",
"resolved": "(string | AlertButton)[]",
"references": {
"AlertButton": {
"location": "import",
"path": "./alert-interface",
"id": "src/components/alert/alert-interface.ts::AlertButton"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Array of buttons to be added to the alert.",
"docsTags": [],
"default": "[]",
"values": [
{
"type": "(string"
},
{
"type": "AlertButton)[]"
}
],
"optional": false,
"required": false
},
{
"name": "cssClass",
"type": "string | string[] | undefined",
"complexType": {
"original": "string | string[]",
"resolved": "string | string[] | undefined",
"references": {}
},
"mutable": false,
"attr": "css-class",
"reflectToAttr": false,
"docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "string[]"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "enterAnimation",
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"complexType": {
"original": "AnimationBuilder",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Animation to use when the alert is presented.",
"docsTags": [],
"values": [
{
"type": "((baseEl: any, opts?: any) => Animation)"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "header",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "header",
"reflectToAttr": false,
"docs": "The main title in the heading of the alert.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "htmlAttributes",
"type": "undefined | { [key: string]: any; }",
"complexType": {
"original": "{ [key: string]: any }",
"resolved": "undefined | { [key: string]: any; }",
"references": {}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Additional attributes to pass to the alert.",
"docsTags": [],
"values": [
{
"type": "undefined"
},
{
"type": "{ [key: string]: any; }"
}
],
"optional": true,
"required": false
},
{
"name": "inputs",
"type": "AlertInput[]",
"complexType": {
"original": "AlertInput[]",
"resolved": "AlertInput[]",
"references": {
"AlertInput": {
"location": "import",
"path": "./alert-interface",
"id": "src/components/alert/alert-interface.ts::AlertInput"
}
}
},
"mutable": true,
"reflectToAttr": false,
"docs": "Array of input to show in the alert.",
"docsTags": [],
"default": "[]",
"values": [
{
"type": "AlertInput[]"
}
],
"optional": false,
"required": false
},
{
"name": "isOpen",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "is-open",
"reflectToAttr": false,
"docs": "If `true`, the alert will open. If `false`, the alert will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the alertController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe alert dismisses. You will need to do that in your code.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "keyboardClose",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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",
"complexType": {
"original": "AnimationBuilder",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Animation to use when the alert is dismissed.",
"docsTags": [],
"values": [
{
"type": "((baseEl: any, opts?: any) => Animation)"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "message",
"type": "IonicSafeString | string | undefined",
"complexType": {
"original": "string | IonicSafeString",
"resolved": "IonicSafeString | string | undefined",
"references": {
"IonicSafeString": {
"location": "import",
"path": "../../utils/sanitization",
"id": "src/utils/sanitization/index.ts::IonicSafeString"
}
}
},
"mutable": false,
"attr": "message",
"reflectToAttr": false,
"docs": "The main message to be displayed in the alert.\n`message` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
"docsTags": [],
"values": [
{
"type": "IonicSafeString"
},
{
"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": "subHeader",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "sub-header",
"reflectToAttr": false,
"docs": "The subtitle in the heading of the alert. Displayed under the title.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "translucent",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "translucent",
"reflectToAttr": false,
"docs": "If `true`, the alert 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",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "trigger",
"reflectToAttr": false,
"docs": "An ID corresponding to the trigger element that\ncauses the alert to open when clicked.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
}
],
"methods": [
{
"name": "dismiss",
"returns": {
"type": "Promise<boolean>",
"docs": ""
},
"complexType": {
"signature": "(data?: any, role?: string) => Promise<boolean>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "data Any data to emit in the dismiss events."
}
],
"text": "Any data to emit in the dismiss events."
},
{
"tags": [
{
"name": "param",
"text": "role The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
}
],
"text": "The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<boolean>"
},
"signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
"parameters": [],
"docs": "Dismiss the alert 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 alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
}
]
},
{
"name": "onDidDismiss",
"returns": {
"type": "Promise<OverlayEventDetail<T>>",
"docs": ""
},
"complexType": {
"signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
},
"T": {
"location": "global",
"id": "src/components/alert/alert.tsx::T"
}
},
"return": "Promise<OverlayEventDetail<T>>"
},
"signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"docs": "Returns a promise that resolves when the alert did dismiss.",
"docsTags": []
},
{
"name": "onWillDismiss",
"returns": {
"type": "Promise<OverlayEventDetail<T>>",
"docs": ""
},
"complexType": {
"signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
},
"T": {
"location": "global",
"id": "src/components/alert/alert.tsx::T"
}
},
"return": "Promise<OverlayEventDetail<T>>"
},
"signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"docs": "Returns a promise that resolves when the alert will dismiss.",
"docsTags": []
},
{
"name": "present",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<void>"
},
"signature": "present() => Promise<void>",
"parameters": [],
"docs": "Present the alert overlay after it has been created.",
"docsTags": []
}
],
"events": [
{
"event": "didDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the alert has dismissed.\nShorthand for ionAlertDidDismiss.",
"docsTags": []
},
{
"event": "didPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the alert has presented.\nShorthand for ionAlertWillDismiss.",
"docsTags": []
},
{
"event": "ionAlertDidDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the alert has dismissed.",
"docsTags": []
},
{
"event": "ionAlertDidPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the alert has presented.",
"docsTags": []
},
{
"event": "ionAlertWillDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the alert has dismissed.",
"docsTags": []
},
{
"event": "ionAlertWillPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the alert has presented.",
"docsTags": []
},
{
"event": "willDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the alert has dismissed.\nShorthand for ionAlertWillDismiss.",
"docsTags": []
},
{
"event": "willPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the alert has presented.\nShorthand for ionAlertWillPresent.",
"docsTags": []
}
],
"listeners": [
{
"event": "keydown",
"target": "document",
"capture": false,
"passive": false
}
],
"styles": [
{
"name": "--backdrop-opacity",
"annotation": "prop",
"docs": "Opacity of the backdrop"
},
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the alert"
},
{
"name": "--height",
"annotation": "prop",
"docs": "Height of the alert"
},
{
"name": "--max-height",
"annotation": "prop",
"docs": "Maximum height of the alert"
},
{
"name": "--max-width",
"annotation": "prop",
"docs": "Maximum width of the alert"
},
{
"name": "--min-height",
"annotation": "prop",
"docs": "Minimum height of the alert"
},
{
"name": "--min-width",
"annotation": "prop",
"docs": "Minimum width of the alert"
},
{
"name": "--width",
"annotation": "prop",
"docs": "Width of the alert"
}
],
"slots": [],
"parts": [],
"dependents": [
"ion-select"
],
"dependencies": [
"ion-ripple-effect",
"ion-backdrop"
],
"dependencyGraph": {
"ion-alert": [
"ion-ripple-effect",
"ion-backdrop"
],
"ion-select": [
"ion-alert"
]
}
},
{
"filePath": "./src/components/app/app.tsx",
"encapsulation": "none",
"tag": "ion-app",
"docs": "",
"docsTags": [],
"usage": {},
"props": [],
"methods": [],
"events": [],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/avatar/avatar.tsx",
"encapsulation": "shadow",
"tag": "ion-avatar",
"docs": "",
"docsTags": [],
"usage": {},
"props": [],
"methods": [],
"events": [],
"listeners": [],
"styles": [
{
"name": "--border-radius",
"annotation": "prop",
"docs": "Border radius of the avatar and inner image"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/back-button/back-button.tsx",
"encapsulation": "shadow",
"tag": "ion-back-button",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "part",
"text": "native - The native HTML button element that wraps all child elements."
},
{
"name": "part",
"text": "icon - The back button icon (uses ion-icon)."
},
{
"name": "part",
"text": "text - The back button text."
}
],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "defaultHref",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": true,
"attr": "default-href",
"reflectToAttr": false,
"docs": "The url to navigate back to by default when there is no history.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": true,
"docs": "If `true`, the user cannot interact with the button.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "icon",
"type": "null | string | undefined",
"complexType": {
"original": "string | null",
"resolved": "null | string | undefined",
"references": {}
},
"mutable": false,
"attr": "icon",
"reflectToAttr": false,
"docs": "The built-in named SVG icon name or the exact `src` of an SVG file\nto use for the back button.",
"docsTags": [],
"values": [
{
"type": "null"
},
{
"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": "routerAnimation",
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"complexType": {
"original": "AnimationBuilder | undefined",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "When using a router, it specifies the transition animation when navigating to\nanother page.",
"docsTags": [],
"values": [
{
"type": "((baseEl: any, opts?: any) => Animation)"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "text",
"type": "null | string | undefined",
"complexType": {
"original": "string | null",
"resolved": "null | string | undefined",
"references": {}
},
"mutable": false,
"attr": "text",
"reflectToAttr": false,
"docs": "The text to display in the back button.",
"docsTags": [],
"values": [
{
"type": "null"
},
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "type",
"type": "\"button\" | \"reset\" | \"submit\"",
"complexType": {
"original": "'submit' | 'reset' | 'button'",
"resolved": "\"button\" | \"reset\" | \"submit\"",
"references": {}
},
"mutable": false,
"attr": "type",
"reflectToAttr": false,
"docs": "The type of the button.",
"docsTags": [],
"default": "'button'",
"values": [
{
"value": "button",
"type": "string"
},
{
"value": "reset",
"type": "string"
},
{
"value": "submit",
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the button"
},
{
"name": "--background-focused",
"annotation": "prop",
"docs": "Background of the button when focused with the tab key"
},
{
"name": "--background-focused-opacity",
"annotation": "prop",
"docs": "Opacity of the button background when focused with the tab key"
},
{
"name": "--background-hover",
"annotation": "prop",
"docs": "Background of the button on hover"
},
{
"name": "--background-hover-opacity",
"annotation": "prop",
"docs": "Opacity of the background on hover"
},
{
"name": "--border-radius",
"annotation": "prop",
"docs": "Border radius of the button"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Text color of the button"
},
{
"name": "--color-focused",
"annotation": "prop",
"docs": "Text color of the button when focused with the tab key"
},
{
"name": "--color-hover",
"annotation": "prop",
"docs": "Text color of the button on hover"
},
{
"name": "--icon-font-size",
"annotation": "prop",
"docs": "Font size of the button icon"
},
{
"name": "--icon-font-weight",
"annotation": "prop",
"docs": "Font weight of the button icon"
},
{
"name": "--icon-margin-bottom",
"annotation": "prop",
"docs": "Bottom margin of the button icon"
},
{
"name": "--icon-margin-end",
"annotation": "prop",
"docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon"
},
{
"name": "--icon-margin-start",
"annotation": "prop",
"docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon"
},
{
"name": "--icon-margin-top",
"annotation": "prop",
"docs": "Top margin of the button icon"
},
{
"name": "--icon-padding-bottom",
"annotation": "prop",
"docs": "Bottom padding of the button icon"
},
{
"name": "--icon-padding-end",
"annotation": "prop",
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon"
},
{
"name": "--icon-padding-start",
"annotation": "prop",
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon"
},
{
"name": "--icon-padding-top",
"annotation": "prop",
"docs": "Top padding of the button icon"
},
{
"name": "--margin-bottom",
"annotation": "prop",
"docs": "Bottom margin of the button"
},
{
"name": "--margin-end",
"annotation": "prop",
"docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button"
},
{
"name": "--margin-start",
"annotation": "prop",
"docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button"
},
{
"name": "--margin-top",
"annotation": "prop",
"docs": "Top margin of the button"
},
{
"name": "--min-height",
"annotation": "prop",
"docs": "Minimum height of the button"
},
{
"name": "--min-width",
"annotation": "prop",
"docs": "Minimum width of the button"
},
{
"name": "--opacity",
"annotation": "prop",
"docs": "Opacity of the button"
},
{
"name": "--padding-bottom",
"annotation": "prop",
"docs": "Bottom padding of the button"
},
{
"name": "--padding-end",
"annotation": "prop",
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button"
},
{
"name": "--padding-start",
"annotation": "prop",
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button"
},
{
"name": "--padding-top",
"annotation": "prop",
"docs": "Top padding of the button"
},
{
"name": "--ripple-color",
"annotation": "prop",
"docs": "Color of the button ripple effect"
},
{
"name": "--transition",
"annotation": "prop",
"docs": "Transition of the button"
}
],
"slots": [],
"parts": [
{
"name": "icon",
"docs": "The back button icon (uses ion-icon)."
},
{
"name": "native",
"docs": "The native HTML button element that wraps all child elements."
},
{
"name": "text",
"docs": "The back button text."
}
],
"dependents": [],
"dependencies": [
"ion-icon",
"ion-ripple-effect"
],
"dependencyGraph": {
"ion-back-button": [
"ion-icon",
"ion-ripple-effect"
]
}
},
{
"filePath": "./src/components/backdrop/backdrop.tsx",
"encapsulation": "shadow",
"tag": "ion-backdrop",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "stopPropagation",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "stop-propagation",
"reflectToAttr": false,
"docs": "If `true`, the backdrop will stop propagation on tap.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "tappable",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "tappable",
"reflectToAttr": false,
"docs": "If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "visible",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "visible",
"reflectToAttr": false,
"docs": "If `true`, the backdrop will be visible.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [
{
"event": "ionBackdropTap",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the backdrop is tapped.",
"docsTags": []
}
],
"listeners": [
{
"event": "click",
"capture": true,
"passive": false
}
],
"styles": [],
"slots": [],
"parts": [],
"dependents": [
"ion-action-sheet",
"ion-alert",
"ion-loading",
"ion-menu",
"ion-modal",
"ion-picker",
"ion-popover"
],
"dependencies": [],
"dependencyGraph": {
"ion-action-sheet": [
"ion-backdrop"
],
"ion-alert": [
"ion-backdrop"
],
"ion-loading": [
"ion-backdrop"
],
"ion-menu": [
"ion-backdrop"
],
"ion-modal": [
"ion-backdrop"
],
"ion-picker": [
"ion-backdrop"
],
"ion-popover": [
"ion-backdrop"
]
}
},
{
"filePath": "./src/components/badge/badge.tsx",
"encapsulation": "shadow",
"tag": "ion-badge",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"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": "--background",
"annotation": "prop",
"docs": "Background of the badge"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Text color of the badge"
},
{
"name": "--padding-bottom",
"annotation": "prop",
"docs": "Bottom padding of the badge"
},
{
"name": "--padding-end",
"annotation": "prop",
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge"
},
{
"name": "--padding-start",
"annotation": "prop",
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge"
},
{
"name": "--padding-top",
"annotation": "prop",
"docs": "Top padding of the badge"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/breadcrumb/breadcrumb.tsx",
"encapsulation": "shadow",
"tag": "ion-breadcrumb",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "part",
"text": "native - The native HTML anchor or div element that wraps all child elements."
},
{
"name": "part",
"text": "separator - The separator element between each breadcrumb."
},
{
"name": "part",
"text": "collapsed-indicator - The indicator element that shows the breadcrumbs are collapsed."
}
],
"usage": {},
"props": [
{
"name": "active",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "active",
"reflectToAttr": false,
"docs": "If `true`, the breadcrumb will take on a different look to show that\nit is the currently active breadcrumb. Defaults to `true` for the\nlast breadcrumb if it is not set on any.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"mutable": false,
"attr": "color",
"reflectToAttr": false,
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the user cannot interact with the breadcrumb.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "download",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "download",
"reflectToAttr": false,
"docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "href",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "href",
"reflectToAttr": false,
"docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"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": "rel",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "rel",
"reflectToAttr": false,
"docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "routerAnimation",
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"complexType": {
"original": "AnimationBuilder | undefined",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
"docsTags": [],
"values": [
{
"type": "((baseEl: any, opts?: any) => Animation)"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "routerDirection",
"type": "\"back\" | \"forward\" | \"root\"",
"complexType": {
"original": "RouterDirection",
"resolved": "\"back\" | \"forward\" | \"root\"",
"references": {
"RouterDirection": {
"location": "import",
"path": "../router/utils/interface",
"id": "/Users/alice/Code/ionic-framework/core::RouterDirection"
}
}
},
"mutable": false,
"attr": "router-direction",
"reflectToAttr": false,
"docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
"docsTags": [],
"default": "'forward'",
"values": [
{
"value": "back",
"type": "string"
},
{
"value": "forward",
"type": "string"
},
{
"value": "root",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "separator",
"type": "boolean | undefined",
"complexType": {
"original": "boolean | undefined",
"resolved": "boolean | undefined",
"references": {}
},
"mutable": false,
"attr": "separator",
"reflectToAttr": false,
"docs": "If true, show a separator between this breadcrumb and the next.\nDefaults to `true` for all breadcrumbs except the last.",
"docsTags": [],
"values": [
{
"type": "boolean"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "target",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "target",
"reflectToAttr": false,
"docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [
{
"event": "ionBlur",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the breadcrumb loses focus.",
"docsTags": []
},
{
"event": "ionFocus",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the breadcrumb has focus.",
"docsTags": []
}
],
"listeners": [],
"styles": [
{
"name": "--background-focused",
"annotation": "prop",
"docs": "Background color of the breadcrumb when focused"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Text color of the breadcrumb"
},
{
"name": "--color-active",
"annotation": "prop",
"docs": "Text color of the active breadcrumb"
},
{
"name": "--color-focused",
"annotation": "prop",
"docs": "Text color of the breadcrumb when focused"
},
{
"name": "--color-hover",
"annotation": "prop",
"docs": "Text color of the breadcrumb on hover"
}
],
"slots": [],
"parts": [
{
"name": "collapsed-indicator",
"docs": "The indicator element that shows the breadcrumbs are collapsed."
},
{
"name": "native",
"docs": "The native HTML anchor or div element that wraps all child elements."
},
{
"name": "separator",
"docs": "The separator element between each breadcrumb."
}
],
"dependents": [],
"dependencies": [
"ion-icon"
],
"dependencyGraph": {
"ion-breadcrumb": [
"ion-icon"
]
}
},
{
"filePath": "./src/components/breadcrumbs/breadcrumbs.tsx",
"encapsulation": "shadow",
"tag": "ion-breadcrumbs",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "itemsAfterCollapse",
"type": "number",
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"mutable": false,
"attr": "items-after-collapse",
"reflectToAttr": false,
"docs": "The number of breadcrumbs to show after the collapsed indicator.\nIf `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\nthe breadcrumbs will not be collapsed.",
"docsTags": [],
"default": "1",
"values": [
{
"type": "number"
}
],
"optional": false,
"required": false
},
{
"name": "itemsBeforeCollapse",
"type": "number",
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"mutable": false,
"attr": "items-before-collapse",
"reflectToAttr": false,
"docs": "The number of breadcrumbs to show before the collapsed indicator.\nIf `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\nthe breadcrumbs will not be collapsed.",
"docsTags": [],
"default": "1",
"values": [
{
"type": "number"
}
],
"optional": false,
"required": false
},
{
"name": "maxItems",
"type": "number | undefined",
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"mutable": false,
"attr": "max-items",
"reflectToAttr": false,
"docs": "The maximum number of breadcrumbs to show before collapsing.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"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": [
{
"event": "ionCollapsedClick",
"detail": "BreadcrumbCollapsedClickEventDetail",
"bubbles": true,
"complexType": {
"original": "BreadcrumbCollapsedClickEventDetail",
"resolved": "BreadcrumbCollapsedClickEventDetail",
"references": {
"BreadcrumbCollapsedClickEventDetail": {
"location": "import",
"path": "../breadcrumb/breadcrumb-interface",
"id": "src/components/breadcrumb/breadcrumb-interface.ts::BreadcrumbCollapsedClickEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the collapsed indicator is clicked on.",
"docsTags": []
}
],
"listeners": [
{
"event": "collapsedClick",
"capture": false,
"passive": false
}
],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/button/button.tsx",
"encapsulation": "shadow",
"tag": "ion-button",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "slot",
"text": "- Content is placed between the named slots if provided without a slot."
},
{
"name": "slot",
"text": "icon-only - Should be used on an icon in a button that has no text."
},
{
"name": "slot",
"text": "start - Content is placed to the left of the button text in LTR, and to the right in RTL."
},
{
"name": "slot",
"text": "end - Content is placed to the right of the button text in LTR, and to the left in RTL."
},
{
"name": "part",
"text": "native - The native HTML button or anchor element that wraps all child elements."
}
],
"usage": {},
"props": [
{
"name": "buttonType",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": true,
"attr": "button-type",
"reflectToAttr": false,
"docs": "The type of button.",
"docsTags": [],
"default": "'button'",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": true,
"docs": "If `true`, the user cannot interact with the button.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "download",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "download",
"reflectToAttr": false,
"docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "expand",
"type": "\"block\" | \"full\" | undefined",
"complexType": {
"original": "'full' | 'block'",
"resolved": "\"block\" | \"full\" | undefined",
"references": {}
},
"mutable": false,
"attr": "expand",
"reflectToAttr": true,
"docs": "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button\nwith square corners and no left or right borders.",
"docsTags": [],
"values": [
{
"value": "block",
"type": "string"
},
{
"value": "full",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "fill",
"type": "\"clear\" | \"default\" | \"outline\" | \"solid\" | undefined",
"complexType": {
"original": "'clear' | 'outline' | 'solid' | 'default'",
"resolved": "\"clear\" | \"default\" | \"outline\" | \"solid\" | undefined",
"references": {}
},
"mutable": true,
"attr": "fill",
"reflectToAttr": true,
"docs": "Set to `\"clear\"` for a transparent button that resembles a flat button, to `\"outline\"`\nfor a transparent button with a border, or to `\"solid\"` for a button with a filled background.\nThe default fill is `\"solid\"` except inside of a toolbar, where the default is `\"clear\"`.",
"docsTags": [],
"values": [
{
"value": "clear",
"type": "string"
},
{
"value": "default",
"type": "string"
},
{
"value": "outline",
"type": "string"
},
{
"value": "solid",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "form",
"type": "HTMLFormElement | string | undefined",
"complexType": {
"original": "string | HTMLFormElement",
"resolved": "HTMLFormElement | string | undefined",
"references": {
"HTMLFormElement": {
"location": "global",
"id": ""
}
}
},
"mutable": false,
"attr": "form",
"reflectToAttr": false,
"docs": "The HTML form element or form element id. Used to submit a form when the button is not a child of the form.",
"docsTags": [],
"values": [
{
"type": "HTMLFormElement"
},
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "href",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "href",
"reflectToAttr": false,
"docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"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": "rel",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "rel",
"reflectToAttr": false,
"docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "routerAnimation",
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"complexType": {
"original": "AnimationBuilder | undefined",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
"docsTags": [],
"values": [
{
"type": "((baseEl: any, opts?: any) => Animation)"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "routerDirection",
"type": "\"back\" | \"forward\" | \"root\"",
"complexType": {
"original": "RouterDirection",
"resolved": "\"back\" | \"forward\" | \"root\"",
"references": {
"RouterDirection": {
"location": "import",
"path": "../router/utils/interface",
"id": "/Users/alice/Code/ionic-framework/core::RouterDirection"
}
}
},
"mutable": false,
"attr": "router-direction",
"reflectToAttr": false,
"docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
"docsTags": [],
"default": "'forward'",
"values": [
{
"value": "back",
"type": "string"
},
{
"value": "forward",
"type": "string"
},
{
"value": "root",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "shape",
"type": "\"round\" | undefined",
"complexType": {
"original": "'round'",
"resolved": "\"round\" | undefined",
"references": {}
},
"mutable": false,
"attr": "shape",
"reflectToAttr": true,
"docs": "Set to `\"round\"` for a button with more rounded corners.",
"docsTags": [],
"values": [
{
"value": "round",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "size",
"type": "\"default\" | \"large\" | \"small\" | undefined",
"complexType": {
"original": "'small' | 'default' | 'large'",
"resolved": "\"default\" | \"large\" | \"small\" | undefined",
"references": {}
},
"mutable": false,
"attr": "size",
"reflectToAttr": true,
"docs": "Set to `\"small\"` for a button with less height and padding, to `\"default\"`\nfor a button with the default height and padding, or to `\"large\"` for a button\nwith more height and padding. By default the size is unset, unless the button\nis inside of an item, where the size is `\"small\"` by default. Set the size to\n`\"default\"` inside of an item to make it a standard size button.",
"docsTags": [],
"values": [
{
"value": "default",
"type": "string"
},
{
"value": "large",
"type": "string"
},
{
"value": "small",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "strong",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "strong",
"reflectToAttr": false,
"docs": "If `true`, activates a button with a heavier font weight.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "target",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "target",
"reflectToAttr": false,
"docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "type",
"type": "\"button\" | \"reset\" | \"submit\"",
"complexType": {
"original": "'submit' | 'reset' | 'button'",
"resolved": "\"button\" | \"reset\" | \"submit\"",
"references": {}
},
"mutable": false,
"attr": "type",
"reflectToAttr": false,
"docs": "The type of the button.",
"docsTags": [],
"default": "'button'",
"values": [
{
"value": "button",
"type": "string"
},
{
"value": "reset",
"type": "string"
},
{
"value": "submit",
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [
{
"event": "ionBlur",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the button loses focus.",
"docsTags": []
},
{
"event": "ionFocus",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the button has focus.",
"docsTags": []
}
],
"listeners": [],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the button"
},
{
"name": "--background-activated",
"annotation": "prop",
"docs": "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple."
},
{
"name": "--background-activated-opacity",
"annotation": "prop",
"docs": "Opacity of the button when pressed"
},
{
"name": "--background-focused",
"annotation": "prop",
"docs": "Background of the button when focused with the tab key"
},
{
"name": "--background-focused-opacity",
"annotation": "prop",
"docs": "Opacity of the button when focused with the tab key"
},
{
"name": "--background-hover",
"annotation": "prop",
"docs": "Background of the button on hover"
},
{
"name": "--background-hover-opacity",
"annotation": "prop",
"docs": "Opacity of the background on hover"
},
{
"name": "--border-color",
"annotation": "prop",
"docs": "Border color of the button"
},
{
"name": "--border-radius",
"annotation": "prop",
"docs": "Border radius of the button"
},
{
"name": "--border-style",
"annotation": "prop",
"docs": "Border style of the button"
},
{
"name": "--border-width",
"annotation": "prop",
"docs": "Border width of the button"
},
{
"name": "--box-shadow",
"annotation": "prop",
"docs": "Box shadow of the button"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Text color of the button"
},
{
"name": "--color-activated",
"annotation": "prop",
"docs": "Text color of the button when pressed"
},
{
"name": "--color-focused",
"annotation": "prop",
"docs": "Text color of the button when focused with the tab key"
},
{
"name": "--color-hover",
"annotation": "prop",
"docs": "Text color of the button when hover"
},
{
"name": "--opacity",
"annotation": "prop",
"docs": "Opacity of the button"
},
{
"name": "--padding-bottom",
"annotation": "prop",
"docs": "Bottom padding of the button"
},
{
"name": "--padding-end",
"annotation": "prop",
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button"
},
{
"name": "--padding-start",
"annotation": "prop",
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button"
},
{
"name": "--padding-top",
"annotation": "prop",
"docs": "Top padding of the button"
},
{
"name": "--ripple-color",
"annotation": "prop",
"docs": "Color of the button ripple effect"
},
{
"name": "--transition",
"annotation": "prop",
"docs": "Transition of the button"
}
],
"slots": [
{
"name": "",
"docs": "Content is placed between the named slots if provided without a slot."
},
{
"name": "end",
"docs": "Content is placed to the right of the button text in LTR, and to the left in RTL."
},
{
"name": "icon-only",
"docs": "Should be used on an icon in a button that has no text."
},
{
"name": "start",
"docs": "Content is placed to the left of the button text in LTR, and to the right in RTL."
}
],
"parts": [
{
"name": "native",
"docs": "The native HTML button or anchor element that wraps all child elements."
}
],
"dependents": [
"ion-datetime"
],
"dependencies": [
"ion-ripple-effect"
],
"dependencyGraph": {
"ion-button": [
"ion-ripple-effect"
],
"ion-datetime": [
"ion-button"
]
}
},
{
"filePath": "./src/components/buttons/buttons.tsx",
"encapsulation": "scoped",
"tag": "ion-buttons",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "collapse",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "collapse",
"reflectToAttr": false,
"docs": "If true, buttons will disappear when its\nparent toolbar has fully collapsed if the toolbar\nis not the first toolbar. If the toolbar is the\nfirst toolbar, the buttons will be hidden and will\nonly be shown once all toolbars have fully collapsed.\n\nOnly applies in `ios` mode with `collapse` set to\n`true` on `ion-header`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [
"ion-datetime"
],
"dependencies": [],
"dependencyGraph": {
"ion-datetime": [
"ion-buttons"
]
}
},
{
"filePath": "./src/components/card/card.tsx",
"encapsulation": "shadow",
"tag": "ion-card",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "part",
"text": "native - The native HTML button, anchor, or div element that wraps all child elements."
}
],
"usage": {},
"props": [
{
"name": "button",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "button",
"reflectToAttr": false,
"docs": "If `true`, a button tag will be rendered and the card will be tappable.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the user cannot interact with the card.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "download",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "download",
"reflectToAttr": false,
"docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "href",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "href",
"reflectToAttr": false,
"docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"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": "rel",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "rel",
"reflectToAttr": false,
"docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "routerAnimation",
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"complexType": {
"original": "AnimationBuilder | undefined",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
"docsTags": [],
"values": [
{
"type": "((baseEl: any, opts?: any) => Animation)"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "routerDirection",
"type": "\"back\" | \"forward\" | \"root\"",
"complexType": {
"original": "RouterDirection",
"resolved": "\"back\" | \"forward\" | \"root\"",
"references": {
"RouterDirection": {
"location": "import",
"path": "../router/utils/interface",
"id": "/Users/alice/Code/ionic-framework/core::RouterDirection"
}
}
},
"mutable": false,
"attr": "router-direction",
"reflectToAttr": false,
"docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
"docsTags": [],
"default": "'forward'",
"values": [
{
"value": "back",
"type": "string"
},
{
"value": "forward",
"type": "string"
},
{
"value": "root",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "target",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "target",
"reflectToAttr": false,
"docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "type",
"type": "\"button\" | \"reset\" | \"submit\"",
"complexType": {
"original": "'submit' | 'reset' | 'button'",
"resolved": "\"button\" | \"reset\" | \"submit\"",
"references": {}
},
"mutable": false,
"attr": "type",
"reflectToAttr": false,
"docs": "The type of the button. Only used when an `onclick` or `button` property is present.",
"docsTags": [],
"default": "'button'",
"values": [
{
"value": "button",
"type": "string"
},
{
"value": "reset",
"type": "string"
},
{
"value": "submit",
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the card"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Color of the card"
}
],
"slots": [],
"parts": [
{
"name": "native",
"docs": "The native HTML button, anchor, or div element that wraps all child elements."
}
],
"dependents": [],
"dependencies": [
"ion-ripple-effect"
],
"dependencyGraph": {
"ion-card": [
"ion-ripple-effect"
]
}
},
{
"filePath": "./src/components/card-content/card-content.tsx",
"encapsulation": "none",
"tag": "ion-card-content",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"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": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/card-header/card-header.tsx",
"encapsulation": "shadow",
"tag": "ion-card-header",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"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": "translucent",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "translucent",
"reflectToAttr": false,
"docs": "If `true`, the card header 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
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/card-subtitle/card-subtitle.tsx",
"encapsulation": "shadow",
"tag": "ion-card-subtitle",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"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 card subtitle"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/card-title/card-title.tsx",
"encapsulation": "shadow",
"tag": "ion-card-title",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"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 card title"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/checkbox/checkbox.tsx",
"encapsulation": "shadow",
"tag": "ion-checkbox",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "slot",
"text": "- The label text to associate with the checkbox. Use the \"labelPlacement\" property to control where the label is placed relative to the checkbox."
},
{
"name": "part",
"text": "container - The container for the checkbox mark."
},
{
"name": "part",
"text": "mark - The checkmark used to indicate the checked state."
}
],
"usage": {},
"props": [
{
"name": "checked",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": true,
"attr": "checked",
"reflectToAttr": false,
"docs": "If `true`, the checkbox is selected.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the user cannot interact with the checkbox.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "indeterminate",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": true,
"attr": "indeterminate",
"reflectToAttr": false,
"docs": "If `true`, the checkbox will visually appear as indeterminate.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "justify",
"type": "\"end\" | \"space-between\" | \"start\"",
"complexType": {
"original": "'start' | 'end' | 'space-between'",
"resolved": "\"end\" | \"space-between\" | \"start\"",
"references": {}
},
"mutable": false,
"attr": "justify",
"reflectToAttr": false,
"docs": "How to pack the label and checkbox within a line.\n`\"start\"`: The label and checkbox will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and checkbox will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and checkbox will appear on opposite\nends of the line with space between the two elements.",
"docsTags": [],
"default": "'space-between'",
"values": [
{
"value": "end",
"type": "string"
},
{
"value": "space-between",
"type": "string"
},
{
"value": "start",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "labelPlacement",
"type": "\"end\" | \"fixed\" | \"start\"",
"complexType": {
"original": "'start' | 'end' | 'fixed'",
"resolved": "\"end\" | \"fixed\" | \"start\"",
"references": {}
},
"mutable": false,
"attr": "label-placement",
"reflectToAttr": false,
"docs": "Where to place the label relative to the checkbox.\n`\"start\"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
"docsTags": [],
"default": "'start'",
"values": [
{
"value": "end",
"type": "string"
},
{
"value": "fixed",
"type": "string"
},
{
"value": "start",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "legacy",
"type": "boolean | undefined",
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"mutable": false,
"attr": "legacy",
"reflectToAttr": false,
"docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt checkboxes in to the modern form markup when they are\nusing either the `aria-label` attribute or have text in the default slot. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\n\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
"docsTags": [],
"values": [
{
"type": "boolean"
},
{
"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": "name",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"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",
"complexType": {
"original": "any | null",
"resolved": "any",
"references": {}
},
"mutable": false,
"attr": "value",
"reflectToAttr": false,
"docs": "The value of the checkbox does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\nit's only used when the checkbox participates in a native `<form>`.",
"docsTags": [],
"default": "'on'",
"values": [
{
"type": "any"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [
{
"event": "ionBlur",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the checkbox loses focus.",
"docsTags": []
},
{
"event": "ionChange",
"detail": "CheckboxChangeEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "CheckboxChangeEventDetail",
"resolved": "CheckboxChangeEventDetail<any>",
"references": {
"CheckboxChangeEventDetail": {
"location": "import",
"path": "./checkbox-interface",
"id": "src/components/checkbox/checkbox-interface.ts::CheckboxChangeEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the checked property has changed\nas a result of a user action such as a click.\nThis event will not emit when programmatically\nsetting the checked property.",
"docsTags": []
},
{
"event": "ionFocus",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the checkbox has focus.",
"docsTags": []
}
],
"listeners": [],
"styles": [
{
"name": "--border-color",
"annotation": "prop",
"docs": "Border color of the checkbox icon"
},
{
"name": "--border-color-checked",
"annotation": "prop",
"docs": "Border color of the checkbox icon when checked"
},
{
"name": "--border-radius",
"annotation": "prop",
"docs": "Border radius of the checkbox icon"
},
{
"name": "--border-style",
"annotation": "prop",
"docs": "Border style of the checkbox icon"
},
{
"name": "--border-width",
"annotation": "prop",
"docs": "Border width of the checkbox icon"
},
{
"name": "--checkbox-background",
"annotation": "prop",
"docs": "Background of the checkbox icon"
},
{
"name": "--checkbox-background-checked",
"annotation": "prop",
"docs": "Background of the checkbox icon when checked"
},
{
"name": "--checkmark-color",
"annotation": "prop",
"docs": "Color of the checkbox checkmark when checked"
},
{
"name": "--checkmark-width",
"annotation": "prop",
"docs": "Stroke width of the checkbox checkmark"
},
{
"name": "--size",
"annotation": "prop",
"docs": "Size of the checkbox icon"
},
{
"name": "--transition",
"annotation": "prop",
"docs": "Transition of the checkbox icon"
}
],
"slots": [
{
"name": "",
"docs": "The label text to associate with the checkbox. Use the \"labelPlacement\" property to control where the label is placed relative to the checkbox."
}
],
"parts": [
{
"name": "container",
"docs": "The container for the checkbox mark."
},
{
"name": "mark",
"docs": "The checkmark used to indicate the checked state."
}
],
"dependents": [
"ion-select-popover"
],
"dependencies": [],
"dependencyGraph": {
"ion-select-popover": [
"ion-checkbox"
]
}
},
{
"filePath": "./src/components/chip/chip.tsx",
"encapsulation": "shadow",
"tag": "ion-chip",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the user cannot interact with the chip.",
"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": "outline",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "outline",
"reflectToAttr": false,
"docs": "Display an outline style button.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the chip"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Color of the chip"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [
"ion-ripple-effect"
],
"dependencyGraph": {
"ion-chip": [
"ion-ripple-effect"
]
}
},
{
"filePath": "./src/components/col/col.tsx",
"encapsulation": "shadow",
"tag": "ion-col",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "offset",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "offset",
"reflectToAttr": false,
"docs": "The amount to offset the column, in terms of how many columns it should shift to the end\nof the total available.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "offsetLg",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "offset-lg",
"reflectToAttr": false,
"docs": "The amount to offset the column for lg screens, in terms of how many columns it should shift\nto the end of the total available.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "offsetMd",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "offset-md",
"reflectToAttr": false,
"docs": "The amount to offset the column for md screens, in terms of how many columns it should shift\nto the end of the total available.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "offsetSm",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "offset-sm",
"reflectToAttr": false,
"docs": "The amount to offset the column for sm screens, in terms of how many columns it should shift\nto the end of the total available.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "offsetXl",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "offset-xl",
"reflectToAttr": false,
"docs": "The amount to offset the column for xl screens, in terms of how many columns it should shift\nto the end of the total available.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "offsetXs",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "offset-xs",
"reflectToAttr": false,
"docs": "The amount to offset the column for xs screens, in terms of how many columns it should shift\nto the end of the total available.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "pull",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "pull",
"reflectToAttr": false,
"docs": "The amount to pull the column, in terms of how many columns it should shift to the start of\nthe total available.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "pullLg",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "pull-lg",
"reflectToAttr": false,
"docs": "The amount to pull the column for lg screens, in terms of how many columns it should shift\nto the start of the total available.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "pullMd",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "pull-md",
"reflectToAttr": false,
"docs": "The amount to pull the column for md screens, in terms of how many columns it should shift\nto the start of the total available.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "pullSm",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "pull-sm",
"reflectToAttr": false,
"docs": "The amount to pull the column for sm screens, in terms of how many columns it should shift\nto the start of the total available.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "pullXl",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "pull-xl",
"reflectToAttr": false,
"docs": "The amount to pull the column for xl screens, in terms of how many columns it should shift\nto the start of the total available.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "pullXs",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "pull-xs",
"reflectToAttr": false,
"docs": "The amount to pull the column for xs screens, in terms of how many columns it should shift\nto the start of the total available.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "push",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "push",
"reflectToAttr": false,
"docs": "The amount to push the column, in terms of how many columns it should shift to the end\nof the total available.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "pushLg",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "push-lg",
"reflectToAttr": false,
"docs": "The amount to push the column for lg screens, in terms of how many columns it should shift\nto the end of the total available.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "pushMd",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "push-md",
"reflectToAttr": false,
"docs": "The amount to push the column for md screens, in terms of how many columns it should shift\nto the end of the total available.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "pushSm",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "push-sm",
"reflectToAttr": false,
"docs": "The amount to push the column for sm screens, in terms of how many columns it should shift\nto the end of the total available.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "pushXl",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "push-xl",
"reflectToAttr": false,
"docs": "The amount to push the column for xl screens, in terms of how many columns it should shift\nto the end of the total available.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "pushXs",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "push-xs",
"reflectToAttr": false,
"docs": "The amount to push the column for xs screens, in terms of how many columns it should shift\nto the end of the total available.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "size",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "size",
"reflectToAttr": false,
"docs": "The size of the column, in terms of how many columns it should take up out of the total\navailable. If `\"auto\"` is passed, the column will be the size of its content.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "sizeLg",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "size-lg",
"reflectToAttr": false,
"docs": "The size of the column for lg screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "sizeMd",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "size-md",
"reflectToAttr": false,
"docs": "The size of the column for md screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "sizeSm",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "size-sm",
"reflectToAttr": false,
"docs": "The size of the column for sm screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "sizeXl",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "size-xl",
"reflectToAttr": false,
"docs": "The size of the column for xl screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "sizeXs",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "size-xs",
"reflectToAttr": false,
"docs": "The size of the column for xs screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [
{
"event": "resize",
"target": "window",
"capture": false,
"passive": true
}
],
"styles": [
{
"name": "--ion-grid-column-padding",
"annotation": "prop",
"docs": "Padding for the Column"
},
{
"name": "--ion-grid-column-padding-lg",
"annotation": "prop",
"docs": "Padding for the Column on lg screens and up"
},
{
"name": "--ion-grid-column-padding-md",
"annotation": "prop",
"docs": "Padding for the Column on md screens and up"
},
{
"name": "--ion-grid-column-padding-sm",
"annotation": "prop",
"docs": "Padding for the Column on sm screens and up"
},
{
"name": "--ion-grid-column-padding-xl",
"annotation": "prop",
"docs": "Padding for the Column on xl screens and up"
},
{
"name": "--ion-grid-column-padding-xs",
"annotation": "prop",
"docs": "Padding for the Column on xs screens and up"
},
{
"name": "--ion-grid-columns",
"annotation": "prop",
"docs": "The number of total Columns in the Grid"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/content/content.tsx",
"encapsulation": "shadow",
"tag": "ion-content",
"docs": "",
"docsTags": [
{
"name": "slot",
"text": "- Content is placed in the scrollable area if provided without a slot."
},
{
"name": "slot",
"text": "fixed - Should be used for fixed content that should not scroll."
},
{
"name": "part",
"text": "background - The background of the content."
},
{
"name": "part",
"text": "scroll - The scrollable container of the content."
}
],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "forceOverscroll",
"type": "boolean | undefined",
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"mutable": true,
"attr": "force-overscroll",
"reflectToAttr": false,
"docs": "If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.\nIf the content exceeds the bounds of ionContent, nothing will change.\nNote, this does not disable the system bounce on iOS. That is an OS level setting.",
"docsTags": [],
"values": [
{
"type": "boolean"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "fullscreen",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "fullscreen",
"reflectToAttr": false,
"docs": "If `true`, the content will scroll behind the headers\nand footers. This effect can easily be seen by setting the toolbar\nto transparent.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "scrollEvents",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "scroll-events",
"reflectToAttr": false,
"docs": "Because of performance reasons, ionScroll events are disabled by default, in order to enable them\nand start listening from (ionScroll), set this property to `true`.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "scrollX",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "scroll-x",
"reflectToAttr": false,
"docs": "If you want to enable the content scrolling in the X axis, set this property to `true`.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "scrollY",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "scroll-y",
"reflectToAttr": false,
"docs": "If you want to disable the content scrolling in the Y axis, set this property to `false`.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
}
],
"methods": [
{
"name": "getScrollElement",
"returns": {
"type": "Promise<HTMLElement>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<HTMLElement>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"HTMLElement": {
"location": "global",
"id": ""
}
},
"return": "Promise<HTMLElement>"
},
"signature": "getScrollElement() => Promise<HTMLElement>",
"parameters": [],
"docs": "Get the element where the actual scrolling takes place.\nThis element can be used to subscribe to `scroll` events or manually modify\n`scrollTop`. However, it's recommended to use the API provided by `ion-content`:\n\ni.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events\nand `scrollToPoint()` to scroll the content into a certain point.",
"docsTags": []
},
{
"name": "scrollByPoint",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "(x: number, y: number, duration: number) => Promise<void>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "x The amount to scroll by on the horizontal axis."
}
],
"text": "The amount to scroll by on the horizontal axis."
},
{
"tags": [
{
"name": "param",
"text": "y The amount to scroll by on the vertical axis."
}
],
"text": "The amount to scroll by on the vertical axis."
},
{
"tags": [
{
"name": "param",
"text": "duration The amount of time to take scrolling by that amount."
}
],
"text": "The amount of time to take scrolling by that amount."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<void>"
},
"signature": "scrollByPoint(x: number, y: number, duration: number) => Promise<void>",
"parameters": [],
"docs": "Scroll by a specified X/Y distance in the component.",
"docsTags": [
{
"name": "param",
"text": "x The amount to scroll by on the horizontal axis."
},
{
"name": "param",
"text": "y The amount to scroll by on the vertical axis."
},
{
"name": "param",
"text": "duration The amount of time to take scrolling by that amount."
}
]
},
{
"name": "scrollToBottom",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "(duration?: number) => Promise<void>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "duration The amount of time to take scrolling to the bottom. Defaults to `0`."
}
],
"text": "The amount of time to take scrolling to the bottom. Defaults to `0`."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<void>"
},
"signature": "scrollToBottom(duration?: number) => Promise<void>",
"parameters": [],
"docs": "Scroll to the bottom of the component.",
"docsTags": [
{
"name": "param",
"text": "duration The amount of time to take scrolling to the bottom. Defaults to `0`."
}
]
},
{
"name": "scrollToPoint",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "x The point to scroll to on the horizontal axis."
}
],
"text": "The point to scroll to on the horizontal axis."
},
{
"tags": [
{
"name": "param",
"text": "y The point to scroll to on the vertical axis."
}
],
"text": "The point to scroll to on the vertical axis."
},
{
"tags": [
{
"name": "param",
"text": "duration The amount of time to take scrolling to that point. Defaults to `0`."
}
],
"text": "The amount of time to take scrolling to that point. Defaults to `0`."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<void>"
},
"signature": "scrollToPoint(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>",
"parameters": [],
"docs": "Scroll to a specified X/Y location in the component.",
"docsTags": [
{
"name": "param",
"text": "x The point to scroll to on the horizontal axis."
},
{
"name": "param",
"text": "y The point to scroll to on the vertical axis."
},
{
"name": "param",
"text": "duration The amount of time to take scrolling to that point. Defaults to `0`."
}
]
},
{
"name": "scrollToTop",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "(duration?: number) => Promise<void>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "duration The amount of time to take scrolling to the top. Defaults to `0`."
}
],
"text": "The amount of time to take scrolling to the top. Defaults to `0`."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<void>"
},
"signature": "scrollToTop(duration?: number) => Promise<void>",
"parameters": [],
"docs": "Scroll to the top of the component.",
"docsTags": [
{
"name": "param",
"text": "duration The amount of time to take scrolling to the top. Defaults to `0`."
}
]
}
],
"events": [
{
"event": "ionScroll",
"detail": "ScrollDetail",
"bubbles": true,
"complexType": {
"original": "ScrollDetail",
"resolved": "ScrollDetail",
"references": {
"ScrollDetail": {
"location": "import",
"path": "./content-interface",
"id": "src/components/content/content-interface.ts::ScrollDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted while scrolling. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.",
"docsTags": []
},
{
"event": "ionScrollEnd",
"detail": "ScrollBaseDetail",
"bubbles": true,
"complexType": {
"original": "ScrollBaseDetail",
"resolved": "ScrollBaseDetail",
"references": {
"ScrollBaseDetail": {
"location": "import",
"path": "./content-interface",
"id": "src/components/content/content-interface.ts::ScrollBaseDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the scroll has ended. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.",
"docsTags": []
},
{
"event": "ionScrollStart",
"detail": "ScrollBaseDetail",
"bubbles": true,
"complexType": {
"original": "ScrollBaseDetail",
"resolved": "ScrollBaseDetail",
"references": {
"ScrollBaseDetail": {
"location": "import",
"path": "./content-interface",
"id": "src/components/content/content-interface.ts::ScrollBaseDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the scroll has started. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.",
"docsTags": []
}
],
"listeners": [
{
"event": "appload",
"target": "window",
"capture": false,
"passive": false
},
{
"event": "resize",
"target": "window",
"capture": false,
"passive": true
}
],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the content"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Color of the content"
},
{
"name": "--keyboard-offset",
"annotation": "prop",
"docs": "Keyboard offset of the content"
},
{
"name": "--offset-bottom",
"annotation": "prop",
"docs": "Offset bottom of the content"
},
{
"name": "--offset-top",
"annotation": "prop",
"docs": "Offset top of the content"
},
{
"name": "--padding-bottom",
"annotation": "prop",
"docs": "Bottom padding of the content"
},
{
"name": "--padding-end",
"annotation": "prop",
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content"
},
{
"name": "--padding-start",
"annotation": "prop",
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content"
},
{
"name": "--padding-top",
"annotation": "prop",
"docs": "Top padding of the content"
}
],
"slots": [
{
"name": "",
"docs": "Content is placed in the scrollable area if provided without a slot."
},
{
"name": "fixed",
"docs": "Should be used for fixed content that should not scroll."
}
],
"parts": [
{
"name": "background",
"docs": "The background of the content."
},
{
"name": "scroll",
"docs": "The scrollable container of the content."
}
],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/datetime/datetime.tsx",
"encapsulation": "shadow",
"tag": "ion-datetime",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "slot",
"text": "title - The title of the datetime."
},
{
"name": "slot",
"text": "buttons - The buttons in the datetime."
},
{
"name": "slot",
"text": "time-label - The label for the time selector in the datetime."
}
],
"usage": {},
"props": [
{
"name": "cancelText",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "cancel-text",
"reflectToAttr": false,
"docs": "The text to display on the picker's cancel button.",
"docsTags": [],
"default": "'Cancel'",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "clearText",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "clear-text",
"reflectToAttr": false,
"docs": "The text to display on the picker's \"Clear\" button.",
"docsTags": [],
"default": "'Clear'",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"mutable": false,
"attr": "color",
"reflectToAttr": false,
"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": [],
"default": "'primary'",
"values": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "dayValues",
"type": "number | number[] | string | undefined",
"complexType": {
"original": "number[] | number | string",
"resolved": "number | number[] | string | undefined",
"references": {}
},
"mutable": false,
"attr": "day-values",
"reflectToAttr": false,
"docs": "Values used to create the list of selectable days. By default\nevery day is shown for the given month. However, to control exactly which days of\nthe month to display, the `dayValues` input can take a number, an array of numbers, or\na string of comma separated numbers. Note that even if the array days have an invalid\nnumber for the selected month, like `31` in February, it will correctly not show\ndays which are not valid for the selected month.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"type": "number[]"
},
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the user cannot interact with the datetime.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "doneText",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "done-text",
"reflectToAttr": false,
"docs": "The text to display on the picker's \"Done\" button.",
"docsTags": [],
"default": "'Done'",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "firstDayOfWeek",
"type": "number",
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"mutable": false,
"attr": "first-day-of-week",
"reflectToAttr": false,
"docs": "The first day of the week to use for `ion-datetime`. The\ndefault value is `0` and represents Sunday.",
"docsTags": [],
"default": "0",
"values": [
{
"type": "number"
}
],
"optional": false,
"required": false
},
{
"name": "highlightedDates",
"type": "((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined",
"complexType": {
"original": "DatetimeHighlight[] | DatetimeHighlightCallback",
"resolved": "((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined",
"references": {
"DatetimeHighlight": {
"location": "import",
"path": "./datetime-interface",
"id": "/Users/alice/Code/ionic-framework/core::DatetimeHighlight"
},
"DatetimeHighlightCallback": {
"location": "import",
"path": "./datetime-interface",
"id": "src/components/datetime/datetime-interface.ts::DatetimeHighlightCallback"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Used to apply custom text and background colors to specific dates.\n\nCan be either an array of objects containing ISO strings and colors,\nor a callback that receives an ISO string and returns the colors.\n\nOnly applies to the `date`, `date-time`, and `time-date` presentations,\nwith `preferWheel=\"false\"`.",
"docsTags": [],
"values": [
{
"type": "((dateIsoString: string) => DatetimeHighlightStyle"
},
{
"type": "undefined)"
},
{
"type": "DatetimeHighlight[]"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "hourCycle",
"type": "\"h12\" | \"h23\" | undefined",
"complexType": {
"original": "'h23' | 'h12'",
"resolved": "\"h12\" | \"h23\" | undefined",
"references": {}
},
"mutable": false,
"attr": "hour-cycle",
"reflectToAttr": false,
"docs": "The hour cycle of the `ion-datetime`. If no value is set, this is\nspecified by the current locale.",
"docsTags": [],
"values": [
{
"value": "h12",
"type": "string"
},
{
"value": "h23",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "hourValues",
"type": "number | number[] | string | undefined",
"complexType": {
"original": "number[] | number | string",
"resolved": "number | number[] | string | undefined",
"references": {}
},
"mutable": false,
"attr": "hour-values",
"reflectToAttr": false,
"docs": "Values used to create the list of selectable hours. By default\nthe hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However,\nto control exactly which hours to display, the `hourValues` input can take a number, an\narray of numbers, or a string of comma separated numbers.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"type": "number[]"
},
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "isDateEnabled",
"type": "((dateIsoString: string) => boolean) | undefined",
"complexType": {
"original": "(dateIsoString: string) => boolean",
"resolved": "((dateIsoString: string) => boolean) | undefined",
"references": {}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Returns if an individual date (calendar day) is enabled or disabled.\n\nIf `true`, the day will be enabled/interactive.\nIf `false`, the day will be disabled/non-interactive.\n\nThe function accepts an ISO 8601 date string of a given day.\nBy default, all days are enabled. Developers can use this function\nto write custom logic to disable certain days.\n\nThe function is called for each rendered calendar day, for the previous, current and next month.\nCustom implementations should be optimized for performance to avoid jank.",
"docsTags": [],
"values": [
{
"type": "((dateIsoString: string) => boolean)"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "locale",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "locale",
"reflectToAttr": false,
"docs": "The locale to use for `ion-datetime`. This\nimpacts month and day name formatting.\nThe `\"default\"` value refers to the default\nlocale set by your device.",
"docsTags": [],
"default": "'default'",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "max",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": true,
"attr": "max",
"reflectToAttr": false,
"docs": "The maximum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\n`1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the maximum could just be the year, such as `1994`.\nDefaults to the end of this year.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "min",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": true,
"attr": "min",
"reflectToAttr": false,
"docs": "The minimum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\nsuch as `1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the minimum could just be the year, such as `1994`.\nDefaults to the beginning of the year, 100 years ago from today.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "minuteValues",
"type": "number | number[] | string | undefined",
"complexType": {
"original": "number[] | number | string",
"resolved": "number | number[] | string | undefined",
"references": {}
},
"mutable": false,
"attr": "minute-values",
"reflectToAttr": false,
"docs": "Values used to create the list of selectable minutes. By default\nthe minutes range from `0` to `59`. However, to control exactly which minutes to display,\nthe `minuteValues` input can take a number, an array of numbers, or a string of comma\nseparated numbers. For example, if the minute selections should only be every 15 minutes,\nthen this input value would be `minuteValues=\"0,15,30,45\"`.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"type": "number[]"
},
{
"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": "monthValues",
"type": "number | number[] | string | undefined",
"complexType": {
"original": "number[] | number | string",
"resolved": "number | number[] | string | undefined",
"references": {}
},
"mutable": false,
"attr": "month-values",
"reflectToAttr": false,
"docs": "Values used to create the list of selectable months. By default\nthe month values range from `1` to `12`. However, to control exactly which months to\ndisplay, the `monthValues` input can take a number, an array of numbers, or a string of\ncomma separated numbers. For example, if only summer months should be shown, then this\ninput value would be `monthValues=\"6,7,8\"`. Note that month numbers do *not* have a\nzero-based index, meaning January's value is `1`, and December's is `12`.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"type": "number[]"
},
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "multiple",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "multiple",
"reflectToAttr": false,
"docs": "If `true`, multiple dates can be selected at once. Only\napplies to `presentation=\"date\"` and `preferWheel=\"false\"`.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "name",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"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": "preferWheel",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "prefer-wheel",
"reflectToAttr": false,
"docs": "If `true`, a wheel picker will be rendered instead of a calendar grid\nwhere possible. If `false`, a calendar grid will be rendered instead of\na wheel picker where possible.\n\nA wheel picker can be rendered instead of a grid when `presentation` is\none of the following values: `\"date\"`, `\"date-time\"`, or `\"time-date\"`.\n\nA wheel picker will always be rendered regardless of\nthe `preferWheel` value when `presentation` is one of the following values:\n`\"time\"`, `\"month\"`, `\"month-year\"`, or `\"year\"`.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "presentation",
"type": "\"date\" | \"date-time\" | \"month\" | \"month-year\" | \"time\" | \"time-date\" | \"year\"",
"complexType": {
"original": "DatetimePresentation",
"resolved": "\"date\" | \"date-time\" | \"month\" | \"month-year\" | \"time\" | \"time-date\" | \"year\"",
"references": {
"DatetimePresentation": {
"location": "import",
"path": "./datetime-interface",
"id": "/Users/alice/Code/ionic-framework/core::DatetimePresentation"
}
}
},
"mutable": false,
"attr": "presentation",
"reflectToAttr": false,
"docs": "Which values you want to select. `\"date\"` will show\na calendar picker to select the month, day, and year. `\"time\"`\nwill show a time picker to select the hour, minute, and (optionally)\nAM/PM. `\"date-time\"` will show the date picker first and time picker second.\n`\"time-date\"` will show the time picker first and date picker second.",
"docsTags": [],
"default": "'date-time'",
"values": [
{
"value": "date",
"type": "string"
},
{
"value": "date-time",
"type": "string"
},
{
"value": "month",
"type": "string"
},
{
"value": "month-year",
"type": "string"
},
{
"value": "time",
"type": "string"
},
{
"value": "time-date",
"type": "string"
},
{
"value": "year",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "readonly",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "readonly",
"reflectToAttr": false,
"docs": "If `true`, the datetime appears normal but is not interactive.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "showClearButton",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "show-clear-button",
"reflectToAttr": false,
"docs": "If `true`, a \"Clear\" button will be rendered alongside\nthe default \"Cancel\" and \"OK\" buttons at the bottom of the `ion-datetime`\ncomponent. Developers can also use the `button` slot\nif they want to customize these buttons. If custom\nbuttons are set in the `button` slot then the\ndefault buttons will not be rendered.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "showDefaultButtons",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "show-default-buttons",
"reflectToAttr": false,
"docs": "If `true`, the default \"Cancel\" and \"OK\" buttons\nwill be rendered at the bottom of the `ion-datetime`\ncomponent. Developers can also use the `button` slot\nif they want to customize these buttons. If custom\nbuttons are set in the `button` slot then the\ndefault buttons will not be rendered.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "showDefaultTimeLabel",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "show-default-time-label",
"reflectToAttr": false,
"docs": "If `true`, the default \"Time\" label will be rendered\nfor the time selector of the `ion-datetime` component.\nDevelopers can also use the `time-label` slot\nif they want to customize this label. If a custom\nlabel is set in the `time-label` slot then the\ndefault label will not be rendered.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "showDefaultTitle",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "show-default-title",
"reflectToAttr": false,
"docs": "If `true`, a header will be shown above the calendar\npicker. This will include both the slotted title, and\nthe selected date.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "size",
"type": "\"cover\" | \"fixed\"",
"complexType": {
"original": "'cover' | 'fixed'",
"resolved": "\"cover\" | \"fixed\"",
"references": {}
},
"mutable": false,
"attr": "size",
"reflectToAttr": false,
"docs": "If `cover`, the `ion-datetime` will expand to cover the full width of its container.\nIf `fixed`, the `ion-datetime` will have a fixed width.",
"docsTags": [],
"default": "'fixed'",
"values": [
{
"value": "cover",
"type": "string"
},
{
"value": "fixed",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "titleSelectedDatesFormatter",
"type": "((selectedDates: string[]) => string) | undefined",
"complexType": {
"original": "TitleSelectedDatesFormatter",
"resolved": "((selectedDates: string[]) => string) | undefined",
"references": {
"TitleSelectedDatesFormatter": {
"location": "import",
"path": "./datetime-interface",
"id": "src/components/datetime/datetime-interface.ts::TitleSelectedDatesFormatter"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "A callback used to format the header text that shows how many\ndates are selected. Only used if there are 0 or more than 1\nselected (i.e. unused for exactly 1). By default, the header\ntext is set to \"numberOfDates days\".",
"docsTags": [],
"values": [
{
"type": "((selectedDates: string[]) => string)"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "value",
"type": "null | string | string[] | undefined",
"complexType": {
"original": "string | string[] | null",
"resolved": "null | string | string[] | undefined",
"references": {}
},
"mutable": true,
"attr": "value",
"reflectToAttr": false,
"docs": "The value of the datetime as a valid ISO 8601 datetime string.\nThis should be an array of strings only when `multiple=\"true\"`.",
"docsTags": [],
"values": [
{
"type": "null"
},
{
"type": "string"
},
{
"type": "string[]"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "yearValues",
"type": "number | number[] | string | undefined",
"complexType": {
"original": "number[] | number | string",
"resolved": "number | number[] | string | undefined",
"references": {}
},
"mutable": false,
"attr": "year-values",
"reflectToAttr": false,
"docs": "Values used to create the list of selectable years. By default\nthe year values range between the `min` and `max` datetime inputs. However, to\ncontrol exactly which years to display, the `yearValues` input can take a number, an array\nof numbers, or string of comma separated numbers. For example, to show upcoming and\nrecent leap years, then this input's value would be `yearValues=\"2024,2020,2016,2012,2008\"`.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"type": "number[]"
},
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
}
],
"methods": [
{
"name": "cancel",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "(closeOverlay?: boolean) => Promise<void>",
"parameters": [
{
"tags": [],
"text": ""
}
],
"references": {
"Promise": {
"location": "global",
"id": "/Users/alice/Code/ionic-framework/core::Promise"
}
},
"return": "Promise<void>"
},
"signature": "cancel(closeOverlay?: boolean) => Promise<void>",
"parameters": [],
"docs": "Emits the ionCancel event and\noptionally closes the popover\nor modal that the datetime was\npresented in.",
"docsTags": []
},
{
"name": "confirm",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "(closeOverlay?: boolean) => Promise<void>",
"parameters": [
{
"tags": [],
"text": ""
}
],
"references": {
"Promise": {
"location": "global",
"id": "/Users/alice/Code/ionic-framework/core::Promise"
}
},
"return": "Promise<void>"
},
"signature": "confirm(closeOverlay?: boolean) => Promise<void>",
"parameters": [],
"docs": "Confirms the selected datetime value, updates the\n`value` property, and optionally closes the popover\nor modal that the datetime was presented in.",
"docsTags": []
},
{
"name": "reset",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "(startDate?: string) => Promise<void>",
"parameters": [
{
"tags": [],
"text": ""
}
],
"references": {
"Promise": {
"location": "global",
"id": "/Users/alice/Code/ionic-framework/core::Promise"
}
},
"return": "Promise<void>"
},
"signature": "reset(startDate?: string) => Promise<void>",
"parameters": [],
"docs": "Resets the internal state of the datetime but does not update the value.\nPassing a valid ISO-8601 string will reset the state of the component to the provided date.\nIf no value is provided, the internal state will be reset to the clamped value of the min, max and today.",
"docsTags": []
}
],
"events": [
{
"event": "ionBlur",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the datetime loses focus.",
"docsTags": []
},
{
"event": "ionCancel",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the datetime selection was cancelled.",
"docsTags": []
},
{
"event": "ionChange",
"detail": "DatetimeChangeEventDetail",
"bubbles": true,
"complexType": {
"original": "DatetimeChangeEventDetail",
"resolved": "DatetimeChangeEventDetail",
"references": {
"DatetimeChangeEventDetail": {
"location": "import",
"path": "./datetime-interface",
"id": "src/components/datetime/datetime-interface.ts::DatetimeChangeEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the value (selected date) has changed.",
"docsTags": []
},
{
"event": "ionFocus",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the datetime has focus.",
"docsTags": []
}
],
"listeners": [],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "The primary background of the datetime component."
},
{
"name": "--background-rgb",
"annotation": "prop",
"docs": "The primary background of the datetime component in RGB format."
},
{
"name": "--title-color",
"annotation": "prop",
"docs": "The text color of the title."
}
],
"slots": [
{
"name": "buttons",
"docs": "The buttons in the datetime."
},
{
"name": "time-label",
"docs": "The label for the time selector in the datetime."
},
{
"name": "title",
"docs": "The title of the datetime."
}
],
"parts": [],
"dependents": [],
"dependencies": [
"ion-buttons",
"ion-button",
"ion-picker-internal",
"ion-picker-column-internal",
"ion-item",
"ion-label",
"ion-icon",
"ion-popover"
],
"dependencyGraph": {
"ion-datetime": [
"ion-buttons",
"ion-button",
"ion-picker-internal",
"ion-picker-column-internal",
"ion-item",
"ion-label",
"ion-icon",
"ion-popover"
],
"ion-button": [
"ion-ripple-effect"
],
"ion-item": [
"ion-icon",
"ion-ripple-effect",
"ion-note"
],
"ion-popover": [
"ion-backdrop"
]
}
},
{
"filePath": "./src/components/datetime-button/datetime-button.tsx",
"encapsulation": "shadow",
"tag": "ion-datetime-button",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "slot",
"text": "date-target - Content displayed inside of the date button."
},
{
"name": "slot",
"text": "time-target - Content displayed inside of the time button."
},
{
"name": "part",
"text": "native - The native HTML button that wraps the slotted text."
}
],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [],
"default": "'primary'",
"values": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "datetime",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "datetime",
"reflectToAttr": false,
"docs": "The ID of the `ion-datetime` instance\nassociated with the datetime button.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": true,
"docs": "If `true`, the user cannot interact with the button.",
"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
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [],
"slots": [
{
"name": "date-target",
"docs": "Content displayed inside of the date button."
},
{
"name": "time-target",
"docs": "Content displayed inside of the time button."
}
],
"parts": [
{
"name": "native",
"docs": "The native HTML button that wraps the slotted text."
}
],
"dependents": [],
"dependencies": [
"ion-ripple-effect"
],
"dependencyGraph": {
"ion-datetime-button": [
"ion-ripple-effect"
]
}
},
{
"filePath": "./src/components/fab/fab.tsx",
"encapsulation": "shadow",
"tag": "ion-fab",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "activated",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": true,
"attr": "activated",
"reflectToAttr": false,
"docs": "If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.\nThat means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "edge",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "edge",
"reflectToAttr": false,
"docs": "If `true`, the fab will display on the edge of the header if\n`vertical` is `\"top\"`, and on the edge of the footer if\nit is `\"bottom\"`. Should be used with a `fixed` slot.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "horizontal",
"type": "\"center\" | \"end\" | \"start\" | undefined",
"complexType": {
"original": "'start' | 'end' | 'center'",
"resolved": "\"center\" | \"end\" | \"start\" | undefined",
"references": {}
},
"mutable": false,
"attr": "horizontal",
"reflectToAttr": false,
"docs": "Where to align the fab horizontally in the viewport.",
"docsTags": [],
"values": [
{
"value": "center",
"type": "string"
},
{
"value": "end",
"type": "string"
},
{
"value": "start",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "vertical",
"type": "\"bottom\" | \"center\" | \"top\" | undefined",
"complexType": {
"original": "'top' | 'bottom' | 'center'",
"resolved": "\"bottom\" | \"center\" | \"top\" | undefined",
"references": {}
},
"mutable": false,
"attr": "vertical",
"reflectToAttr": false,
"docs": "Where to align the fab vertically in the viewport.",
"docsTags": [],
"values": [
{
"value": "bottom",
"type": "string"
},
{
"value": "center",
"type": "string"
},
{
"value": "top",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
}
],
"methods": [
{
"name": "close",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "/Users/alice/Code/ionic-framework/core::Promise"
}
},
"return": "Promise<void>"
},
"signature": "close() => Promise<void>",
"parameters": [],
"docs": "Close an active FAB list container.",
"docsTags": []
}
],
"events": [],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/fab-button/fab-button.tsx",
"encapsulation": "shadow",
"tag": "ion-fab-button",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "part",
"text": "native - The native HTML button or anchor element that wraps all child elements."
},
{
"name": "part",
"text": "close-icon - The close icon that is displayed when a fab list opens (uses ion-icon)."
}
],
"usage": {},
"props": [
{
"name": "activated",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "activated",
"reflectToAttr": false,
"docs": "If `true`, the fab button will be show a close icon.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "closeIcon",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "close-icon",
"reflectToAttr": false,
"docs": "The icon name to use for the close icon. This will appear when the fab button\nis pressed. Only applies if it is the main button inside of a fab containing a\nfab list.",
"docsTags": [],
"default": "close",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the user cannot interact with the fab button.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "download",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "download",
"reflectToAttr": false,
"docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "href",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "href",
"reflectToAttr": false,
"docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"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": "rel",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "rel",
"reflectToAttr": false,
"docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "routerAnimation",
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"complexType": {
"original": "AnimationBuilder | undefined",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
"docsTags": [],
"values": [
{
"type": "((baseEl: any, opts?: any) => Animation)"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "routerDirection",
"type": "\"back\" | \"forward\" | \"root\"",
"complexType": {
"original": "RouterDirection",
"resolved": "\"back\" | \"forward\" | \"root\"",
"references": {
"RouterDirection": {
"location": "import",
"path": "../router/utils/interface",
"id": "/Users/alice/Code/ionic-framework/core::RouterDirection"
}
}
},
"mutable": false,
"attr": "router-direction",
"reflectToAttr": false,
"docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
"docsTags": [],
"default": "'forward'",
"values": [
{
"value": "back",
"type": "string"
},
{
"value": "forward",
"type": "string"
},
{
"value": "root",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "show",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "show",
"reflectToAttr": false,
"docs": "If `true`, the fab button will show when in a fab-list.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "size",
"type": "\"small\" | undefined",
"complexType": {
"original": "'small'",
"resolved": "\"small\" | undefined",
"references": {}
},
"mutable": false,
"attr": "size",
"reflectToAttr": false,
"docs": "The size of the button. Set this to `small` in order to have a mini fab button.",
"docsTags": [],
"values": [
{
"value": "small",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "target",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "target",
"reflectToAttr": false,
"docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "translucent",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "translucent",
"reflectToAttr": false,
"docs": "If `true`, the fab button 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": "type",
"type": "\"button\" | \"reset\" | \"submit\"",
"complexType": {
"original": "'submit' | 'reset' | 'button'",
"resolved": "\"button\" | \"reset\" | \"submit\"",
"references": {}
},
"mutable": false,
"attr": "type",
"reflectToAttr": false,
"docs": "The type of the button.",
"docsTags": [],
"default": "'button'",
"values": [
{
"value": "button",
"type": "string"
},
{
"value": "reset",
"type": "string"
},
{
"value": "submit",
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [
{
"event": "ionBlur",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the button loses focus.",
"docsTags": []
},
{
"event": "ionFocus",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the button has focus.",
"docsTags": []
}
],
"listeners": [],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the button"
},
{
"name": "--background-activated",
"annotation": "prop",
"docs": "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple."
},
{
"name": "--background-activated-opacity",
"annotation": "prop",
"docs": "Opacity of the button background when pressed"
},
{
"name": "--background-focused",
"annotation": "prop",
"docs": "Background of the button when focused with the tab key"
},
{
"name": "--background-focused-opacity",
"annotation": "prop",
"docs": "Opacity of the button background when focused with the tab key"
},
{
"name": "--background-hover",
"annotation": "prop",
"docs": "Background of the button on hover"
},
{
"name": "--background-hover-opacity",
"annotation": "prop",
"docs": "Opacity of the button background on hover"
},
{
"name": "--border-color",
"annotation": "prop",
"docs": "Border color of the button"
},
{
"name": "--border-radius",
"annotation": "prop",
"docs": "Border radius of the button"
},
{
"name": "--border-style",
"annotation": "prop",
"docs": "Border style of the button"
},
{
"name": "--border-width",
"annotation": "prop",
"docs": "Border width of the button"
},
{
"name": "--box-shadow",
"annotation": "prop",
"docs": "Box shadow of the button"
},
{
"name": "--close-icon-font-size",
"annotation": "prop",
"docs": "Font size of the close icon"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Text color of the button"
},
{
"name": "--color-activated",
"annotation": "prop",
"docs": "Text color of the button when pressed"
},
{
"name": "--color-focused",
"annotation": "prop",
"docs": "Text color of the button when focused with the tab key"
},
{
"name": "--color-hover",
"annotation": "prop",
"docs": "Text color of the button on hover"
},
{
"name": "--padding-bottom",
"annotation": "prop",
"docs": "Bottom padding of the button"
},
{
"name": "--padding-end",
"annotation": "prop",
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button"
},
{
"name": "--padding-start",
"annotation": "prop",
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button"
},
{
"name": "--padding-top",
"annotation": "prop",
"docs": "Top padding of the button"
},
{
"name": "--ripple-color",
"annotation": "prop",
"docs": "Color of the button ripple effect"
},
{
"name": "--transition",
"annotation": "prop",
"docs": "Transition of the button"
}
],
"slots": [],
"parts": [
{
"name": "close-icon",
"docs": "The close icon that is displayed when a fab list opens (uses ion-icon)."
},
{
"name": "native",
"docs": "The native HTML button or anchor element that wraps all child elements."
}
],
"dependents": [],
"dependencies": [
"ion-icon",
"ion-ripple-effect"
],
"dependencyGraph": {
"ion-fab-button": [
"ion-icon",
"ion-ripple-effect"
]
}
},
{
"filePath": "./src/components/fab-list/fab-list.tsx",
"encapsulation": "shadow",
"tag": "ion-fab-list",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "activated",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "activated",
"reflectToAttr": false,
"docs": "If `true`, the fab list will show all fab buttons in the list.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "side",
"type": "\"bottom\" | \"end\" | \"start\" | \"top\"",
"complexType": {
"original": "'start' | 'end' | 'top' | 'bottom'",
"resolved": "\"bottom\" | \"end\" | \"start\" | \"top\"",
"references": {}
},
"mutable": false,
"attr": "side",
"reflectToAttr": false,
"docs": "The side the fab list will show on relative to the main fab button.",
"docsTags": [],
"default": "'bottom'",
"values": [
{
"value": "bottom",
"type": "string"
},
{
"value": "end",
"type": "string"
},
{
"value": "start",
"type": "string"
},
{
"value": "top",
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/footer/footer.tsx",
"encapsulation": "none",
"tag": "ion-footer",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "collapse",
"type": "\"fade\" | undefined",
"complexType": {
"original": "'fade'",
"resolved": "\"fade\" | undefined",
"references": {}
},
"mutable": false,
"attr": "collapse",
"reflectToAttr": false,
"docs": "Describes the scroll effect that will be applied to the footer.\nOnly applies in iOS mode.",
"docsTags": [],
"values": [
{
"value": "fade",
"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": "translucent",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "translucent",
"reflectToAttr": false,
"docs": "If `true`, the footer 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).\n\nNote: In order to scroll content behind the footer, the `fullscreen`\nattribute needs to be set on the content.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/grid/grid.tsx",
"encapsulation": "shadow",
"tag": "ion-grid",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "fixed",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "fixed",
"reflectToAttr": false,
"docs": "If `true`, the grid will have a fixed width based on the screen size.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [
{
"name": "--ion-grid-padding",
"annotation": "prop",
"docs": "Padding for the Grid"
},
{
"name": "--ion-grid-padding-lg",
"annotation": "prop",
"docs": "Padding for the Grid on lg screens"
},
{
"name": "--ion-grid-padding-md",
"annotation": "prop",
"docs": "Padding for the Grid on md screens"
},
{
"name": "--ion-grid-padding-sm",
"annotation": "prop",
"docs": "Padding for the Grid on sm screens"
},
{
"name": "--ion-grid-padding-xl",
"annotation": "prop",
"docs": "Padding for the Grid on xl screens"
},
{
"name": "--ion-grid-padding-xs",
"annotation": "prop",
"docs": "Padding for the Grid on xs screens"
},
{
"name": "--ion-grid-width",
"annotation": "prop",
"docs": "Width of the fixed Grid"
},
{
"name": "--ion-grid-width-lg",
"annotation": "prop",
"docs": "Width of the fixed Grid on lg screens"
},
{
"name": "--ion-grid-width-md",
"annotation": "prop",
"docs": "Width of the fixed Grid on md screens"
},
{
"name": "--ion-grid-width-sm",
"annotation": "prop",
"docs": "Width of the fixed Grid on sm screens"
},
{
"name": "--ion-grid-width-xl",
"annotation": "prop",
"docs": "Width of the fixed Grid on xl screens"
},
{
"name": "--ion-grid-width-xs",
"annotation": "prop",
"docs": "Width of the fixed Grid on xs screens"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/header/header.tsx",
"encapsulation": "none",
"tag": "ion-header",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "collapse",
"type": "\"condense\" | \"fade\" | undefined",
"complexType": {
"original": "'condense' | 'fade'",
"resolved": "\"condense\" | \"fade\" | undefined",
"references": {}
},
"mutable": false,
"attr": "collapse",
"reflectToAttr": false,
"docs": "Describes the scroll effect that will be applied to the header.\nOnly applies in iOS mode.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)",
"docsTags": [],
"values": [
{
"value": "condense",
"type": "string"
},
{
"value": "fade",
"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": "translucent",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "translucent",
"reflectToAttr": false,
"docs": "If `true`, the header 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).\n\nNote: In order to scroll content behind the header, the `fullscreen`\nattribute needs to be set on the content.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/img/img.tsx",
"encapsulation": "shadow",
"tag": "ion-img",
"docs": "",
"docsTags": [
{
"name": "part",
"text": "image - The inner `img` element."
}
],
"usage": {},
"props": [
{
"name": "alt",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "alt",
"reflectToAttr": false,
"docs": "This attribute defines the alternative text describing the image.\nUsers will see this text displayed if the image URL is wrong,\nthe image is not in one of the supported formats, or if the image is not yet downloaded.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "src",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "src",
"reflectToAttr": false,
"docs": "The image URL. This attribute is mandatory for the `<img>` element.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
}
],
"methods": [],
"events": [
{
"event": "ionError",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the img fails to load",
"docsTags": []
},
{
"event": "ionImgDidLoad",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the image has finished loading",
"docsTags": []
},
{
"event": "ionImgWillLoad",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the img src has been set",
"docsTags": []
}
],
"listeners": [],
"styles": [],
"slots": [],
"parts": [
{
"name": "image",
"docs": "The inner `img` element."
}
],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/infinite-scroll/infinite-scroll.tsx",
"encapsulation": "none",
"tag": "ion-infinite-scroll",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the infinite scroll will be hidden and scroll event listeners\nwill be removed.\n\nSet this to true to disable the infinite scroll from actively\ntrying to receive new data while scrolling. This is useful\nwhen it is known that there is no more data that can be added, and\nthe infinite scroll is no longer needed.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "position",
"type": "\"bottom\" | \"top\"",
"complexType": {
"original": "'top' | 'bottom'",
"resolved": "\"bottom\" | \"top\"",
"references": {}
},
"mutable": false,
"attr": "position",
"reflectToAttr": false,
"docs": "The position of the infinite scroll element.\nThe value can be either `top` or `bottom`.",
"docsTags": [],
"default": "'bottom'",
"values": [
{
"value": "bottom",
"type": "string"
},
{
"value": "top",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "threshold",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "threshold",
"reflectToAttr": false,
"docs": "The threshold distance from the bottom\nof the content to call the `infinite` output event when scrolled.\nThe threshold value can be either a percent, or\nin pixels. For example, use the value of `10%` for the `infinite`\noutput event to get called when the user has scrolled 10%\nfrom the bottom of the page. Use the value `100px` when the\nscroll is within 100 pixels from the bottom of the page.",
"docsTags": [],
"default": "'15%'",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [
{
"name": "complete",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "/Users/alice/Code/ionic-framework/core::Promise"
}
},
"return": "Promise<void>"
},
"signature": "complete() => Promise<void>",
"parameters": [],
"docs": "Call `complete()` within the `ionInfinite` output event handler when\nyour async operation has completed. For example, the `loading`\nstate is while the app is performing an asynchronous operation,\nsuch as receiving more data from an AJAX request to add more items\nto a data list. Once the data has been received and UI updated, you\nthen call this method to signify that the loading has completed.\nThis method will change the infinite scroll's state from `loading`\nto `enabled`.",
"docsTags": []
}
],
"events": [
{
"event": "ionInfinite",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the scroll reaches\nthe threshold distance. From within your infinite handler,\nyou must call the infinite scroll's `complete()` method when\nyour async operation has completed.",
"docsTags": []
}
],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/infinite-scroll-content/infinite-scroll-content.tsx",
"encapsulation": "none",
"tag": "ion-infinite-scroll-content",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "loadingSpinner",
"type": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
"complexType": {
"original": "SpinnerTypes | null",
"resolved": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
"references": {
"SpinnerTypes": {
"location": "import",
"path": "../spinner/spinner-configs",
"id": "/Users/alice/Code/ionic-framework/core::SpinnerTypes"
}
}
},
"mutable": true,
"attr": "loading-spinner",
"reflectToAttr": false,
"docs": "An animated SVG spinner that shows while loading.",
"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": "loadingText",
"type": "IonicSafeString | string | undefined",
"complexType": {
"original": "string | IonicSafeString",
"resolved": "IonicSafeString | string | undefined",
"references": {
"IonicSafeString": {
"location": "import",
"path": "../../utils/sanitization",
"id": "src/utils/sanitization/index.ts::IonicSafeString"
}
}
},
"mutable": false,
"attr": "loading-text",
"reflectToAttr": false,
"docs": "Optional text to display while loading.\n`loadingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
"docsTags": [],
"values": [
{
"type": "IonicSafeString"
},
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [
"ion-spinner"
],
"dependencyGraph": {
"ion-infinite-scroll-content": [
"ion-spinner"
]
}
},
{
"filePath": "./src/components/input/input.tsx",
"encapsulation": "scoped",
"tag": "ion-input",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "accept",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "accept",
"reflectToAttr": false,
"docs": "This attribute is ignored.",
"docsTags": [
{
"name": "deprecated"
}
],
"deprecation": "",
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "autocapitalize",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "autocapitalize",
"reflectToAttr": false,
"docs": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.",
"docsTags": [],
"default": "'off'",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "autocomplete",
"type": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
"complexType": {
"original": "AutocompleteTypes",
"resolved": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
"references": {
"AutocompleteTypes": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::AutocompleteTypes"
}
}
},
"mutable": false,
"attr": "autocomplete",
"reflectToAttr": false,
"docs": "Indicates whether the value of the control can be automatically completed by the browser.",
"docsTags": [],
"default": "'off'",
"values": [
{
"value": "name",
"type": "string"
},
{
"value": "email",
"type": "string"
},
{
"value": "tel",
"type": "string"
},
{
"value": "url",
"type": "string"
},
{
"value": "on",
"type": "string"
},
{
"value": "off",
"type": "string"
},
{
"value": "honorific-prefix",
"type": "string"
},
{
"value": "given-name",
"type": "string"
},
{
"value": "additional-name",
"type": "string"
},
{
"value": "family-name",
"type": "string"
},
{
"value": "honorific-suffix",
"type": "string"
},
{
"value": "nickname",
"type": "string"
},
{
"value": "username",
"type": "string"
},
{
"value": "new-password",
"type": "string"
},
{
"value": "current-password",
"type": "string"
},
{
"value": "one-time-code",
"type": "string"
},
{
"value": "organization-title",
"type": "string"
},
{
"value": "organization",
"type": "string"
},
{
"value": "street-address",
"type": "string"
},
{
"value": "address-line1",
"type": "string"
},
{
"value": "address-line2",
"type": "string"
},
{
"value": "address-line3",
"type": "string"
},
{
"value": "address-level4",
"type": "string"
},
{
"value": "address-level3",
"type": "string"
},
{
"value": "address-level2",
"type": "string"
},
{
"value": "address-level1",
"type": "string"
},
{
"value": "country",
"type": "string"
},
{
"value": "country-name",
"type": "string"
},
{
"value": "postal-code",
"type": "string"
},
{
"value": "cc-name",
"type": "string"
},
{
"value": "cc-given-name",
"type": "string"
},
{
"value": "cc-additional-name",
"type": "string"
},
{
"value": "cc-family-name",
"type": "string"
},
{
"value": "cc-number",
"type": "string"
},
{
"value": "cc-exp",
"type": "string"
},
{
"value": "cc-exp-month",
"type": "string"
},
{
"value": "cc-exp-year",
"type": "string"
},
{
"value": "cc-csc",
"type": "string"
},
{
"value": "cc-type",
"type": "string"
},
{
"value": "transaction-currency",
"type": "string"
},
{
"value": "transaction-amount",
"type": "string"
},
{
"value": "language",
"type": "string"
},
{
"value": "bday",
"type": "string"
},
{
"value": "bday-day",
"type": "string"
},
{
"value": "bday-month",
"type": "string"
},
{
"value": "bday-year",
"type": "string"
},
{
"value": "sex",
"type": "string"
},
{
"value": "tel-country-code",
"type": "string"
},
{
"value": "tel-national",
"type": "string"
},
{
"value": "tel-area-code",
"type": "string"
},
{
"value": "tel-local",
"type": "string"
},
{
"value": "tel-extension",
"type": "string"
},
{
"value": "impp",
"type": "string"
},
{
"value": "photo",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "autocorrect",
"type": "\"off\" | \"on\"",
"complexType": {
"original": "'on' | 'off'",
"resolved": "\"off\" | \"on\"",
"references": {}
},
"mutable": false,
"attr": "autocorrect",
"reflectToAttr": false,
"docs": "Whether auto correction should be enabled when the user is entering/editing the text value.",
"docsTags": [],
"default": "'off'",
"values": [
{
"value": "off",
"type": "string"
},
{
"value": "on",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "autofocus",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "autofocus",
"reflectToAttr": false,
"docs": "This Boolean attribute lets you specify that a form control should have input focus when the page loads.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "clearInput",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "clear-input",
"reflectToAttr": false,
"docs": "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "clearOnEdit",
"type": "boolean | undefined",
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"mutable": false,
"attr": "clear-on-edit",
"reflectToAttr": false,
"docs": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.",
"docsTags": [],
"values": [
{
"type": "boolean"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "counter",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "counter",
"reflectToAttr": false,
"docs": "If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "counterFormatter",
"type": "((inputLength: number, maxLength: number) => string) | undefined",
"complexType": {
"original": "(inputLength: number, maxLength: number) => string",
"resolved": "((inputLength: number, maxLength: number) => string) | undefined",
"references": {}
},
"mutable": false,
"reflectToAttr": false,
"docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
"docsTags": [],
"values": [
{
"type": "((inputLength: number, maxLength: number) => string)"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "debounce",
"type": "number | undefined",
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"mutable": false,
"attr": "debounce",
"reflectToAttr": false,
"docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the user cannot interact with the input.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "enterkeyhint",
"type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
"complexType": {
"original": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
"resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
"references": {}
},
"mutable": false,
"attr": "enterkeyhint",
"reflectToAttr": false,
"docs": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
"docsTags": [],
"values": [
{
"value": "done",
"type": "string"
},
{
"value": "enter",
"type": "string"
},
{
"value": "go",
"type": "string"
},
{
"value": "next",
"type": "string"
},
{
"value": "previous",
"type": "string"
},
{
"value": "search",
"type": "string"
},
{
"value": "send",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "errorText",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "error-text",
"reflectToAttr": false,
"docs": "Text that is placed under the input and displayed when an error is detected.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "fill",
"type": "\"outline\" | \"solid\" | undefined",
"complexType": {
"original": "'outline' | 'solid'",
"resolved": "\"outline\" | \"solid\" | undefined",
"references": {}
},
"mutable": false,
"attr": "fill",
"reflectToAttr": false,
"docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
"docsTags": [],
"values": [
{
"value": "outline",
"type": "string"
},
{
"value": "solid",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "helperText",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "helper-text",
"reflectToAttr": false,
"docs": "Text that is placed under the input and displayed when no error is detected.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "inputmode",
"type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
"complexType": {
"original": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
"resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
"references": {}
},
"mutable": false,
"attr": "inputmode",
"reflectToAttr": false,
"docs": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
"docsTags": [],
"values": [
{
"value": "decimal",
"type": "string"
},
{
"value": "email",
"type": "string"
},
{
"value": "none",
"type": "string"
},
{
"value": "numeric",
"type": "string"
},
{
"value": "search",
"type": "string"
},
{
"value": "tel",
"type": "string"
},
{
"value": "text",
"type": "string"
},
{
"value": "url",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "label",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "label",
"reflectToAttr": false,
"docs": "The visible label associated with the input.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "labelPlacement",
"type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
"complexType": {
"original": "'start' | 'end' | 'floating' | 'stacked' | 'fixed'",
"resolved": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
"references": {}
},
"mutable": false,
"attr": "label-placement",
"reflectToAttr": false,
"docs": "Where to place the label relative to the input.\n`\"start\"`: The label will appear to the left of the input in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the input in LTR and to the left in RTL.\n`\"floating\"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input.\n`\"stacked\"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
"docsTags": [],
"default": "'start'",
"values": [
{
"value": "end",
"type": "string"
},
{
"value": "fixed",
"type": "string"
},
{
"value": "floating",
"type": "string"
},
{
"value": "stacked",
"type": "string"
},
{
"value": "start",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "legacy",
"type": "boolean | undefined",
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"mutable": false,
"attr": "legacy",
"reflectToAttr": false,
"docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
"docsTags": [],
"values": [
{
"type": "boolean"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "max",
"type": "number | string | undefined",
"complexType": {
"original": "string | number",
"resolved": "number | string | undefined",
"references": {}
},
"mutable": false,
"attr": "max",
"reflectToAttr": false,
"docs": "The maximum value, which must not be less than its minimum (min attribute) value.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "maxlength",
"type": "number | undefined",
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"mutable": false,
"attr": "maxlength",
"reflectToAttr": false,
"docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "min",
"type": "number | string | undefined",
"complexType": {
"original": "string | number",
"resolved": "number | string | undefined",
"references": {}
},
"mutable": false,
"attr": "min",
"reflectToAttr": false,
"docs": "The minimum value, which must not be greater than its maximum (max attribute) value.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "minlength",
"type": "number | undefined",
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"mutable": false,
"attr": "minlength",
"reflectToAttr": false,
"docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"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": "multiple",
"type": "boolean | undefined",
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"mutable": false,
"attr": "multiple",
"reflectToAttr": false,
"docs": "If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"`, otherwise it is ignored.",
"docsTags": [],
"values": [
{
"type": "boolean"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "name",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"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": "pattern",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "pattern",
"reflectToAttr": false,
"docs": "A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "placeholder",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "placeholder",
"reflectToAttr": false,
"docs": "Instructional text that shows before the input has a value.\nThis property applies only when the `type` property is set to `\"email\"`,\n`\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, or `\"url\"`, otherwise it is ignored.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "readonly",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "readonly",
"reflectToAttr": false,
"docs": "If `true`, the user cannot modify the value.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "required",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "required",
"reflectToAttr": false,
"docs": "If `true`, the user must fill in a value before submitting a form.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "shape",
"type": "\"round\" | undefined",
"complexType": {
"original": "'round'",
"resolved": "\"round\" | undefined",
"references": {}
},
"mutable": false,
"attr": "shape",
"reflectToAttr": false,
"docs": "The shape of the input. If \"round\" it will have an increased border radius.",
"docsTags": [],
"values": [
{
"value": "round",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "size",
"type": "number | undefined",
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"mutable": false,
"attr": "size",
"reflectToAttr": false,
"docs": "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "spellcheck",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "spellcheck",
"reflectToAttr": false,
"docs": "If `true`, the element will have its spelling and grammar checked.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "step",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "step",
"reflectToAttr": false,
"docs": "Works with the min and max attributes to limit the increments at which a value can be set.\nPossible values are: `\"any\"` or a positive floating point number.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "type",
"type": "\"date\" | \"datetime-local\" | \"email\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
"complexType": {
"original": "TextFieldTypes",
"resolved": "\"date\" | \"datetime-local\" | \"email\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
"references": {
"TextFieldTypes": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::TextFieldTypes"
}
}
},
"mutable": false,
"attr": "type",
"reflectToAttr": false,
"docs": "The type of control to display. The default type is text.",
"docsTags": [],
"default": "'text'",
"values": [
{
"value": "date",
"type": "string"
},
{
"value": "datetime-local",
"type": "string"
},
{
"value": "email",
"type": "string"
},
{
"value": "month",
"type": "string"
},
{
"value": "number",
"type": "string"
},
{
"value": "password",
"type": "string"
},
{
"value": "search",
"type": "string"
},
{
"value": "tel",
"type": "string"
},
{
"value": "text",
"type": "string"
},
{
"value": "time",
"type": "string"
},
{
"value": "url",
"type": "string"
},
{
"value": "week",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "value",
"type": "null | number | string | undefined",
"complexType": {
"original": "string | number | null",
"resolved": "null | number | string | undefined",
"references": {}
},
"mutable": true,
"attr": "value",
"reflectToAttr": false,
"docs": "The value of the input.",
"docsTags": [],
"default": "''",
"values": [
{
"type": "null"
},
{
"type": "number"
},
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
}
],
"methods": [
{
"name": "getInputElement",
"returns": {
"type": "Promise<HTMLInputElement>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<HTMLInputElement>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"HTMLInputElement": {
"location": "global",
"id": ""
}
},
"return": "Promise<HTMLInputElement>"
},
"signature": "getInputElement() => Promise<HTMLInputElement>",
"parameters": [],
"docs": "Returns the native `<input>` element used under the hood.",
"docsTags": []
},
{
"name": "setFocus",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "/Users/alice/Code/ionic-framework/core::Promise"
}
},
"return": "Promise<void>"
},
"signature": "setFocus() => Promise<void>",
"parameters": [],
"docs": "Sets focus on the native `input` in `ion-input`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.",
"docsTags": []
}
],
"events": [
{
"event": "ionBlur",
"detail": "FocusEvent",
"bubbles": true,
"complexType": {
"original": "FocusEvent",
"resolved": "FocusEvent",
"references": {
"FocusEvent": {
"location": "global",
"id": ""
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the input loses focus.",
"docsTags": []
},
{
"event": "ionChange",
"detail": "InputChangeEventDetail",
"bubbles": true,
"complexType": {
"original": "InputChangeEventDetail",
"resolved": "InputChangeEventDetail",
"references": {
"InputChangeEventDetail": {
"location": "import",
"path": "./input-interface",
"id": "src/components/input/input-interface.ts::InputChangeEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "The `ionChange` event is fired for `<ion-input>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nDepending on the way the users interacts with the element, the `ionChange`\nevent fires at a different moment:\n- When the user commits the change explicitly (e.g. by selecting a date\nfrom a date picker for `<ion-input type=\"date\">`, pressing the \"Enter\" key, etc.).\n- When the element loses focus after its value has changed: for elements\nwhere the user's interaction is typing.",
"docsTags": []
},
{
"event": "ionFocus",
"detail": "FocusEvent",
"bubbles": true,
"complexType": {
"original": "FocusEvent",
"resolved": "FocusEvent",
"references": {
"FocusEvent": {
"location": "global",
"id": ""
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the input has focus.",
"docsTags": []
},
{
"event": "ionInput",
"detail": "InputInputEventDetail",
"bubbles": true,
"complexType": {
"original": "InputInputEventDetail",
"resolved": "InputInputEventDetail",
"references": {
"InputInputEventDetail": {
"location": "import",
"path": "./input-interface",
"id": "src/components/input/input-interface.ts::InputInputEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "The `ionInput` event fires when the `value` of an `<ion-input>` element\nhas been changed.\n\nFor elements that accept text input (`type=text`, `type=tel`, etc.), the interface\nis [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\nthe interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\nthe input is cleared on edit, the type is `null`.",
"docsTags": []
}
],
"listeners": [],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the input"
},
{
"name": "--border-color",
"annotation": "prop",
"docs": "Color of the border below the input when using helper text, error text, or counter"
},
{
"name": "--border-radius",
"annotation": "prop",
"docs": "Radius of the input"
},
{
"name": "--border-style",
"annotation": "prop",
"docs": "Style of the border below the input when using helper text, error text, or counter"
},
{
"name": "--border-width",
"annotation": "prop",
"docs": "Width of the border below the input when using helper text, error text, or counter"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Color of the input text"
},
{
"name": "--highlight-color-focused",
"annotation": "prop",
"docs": "The color of the highlight on the input when focused"
},
{
"name": "--highlight-color-invalid",
"annotation": "prop",
"docs": "The color of the highlight on the input when invalid"
},
{
"name": "--highlight-color-valid",
"annotation": "prop",
"docs": "The color of the highlight on the input when valid"
},
{
"name": "--padding-bottom",
"annotation": "prop",
"docs": "Bottom padding of the input"
},
{
"name": "--padding-end",
"annotation": "prop",
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input"
},
{
"name": "--padding-start",
"annotation": "prop",
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input"
},
{
"name": "--padding-top",
"annotation": "prop",
"docs": "Top padding of the input"
},
{
"name": "--placeholder-color",
"annotation": "prop",
"docs": "Color of the input placeholder text"
},
{
"name": "--placeholder-font-style",
"annotation": "prop",
"docs": "Font style of the input placeholder text"
},
{
"name": "--placeholder-font-weight",
"annotation": "prop",
"docs": "Font weight of the input placeholder text"
},
{
"name": "--placeholder-opacity",
"annotation": "prop",
"docs": "Opacity of the input placeholder text"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [
"ion-icon"
],
"dependencyGraph": {
"ion-input": [
"ion-icon"
]
}
},
{
"filePath": "./src/components/item/item.tsx",
"encapsulation": "shadow",
"tag": "ion-item",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "slot",
"text": "- Content is placed between the named slots if provided without a slot."
},
{
"name": "slot",
"text": "start - Content is placed to the left of the item text in LTR, and to the right in RTL."
},
{
"name": "slot",
"text": "end - Content is placed to the right of the item text in LTR, and to the left in RTL."
},
{
"name": "slot",
"text": "helper - Content is placed under the item and displayed when no error is detected. **DEPRECATED** Use the \"helperText\" property on ion-input or ion-textarea instead."
},
{
"name": "slot",
"text": "error - Content is placed under the item and displayed when an error is detected. **DEPRECATED** Use the \"errorText\" property on ion-input or ion-textarea instead."
},
{
"name": "part",
"text": "native - The native HTML button, anchor or div element that wraps all child elements."
},
{
"name": "part",
"text": "detail-icon - The chevron icon for the item. Only applies when `detail=\"true\"`."
}
],
"usage": {},
"props": [
{
"name": "button",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "button",
"reflectToAttr": false,
"docs": "If `true`, a button tag will be rendered and the item will be tappable.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "counter",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "counter",
"reflectToAttr": false,
"docs": "If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.",
"docsTags": [
{
"name": "deprecated",
"text": "Use the `counter` property on `ion-input` or `ion-textarea` instead."
}
],
"default": "false",
"deprecation": "Use the `counter` property on `ion-input` or `ion-textarea` instead.",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "counterFormatter",
"type": "((inputLength: number, maxLength: number) => string) | undefined",
"complexType": {
"original": "CounterFormatter",
"resolved": "((inputLength: number, maxLength: number) => string) | undefined",
"references": {
"CounterFormatter": {
"location": "import",
"path": "./item-interface",
"id": "src/components/item/item-interface.ts::CounterFormatter"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
"docsTags": [
{
"name": "deprecated",
"text": "Use the `counterFormatter` property on `ion-input` or `ion-textarea` instead."
}
],
"deprecation": "Use the `counterFormatter` property on `ion-input` or `ion-textarea` instead.",
"values": [
{
"type": "((inputLength: number, maxLength: number) => string)"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "detail",
"type": "boolean | undefined",
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"mutable": false,
"attr": "detail",
"reflectToAttr": false,
"docs": "If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode`\nis `ios` and an `href` or `button` property is present.",
"docsTags": [],
"values": [
{
"type": "boolean"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "detailIcon",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "detail-icon",
"reflectToAttr": false,
"docs": "The icon to use when `detail` is set to `true`.",
"docsTags": [],
"default": "chevronForward",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the user cannot interact with the item.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "download",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "download",
"reflectToAttr": false,
"docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "fill",
"type": "\"outline\" | \"solid\" | undefined",
"complexType": {
"original": "'outline' | 'solid'",
"resolved": "\"outline\" | \"solid\" | undefined",
"references": {}
},
"mutable": false,
"attr": "fill",
"reflectToAttr": false,
"docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
"docsTags": [],
"values": [
{
"value": "outline",
"type": "string"
},
{
"value": "solid",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "href",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "href",
"reflectToAttr": false,
"docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "lines",
"type": "\"full\" | \"inset\" | \"none\" | undefined",
"complexType": {
"original": "'full' | 'inset' | 'none'",
"resolved": "\"full\" | \"inset\" | \"none\" | undefined",
"references": {}
},
"mutable": false,
"attr": "lines",
"reflectToAttr": false,
"docs": "How the bottom border should be displayed on the item.",
"docsTags": [],
"values": [
{
"value": "full",
"type": "string"
},
{
"value": "inset",
"type": "string"
},
{
"value": "none",
"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": "rel",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "rel",
"reflectToAttr": false,
"docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "routerAnimation",
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"complexType": {
"original": "AnimationBuilder | undefined",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
"docsTags": [],
"values": [
{
"type": "((baseEl: any, opts?: any) => Animation)"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "routerDirection",
"type": "\"back\" | \"forward\" | \"root\"",
"complexType": {
"original": "RouterDirection",
"resolved": "\"back\" | \"forward\" | \"root\"",
"references": {
"RouterDirection": {
"location": "import",
"path": "../router/utils/interface",
"id": "/Users/alice/Code/ionic-framework/core::RouterDirection"
}
}
},
"mutable": false,
"attr": "router-direction",
"reflectToAttr": false,
"docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
"docsTags": [],
"default": "'forward'",
"values": [
{
"value": "back",
"type": "string"
},
{
"value": "forward",
"type": "string"
},
{
"value": "root",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "shape",
"type": "\"round\" | undefined",
"complexType": {
"original": "'round'",
"resolved": "\"round\" | undefined",
"references": {}
},
"mutable": false,
"attr": "shape",
"reflectToAttr": false,
"docs": "The shape of the item. If \"round\" it will have increased\nborder radius.",
"docsTags": [],
"values": [
{
"value": "round",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "target",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "target",
"reflectToAttr": false,
"docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "type",
"type": "\"button\" | \"reset\" | \"submit\"",
"complexType": {
"original": "'submit' | 'reset' | 'button'",
"resolved": "\"button\" | \"reset\" | \"submit\"",
"references": {}
},
"mutable": false,
"attr": "type",
"reflectToAttr": false,
"docs": "The type of the button. Only used when an `onclick` or `button` property is present.",
"docsTags": [],
"default": "'button'",
"values": [
{
"value": "button",
"type": "string"
},
{
"value": "reset",
"type": "string"
},
{
"value": "submit",
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [
{
"event": "ionInput",
"capture": false,
"passive": false
},
{
"event": "ionColor",
"capture": false,
"passive": false
},
{
"event": "ionStyle",
"capture": false,
"passive": false
}
],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the item"
},
{
"name": "--background-activated",
"annotation": "prop",
"docs": "Background of the item when pressed. Note: setting this will interfere with the Material Design ripple."
},
{
"name": "--background-activated-opacity",
"annotation": "prop",
"docs": "Opacity of the item background when pressed"
},
{
"name": "--background-focused",
"annotation": "prop",
"docs": "Background of the item when focused with the tab key"
},
{
"name": "--background-focused-opacity",
"annotation": "prop",
"docs": "Opacity of the item background when focused with the tab key"
},
{
"name": "--background-hover",
"annotation": "prop",
"docs": "Background of the item on hover"
},
{
"name": "--background-hover-opacity",
"annotation": "prop",
"docs": "Opacity of the background of the item on hover"
},
{
"name": "--border-color",
"annotation": "prop",
"docs": "Color of the item border"
},
{
"name": "--border-radius",
"annotation": "prop",
"docs": "Radius of the item border"
},
{
"name": "--border-style",
"annotation": "prop",
"docs": "Style of the item border"
},
{
"name": "--border-width",
"annotation": "prop",
"docs": "Width of the item border"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Color of the item"
},
{
"name": "--color-activated",
"annotation": "prop",
"docs": "Color of the item when pressed"
},
{
"name": "--color-focused",
"annotation": "prop",
"docs": "Color of the item when focused with the tab key"
},
{
"name": "--color-hover",
"annotation": "prop",
"docs": "Color of the item on hover"
},
{
"name": "--detail-icon-color",
"annotation": "prop",
"docs": "Color of the item detail icon"
},
{
"name": "--detail-icon-font-size",
"annotation": "prop",
"docs": "Font size of the item detail icon"
},
{
"name": "--detail-icon-opacity",
"annotation": "prop",
"docs": "Opacity of the item detail icon"
},
{
"name": "--highlight-color-focused",
"annotation": "prop",
"docs": "The color of the highlight on the item when focused"
},
{
"name": "--highlight-color-invalid",
"annotation": "prop",
"docs": "The color of the highlight on the item when invalid"
},
{
"name": "--highlight-color-valid",
"annotation": "prop",
"docs": "The color of the highlight on the item when valid"
},
{
"name": "--highlight-height",
"annotation": "prop",
"docs": "The height of the highlight on the item"
},
{
"name": "--inner-border-width",
"annotation": "prop",
"docs": "Width of the item inner border"
},
{
"name": "--inner-box-shadow",
"annotation": "prop",
"docs": "Box shadow of the item inner"
},
{
"name": "--inner-padding-bottom",
"annotation": "prop",
"docs": "Bottom padding of the item inner"
},
{
"name": "--inner-padding-end",
"annotation": "prop",
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner"
},
{
"name": "--inner-padding-start",
"annotation": "prop",
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner"
},
{
"name": "--inner-padding-top",
"annotation": "prop",
"docs": "Top padding of the item inner"
},
{
"name": "--min-height",
"annotation": "prop",
"docs": "Minimum height of the item"
},
{
"name": "--padding-bottom",
"annotation": "prop",
"docs": "Bottom padding of the item"
},
{
"name": "--padding-end",
"annotation": "prop",
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item"
},
{
"name": "--padding-start",
"annotation": "prop",
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item"
},
{
"name": "--padding-top",
"annotation": "prop",
"docs": "Top padding of the item"
},
{
"name": "--ripple-color",
"annotation": "prop",
"docs": "Color of the item ripple effect"
},
{
"name": "--transition",
"annotation": "prop",
"docs": "Transition of the item"
}
],
"slots": [
{
"name": "",
"docs": "Content is placed between the named slots if provided without a slot."
},
{
"name": "end",
"docs": "Content is placed to the right of the item text in LTR, and to the left in RTL."
},
{
"name": "error",
"docs": "Content is placed under the item and displayed when an error is detected. **DEPRECATED** Use the \"errorText\" property on ion-input or ion-textarea instead."
},
{
"name": "helper",
"docs": "Content is placed under the item and displayed when no error is detected. **DEPRECATED** Use the \"helperText\" property on ion-input or ion-textarea instead."
},
{
"name": "start",
"docs": "Content is placed to the left of the item text in LTR, and to the right in RTL."
}
],
"parts": [
{
"name": "detail-icon",
"docs": "The chevron icon for the item. Only applies when `detail=\"true\"`."
},
{
"name": "native",
"docs": "The native HTML button, anchor or div element that wraps all child elements."
}
],
"dependents": [
"ion-datetime",
"ion-select-popover"
],
"dependencies": [
"ion-icon",
"ion-ripple-effect",
"ion-note"
],
"dependencyGraph": {
"ion-item": [
"ion-icon",
"ion-ripple-effect",
"ion-note"
],
"ion-datetime": [
"ion-item"
],
"ion-select-popover": [
"ion-item"
]
}
},
{
"filePath": "./src/components/item-divider/item-divider.tsx",
"encapsulation": "shadow",
"tag": "ion-item-divider",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "slot",
"text": "- Content is placed between the named slots if provided without a slot."
},
{
"name": "slot",
"text": "start - Content is placed to the left of the divider text in LTR, and to the right in RTL."
},
{
"name": "slot",
"text": "end - Content is placed to the right of the divider text in LTR, and to the left in RTL."
}
],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"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": "sticky",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "sticky",
"reflectToAttr": false,
"docs": "When it's set to `true`, the item-divider will stay visible when it reaches the top\nof the viewport until the next `ion-item-divider` replaces it.\n\nThis feature relies in `position:sticky`:\nhttps://caniuse.com/#feat=css-sticky",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the item divider"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Color of the item divider"
},
{
"name": "--inner-padding-bottom",
"annotation": "prop",
"docs": "Bottom inner padding of the item divider"
},
{
"name": "--inner-padding-end",
"annotation": "prop",
"docs": "End inner padding of the item divider"
},
{
"name": "--inner-padding-start",
"annotation": "prop",
"docs": "Start inner padding of the item divider"
},
{
"name": "--inner-padding-top",
"annotation": "prop",
"docs": "Top inner padding of the item divider"
},
{
"name": "--padding-bottom",
"annotation": "prop",
"docs": "Bottom padding of the item divider"
},
{
"name": "--padding-end",
"annotation": "prop",
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider"
},
{
"name": "--padding-start",
"annotation": "prop",
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider"
},
{
"name": "--padding-top",
"annotation": "prop",
"docs": "Top padding of the item divider"
}
],
"slots": [
{
"name": "",
"docs": "Content is placed between the named slots if provided without a slot."
},
{
"name": "end",
"docs": "Content is placed to the right of the divider text in LTR, and to the left in RTL."
},
{
"name": "start",
"docs": "Content is placed to the left of the divider text in LTR, and to the right in RTL."
}
],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/item-group/item-group.tsx",
"encapsulation": "none",
"tag": "ion-item-group",
"docs": "",
"docsTags": [],
"usage": {},
"props": [],
"methods": [],
"events": [],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/item-option/item-option.tsx",
"encapsulation": "shadow",
"tag": "ion-item-option",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "slot",
"text": "- Content is placed between the named slots if provided without a slot."
},
{
"name": "slot",
"text": "start - Content is placed to the left of the option text in LTR, and to the right in RTL."
},
{
"name": "slot",
"text": "top - Content is placed above the option text."
},
{
"name": "slot",
"text": "icon-only - Should be used on an icon in an option that has no text."
},
{
"name": "slot",
"text": "bottom - Content is placed below the option text."
},
{
"name": "slot",
"text": "end - Content is placed to the right of the option text in LTR, and to the left in RTL."
},
{
"name": "part",
"text": "native - The native HTML button or anchor element that wraps all child elements."
}
],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the user cannot interact with the item option.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "download",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "download",
"reflectToAttr": false,
"docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "expandable",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "expandable",
"reflectToAttr": false,
"docs": "If `true`, the option will expand to take up the available width and cover any other options.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "href",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "href",
"reflectToAttr": false,
"docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"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": "rel",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "rel",
"reflectToAttr": false,
"docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "target",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "target",
"reflectToAttr": false,
"docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "type",
"type": "\"button\" | \"reset\" | \"submit\"",
"complexType": {
"original": "'submit' | 'reset' | 'button'",
"resolved": "\"button\" | \"reset\" | \"submit\"",
"references": {}
},
"mutable": false,
"attr": "type",
"reflectToAttr": false,
"docs": "The type of the button.",
"docsTags": [],
"default": "'button'",
"values": [
{
"value": "button",
"type": "string"
},
{
"value": "reset",
"type": "string"
},
{
"value": "submit",
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the item option"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Color of the item option"
}
],
"slots": [
{
"name": "",
"docs": "Content is placed between the named slots if provided without a slot."
},
{
"name": "bottom",
"docs": "Content is placed below the option text."
},
{
"name": "end",
"docs": "Content is placed to the right of the option text in LTR, and to the left in RTL."
},
{
"name": "icon-only",
"docs": "Should be used on an icon in an option that has no text."
},
{
"name": "start",
"docs": "Content is placed to the left of the option text in LTR, and to the right in RTL."
},
{
"name": "top",
"docs": "Content is placed above the option text."
}
],
"parts": [
{
"name": "native",
"docs": "The native HTML button or anchor element that wraps all child elements."
}
],
"dependents": [],
"dependencies": [
"ion-ripple-effect"
],
"dependencyGraph": {
"ion-item-option": [
"ion-ripple-effect"
]
}
},
{
"filePath": "./src/components/item-options/item-options.tsx",
"encapsulation": "none",
"tag": "ion-item-options",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "side",
"type": "\"end\" | \"start\"",
"complexType": {
"original": "Side",
"resolved": "\"end\" | \"start\"",
"references": {
"Side": {
"location": "import",
"path": "../menu/menu-interface",
"id": "/Users/alice/Code/ionic-framework/core::Side"
}
}
},
"mutable": false,
"attr": "side",
"reflectToAttr": false,
"docs": "The side the option button should be on. Possible values: `\"start\"` and `\"end\"`. If you have multiple `ion-item-options`, a side must be provided for each.",
"docsTags": [],
"default": "'end'",
"values": [
{
"value": "end",
"type": "string"
},
{
"value": "start",
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [
{
"event": "ionSwipe",
"detail": "any",
"bubbles": true,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the item has been fully swiped.",
"docsTags": []
}
],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/item-sliding/item-sliding.tsx",
"encapsulation": "none",
"tag": "ion-item-sliding",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the user cannot interact with the sliding item.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
}
],
"methods": [
{
"name": "close",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "/Users/alice/Code/ionic-framework/core::Promise"
}
},
"return": "Promise<void>"
},
"signature": "close() => Promise<void>",
"parameters": [],
"docs": "Close the sliding item. Items can also be closed from the [List](./list).",
"docsTags": []
},
{
"name": "closeOpened",
"returns": {
"type": "Promise<boolean>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<boolean>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<boolean>"
},
"signature": "closeOpened() => Promise<boolean>",
"parameters": [],
"docs": "Close all of the sliding items in the list. Items can also be closed from the [List](./list).",
"docsTags": []
},
{
"name": "getOpenAmount",
"returns": {
"type": "Promise<number>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<number>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<number>"
},
"signature": "getOpenAmount() => Promise<number>",
"parameters": [],
"docs": "Get the amount the item is open in pixels.",
"docsTags": []
},
{
"name": "getSlidingRatio",
"returns": {
"type": "Promise<number>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<number>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<number>"
},
"signature": "getSlidingRatio() => Promise<number>",
"parameters": [],
"docs": "Get the ratio of the open amount of the item compared to the width of the options.\nIf the number returned is positive, then the options on the right side are open.\nIf the number returned is negative, then the options on the left side are open.\nIf the absolute value of the number is greater than 1, the item is open more than\nthe width of the options.",
"docsTags": []
},
{
"name": "open",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "(side: Side | undefined) => Promise<void>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item."
}
],
"text": "The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item."
}
],
"references": {
"Promise": {
"location": "global",
"id": "/Users/alice/Code/ionic-framework/core::Promise"
},
"Side": {
"location": "import",
"path": "../menu/menu-interface",
"id": "/Users/alice/Code/ionic-framework/core::Side"
}
},
"return": "Promise<void>"
},
"signature": "open(side: Side | undefined) => Promise<void>",
"parameters": [],
"docs": "Open the sliding item.",
"docsTags": [
{
"name": "param",
"text": "side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item."
}
]
}
],
"events": [
{
"event": "ionDrag",
"detail": "any",
"bubbles": true,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the sliding position changes.",
"docsTags": []
}
],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/label/label.tsx",
"encapsulation": "scoped",
"tag": "ion-label",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"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": "position",
"type": "\"fixed\" | \"floating\" | \"stacked\" | undefined",
"complexType": {
"original": "'fixed' | 'stacked' | 'floating'",
"resolved": "\"fixed\" | \"floating\" | \"stacked\" | undefined",
"references": {}
},
"mutable": false,
"attr": "position",
"reflectToAttr": false,
"docs": "The position determines where and how the label behaves inside an item.",
"docsTags": [],
"values": [
{
"value": "fixed",
"type": "string"
},
{
"value": "floating",
"type": "string"
},
{
"value": "stacked",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [
{
"name": "--color",
"annotation": "prop",
"docs": "Color of the label. This property is only available when using `ion-label` inside of an `ion-item`."
}
],
"slots": [],
"parts": [],
"dependents": [
"ion-datetime",
"ion-select-popover"
],
"dependencies": [],
"dependencyGraph": {
"ion-datetime": [
"ion-label"
],
"ion-select-popover": [
"ion-label"
]
}
},
{
"filePath": "./src/components/list/list.tsx",
"encapsulation": "none",
"tag": "ion-list",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "inset",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "inset",
"reflectToAttr": false,
"docs": "If `true`, the list will have margin around it and rounded corners.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "lines",
"type": "\"full\" | \"inset\" | \"none\" | undefined",
"complexType": {
"original": "'full' | 'inset' | 'none'",
"resolved": "\"full\" | \"inset\" | \"none\" | undefined",
"references": {}
},
"mutable": false,
"attr": "lines",
"reflectToAttr": false,
"docs": "How the bottom border should be displayed on all items.",
"docsTags": [],
"values": [
{
"value": "full",
"type": "string"
},
{
"value": "inset",
"type": "string"
},
{
"value": "none",
"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": [
{
"name": "closeSlidingItems",
"returns": {
"type": "Promise<boolean>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<boolean>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<boolean>"
},
"signature": "closeSlidingItems() => Promise<boolean>",
"parameters": [],
"docs": "If `ion-item-sliding` are used inside the list, this method closes\nany open sliding item.\n\nReturns `true` if an actual `ion-item-sliding` is closed.",
"docsTags": []
}
],
"events": [],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [
"ion-select-popover"
],
"dependencies": [],
"dependencyGraph": {
"ion-select-popover": [
"ion-list"
]
}
},
{
"filePath": "./src/components/list-header/list-header.tsx",
"encapsulation": "shadow",
"tag": "ion-list-header",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "lines",
"type": "\"full\" | \"inset\" | \"none\" | undefined",
"complexType": {
"original": "'full' | 'inset' | 'none'",
"resolved": "\"full\" | \"inset\" | \"none\" | undefined",
"references": {}
},
"mutable": false,
"attr": "lines",
"reflectToAttr": false,
"docs": "How the bottom border should be displayed on the list header.",
"docsTags": [],
"values": [
{
"value": "full",
"type": "string"
},
{
"value": "inset",
"type": "string"
},
{
"value": "none",
"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": "--background",
"annotation": "prop",
"docs": "Background of the list header"
},
{
"name": "--border-color",
"annotation": "prop",
"docs": "Color of the list header border"
},
{
"name": "--border-style",
"annotation": "prop",
"docs": "Style of the list header border"
},
{
"name": "--border-width",
"annotation": "prop",
"docs": "Width of the list header border"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Color of the list header text"
},
{
"name": "--inner-border-width",
"annotation": "prop",
"docs": "Width of the inner list header border"
}
],
"slots": [],
"parts": [],
"dependents": [
"ion-select-popover"
],
"dependencies": [],
"dependencyGraph": {
"ion-select-popover": [
"ion-list-header"
]
}
},
{
"filePath": "./src/components/loading/loading.tsx",
"encapsulation": "scoped",
"tag": "ion-loading",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "animated",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "animated",
"reflectToAttr": false,
"docs": "If `true`, the loading indicator will animate.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "backdropDismiss",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "backdrop-dismiss",
"reflectToAttr": false,
"docs": "If `true`, the loading indicator will be dismissed when the backdrop is clicked.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "cssClass",
"type": "string | string[] | undefined",
"complexType": {
"original": "string | string[]",
"resolved": "string | string[] | undefined",
"references": {}
},
"mutable": false,
"attr": "css-class",
"reflectToAttr": false,
"docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "string[]"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "duration",
"type": "number",
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"mutable": false,
"attr": "duration",
"reflectToAttr": false,
"docs": "Number of milliseconds to wait before dismissing the loading indicator.",
"docsTags": [],
"default": "0",
"values": [
{
"type": "number"
}
],
"optional": false,
"required": false
},
{
"name": "enterAnimation",
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"complexType": {
"original": "AnimationBuilder",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Animation to use when the loading indicator is presented.",
"docsTags": [],
"values": [
{
"type": "((baseEl: any, opts?: any) => Animation)"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "htmlAttributes",
"type": "undefined | { [key: string]: any; }",
"complexType": {
"original": "{ [key: string]: any }",
"resolved": "undefined | { [key: string]: any; }",
"references": {}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Additional attributes to pass to the loader.",
"docsTags": [],
"values": [
{
"type": "undefined"
},
{
"type": "{ [key: string]: any; }"
}
],
"optional": true,
"required": false
},
{
"name": "isOpen",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "is-open",
"reflectToAttr": false,
"docs": "If `true`, the loading indicator will open. If `false`, the loading indicator will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the loadingController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe loading indicator dismisses. You will need to do that in your code.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "keyboardClose",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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",
"complexType": {
"original": "AnimationBuilder",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Animation to use when the loading indicator is dismissed.",
"docsTags": [],
"values": [
{
"type": "((baseEl: any, opts?: any) => Animation)"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "message",
"type": "IonicSafeString | string | undefined",
"complexType": {
"original": "string | IonicSafeString",
"resolved": "IonicSafeString | string | undefined",
"references": {
"IonicSafeString": {
"location": "import",
"path": "../../utils/sanitization",
"id": "src/utils/sanitization/index.ts::IonicSafeString"
}
}
},
"mutable": false,
"attr": "message",
"reflectToAttr": false,
"docs": "Optional text content to display in the loading indicator.\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
"docsTags": [],
"values": [
{
"type": "IonicSafeString"
},
{
"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": "showBackdrop",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "show-backdrop",
"reflectToAttr": false,
"docs": "If `true`, a backdrop will be displayed behind the loading indicator.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "spinner",
"type": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
"complexType": {
"original": "SpinnerTypes | null",
"resolved": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
"references": {
"SpinnerTypes": {
"location": "import",
"path": "../spinner/spinner-configs",
"id": "/Users/alice/Code/ionic-framework/core::SpinnerTypes"
}
}
},
"mutable": true,
"attr": "spinner",
"reflectToAttr": false,
"docs": "The name of the spinner to display.",
"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": "translucent",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "translucent",
"reflectToAttr": false,
"docs": "If `true`, the loading indicator 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",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "trigger",
"reflectToAttr": false,
"docs": "An ID corresponding to the trigger element that\ncauses the loading indicator to open when clicked.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
}
],
"methods": [
{
"name": "dismiss",
"returns": {
"type": "Promise<boolean>",
"docs": ""
},
"complexType": {
"signature": "(data?: any, role?: string) => Promise<boolean>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "data Any data to emit in the dismiss events."
}
],
"text": "Any data to emit in the dismiss events."
},
{
"tags": [
{
"name": "param",
"text": "role The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
}
],
"text": "The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<boolean>"
},
"signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
"parameters": [],
"docs": "Dismiss the loading 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 loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
}
]
},
{
"name": "onDidDismiss",
"returns": {
"type": "Promise<OverlayEventDetail<T>>",
"docs": ""
},
"complexType": {
"signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
},
"T": {
"location": "global",
"id": "src/components/loading/loading.tsx::T"
}
},
"return": "Promise<OverlayEventDetail<T>>"
},
"signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"docs": "Returns a promise that resolves when the loading did dismiss.",
"docsTags": []
},
{
"name": "onWillDismiss",
"returns": {
"type": "Promise<OverlayEventDetail<T>>",
"docs": ""
},
"complexType": {
"signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
},
"T": {
"location": "global",
"id": "src/components/loading/loading.tsx::T"
}
},
"return": "Promise<OverlayEventDetail<T>>"
},
"signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"docs": "Returns a promise that resolves when the loading will dismiss.",
"docsTags": []
},
{
"name": "present",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<void>"
},
"signature": "present() => Promise<void>",
"parameters": [],
"docs": "Present the loading overlay after it has been created.",
"docsTags": []
}
],
"events": [
{
"event": "didDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the loading indicator has dismissed.\nShorthand for ionLoadingDidDismiss.",
"docsTags": []
},
{
"event": "didPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the loading indicator has presented.\nShorthand for ionLoadingWillDismiss.",
"docsTags": []
},
{
"event": "ionLoadingDidDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the loading has dismissed.",
"docsTags": []
},
{
"event": "ionLoadingDidPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the loading has presented.",
"docsTags": []
},
{
"event": "ionLoadingWillDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the loading has dismissed.",
"docsTags": []
},
{
"event": "ionLoadingWillPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the loading has presented.",
"docsTags": []
},
{
"event": "willDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the loading indicator has dismissed.\nShorthand for ionLoadingWillDismiss.",
"docsTags": []
},
{
"event": "willPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the loading indicator has presented.\nShorthand for ionLoadingWillPresent.",
"docsTags": []
}
],
"listeners": [],
"styles": [
{
"name": "--backdrop-opacity",
"annotation": "prop",
"docs": "Opacity of the backdrop"
},
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the loading dialog"
},
{
"name": "--height",
"annotation": "prop",
"docs": "Height of the loading dialog"
},
{
"name": "--max-height",
"annotation": "prop",
"docs": "Maximum height of the loading dialog"
},
{
"name": "--max-width",
"annotation": "prop",
"docs": "Maximum width of the loading dialog"
},
{
"name": "--min-height",
"annotation": "prop",
"docs": "Minimum height of the loading dialog"
},
{
"name": "--min-width",
"annotation": "prop",
"docs": "Minimum width of the loading dialog"
},
{
"name": "--spinner-color",
"annotation": "prop",
"docs": "Color of the loading spinner"
},
{
"name": "--width",
"annotation": "prop",
"docs": "Width of the loading dialog"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [
"ion-backdrop",
"ion-spinner"
],
"dependencyGraph": {
"ion-loading": [
"ion-backdrop",
"ion-spinner"
]
}
},
{
"filePath": "./src/components/menu/menu.tsx",
"encapsulation": "shadow",
"tag": "ion-menu",
"docs": "",
"docsTags": [
{
"name": "part",
"text": "container - The container for the menu content."
},
{
"name": "part",
"text": "backdrop - The backdrop that appears over the main content when the menu is open."
}
],
"usage": {},
"props": [
{
"name": "contentId",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "content-id",
"reflectToAttr": true,
"docs": "The `id` of the main content. When using\na router this is typically `ion-router-outlet`.\nWhen not using a router, this is typically\nyour main view's `ion-content`. This is not the\nid of the `ion-content` inside of your `ion-menu`.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": true,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the menu is disabled.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "maxEdgeStart",
"type": "number",
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"mutable": false,
"attr": "max-edge-start",
"reflectToAttr": false,
"docs": "The edge threshold for dragging the menu open.\nIf a drag/swipe happens over this value, the menu is not triggered.",
"docsTags": [],
"default": "50",
"values": [
{
"type": "number"
}
],
"optional": false,
"required": false
},
{
"name": "menuId",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "menu-id",
"reflectToAttr": true,
"docs": "An id for the menu.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "side",
"type": "\"end\" | \"start\"",
"complexType": {
"original": "Side",
"resolved": "\"end\" | \"start\"",
"references": {
"Side": {
"location": "import",
"path": "./menu-interface",
"id": "/Users/alice/Code/ionic-framework/core::Side"
}
}
},
"mutable": false,
"attr": "side",
"reflectToAttr": true,
"docs": "Which side of the view the menu should be placed.",
"docsTags": [],
"default": "'start'",
"values": [
{
"value": "end",
"type": "string"
},
{
"value": "start",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "swipeGesture",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "swipe-gesture",
"reflectToAttr": false,
"docs": "If `true`, swiping the menu is enabled.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "type",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": true,
"attr": "type",
"reflectToAttr": false,
"docs": "The display type of the menu.\nAvailable options: `\"overlay\"`, `\"reveal\"`, `\"push\"`.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
}
],
"methods": [
{
"name": "close",
"returns": {
"type": "Promise<boolean>",
"docs": ""
},
"complexType": {
"signature": "(animated?: boolean) => Promise<boolean>",
"parameters": [
{
"tags": [],
"text": ""
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<boolean>"
},
"signature": "close(animated?: boolean) => Promise<boolean>",
"parameters": [],
"docs": "Closes the menu. If the menu is already closed or it can't be closed,\nit returns `false`.",
"docsTags": []
},
{
"name": "isActive",
"returns": {
"type": "Promise<boolean>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<boolean>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<boolean>"
},
"signature": "isActive() => Promise<boolean>",
"parameters": [],
"docs": "Returns `true` is the menu is active.\n\nA menu is active when it can be opened or closed, meaning it's enabled\nand it's not part of a `ion-split-pane`.",
"docsTags": []
},
{
"name": "isOpen",
"returns": {
"type": "Promise<boolean>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<boolean>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<boolean>"
},
"signature": "isOpen() => Promise<boolean>",
"parameters": [],
"docs": "Returns `true` is the menu is open.",
"docsTags": []
},
{
"name": "open",
"returns": {
"type": "Promise<boolean>",
"docs": ""
},
"complexType": {
"signature": "(animated?: boolean) => Promise<boolean>",
"parameters": [
{
"tags": [],
"text": ""
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<boolean>"
},
"signature": "open(animated?: boolean) => Promise<boolean>",
"parameters": [],
"docs": "Opens the menu. If the menu is already open or it can't be opened,\nit returns `false`.",
"docsTags": []
},
{
"name": "setOpen",
"returns": {
"type": "Promise<boolean>",
"docs": ""
},
"complexType": {
"signature": "(shouldOpen: boolean, animated?: boolean) => Promise<boolean>",
"parameters": [
{
"tags": [],
"text": ""
},
{
"tags": [],
"text": ""
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<boolean>"
},
"signature": "setOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean>",
"parameters": [],
"docs": "Opens or closes the button.\nIf the operation can't be completed successfully, it returns `false`.",
"docsTags": []
},
{
"name": "toggle",
"returns": {
"type": "Promise<boolean>",
"docs": ""
},
"complexType": {
"signature": "(animated?: boolean) => Promise<boolean>",
"parameters": [
{
"tags": [],
"text": ""
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<boolean>"
},
"signature": "toggle(animated?: boolean) => Promise<boolean>",
"parameters": [],
"docs": "Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.\nIf the operation can't be completed successfully, it returns `false`.",
"docsTags": []
}
],
"events": [
{
"event": "ionDidClose",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the menu is closed.",
"docsTags": []
},
{
"event": "ionDidOpen",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the menu is open.",
"docsTags": []
},
{
"event": "ionWillClose",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the menu is about to be closed.",
"docsTags": []
},
{
"event": "ionWillOpen",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the menu is about to be opened.",
"docsTags": []
}
],
"listeners": [
{
"event": "ionSplitPaneVisible",
"target": "body",
"capture": false,
"passive": false
},
{
"event": "click",
"capture": true,
"passive": false
},
{
"event": "keydown",
"capture": false,
"passive": false
}
],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the menu"
},
{
"name": "--height",
"annotation": "prop",
"docs": "Height of the menu"
},
{
"name": "--max-height",
"annotation": "prop",
"docs": "Maximum height of the menu"
},
{
"name": "--max-width",
"annotation": "prop",
"docs": "Maximum width of the menu"
},
{
"name": "--min-height",
"annotation": "prop",
"docs": "Minimum height of the menu"
},
{
"name": "--min-width",
"annotation": "prop",
"docs": "Minimum width of the menu"
},
{
"name": "--width",
"annotation": "prop",
"docs": "Width of the menu"
}
],
"slots": [],
"parts": [
{
"name": "backdrop",
"docs": "The backdrop that appears over the main content when the menu is open."
},
{
"name": "container",
"docs": "The container for the menu content."
}
],
"dependents": [],
"dependencies": [
"ion-backdrop"
],
"dependencyGraph": {
"ion-menu": [
"ion-backdrop"
]
}
},
{
"filePath": "./src/components/menu-button/menu-button.tsx",
"encapsulation": "shadow",
"tag": "ion-menu-button",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "part",
"text": "native - The native HTML button element that wraps all child elements."
},
{
"name": "part",
"text": "icon - The menu button icon (uses ion-icon)."
}
],
"usage": {},
"props": [
{
"name": "autoHide",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "auto-hide",
"reflectToAttr": false,
"docs": "Automatically hides the menu button when the corresponding menu is not active",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the user cannot interact with the menu button.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "menu",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "menu",
"reflectToAttr": false,
"docs": "Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle",
"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": "type",
"type": "\"button\" | \"reset\" | \"submit\"",
"complexType": {
"original": "'submit' | 'reset' | 'button'",
"resolved": "\"button\" | \"reset\" | \"submit\"",
"references": {}
},
"mutable": false,
"attr": "type",
"reflectToAttr": false,
"docs": "The type of the button.",
"docsTags": [],
"default": "'button'",
"values": [
{
"value": "button",
"type": "string"
},
{
"value": "reset",
"type": "string"
},
{
"value": "submit",
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [
{
"event": "ionMenuChange",
"target": "body",
"capture": false,
"passive": false
},
{
"event": "ionSplitPaneVisible",
"target": "body",
"capture": false,
"passive": false
}
],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the menu button"
},
{
"name": "--background-focused",
"annotation": "prop",
"docs": "Background of the menu button when focused with the tab key"
},
{
"name": "--background-focused-opacity",
"annotation": "prop",
"docs": "Opacity of the menu button background when focused with the tab key"
},
{
"name": "--background-hover",
"annotation": "prop",
"docs": "Background of the menu button on hover"
},
{
"name": "--background-hover-opacity",
"annotation": "prop",
"docs": "Opacity of the background on hover"
},
{
"name": "--border-radius",
"annotation": "prop",
"docs": "Border radius of the menu button"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Color of the menu button"
},
{
"name": "--color-focused",
"annotation": "prop",
"docs": "Color of the menu button when focused with the tab key"
},
{
"name": "--color-hover",
"annotation": "prop",
"docs": "Color of the menu button on hover"
},
{
"name": "--padding-bottom",
"annotation": "prop",
"docs": "Bottom padding of the button"
},
{
"name": "--padding-end",
"annotation": "prop",
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button"
},
{
"name": "--padding-start",
"annotation": "prop",
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button"
},
{
"name": "--padding-top",
"annotation": "prop",
"docs": "Top padding of the button"
}
],
"slots": [],
"parts": [
{
"name": "icon",
"docs": "The menu button icon (uses ion-icon)."
},
{
"name": "native",
"docs": "The native HTML button element that wraps all child elements."
}
],
"dependents": [],
"dependencies": [
"ion-icon",
"ion-ripple-effect"
],
"dependencyGraph": {
"ion-menu-button": [
"ion-icon",
"ion-ripple-effect"
]
}
},
{
"filePath": "./src/components/menu-toggle/menu-toggle.tsx",
"encapsulation": "shadow",
"tag": "ion-menu-toggle",
"docs": "",
"docsTags": [
{
"name": "slot",
"text": "- Content is placed inside the toggle to act as the click target."
}
],
"usage": {},
"props": [
{
"name": "autoHide",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "auto-hide",
"reflectToAttr": false,
"docs": "Automatically hides the content when the corresponding menu is not active.\n\nBy default, it's `true`. Change it to `false` in order to\nkeep `ion-menu-toggle` always visible regardless the state of the menu.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "menu",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "menu",
"reflectToAttr": false,
"docs": "Optional property that maps to a Menu's `menuId` prop.\nCan also be `start` or `end` for the menu side.\nThis is used to find the correct menu to toggle.\n\nIf this property is not used, `ion-menu-toggle` will toggle the\nfirst menu that is active.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [
{
"event": "ionMenuChange",
"target": "body",
"capture": false,
"passive": false
},
{
"event": "ionSplitPaneVisible",
"target": "body",
"capture": false,
"passive": false
}
],
"styles": [],
"slots": [
{
"name": "",
"docs": "Content is placed inside the toggle to act as the click target."
}
],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/modal/modal.tsx",
"encapsulation": "shadow",
"tag": "ion-modal",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "slot",
"text": "- Content is placed inside of the `.modal-content` element."
},
{
"name": "part",
"text": "backdrop - The `ion-backdrop` element."
},
{
"name": "part",
"text": "content - The wrapper element for the default slot."
},
{
"name": "part",
"text": "handle - The handle that is displayed at the top of the sheet modal when `handle=\"true\"`."
}
],
"usage": {},
"props": [
{
"name": "animated",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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",
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"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",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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",
"complexType": {
"original": "number[]",
"resolved": "number[] | undefined",
"references": {}
},
"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": "canDismiss",
"type": "((data?: any, role?: string | undefined) => Promise<boolean>) | boolean",
"complexType": {
"original": "boolean | ((data?: any, role?: string) => Promise<boolean>)",
"resolved": "((data?: any, role?: string | undefined) => Promise<boolean>) | boolean",
"references": {
"Promise": {
"location": "global",
"id": ""
}
}
},
"mutable": false,
"attr": "can-dismiss",
"reflectToAttr": false,
"docs": "Determines whether or not a modal can dismiss\nwhen calling the `dismiss` method.\n\nIf the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.\nIf the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "((data?: any, role?: string"
},
{
"type": "undefined) => Promise<boolean>)"
},
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "enterAnimation",
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"complexType": {
"original": "AnimationBuilder",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"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",
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"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": "handleBehavior",
"type": "\"cycle\" | \"none\" | undefined",
"complexType": {
"original": "ModalHandleBehavior",
"resolved": "\"cycle\" | \"none\" | undefined",
"references": {
"ModalHandleBehavior": {
"location": "import",
"path": "./modal-interface",
"id": "/Users/alice/Code/ionic-framework/core::ModalHandleBehavior"
}
}
},
"mutable": false,
"attr": "handle-behavior",
"reflectToAttr": false,
"docs": "The interaction behavior for the sheet modal when the handle is pressed.\n\nDefaults to `\"none\"`, which means the modal will not change size or position when the handle is pressed.\nSet to `\"cycle\"` to let the modal cycle between available breakpoints when pressed.\n\nHandle behavior is unavailable when the `handle` property is set to `false` or\nwhen the `breakpoints` property is not set (using a fullscreen or card modal).",
"docsTags": [],
"default": "'none'",
"values": [
{
"value": "cycle",
"type": "string"
},
{
"value": "none",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "htmlAttributes",
"type": "undefined | { [key: string]: any; }",
"complexType": {
"original": "{ [key: string]: any }",
"resolved": "undefined | { [key: string]: any; }",
"references": {}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Additional attributes to pass to the modal.",
"docsTags": [],
"values": [
{
"type": "undefined"
},
{
"type": "{ [key: string]: any; }"
}
],
"optional": true,
"required": false
},
{
"name": "initialBreakpoint",
"type": "number | undefined",
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"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",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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": "keepContentsMounted",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "keep-contents-mounted",
"reflectToAttr": false,
"docs": "If `true`, the component passed into `ion-modal` will\nautomatically be mounted when the modal is created. The\ncomponent will remain mounted even when the modal is dismissed.\nHowever, the component will be destroyed when the modal is\ndestroyed. This property is not reactive and should only be\nused when initially creating a modal.\n\nNote: This feature only applies to inline modals in JavaScript\nframeworks such as Angular, React, and Vue.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "keyboardClose",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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",
"complexType": {
"original": "AnimationBuilder",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"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",
"complexType": {
"original": "HTMLElement",
"resolved": "HTMLElement | undefined",
"references": {
"HTMLElement": {
"location": "global",
"id": ""
}
}
},
"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",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "show-backdrop",
"reflectToAttr": false,
"docs": "If `true`, a backdrop will be displayed behind the modal.\nThis property controls whether or not the backdrop\ndarkens the screen when the modal is presented.\nIt does not control whether or not the backdrop\nis active or present in the DOM.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "trigger",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"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<boolean>",
"docs": ""
},
"complexType": {
"signature": "(data?: any, role?: string) => Promise<boolean>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "data Any data to emit in the dismiss events."
}
],
"text": "Any data to emit in the dismiss events."
},
{
"tags": [
{
"name": "param",
"text": "role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'."
}
],
"text": "The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"ModalDismissOptions": {
"location": "global",
"id": "src/components/modal/modal.tsx::ModalDismissOptions"
}
},
"return": "Promise<boolean>"
},
"signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
"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": "getCurrentBreakpoint",
"returns": {
"type": "Promise<number | undefined>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<number | undefined>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<number | undefined>"
},
"signature": "getCurrentBreakpoint() => Promise<number | undefined>",
"parameters": [],
"docs": "Returns the current breakpoint of a sheet style modal",
"docsTags": []
},
{
"name": "onDidDismiss",
"returns": {
"type": "Promise<OverlayEventDetail<T>>",
"docs": ""
},
"complexType": {
"signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
},
"T": {
"location": "global",
"id": "src/components/modal/modal.tsx::T"
}
},
"return": "Promise<OverlayEventDetail<T>>"
},
"signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"docs": "Returns a promise that resolves when the modal did dismiss.",
"docsTags": []
},
{
"name": "onWillDismiss",
"returns": {
"type": "Promise<OverlayEventDetail<T>>",
"docs": ""
},
"complexType": {
"signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
},
"T": {
"location": "global",
"id": "src/components/modal/modal.tsx::T"
}
},
"return": "Promise<OverlayEventDetail<T>>"
},
"signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"docs": "Returns a promise that resolves when the modal will dismiss.",
"docsTags": []
},
{
"name": "present",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"ModalPresentOptions": {
"location": "global",
"id": "src/components/modal/modal.tsx::ModalPresentOptions"
}
},
"return": "Promise<void>"
},
"signature": "present() => Promise<void>",
"parameters": [],
"docs": "Present the modal overlay after it has been created.",
"docsTags": []
},
{
"name": "setCurrentBreakpoint",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "(breakpoint: number) => Promise<void>",
"parameters": [
{
"tags": [],
"text": ""
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<void>"
},
"signature": "setCurrentBreakpoint(breakpoint: number) => Promise<void>",
"parameters": [],
"docs": "Move a sheet style modal to a specific breakpoint. The breakpoint value must\nbe a value defined in your `breakpoints` array.",
"docsTags": []
}
],
"events": [
{
"event": "didDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the modal has dismissed.\nShorthand for ionModalDidDismiss.",
"docsTags": []
},
{
"event": "didPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the modal has presented.\nShorthand for ionModalDidPresent.",
"docsTags": []
},
{
"event": "ionBreakpointDidChange",
"detail": "ModalBreakpointChangeEventDetail",
"bubbles": true,
"complexType": {
"original": "ModalBreakpointChangeEventDetail",
"resolved": "ModalBreakpointChangeEventDetail",
"references": {
"ModalBreakpointChangeEventDetail": {
"location": "import",
"path": "./modal-interface",
"id": "src/components/modal/modal-interface.ts::ModalBreakpointChangeEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the modal breakpoint has changed.",
"docsTags": []
},
{
"event": "ionModalDidDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the modal has dismissed.",
"docsTags": []
},
{
"event": "ionModalDidPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the modal has presented.",
"docsTags": []
},
{
"event": "ionModalWillDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the modal has dismissed.",
"docsTags": []
},
{
"event": "ionModalWillPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the modal has presented.",
"docsTags": []
},
{
"event": "willDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the modal has dismissed.\nShorthand for ionModalWillDismiss.",
"docsTags": []
},
{
"event": "willPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"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",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "animated",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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",
"complexType": {
"original": "AnimationBuilder",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"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 `AnimationBuilder` functions.",
"docsTags": [],
"values": [
{
"type": "((baseEl: any, opts?: any) => Animation)"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "root",
"type": "Function | HTMLElement | ViewController | null | string | undefined",
"complexType": {
"original": "NavComponent",
"resolved": "Function | HTMLElement | ViewController | null | string | undefined",
"references": {
"NavComponent": {
"location": "import",
"path": "./nav-interface",
"id": "/Users/alice/Code/ionic-framework/core::NavComponent"
}
}
},
"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; }",
"complexType": {
"original": "ComponentProps",
"resolved": "undefined | { [key: string]: any; }",
"references": {
"ComponentProps": {
"location": "import",
"path": "../../interface",
"id": "src/interface.d.ts::ComponentProps"
}
}
},
"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",
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"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<boolean>",
"docs": ""
},
"complexType": {
"signature": "(view?: ViewController) => Promise<boolean>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "view The view to check."
}
],
"text": "The view to check."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"ViewController": {
"location": "import",
"path": "./view-controller",
"id": "src/components/nav/view-controller.ts::ViewController"
}
},
"return": "Promise<boolean>"
},
"signature": "canGoBack(view?: ViewController) => Promise<boolean>",
"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<ViewController | undefined>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<ViewController | undefined>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"ViewController": {
"location": "import",
"path": "./view-controller",
"id": "src/components/nav/view-controller.ts::ViewController"
}
},
"return": "Promise<ViewController | undefined>"
},
"signature": "getActive() => Promise<ViewController | undefined>",
"parameters": [],
"docs": "Get the active view.",
"docsTags": []
},
{
"name": "getByIndex",
"returns": {
"type": "Promise<ViewController | undefined>",
"docs": ""
},
"complexType": {
"signature": "(index: number) => Promise<ViewController | undefined>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "index The index of the view."
}
],
"text": "The index of the view."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"ViewController": {
"location": "import",
"path": "./view-controller",
"id": "src/components/nav/view-controller.ts::ViewController"
}
},
"return": "Promise<ViewController | undefined>"
},
"signature": "getByIndex(index: number) => Promise<ViewController | undefined>",
"parameters": [],
"docs": "Get the view at the specified index.",
"docsTags": [
{
"name": "param",
"text": "index The index of the view."
}
]
},
{
"name": "getPrevious",
"returns": {
"type": "Promise<ViewController | undefined>",
"docs": ""
},
"complexType": {
"signature": "(view?: ViewController) => Promise<ViewController | undefined>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "view The view to get."
}
],
"text": "The view to get."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"ViewController": {
"location": "import",
"path": "./view-controller",
"id": "src/components/nav/view-controller.ts::ViewController"
}
},
"return": "Promise<ViewController | undefined>"
},
"signature": "getPrevious(view?: ViewController) => Promise<ViewController | undefined>",
"parameters": [],
"docs": "Get the previous view.",
"docsTags": [
{
"name": "param",
"text": "view The view to get."
}
]
},
{
"name": "insert",
"returns": {
"type": "Promise<boolean>",
"docs": ""
},
"complexType": {
"signature": "<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "insertIndex The index to insert the component at in the stack."
}
],
"text": "The index to insert the component at in the stack."
},
{
"tags": [
{
"name": "param",
"text": "component The component to insert into the navigation stack."
}
],
"text": "The component to insert into the navigation stack."
},
{
"tags": [
{
"name": "param",
"text": "componentProps Any properties of the component."
}
],
"text": "Any properties of the component."
},
{
"tags": [
{
"name": "param",
"text": "opts The navigation options."
}
],
"text": "The navigation options."
},
{
"tags": [
{
"name": "param",
"text": "done The transition complete function."
}
],
"text": "The transition complete function."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"NavComponent": {
"location": "import",
"path": "./nav-interface",
"id": "/Users/alice/Code/ionic-framework/core::NavComponent"
},
"T": {
"location": "global",
"id": "src/components/nav/nav.tsx::T"
},
"ComponentProps": {
"location": "import",
"path": "../../interface",
"id": "src/interface.d.ts::ComponentProps"
},
"NavOptions": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::NavOptions"
},
"TransitionDoneFn": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
}
},
"return": "Promise<boolean>"
},
"signature": "insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
"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<boolean>",
"docs": ""
},
"complexType": {
"signature": "(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "insertIndex The index to insert the components at in the stack."
}
],
"text": "The index to insert the components at in the stack."
},
{
"tags": [
{
"name": "param",
"text": "insertComponents The components to insert into the navigation stack."
}
],
"text": "The components to insert into the navigation stack."
},
{
"tags": [
{
"name": "param",
"text": "opts The navigation options."
}
],
"text": "The navigation options."
},
{
"tags": [
{
"name": "param",
"text": "done The transition complete function."
}
],
"text": "The transition complete function."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"NavComponent": {
"location": "import",
"path": "./nav-interface",
"id": "/Users/alice/Code/ionic-framework/core::NavComponent"
},
"NavComponentWithProps": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::NavComponentWithProps"
},
"NavOptions": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::NavOptions"
},
"TransitionDoneFn": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
}
},
"return": "Promise<boolean>"
},
"signature": "insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
"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<boolean>",
"docs": ""
},
"complexType": {
"signature": "(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "opts The navigation options."
}
],
"text": "The navigation options."
},
{
"tags": [
{
"name": "param",
"text": "done The transition complete function."
}
],
"text": "The transition complete function."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"NavOptions": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::NavOptions"
},
"TransitionDoneFn": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
}
},
"return": "Promise<boolean>"
},
"signature": "pop(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
"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<boolean>",
"docs": ""
},
"complexType": {
"signature": "(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "indexOrViewCtrl The index or view controller to pop to."
}
],
"text": "The index or view controller to pop to."
},
{
"tags": [
{
"name": "param",
"text": "opts The navigation options."
}
],
"text": "The navigation options."
},
{
"tags": [
{
"name": "param",
"text": "done The transition complete function."
}
],
"text": "The transition complete function."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"ViewController": {
"location": "import",
"path": "./view-controller",
"id": "src/components/nav/view-controller.ts::ViewController"
},
"NavOptions": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::NavOptions"
},
"TransitionDoneFn": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
},
"TransitionInstruction": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::TransitionInstruction"
}
},
"return": "Promise<boolean>"
},
"signature": "popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
"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<boolean>",
"docs": ""
},
"complexType": {
"signature": "(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "opts The navigation options."
}
],
"text": "The navigation options."
},
{
"tags": [
{
"name": "param",
"text": "done The transition complete function."
}
],
"text": "The transition complete function."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"NavOptions": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::NavOptions"
},
"TransitionDoneFn": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
}
},
"return": "Promise<boolean>"
},
"signature": "popToRoot(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
"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<boolean>",
"docs": ""
},
"complexType": {
"signature": "<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "component The component to push onto the navigation stack."
}
],
"text": "The component to push onto the navigation stack."
},
{
"tags": [
{
"name": "param",
"text": "componentProps Any properties of the component."
}
],
"text": "Any properties of the component."
},
{
"tags": [
{
"name": "param",
"text": "opts The navigation options."
}
],
"text": "The navigation options."
},
{
"tags": [
{
"name": "param",
"text": "done The transition complete function."
}
],
"text": "The transition complete function."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"NavComponent": {
"location": "import",
"path": "./nav-interface",
"id": "/Users/alice/Code/ionic-framework/core::NavComponent"
},
"T": {
"location": "global",
"id": "src/components/nav/nav.tsx::T"
},
"ComponentProps": {
"location": "import",
"path": "../../interface",
"id": "src/interface.d.ts::ComponentProps"
},
"NavOptions": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::NavOptions"
},
"TransitionDoneFn": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
}
},
"return": "Promise<boolean>"
},
"signature": "push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
"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<boolean>",
"docs": ""
},
"complexType": {
"signature": "(startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "startIndex The number to begin removal at."
}
],
"text": "The number to begin removal at."
},
{
"tags": [
{
"name": "param",
"text": "removeCount The number of components to remove."
}
],
"text": "The number of components to remove."
},
{
"tags": [
{
"name": "param",
"text": "opts The navigation options."
}
],
"text": "The navigation options."
},
{
"tags": [
{
"name": "param",
"text": "done The transition complete function."
}
],
"text": "The transition complete function."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"NavOptions": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::NavOptions"
},
"TransitionDoneFn": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
}
},
"return": "Promise<boolean>"
},
"signature": "removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
"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<boolean>",
"docs": ""
},
"complexType": {
"signature": "(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "views The list of views to set as the navigation stack."
}
],
"text": "The list of views to set as the navigation stack."
},
{
"tags": [
{
"name": "param",
"text": "opts The navigation options."
}
],
"text": "The navigation options."
},
{
"tags": [
{
"name": "param",
"text": "done The transition complete function."
}
],
"text": "The transition complete function."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"NavComponent": {
"location": "import",
"path": "./nav-interface",
"id": "/Users/alice/Code/ionic-framework/core::NavComponent"
},
"NavComponentWithProps": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::NavComponentWithProps"
},
"NavOptions": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::NavOptions"
},
"TransitionDoneFn": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
}
},
"return": "Promise<boolean>"
},
"signature": "setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
"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<boolean>",
"docs": ""
},
"complexType": {
"signature": "<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "component The component to set as the root of the navigation stack."
}
],
"text": "The component to set as the root of the navigation stack."
},
{
"tags": [
{
"name": "param",
"text": "componentProps Any properties of the component."
}
],
"text": "Any properties of the component."
},
{
"tags": [
{
"name": "param",
"text": "opts The navigation options."
}
],
"text": "The navigation options."
},
{
"tags": [
{
"name": "param",
"text": "done The transition complete function."
}
],
"text": "The transition complete function."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"NavComponent": {
"location": "import",
"path": "./nav-interface",
"id": "/Users/alice/Code/ionic-framework/core::NavComponent"
},
"T": {
"location": "global",
"id": "src/components/nav/nav.tsx::T"
},
"ComponentProps": {
"location": "import",
"path": "../../interface",
"id": "src/interface.d.ts::ComponentProps"
},
"NavOptions": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::NavOptions"
},
"TransitionDoneFn": {
"location": "import",
"path": "./nav-interface",
"id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
}
},
"return": "Promise<boolean>"
},
"signature": "setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
"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,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Event fired when the nav has changed components",
"docsTags": []
},
{
"event": "ionNavWillChange",
"detail": "void",
"bubbles": false,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"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",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "component",
"type": "Function | HTMLElement | ViewController | null | string | undefined",
"complexType": {
"original": "NavComponent",
"resolved": "Function | HTMLElement | ViewController | null | string | undefined",
"references": {
"NavComponent": {
"location": "import",
"path": "../nav/nav-interface",
"id": "/Users/alice/Code/ionic-framework/core::NavComponent"
}
}
},
"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; }",
"complexType": {
"original": "ComponentProps",
"resolved": "undefined | { [key: string]: any; }",
"references": {
"ComponentProps": {
"location": "import",
"path": "../../interface",
"id": "src/interface.d.ts::ComponentProps"
}
}
},
"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",
"complexType": {
"original": "AnimationBuilder",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"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\"",
"complexType": {
"original": "RouterDirection",
"resolved": "\"back\" | \"forward\" | \"root\"",
"references": {
"RouterDirection": {
"location": "import",
"path": "../router/utils/interface",
"id": "/Users/alice/Code/ionic-framework/core::RouterDirection"
}
}
},
"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",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"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",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "animated",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "animated",
"reflectToAttr": false,
"docs": "If `true`, the picker will animate.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "backdropDismiss",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "backdrop-dismiss",
"reflectToAttr": false,
"docs": "If `true`, the picker will be dismissed when the backdrop is clicked.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "buttons",
"type": "PickerButton[]",
"complexType": {
"original": "PickerButton[]",
"resolved": "PickerButton[]",
"references": {
"PickerButton": {
"location": "import",
"path": "./picker-interface",
"id": "src/components/picker/picker-interface.ts::PickerButton"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Array of buttons to be displayed at the top of the picker.",
"docsTags": [],
"default": "[]",
"values": [
{
"type": "PickerButton[]"
}
],
"optional": false,
"required": false
},
{
"name": "columns",
"type": "PickerColumn[]",
"complexType": {
"original": "PickerColumn[]",
"resolved": "PickerColumn[]",
"references": {
"PickerColumn": {
"location": "import",
"path": "./picker-interface",
"id": "src/components/picker/picker-interface.ts::PickerColumn"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Array of columns to be displayed in the picker.",
"docsTags": [],
"default": "[]",
"values": [
{
"type": "PickerColumn[]"
}
],
"optional": false,
"required": false
},
{
"name": "cssClass",
"type": "string | string[] | undefined",
"complexType": {
"original": "string | string[]",
"resolved": "string | string[] | undefined",
"references": {}
},
"mutable": false,
"attr": "css-class",
"reflectToAttr": false,
"docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "string[]"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "duration",
"type": "number",
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"mutable": false,
"attr": "duration",
"reflectToAttr": false,
"docs": "Number of milliseconds to wait before dismissing the picker.",
"docsTags": [],
"default": "0",
"values": [
{
"type": "number"
}
],
"optional": false,
"required": false
},
{
"name": "enterAnimation",
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"complexType": {
"original": "AnimationBuilder",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Animation to use when the picker is presented.",
"docsTags": [],
"values": [
{
"type": "((baseEl: any, opts?: any) => Animation)"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "htmlAttributes",
"type": "undefined | { [key: string]: any; }",
"complexType": {
"original": "{ [key: string]: any }",
"resolved": "undefined | { [key: string]: any; }",
"references": {}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Additional attributes to pass to the picker.",
"docsTags": [],
"values": [
{
"type": "undefined"
},
{
"type": "{ [key: string]: any; }"
}
],
"optional": true,
"required": false
},
{
"name": "isOpen",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "is-open",
"reflectToAttr": false,
"docs": "If `true`, the picker will open. If `false`, the picker will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the pickerController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe picker dismisses. You will need to do that in your code.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "keyboardClose",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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",
"complexType": {
"original": "AnimationBuilder",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Animation to use when the picker 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": "showBackdrop",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "show-backdrop",
"reflectToAttr": false,
"docs": "If `true`, a backdrop will be displayed behind the picker.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "trigger",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "trigger",
"reflectToAttr": false,
"docs": "An ID corresponding to the trigger element that\ncauses the picker to open when clicked.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
}
],
"methods": [
{
"name": "dismiss",
"returns": {
"type": "Promise<boolean>",
"docs": ""
},
"complexType": {
"signature": "(data?: any, role?: string) => Promise<boolean>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "data Any data to emit in the dismiss events."
}
],
"text": "Any data to emit in the dismiss events."
},
{
"tags": [
{
"name": "param",
"text": "role The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
}
],
"text": "The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<boolean>"
},
"signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
"parameters": [],
"docs": "Dismiss the picker 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 picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
}
]
},
{
"name": "getColumn",
"returns": {
"type": "Promise<PickerColumn | undefined>",
"docs": ""
},
"complexType": {
"signature": "(name: string) => Promise<PickerColumn | undefined>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "name The name of the column."
}
],
"text": "The name of the column."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"PickerColumn": {
"location": "import",
"path": "./picker-interface",
"id": "src/components/picker/picker-interface.ts::PickerColumn"
}
},
"return": "Promise<PickerColumn | undefined>"
},
"signature": "getColumn(name: string) => Promise<PickerColumn | undefined>",
"parameters": [],
"docs": "Get the column that matches the specified name.",
"docsTags": [
{
"name": "param",
"text": "name The name of the column."
}
]
},
{
"name": "onDidDismiss",
"returns": {
"type": "Promise<OverlayEventDetail<T>>",
"docs": ""
},
"complexType": {
"signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
},
"T": {
"location": "global",
"id": "src/components/picker/picker.tsx::T"
}
},
"return": "Promise<OverlayEventDetail<T>>"
},
"signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"docs": "Returns a promise that resolves when the picker did dismiss.",
"docsTags": []
},
{
"name": "onWillDismiss",
"returns": {
"type": "Promise<OverlayEventDetail<T>>",
"docs": ""
},
"complexType": {
"signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
},
"T": {
"location": "global",
"id": "src/components/picker/picker.tsx::T"
}
},
"return": "Promise<OverlayEventDetail<T>>"
},
"signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"docs": "Returns a promise that resolves when the picker will dismiss.",
"docsTags": []
},
{
"name": "present",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<void>"
},
"signature": "present() => Promise<void>",
"parameters": [],
"docs": "Present the picker overlay after it has been created.",
"docsTags": []
}
],
"events": [
{
"event": "didDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the picker has dismissed.\nShorthand for ionPickerDidDismiss.",
"docsTags": []
},
{
"event": "didPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the picker has presented.\nShorthand for ionPickerWillDismiss.",
"docsTags": []
},
{
"event": "ionPickerDidDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the picker has dismissed.",
"docsTags": []
},
{
"event": "ionPickerDidPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the picker has presented.",
"docsTags": []
},
{
"event": "ionPickerWillDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the picker has dismissed.",
"docsTags": []
},
{
"event": "ionPickerWillPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the picker has presented.",
"docsTags": []
},
{
"event": "willDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the picker has dismissed.\nShorthand for ionPickerWillDismiss.",
"docsTags": []
},
{
"event": "willPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the picker has presented.\nShorthand for ionPickerWillPresent.",
"docsTags": []
}
],
"listeners": [],
"styles": [
{
"name": "--backdrop-opacity",
"annotation": "prop",
"docs": "Opacity of the backdrop"
},
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the picker"
},
{
"name": "--background-rgb",
"annotation": "prop",
"docs": "Background of the picker in rgb format"
},
{
"name": "--border-color",
"annotation": "prop",
"docs": "Border color of the picker"
},
{
"name": "--border-radius",
"annotation": "prop",
"docs": "Border radius of the picker"
},
{
"name": "--border-style",
"annotation": "prop",
"docs": "Border style of the picker"
},
{
"name": "--border-width",
"annotation": "prop",
"docs": "Border width of the picker"
},
{
"name": "--height",
"annotation": "prop",
"docs": "Height of the picker"
},
{
"name": "--max-height",
"annotation": "prop",
"docs": "Maximum height of the picker"
},
{
"name": "--max-width",
"annotation": "prop",
"docs": "Maximum width of the picker"
},
{
"name": "--min-height",
"annotation": "prop",
"docs": "Minimum height of the picker"
},
{
"name": "--min-width",
"annotation": "prop",
"docs": "Minimum width of the picker"
},
{
"name": "--width",
"annotation": "prop",
"docs": "Width of the picker"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [
"ion-backdrop",
"ion-picker-column"
],
"dependencyGraph": {
"ion-picker": [
"ion-backdrop",
"ion-picker-column"
]
}
},
{
"filePath": "./src/components/popover/popover.tsx",
"encapsulation": "shadow",
"tag": "ion-popover",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "slot",
"text": "- Content is placed inside of the `.popover-content` element."
},
{
"name": "part",
"text": "backdrop - The `ion-backdrop` element."
},
{
"name": "part",
"text": "arrow - The arrow that points to the reference element. Only applies on `ios` mode."
},
{
"name": "part",
"text": "content - The wrapper element for the default slot."
}
],
"usage": {},
"props": [
{
"name": "alignment",
"type": "\"center\" | \"end\" | \"start\" | undefined",
"complexType": {
"original": "PositionAlign",
"resolved": "\"center\" | \"end\" | \"start\" | undefined",
"references": {
"PositionAlign": {
"location": "import",
"path": "./popover-interface",
"id": "/Users/alice/Code/ionic-framework/core::PositionAlign"
}
}
},
"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",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "arrow",
"reflectToAttr": false,
"docs": "If `true`, the popover will display an arrow that points at the\n`reference` when running in `ios` mode. Does not apply in `md` mode.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "backdropDismiss",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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",
"complexType": {
"original": "ComponentRef",
"resolved": "Function | HTMLElement | null | string | undefined",
"references": {
"ComponentRef": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::ComponentRef"
}
}
},
"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; }",
"complexType": {
"original": "ComponentProps",
"resolved": "undefined | { [key: string]: any; }",
"references": {
"ComponentProps": {
"location": "import",
"path": "../../interface",
"id": "src/interface.d.ts::ComponentProps"
}
}
},
"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",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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",
"complexType": {
"original": "AnimationBuilder",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"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",
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"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": "undefined | { [key: string]: any; }",
"complexType": {
"original": "{ [key: string]: any }",
"resolved": "undefined | { [key: string]: any; }",
"references": {}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Additional attributes to pass to the popover.",
"docsTags": [],
"values": [
{
"type": "undefined"
},
{
"type": "{ [key: string]: any; }"
}
],
"optional": true,
"required": false
},
{
"name": "isOpen",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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": "keepContentsMounted",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "keep-contents-mounted",
"reflectToAttr": false,
"docs": "If `true`, the component passed into `ion-popover` will\nautomatically be mounted when the popover is created. The\ncomponent will remain mounted even when the popover is dismissed.\nHowever, the component will be destroyed when the popover is\ndestroyed. This property is not reactive and should only be\nused when initially creating a popover.\n\nNote: This feature only applies to inline popovers in JavaScript\nframeworks such as Angular, React, and Vue.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "keyboardClose",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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",
"complexType": {
"original": "AnimationBuilder",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"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\"",
"complexType": {
"original": "PositionReference",
"resolved": "\"event\" | \"trigger\"",
"references": {
"PositionReference": {
"location": "import",
"path": "./popover-interface",
"id": "/Users/alice/Code/ionic-framework/core::PositionReference"
}
}
},
"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",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "show-backdrop",
"reflectToAttr": false,
"docs": "If `true`, a backdrop will be displayed behind the popover.\nThis property controls whether or not the backdrop\ndarkens the screen when the popover is presented.\nIt does not control whether or not the backdrop\nis active or present in the DOM.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "side",
"type": "\"bottom\" | \"end\" | \"left\" | \"right\" | \"start\" | \"top\"",
"complexType": {
"original": "PositionSide",
"resolved": "\"bottom\" | \"end\" | \"left\" | \"right\" | \"start\" | \"top\"",
"references": {
"PositionSide": {
"location": "import",
"path": "./popover-interface",
"id": "/Users/alice/Code/ionic-framework/core::PositionSide"
}
}
},
"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\"",
"complexType": {
"original": "PopoverSize",
"resolved": "\"auto\" | \"cover\"",
"references": {
"PopoverSize": {
"location": "import",
"path": "./popover-interface",
"id": "/Users/alice/Code/ionic-framework/core::PopoverSize"
}
}
},
"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",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"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\"",
"complexType": {
"original": "TriggerAction",
"resolved": "\"click\" | \"context-menu\" | \"hover\"",
"references": {
"TriggerAction": {
"location": "import",
"path": "./popover-interface",
"id": "/Users/alice/Code/ionic-framework/core::TriggerAction"
}
}
},
"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<boolean>",
"docs": ""
},
"complexType": {
"signature": "(data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "data Any data to emit in the dismiss events."
}
],
"text": "Any data to emit in the dismiss events."
},
{
"tags": [
{
"name": "param",
"text": "role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'."
}
],
"text": "The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'."
},
{
"tags": [
{
"name": "param",
"text": "dismissParentPopover If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`."
}
],
"text": "If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"PopoverDismissOptions": {
"location": "global",
"id": ""
}
},
"return": "Promise<boolean>"
},
"signature": "dismiss(data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>",
"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<OverlayEventDetail<T>>",
"docs": ""
},
"complexType": {
"signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
},
"T": {
"location": "global",
"id": "src/components/popover/popover.tsx::T"
}
},
"return": "Promise<OverlayEventDetail<T>>"
},
"signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"docs": "Returns a promise that resolves when the popover did dismiss.",
"docsTags": []
},
{
"name": "onWillDismiss",
"returns": {
"type": "Promise<OverlayEventDetail<T>>",
"docs": ""
},
"complexType": {
"signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
},
"T": {
"location": "global",
"id": "src/components/popover/popover.tsx::T"
}
},
"return": "Promise<OverlayEventDetail<T>>"
},
"signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"docs": "Returns a promise that resolves when the popover will dismiss.",
"docsTags": []
},
{
"name": "present",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>",
"parameters": [
{
"tags": [],
"text": ""
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"MouseEvent": {
"location": "global",
"id": ""
},
"TouchEvent": {
"location": "global",
"id": ""
},
"PointerEvent": {
"location": "global",
"id": ""
},
"CustomEvent": {
"location": "global",
"id": ""
},
"PopoverPresentOptions": {
"location": "global",
"id": "src/components/popover/popover.tsx::PopoverPresentOptions"
}
},
"return": "Promise<void>"
},
"signature": "present(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>",
"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<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the popover has dismissed.\nShorthand for ionPopoverDidDismiss.",
"docsTags": []
},
{
"event": "didPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the popover has presented.\nShorthand for ionPopoverWillDismiss.",
"docsTags": []
},
{
"event": "ionPopoverDidDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the popover has dismissed.",
"docsTags": []
},
{
"event": "ionPopoverDidPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the popover has presented.",
"docsTags": []
},
{
"event": "ionPopoverWillDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the popover has dismissed.",
"docsTags": []
},
{
"event": "ionPopoverWillPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the popover has presented.",
"docsTags": []
},
{
"event": "willDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the popover has dismissed.\nShorthand for ionPopoverWillDismiss.",
"docsTags": []
},
{
"event": "willPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"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",
"docs": "",
"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": {},
"props": [
{
"name": "buffer",
"type": "number",
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"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": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"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",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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\"",
"complexType": {
"original": "'determinate' | 'indeterminate'",
"resolved": "\"determinate\" | \"indeterminate\"",
"references": {}
},
"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",
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"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",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "slot",
"text": "- The label text to associate with the radio. Use the \"labelPlacement\" property to control where the label is placed relative to the radio."
},
{
"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": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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": "justify",
"type": "\"end\" | \"space-between\" | \"start\"",
"complexType": {
"original": "'start' | 'end' | 'space-between'",
"resolved": "\"end\" | \"space-between\" | \"start\"",
"references": {}
},
"mutable": false,
"attr": "justify",
"reflectToAttr": false,
"docs": "How to pack the label and radio within a line.\n`\"start\"`: The label and radio will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and radio will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and radio will appear on opposite\nends of the line with space between the two elements.",
"docsTags": [],
"default": "'space-between'",
"values": [
{
"value": "end",
"type": "string"
},
{
"value": "space-between",
"type": "string"
},
{
"value": "start",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "labelPlacement",
"type": "\"end\" | \"fixed\" | \"start\"",
"complexType": {
"original": "'start' | 'end' | 'fixed'",
"resolved": "\"end\" | \"fixed\" | \"start\"",
"references": {}
},
"mutable": false,
"attr": "label-placement",
"reflectToAttr": false,
"docs": "Where to place the label relative to the radio.\n`\"start\"`: The label will appear to the left of the radio in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the radio in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
"docsTags": [],
"default": "'start'",
"values": [
{
"value": "end",
"type": "string"
},
{
"value": "fixed",
"type": "string"
},
{
"value": "start",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "legacy",
"type": "boolean | undefined",
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"mutable": false,
"attr": "legacy",
"reflectToAttr": false,
"docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
"docsTags": [],
"values": [
{
"type": "boolean"
},
{
"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": "name",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"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",
"complexType": {
"original": "any | null",
"resolved": "any",
"references": {}
},
"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,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the radio button loses focus.",
"docsTags": []
},
{
"event": "ionFocus",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"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": [
{
"name": "",
"docs": "The label text to associate with the radio. Use the \"labelPlacement\" property to control where the label is placed relative to the radio."
}
],
"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",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "allowEmptySelection",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"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",
"complexType": {
"original": "any | null",
"resolved": "any",
"references": {}
},
"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<any>",
"bubbles": true,
"complexType": {
"original": "RadioGroupChangeEventDetail",
"resolved": "RadioGroupChangeEventDetail<any>",
"references": {
"RadioGroupChangeEventDetail": {
"location": "import",
"path": "./radio-group-interface",
"id": "src/components/radio-group/radio-group-interface.ts::RadioGroupChangeEventDetail"
}
}
},
"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",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "slot",
"text": "label - The label text to associate with the range. Use the \"labelPlacement\" property to control where the label is placed relative to the range."
},
{
"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": {},
"props": [
{
"name": "activeBarStart",
"type": "number | undefined",
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"mutable": true,
"attr": "active-bar-start",
"reflectToAttr": false,
"docs": "The start position of the range active bar. This feature is only available with a single knob (dualKnobs=\"false\").\nValid values are greater than or equal to the min value and less than or equal to the max value.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "debounce",
"type": "number | undefined",
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"mutable": false,
"attr": "debounce",
"reflectToAttr": false,
"docs": "How long, in milliseconds, to wait to trigger the\n`ionInput` event after each change in the range value.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "dual-knobs",
"reflectToAttr": false,
"docs": "Show two knobs.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "labelPlacement",
"type": "\"end\" | \"fixed\" | \"start\"",
"complexType": {
"original": "'start' | 'end' | 'fixed'",
"resolved": "\"end\" | \"fixed\" | \"start\"",
"references": {}
},
"mutable": false,
"attr": "label-placement",
"reflectToAttr": false,
"docs": "Where to place the label relative to the range.\n`\"start\"`: The label will appear to the left of the range in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the range in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
"docsTags": [],
"default": "'start'",
"values": [
{
"value": "end",
"type": "string"
},
{
"value": "fixed",
"type": "string"
},
{
"value": "start",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "legacy",
"type": "boolean | undefined",
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"mutable": false,
"attr": "legacy",
"reflectToAttr": false,
"docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
"docsTags": [],
"values": [
{
"type": "boolean"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "max",
"type": "number",
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"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",
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"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",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "name",
"reflectToAttr": false,
"docs": "The name of the control, which is submitted with the form data.",
"docsTags": [],
"default": "this.rangeId",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "pin",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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",
"complexType": {
"original": "PinFormatter",
"resolved": "(value: number) => string | number",
"references": {
"PinFormatter": {
"location": "import",
"path": "./range-interface",
"id": "src/components/range/range-interface.ts::PinFormatter"
}
}
},
"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",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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",
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"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",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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; }",
"complexType": {
"original": "RangeValue",
"resolved": "number | { lower: number; upper: number; }",
"references": {
"RangeValue": {
"location": "import",
"path": "./range-interface",
"id": "/Users/alice/Code/ionic-framework/core::RangeValue"
}
}
},
"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,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the range loses focus.",
"docsTags": []
},
{
"event": "ionChange",
"detail": "RangeChangeEventDetail",
"bubbles": true,
"complexType": {
"original": "RangeChangeEventDetail",
"resolved": "RangeChangeEventDetail",
"references": {
"RangeChangeEventDetail": {
"location": "import",
"path": "./range-interface",
"id": "src/components/range/range-interface.ts::RangeChangeEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "The `ionChange` event is fired for `<ion-range>` elements when the user\nmodifies the element's value:\n- When the user releases the knob after dragging;\n- When the user moves the knob with keyboard arrows\n\n`ionChange` is not fired when the value is changed programmatically.",
"docsTags": []
},
{
"event": "ionFocus",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the range has focus.",
"docsTags": []
},
{
"event": "ionInput",
"detail": "RangeChangeEventDetail",
"bubbles": true,
"complexType": {
"original": "RangeChangeEventDetail",
"resolved": "RangeChangeEventDetail",
"references": {
"RangeChangeEventDetail": {
"location": "import",
"path": "./range-interface",
"id": "src/components/range/range-interface.ts::RangeChangeEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "The `ionInput` event is fired for `<ion-range>` elements when the value\nis modified. Unlike `ionChange`, `ionInput` is fired continuously\nwhile the user is dragging the knob.",
"docsTags": []
},
{
"event": "ionKnobMoveEnd",
"detail": "RangeKnobMoveEndEventDetail",
"bubbles": true,
"complexType": {
"original": "RangeKnobMoveEndEventDetail",
"resolved": "RangeKnobMoveEndEventDetail",
"references": {
"RangeKnobMoveEndEventDetail": {
"location": "import",
"path": "./range-interface",
"id": "src/components/range/range-interface.ts::RangeKnobMoveEndEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the user finishes moving the range knob, whether through\nmouse drag, touch gesture, or keyboard interaction.",
"docsTags": []
},
{
"event": "ionKnobMoveStart",
"detail": "RangeKnobMoveStartEventDetail",
"bubbles": true,
"complexType": {
"original": "RangeKnobMoveStartEventDetail",
"resolved": "RangeKnobMoveStartEventDetail",
"references": {
"RangeKnobMoveStartEventDetail": {
"location": "import",
"path": "./range-interface",
"id": "src/components/range/range-interface.ts::RangeKnobMoveStartEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the user starts moving the range knob, whether through\nmouse drag, touch gesture, or keyboard interaction.",
"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 (only available in MD mode)"
},
{
"name": "--pin-color",
"annotation": "prop",
"docs": "Color of the range pin (only available in MD mode)"
}
],
"slots": [
{
"name": "end",
"docs": "Content is placed to the right of the range slider in LTR, and to the left in RTL."
},
{
"name": "label",
"docs": "The label text to associate with the range. Use the \"labelPlacement\" property to control where the label is placed relative to the range."
},
{
"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",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "closeDuration",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"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",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"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",
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"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",
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"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",
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"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",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"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<void>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "/Users/alice/Code/ionic-framework/core::Promise"
}
},
"return": "Promise<void>"
},
"signature": "cancel() => Promise<void>",
"parameters": [],
"docs": "Changes the refresher's state from `refreshing` to `cancelling`.",
"docsTags": []
},
{
"name": "complete",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "/Users/alice/Code/ionic-framework/core::Promise"
}
},
"return": "Promise<void>"
},
"signature": "complete() => Promise<void>",
"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<number>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<number>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "/Users/alice/Code/ionic-framework/core::Promise"
}
},
"return": "Promise<number>"
},
"signature": "getProgress() => Promise<number>",
"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,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"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,
"complexType": {
"original": "RefresherEventDetail",
"resolved": "RefresherEventDetail",
"references": {
"RefresherEventDetail": {
"location": "import",
"path": "./refresher-interface",
"id": "src/components/refresher/refresher-interface.ts::RefresherEventDetail"
}
}
},
"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,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"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",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "pullingIcon",
"type": "null | string | undefined",
"complexType": {
"original": "SpinnerTypes | string | null",
"resolved": "null | string | undefined",
"references": {
"SpinnerTypes": {
"location": "import",
"path": "../spinner/spinner-configs",
"id": "/Users/alice/Code/ionic-framework/core::SpinnerTypes"
}
}
},
"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",
"complexType": {
"original": "string | IonicSafeString",
"resolved": "IonicSafeString | string | undefined",
"references": {
"IonicSafeString": {
"location": "import",
"path": "../../utils/sanitization",
"id": "src/utils/sanitization/index.ts::IonicSafeString"
}
}
},
"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 `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
"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",
"complexType": {
"original": "SpinnerTypes | null",
"resolved": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
"references": {
"SpinnerTypes": {
"location": "import",
"path": "../spinner/spinner-configs",
"id": "/Users/alice/Code/ionic-framework/core::SpinnerTypes"
}
}
},
"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",
"complexType": {
"original": "string | IonicSafeString",
"resolved": "IonicSafeString | string | undefined",
"references": {
"IonicSafeString": {
"location": "import",
"path": "../../utils/sanitization",
"id": "src/utils/sanitization/index.ts::IonicSafeString"
}
}
},
"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 `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
"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",
"docs": "",
"docsTags": [
{
"name": "part",
"text": "icon - The icon of the reorder handle (uses ion-icon)."
}
],
"usage": {},
"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",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the reorder will be hidden.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
}
],
"methods": [
{
"name": "complete",
"returns": {
"type": "Promise<any>",
"docs": ""
},
"complexType": {
"signature": "(listOrReorder?: boolean | any[]) => Promise<any>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "listOrReorder A list of items to be sorted and returned in the new order or a\nboolean of whether or not the reorder should reposition the item."
}
],
"text": "A list of items to be sorted and returned in the new order or a\nboolean of whether or not the reorder should reposition the item."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<any>"
},
"signature": "complete(listOrReorder?: boolean | any[]) => Promise<any>",
"parameters": [],
"docs": "Completes the reorder operation. Must be called by the `ionItemReorder` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.",
"docsTags": [
{
"name": "param",
"text": "listOrReorder A list of items to be sorted and returned in the new order or a\nboolean of whether or not the reorder should reposition the item."
}
]
}
],
"events": [
{
"event": "ionItemReorder",
"detail": "ItemReorderEventDetail",
"bubbles": true,
"complexType": {
"original": "ItemReorderEventDetail",
"resolved": "ItemReorderEventDetail",
"references": {
"ItemReorderEventDetail": {
"location": "import",
"path": "./reorder-group-interface",
"id": "src/components/reorder-group/reorder-group-interface.ts::ItemReorderEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Event that needs to be listened to in order to complete the reorder action.\nOnce the event has been emitted, the `complete()` method then needs\nto be called in order to finalize the reorder action.",
"docsTags": []
}
],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/ripple-effect/ripple-effect.tsx",
"encapsulation": "shadow",
"tag": "ion-ripple-effect",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "type",
"type": "\"bounded\" | \"unbounded\"",
"complexType": {
"original": "'bounded' | 'unbounded'",
"resolved": "\"bounded\" | \"unbounded\"",
"references": {}
},
"mutable": false,
"attr": "type",
"reflectToAttr": false,
"docs": "Sets the type of ripple-effect:\n\n- `bounded`: the ripple effect expands from the user's click position\n- `unbounded`: the ripple effect expands from the center of the button and overflows the container.\n\nNOTE: Surfaces for bounded ripples should have the overflow property set to hidden,\nwhile surfaces for unbounded ripples should have it set to visible.",
"docsTags": [],
"default": "'bounded'",
"values": [
{
"value": "bounded",
"type": "string"
},
{
"value": "unbounded",
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [
{
"name": "addRipple",
"returns": {
"type": "Promise<() => void>",
"docs": ""
},
"complexType": {
"signature": "(x: number, y: number) => Promise<() => void>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "x The horizontal coordinate of where the ripple should start."
}
],
"text": "The horizontal coordinate of where the ripple should start."
},
{
"tags": [
{
"name": "param",
"text": "y The vertical coordinate of where the ripple should start."
}
],
"text": "The vertical coordinate of where the ripple should start."
}
],
"references": {
"Promise": {
"location": "global",
"id": "/Users/alice/Code/ionic-framework/core::Promise"
}
},
"return": "Promise<() => void>"
},
"signature": "addRipple(x: number, y: number) => Promise<() => void>",
"parameters": [],
"docs": "Adds the ripple effect to the parent element.",
"docsTags": [
{
"name": "param",
"text": "x The horizontal coordinate of where the ripple should start."
},
{
"name": "param",
"text": "y The vertical coordinate of where the ripple should start."
}
]
}
],
"events": [],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [
"ion-action-sheet",
"ion-alert",
"ion-back-button",
"ion-button",
"ion-card",
"ion-chip",
"ion-datetime-button",
"ion-fab-button",
"ion-item",
"ion-item-option",
"ion-menu-button",
"ion-segment-button",
"ion-tab-button",
"ion-toast"
],
"dependencies": [],
"dependencyGraph": {
"ion-action-sheet": [
"ion-ripple-effect"
],
"ion-alert": [
"ion-ripple-effect"
],
"ion-back-button": [
"ion-ripple-effect"
],
"ion-button": [
"ion-ripple-effect"
],
"ion-card": [
"ion-ripple-effect"
],
"ion-chip": [
"ion-ripple-effect"
],
"ion-datetime-button": [
"ion-ripple-effect"
],
"ion-fab-button": [
"ion-ripple-effect"
],
"ion-item": [
"ion-ripple-effect"
],
"ion-item-option": [
"ion-ripple-effect"
],
"ion-menu-button": [
"ion-ripple-effect"
],
"ion-segment-button": [
"ion-ripple-effect"
],
"ion-tab-button": [
"ion-ripple-effect"
],
"ion-toast": [
"ion-ripple-effect"
]
}
},
{
"filePath": "./src/components/route/route.tsx",
"encapsulation": "none",
"tag": "ion-route",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "beforeEnter",
"type": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
"complexType": {
"original": "NavigationHookCallback",
"resolved": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
"references": {
"NavigationHookCallback": {
"location": "import",
"path": "./route-interface",
"id": "src/components/route/route-interface.ts::NavigationHookCallback"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "A navigation hook that is fired when the route tries to enter.\nReturning `true` allows the navigation to proceed, while returning\n`false` causes it to be cancelled. Returning a `NavigationHookOptions`\nobject causes the router to redirect to the path specified.",
"docsTags": [],
"values": [
{
"type": "(() => NavigationHookResult"
},
{
"type": "Promise<NavigationHookResult>)"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "beforeLeave",
"type": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
"complexType": {
"original": "NavigationHookCallback",
"resolved": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
"references": {
"NavigationHookCallback": {
"location": "import",
"path": "./route-interface",
"id": "src/components/route/route-interface.ts::NavigationHookCallback"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "A navigation hook that is fired when the route tries to leave.\nReturning `true` allows the navigation to proceed, while returning\n`false` causes it to be cancelled. Returning a `NavigationHookOptions`\nobject causes the router to redirect to the path specified.",
"docsTags": [],
"values": [
{
"type": "(() => NavigationHookResult"
},
{
"type": "Promise<NavigationHookResult>)"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "component",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "component",
"reflectToAttr": false,
"docs": "Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`)\nwhen the route matches.\n\nThe value of this property is not always the tagname of the component to load,\nin `ion-tabs` it actually refers to the name of the `ion-tab` to select.",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": false,
"required": true
},
{
"name": "componentProps",
"type": "undefined | { [key: string]: any; }",
"complexType": {
"original": "{ [key: string]: any }",
"resolved": "undefined | { [key: string]: any; }",
"references": {}
},
"mutable": false,
"reflectToAttr": false,
"docs": "A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed\nto the defined component when rendered.",
"docsTags": [],
"values": [
{
"type": "undefined"
},
{
"type": "{ [key: string]: any; }"
}
],
"optional": true,
"required": false
},
{
"name": "url",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "url",
"reflectToAttr": false,
"docs": "Relative path that needs to match in order for this route to apply.\n\nAccepts paths similar to expressjs so that you can define parameters\nin the url /foo/:bar where bar would be available in incoming props.",
"docsTags": [],
"default": "''",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [
{
"event": "ionRouteDataChanged",
"detail": "any",
"bubbles": true,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Used internally by `ion-router` to know when this route did change.",
"docsTags": []
}
],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/route-redirect/route-redirect.tsx",
"encapsulation": "none",
"tag": "ion-route-redirect",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "from",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "from",
"reflectToAttr": false,
"docs": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"from\" URL.\nIt needs to be an exact match of the navigated URL in order to apply.\n\nThe path specified in this value is always an absolute path, even if the initial `/` slash\nis not specified.",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": false,
"required": true
},
{
"name": "to",
"type": "null | string | undefined",
"complexType": {
"original": "string | undefined | null",
"resolved": "null | string | undefined",
"references": {}
},
"mutable": false,
"attr": "to",
"reflectToAttr": false,
"docs": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"to\" URL.\nWhen the defined `ion-route-redirect` rule matches, the router will redirect to the path\nspecified in this property.\n\nThe value of this property is always an absolute path inside the scope of routes defined in\n`ion-router` it can't be used with another router or to perform a redirection to a different domain.\n\nNote that this is a virtual redirect, it will not cause a real browser refresh, again, it's\na redirect inside the context of ion-router.\n\nWhen this property is not specified or his value is `undefined` the whole redirect route is noop,\neven if the \"from\" value matches.",
"docsTags": [],
"values": [
{
"type": "null"
},
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": true
}
],
"methods": [],
"events": [
{
"event": "ionRouteRedirectChanged",
"detail": "any",
"bubbles": true,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Internal event that fires when any value of this rule is added/removed from the DOM,\nor any of his public properties changes.\n\n`ion-router` captures this event in order to update his internal registry of router rules.",
"docsTags": []
}
],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/router/router.tsx",
"encapsulation": "none",
"tag": "ion-router",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "root",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "root",
"reflectToAttr": false,
"docs": "The root path to use when matching URLs. By default, this is set to \"/\", but you can specify\nan alternate prefix for all URL paths.",
"docsTags": [],
"default": "'/'",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "useHash",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "use-hash",
"reflectToAttr": false,
"docs": "The router can work in two \"modes\":\n- With hash: `/index.html#/path/to/page`\n- Without hash: `/path/to/page`\n\nUsing one or another might depend in the requirements of your app and/or where it's deployed.\n\nUsually \"hash-less\" navigation works better for SEO and it's more user friendly too, but it might\nrequires additional server-side configuration in order to properly work.\n\nOn the other side hash-navigation is much easier to deploy, it even works over the file protocol.\n\nBy default, this property is `true`, change to `false` to allow hash-less URLs.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
}
],
"methods": [
{
"name": "back",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<void>"
},
"signature": "back() => Promise<void>",
"parameters": [],
"docs": "Go back to previous page in the window.history.",
"docsTags": []
},
{
"name": "push",
"returns": {
"type": "Promise<boolean>",
"docs": ""
},
"complexType": {
"signature": "(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "path The path to navigate to."
}
],
"text": "The path to navigate to."
},
{
"tags": [
{
"name": "param",
"text": "direction The direction of the animation. Defaults to `\"forward\"`."
}
],
"text": "The direction of the animation. Defaults to `\"forward\"`."
},
{
"tags": [],
"text": ""
}
],
"references": {
"Promise": {
"location": "global",
"id": "/Users/alice/Code/ionic-framework/core::Promise"
},
"RouterDirection": {
"location": "import",
"path": "./utils/interface",
"id": "/Users/alice/Code/ionic-framework/core::RouterDirection"
},
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
},
"return": "Promise<boolean>"
},
"signature": "push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>",
"parameters": [],
"docs": "Navigate to the specified path.",
"docsTags": [
{
"name": "param",
"text": "path The path to navigate to."
},
{
"name": "param",
"text": "direction The direction of the animation. Defaults to `\"forward\"`."
}
]
}
],
"events": [
{
"event": "ionRouteDidChange",
"detail": "RouterEventDetail",
"bubbles": true,
"complexType": {
"original": "RouterEventDetail",
"resolved": "RouterEventDetail",
"references": {
"RouterEventDetail": {
"location": "import",
"path": "./utils/interface",
"id": "src/components/router/utils/interface.ts::RouterEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the route had changed",
"docsTags": []
},
{
"event": "ionRouteWillChange",
"detail": "RouterEventDetail",
"bubbles": true,
"complexType": {
"original": "RouterEventDetail",
"resolved": "RouterEventDetail",
"references": {
"RouterEventDetail": {
"location": "import",
"path": "./utils/interface",
"id": "src/components/router/utils/interface.ts::RouterEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Event emitted when the route is about to change",
"docsTags": []
}
],
"listeners": [
{
"event": "popstate",
"target": "window",
"capture": false,
"passive": false
},
{
"event": "ionBackButton",
"target": "document",
"capture": false,
"passive": false
}
],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/router-link/router-link.tsx",
"encapsulation": "shadow",
"tag": "ion-router-link",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "href",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "href",
"reflectToAttr": false,
"docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "rel",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "rel",
"reflectToAttr": false,
"docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "routerAnimation",
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"complexType": {
"original": "AnimationBuilder | undefined",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
"docsTags": [],
"values": [
{
"type": "((baseEl: any, opts?: any) => Animation)"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "routerDirection",
"type": "\"back\" | \"forward\" | \"root\"",
"complexType": {
"original": "RouterDirection",
"resolved": "\"back\" | \"forward\" | \"root\"",
"references": {
"RouterDirection": {
"location": "import",
"path": "../router/utils/interface",
"id": "/Users/alice/Code/ionic-framework/core::RouterDirection"
}
}
},
"mutable": false,
"attr": "router-direction",
"reflectToAttr": false,
"docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
"docsTags": [],
"default": "'forward'",
"values": [
{
"value": "back",
"type": "string"
},
{
"value": "forward",
"type": "string"
},
{
"value": "root",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "target",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "target",
"reflectToAttr": false,
"docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the router link"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Text color of the router link"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/router-outlet/route-outlet.tsx",
"encapsulation": "shadow",
"tag": "ion-router-outlet",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "animated",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "animated",
"reflectToAttr": false,
"docs": "If `true`, the router-outlet 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",
"complexType": {
"original": "AnimationBuilder",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "This property allows to create custom transition using AnimationBuilder functions.",
"docsTags": [],
"values": [
{
"type": "((baseEl: any, opts?: any) => Animation)"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "mode",
"type": "\"ios\" | \"md\"",
"complexType": {
"original": "\"ios\" | \"md\"",
"resolved": "\"ios\" | \"md\"",
"references": {}
},
"mutable": true,
"attr": "mode",
"reflectToAttr": false,
"docs": "The mode determines which platform styles to use.",
"docsTags": [],
"default": "getIonMode(this)",
"values": [
{
"value": "ios",
"type": "string"
},
{
"value": "md",
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/row/row.tsx",
"encapsulation": "shadow",
"tag": "ion-row",
"docs": "",
"docsTags": [],
"usage": {},
"props": [],
"methods": [],
"events": [],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/searchbar/searchbar.tsx",
"encapsulation": "scoped",
"tag": "ion-searchbar",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "animated",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "animated",
"reflectToAttr": false,
"docs": "If `true`, enable searchbar animation.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "autocomplete",
"type": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
"complexType": {
"original": "AutocompleteTypes",
"resolved": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
"references": {
"AutocompleteTypes": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::AutocompleteTypes"
}
}
},
"mutable": false,
"attr": "autocomplete",
"reflectToAttr": false,
"docs": "Set the input's autocomplete property.",
"docsTags": [],
"default": "'off'",
"values": [
{
"value": "name",
"type": "string"
},
{
"value": "email",
"type": "string"
},
{
"value": "tel",
"type": "string"
},
{
"value": "url",
"type": "string"
},
{
"value": "on",
"type": "string"
},
{
"value": "off",
"type": "string"
},
{
"value": "honorific-prefix",
"type": "string"
},
{
"value": "given-name",
"type": "string"
},
{
"value": "additional-name",
"type": "string"
},
{
"value": "family-name",
"type": "string"
},
{
"value": "honorific-suffix",
"type": "string"
},
{
"value": "nickname",
"type": "string"
},
{
"value": "username",
"type": "string"
},
{
"value": "new-password",
"type": "string"
},
{
"value": "current-password",
"type": "string"
},
{
"value": "one-time-code",
"type": "string"
},
{
"value": "organization-title",
"type": "string"
},
{
"value": "organization",
"type": "string"
},
{
"value": "street-address",
"type": "string"
},
{
"value": "address-line1",
"type": "string"
},
{
"value": "address-line2",
"type": "string"
},
{
"value": "address-line3",
"type": "string"
},
{
"value": "address-level4",
"type": "string"
},
{
"value": "address-level3",
"type": "string"
},
{
"value": "address-level2",
"type": "string"
},
{
"value": "address-level1",
"type": "string"
},
{
"value": "country",
"type": "string"
},
{
"value": "country-name",
"type": "string"
},
{
"value": "postal-code",
"type": "string"
},
{
"value": "cc-name",
"type": "string"
},
{
"value": "cc-given-name",
"type": "string"
},
{
"value": "cc-additional-name",
"type": "string"
},
{
"value": "cc-family-name",
"type": "string"
},
{
"value": "cc-number",
"type": "string"
},
{
"value": "cc-exp",
"type": "string"
},
{
"value": "cc-exp-month",
"type": "string"
},
{
"value": "cc-exp-year",
"type": "string"
},
{
"value": "cc-csc",
"type": "string"
},
{
"value": "cc-type",
"type": "string"
},
{
"value": "transaction-currency",
"type": "string"
},
{
"value": "transaction-amount",
"type": "string"
},
{
"value": "language",
"type": "string"
},
{
"value": "bday",
"type": "string"
},
{
"value": "bday-day",
"type": "string"
},
{
"value": "bday-month",
"type": "string"
},
{
"value": "bday-year",
"type": "string"
},
{
"value": "sex",
"type": "string"
},
{
"value": "tel-country-code",
"type": "string"
},
{
"value": "tel-national",
"type": "string"
},
{
"value": "tel-area-code",
"type": "string"
},
{
"value": "tel-local",
"type": "string"
},
{
"value": "tel-extension",
"type": "string"
},
{
"value": "impp",
"type": "string"
},
{
"value": "photo",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "autocorrect",
"type": "\"off\" | \"on\"",
"complexType": {
"original": "'on' | 'off'",
"resolved": "\"off\" | \"on\"",
"references": {}
},
"mutable": false,
"attr": "autocorrect",
"reflectToAttr": false,
"docs": "Set the input's autocorrect property.",
"docsTags": [],
"default": "'off'",
"values": [
{
"value": "off",
"type": "string"
},
{
"value": "on",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "cancelButtonIcon",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "cancel-button-icon",
"reflectToAttr": false,
"docs": "Set the cancel button icon. Only applies to `md` mode.\nDefaults to `arrow-back-sharp`.",
"docsTags": [],
"default": "config.get('backButtonIcon', arrowBackSharp) as string",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "cancelButtonText",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "cancel-button-text",
"reflectToAttr": false,
"docs": "Set the the cancel button text. Only applies to `ios` mode.",
"docsTags": [],
"default": "'Cancel'",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "clearIcon",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "clear-icon",
"reflectToAttr": false,
"docs": "Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "debounce",
"type": "number | undefined",
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"mutable": false,
"attr": "debounce",
"reflectToAttr": false,
"docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the user cannot interact with the input.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "enterkeyhint",
"type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
"complexType": {
"original": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
"resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
"references": {}
},
"mutable": false,
"attr": "enterkeyhint",
"reflectToAttr": false,
"docs": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
"docsTags": [],
"values": [
{
"value": "done",
"type": "string"
},
{
"value": "enter",
"type": "string"
},
{
"value": "go",
"type": "string"
},
{
"value": "next",
"type": "string"
},
{
"value": "previous",
"type": "string"
},
{
"value": "search",
"type": "string"
},
{
"value": "send",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "inputmode",
"type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
"complexType": {
"original": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
"resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
"references": {}
},
"mutable": false,
"attr": "inputmode",
"reflectToAttr": false,
"docs": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
"docsTags": [],
"values": [
{
"value": "decimal",
"type": "string"
},
{
"value": "email",
"type": "string"
},
{
"value": "none",
"type": "string"
},
{
"value": "numeric",
"type": "string"
},
{
"value": "search",
"type": "string"
},
{
"value": "tel",
"type": "string"
},
{
"value": "text",
"type": "string"
},
{
"value": "url",
"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": "placeholder",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "placeholder",
"reflectToAttr": false,
"docs": "Set the input's placeholder.\n`placeholder` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
"docsTags": [],
"default": "'Search'",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "searchIcon",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "search-icon",
"reflectToAttr": false,
"docs": "The icon to use as the search icon. Defaults to `search-outline` in\n`ios` mode and `search-sharp` in `md` mode.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "showCancelButton",
"type": "\"always\" | \"focus\" | \"never\"",
"complexType": {
"original": "'never' | 'focus' | 'always'",
"resolved": "\"always\" | \"focus\" | \"never\"",
"references": {}
},
"mutable": false,
"attr": "show-cancel-button",
"reflectToAttr": false,
"docs": "Sets the behavior for the cancel button. Defaults to `\"never\"`.\nSetting to `\"focus\"` shows the cancel button on focus.\nSetting to `\"never\"` hides the cancel button.\nSetting to `\"always\"` shows the cancel button regardless\nof focus state.",
"docsTags": [],
"default": "'never'",
"values": [
{
"value": "always",
"type": "string"
},
{
"value": "focus",
"type": "string"
},
{
"value": "never",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "showClearButton",
"type": "\"always\" | \"focus\" | \"never\"",
"complexType": {
"original": "'never' | 'focus' | 'always'",
"resolved": "\"always\" | \"focus\" | \"never\"",
"references": {}
},
"mutable": false,
"attr": "show-clear-button",
"reflectToAttr": false,
"docs": "Sets the behavior for the clear button. Defaults to `\"focus\"`.\nSetting to `\"focus\"` shows the clear button on focus if the\ninput is not empty.\nSetting to `\"never\"` hides the clear button.\nSetting to `\"always\"` shows the clear button regardless\nof focus state, but only if the input is not empty.",
"docsTags": [],
"default": "'always'",
"values": [
{
"value": "always",
"type": "string"
},
{
"value": "focus",
"type": "string"
},
{
"value": "never",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "spellcheck",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "spellcheck",
"reflectToAttr": false,
"docs": "If `true`, enable spellcheck on the input.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "type",
"type": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
"complexType": {
"original": "'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url'",
"resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
"references": {}
},
"mutable": false,
"attr": "type",
"reflectToAttr": false,
"docs": "Set the type of the input.",
"docsTags": [],
"default": "'search'",
"values": [
{
"value": "email",
"type": "string"
},
{
"value": "number",
"type": "string"
},
{
"value": "password",
"type": "string"
},
{
"value": "search",
"type": "string"
},
{
"value": "tel",
"type": "string"
},
{
"value": "text",
"type": "string"
},
{
"value": "url",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "value",
"type": "null | string | undefined",
"complexType": {
"original": "string | null",
"resolved": "null | string | undefined",
"references": {}
},
"mutable": true,
"attr": "value",
"reflectToAttr": false,
"docs": "the value of the searchbar.",
"docsTags": [],
"default": "''",
"values": [
{
"type": "null"
},
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
}
],
"methods": [
{
"name": "getInputElement",
"returns": {
"type": "Promise<HTMLInputElement>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<HTMLInputElement>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"HTMLInputElement": {
"location": "global",
"id": ""
}
},
"return": "Promise<HTMLInputElement>"
},
"signature": "getInputElement() => Promise<HTMLInputElement>",
"parameters": [],
"docs": "Returns the native `<input>` element used under the hood.",
"docsTags": []
},
{
"name": "setFocus",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "/Users/alice/Code/ionic-framework/core::Promise"
}
},
"return": "Promise<void>"
},
"signature": "setFocus() => Promise<void>",
"parameters": [],
"docs": "Sets focus on the specified `ion-searchbar`. Use this method instead of the global\n`input.focus()`.",
"docsTags": []
}
],
"events": [
{
"event": "ionBlur",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the input loses focus.",
"docsTags": []
},
{
"event": "ionCancel",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the cancel button is clicked.",
"docsTags": []
},
{
"event": "ionChange",
"detail": "SearchbarChangeEventDetail",
"bubbles": true,
"complexType": {
"original": "SearchbarChangeEventDetail",
"resolved": "SearchbarChangeEventDetail",
"references": {
"SearchbarChangeEventDetail": {
"location": "import",
"path": "./searchbar-interface",
"id": "src/components/searchbar/searchbar-interface.ts::SearchbarChangeEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "The `ionChange` event is fired for `<ion-searchbar>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nThe `ionChange` event is fired when the value has been committed\nby the user. This can happen when the element loses focus or\nwhen the \"Enter\" key is pressed. `ionChange` can also fire\nwhen clicking the clear or cancel buttons.",
"docsTags": []
},
{
"event": "ionClear",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the clear input button is clicked.",
"docsTags": []
},
{
"event": "ionFocus",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the input has focus.",
"docsTags": []
},
{
"event": "ionInput",
"detail": "SearchbarInputEventDetail",
"bubbles": true,
"complexType": {
"original": "SearchbarInputEventDetail",
"resolved": "SearchbarInputEventDetail",
"references": {
"SearchbarInputEventDetail": {
"location": "import",
"path": "./searchbar-interface",
"id": "src/components/searchbar/searchbar-interface.ts::SearchbarInputEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the `value` of the `ion-searchbar` element has changed.",
"docsTags": []
}
],
"listeners": [],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the searchbar input"
},
{
"name": "--border-radius",
"annotation": "prop",
"docs": "Border radius of the searchbar input"
},
{
"name": "--box-shadow",
"annotation": "prop",
"docs": "Box shadow of the searchbar input"
},
{
"name": "--cancel-button-color",
"annotation": "prop",
"docs": "Color of the searchbar cancel button"
},
{
"name": "--clear-button-color",
"annotation": "prop",
"docs": "Color of the searchbar clear button"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Color of the searchbar text"
},
{
"name": "--icon-color",
"annotation": "prop",
"docs": "Color of the searchbar icon"
},
{
"name": "--placeholder-color",
"annotation": "prop",
"docs": "Color of the searchbar placeholder"
},
{
"name": "--placeholder-font-style",
"annotation": "prop",
"docs": "Font style of the searchbar placeholder"
},
{
"name": "--placeholder-font-weight",
"annotation": "prop",
"docs": "Font weight of the searchbar placeholder"
},
{
"name": "--placeholder-opacity",
"annotation": "prop",
"docs": "Opacity of the searchbar placeholder"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [
"ion-icon"
],
"dependencyGraph": {
"ion-searchbar": [
"ion-icon"
]
}
},
{
"filePath": "./src/components/segment/segment.tsx",
"encapsulation": "shadow",
"tag": "ion-segment",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the user cannot interact with the segment.",
"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": "scrollable",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "scrollable",
"reflectToAttr": false,
"docs": "If `true`, the segment buttons will overflow and the user can swipe to see them.\nIn addition, this will disable the gesture to drag the indicator between the buttons\nin order to swipe to see hidden buttons.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "selectOnFocus",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "select-on-focus",
"reflectToAttr": false,
"docs": "If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element.\nIf `false`, keyboard navigation will only focus the `ion-segment-button` element.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "swipeGesture",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "swipe-gesture",
"reflectToAttr": false,
"docs": "If `true`, users will be able to swipe between segment buttons to activate them.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "value",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": true,
"attr": "value",
"reflectToAttr": false,
"docs": "the value of the segment.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
}
],
"methods": [],
"events": [
{
"event": "ionChange",
"detail": "SegmentChangeEventDetail",
"bubbles": true,
"complexType": {
"original": "SegmentChangeEventDetail",
"resolved": "SegmentChangeEventDetail",
"references": {
"SegmentChangeEventDetail": {
"location": "import",
"path": "./segment-interface",
"id": "src/components/segment/segment-interface.ts::SegmentChangeEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the value property has changed and any\ndragging pointer has been released from `ion-segment`.",
"docsTags": []
}
],
"listeners": [
{
"event": "keydown",
"capture": false,
"passive": false
}
],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the segment button"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/segment-button/segment-button.tsx",
"encapsulation": "shadow",
"tag": "ion-segment-button",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "part",
"text": "native - The native HTML button element that wraps all child elements."
},
{
"name": "part",
"text": "indicator - The indicator displayed on the checked segment button."
},
{
"name": "part",
"text": "indicator-background - The background element for the indicator displayed on the checked segment button."
}
],
"usage": {},
"props": [
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the user cannot interact with the segment button.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "layout",
"type": "\"icon-bottom\" | \"icon-end\" | \"icon-hide\" | \"icon-start\" | \"icon-top\" | \"label-hide\" | undefined",
"complexType": {
"original": "SegmentButtonLayout",
"resolved": "\"icon-bottom\" | \"icon-end\" | \"icon-hide\" | \"icon-start\" | \"icon-top\" | \"label-hide\" | undefined",
"references": {
"SegmentButtonLayout": {
"location": "import",
"path": "./segment-button-interface",
"id": "/Users/alice/Code/ionic-framework/core::SegmentButtonLayout"
}
}
},
"mutable": false,
"attr": "layout",
"reflectToAttr": false,
"docs": "Set the layout of the text and icon in the segment.",
"docsTags": [],
"default": "'icon-top'",
"values": [
{
"value": "icon-bottom",
"type": "string"
},
{
"value": "icon-end",
"type": "string"
},
{
"value": "icon-hide",
"type": "string"
},
{
"value": "icon-start",
"type": "string"
},
{
"value": "icon-top",
"type": "string"
},
{
"value": "label-hide",
"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": "type",
"type": "\"button\" | \"reset\" | \"submit\"",
"complexType": {
"original": "'submit' | 'reset' | 'button'",
"resolved": "\"button\" | \"reset\" | \"submit\"",
"references": {}
},
"mutable": false,
"attr": "type",
"reflectToAttr": false,
"docs": "The type of the button.",
"docsTags": [],
"default": "'button'",
"values": [
{
"value": "button",
"type": "string"
},
{
"value": "reset",
"type": "string"
},
{
"value": "submit",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "value",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "value",
"reflectToAttr": false,
"docs": "The value of the segment button.",
"docsTags": [],
"default": "'ion-sb-' + ids++",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the segment button"
},
{
"name": "--background-checked",
"annotation": "prop",
"docs": "Background of the checked segment button"
},
{
"name": "--background-focused",
"annotation": "prop",
"docs": "Background of the segment button when focused with the tab key"
},
{
"name": "--background-focused-opacity",
"annotation": "prop",
"docs": "Opacity of the segment button background when focused with the tab key"
},
{
"name": "--background-hover",
"annotation": "prop",
"docs": "Background of the segment button on hover"
},
{
"name": "--background-hover-opacity",
"annotation": "prop",
"docs": "Opacity of the segment button background on hover"
},
{
"name": "--border-color",
"annotation": "prop",
"docs": "Color of the segment button border"
},
{
"name": "--border-radius",
"annotation": "prop",
"docs": "Radius of the segment button border"
},
{
"name": "--border-style",
"annotation": "prop",
"docs": "Style of the segment button border"
},
{
"name": "--border-width",
"annotation": "prop",
"docs": "Width of the segment button border"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Color of the segment button"
},
{
"name": "--color-checked",
"annotation": "prop",
"docs": "Color of the checked segment button"
},
{
"name": "--color-focused",
"annotation": "prop",
"docs": "Color of the segment button when focused with the tab key"
},
{
"name": "--color-hover",
"annotation": "prop",
"docs": "Color of the segment button on hover"
},
{
"name": "--indicator-box-shadow",
"annotation": "prop",
"docs": "Box shadow on the indicator for the checked segment button"
},
{
"name": "--indicator-color",
"annotation": "prop",
"docs": "Color of the indicator for the checked segment button"
},
{
"name": "--indicator-height",
"annotation": "prop",
"docs": "Height of the indicator for the checked segment button"
},
{
"name": "--indicator-transform",
"annotation": "prop",
"docs": "Transform of the indicator for the checked segment button"
},
{
"name": "--indicator-transition",
"annotation": "prop",
"docs": "Transition of the indicator for the checked segment button"
},
{
"name": "--margin-bottom",
"annotation": "prop",
"docs": "Bottom margin of the segment button"
},
{
"name": "--margin-end",
"annotation": "prop",
"docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button"
},
{
"name": "--margin-start",
"annotation": "prop",
"docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button"
},
{
"name": "--margin-top",
"annotation": "prop",
"docs": "Top margin of the segment button"
},
{
"name": "--padding-bottom",
"annotation": "prop",
"docs": "Bottom padding of the segment button"
},
{
"name": "--padding-end",
"annotation": "prop",
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button"
},
{
"name": "--padding-start",
"annotation": "prop",
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button"
},
{
"name": "--padding-top",
"annotation": "prop",
"docs": "Top padding of the segment button"
},
{
"name": "--transition",
"annotation": "prop",
"docs": "Transition of the segment button"
}
],
"slots": [],
"parts": [
{
"name": "indicator",
"docs": "The indicator displayed on the checked segment button."
},
{
"name": "indicator-background",
"docs": "The background element for the indicator displayed on the checked segment button."
},
{
"name": "native",
"docs": "The native HTML button element that wraps all child elements."
}
],
"dependents": [],
"dependencies": [
"ion-ripple-effect"
],
"dependencyGraph": {
"ion-segment-button": [
"ion-ripple-effect"
]
}
},
{
"filePath": "./src/components/select/select.tsx",
"encapsulation": "shadow",
"tag": "ion-select",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "part",
"text": "placeholder - The text displayed in the select when there is no value."
},
{
"name": "part",
"text": "text - The displayed value of the select."
},
{
"name": "part",
"text": "icon - The select icon container."
}
],
"usage": {},
"props": [
{
"name": "cancelText",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "cancel-text",
"reflectToAttr": false,
"docs": "The text to display on the cancel button.",
"docsTags": [],
"default": "'Cancel'",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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).\n\nThis property is only available when using the modern select syntax.",
"docsTags": [],
"values": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "compareWith",
"type": "((currentValue: any, compareValue: any) => boolean) | null | string | undefined",
"complexType": {
"original": "string | SelectCompareFn | null",
"resolved": "((currentValue: any, compareValue: any) => boolean) | null | string | undefined",
"references": {
"SelectCompareFn": {
"location": "import",
"path": "./select-interface",
"id": "src/components/select/select-interface.ts::SelectCompareFn"
}
}
},
"mutable": false,
"attr": "compare-with",
"reflectToAttr": false,
"docs": "A property name or function used to compare object values",
"docsTags": [],
"values": [
{
"type": "((currentValue: any, compareValue: any) => boolean)"
},
{
"type": "null"
},
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the user cannot interact with the select.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "fill",
"type": "\"outline\" | \"solid\" | undefined",
"complexType": {
"original": "'outline' | 'solid'",
"resolved": "\"outline\" | \"solid\" | undefined",
"references": {}
},
"mutable": false,
"attr": "fill",
"reflectToAttr": false,
"docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
"docsTags": [],
"values": [
{
"value": "outline",
"type": "string"
},
{
"value": "solid",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "interface",
"type": "\"action-sheet\" | \"alert\" | \"popover\"",
"complexType": {
"original": "SelectInterface",
"resolved": "\"action-sheet\" | \"alert\" | \"popover\"",
"references": {
"SelectInterface": {
"location": "import",
"path": "./select-interface",
"id": "/Users/alice/Code/ionic-framework/core::SelectInterface"
}
}
},
"mutable": false,
"attr": "interface",
"reflectToAttr": false,
"docs": "The interface the select should use: `action-sheet`, `popover` or `alert`.",
"docsTags": [],
"default": "'alert'",
"values": [
{
"value": "action-sheet",
"type": "string"
},
{
"value": "alert",
"type": "string"
},
{
"value": "popover",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "interfaceOptions",
"type": "any",
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"mutable": false,
"attr": "interface-options",
"reflectToAttr": false,
"docs": "Any additional options that the `alert`, `action-sheet` or `popover` interface\ncan take. See the [ion-alert docs](./alert), the\n[ion-action-sheet docs](./action-sheet) and the\n[ion-popover docs](./popover) for the\ncreate options for each interface.\n\nNote: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.",
"docsTags": [],
"default": "{}",
"values": [
{
"type": "any"
}
],
"optional": false,
"required": false
},
{
"name": "justify",
"type": "\"end\" | \"space-between\" | \"start\"",
"complexType": {
"original": "'start' | 'end' | 'space-between'",
"resolved": "\"end\" | \"space-between\" | \"start\"",
"references": {}
},
"mutable": false,
"attr": "justify",
"reflectToAttr": false,
"docs": "How to pack the label and select within a line.\n`justify` does not apply when the label and select\nare on different lines when `labelPlacement` is set to\n`\"floating\"` or `\"stacked\"`.\n`\"start\"`: The label and select will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and select will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and select will appear on opposite\nends of the line with space between the two elements.",
"docsTags": [],
"default": "'space-between'",
"values": [
{
"value": "end",
"type": "string"
},
{
"value": "space-between",
"type": "string"
},
{
"value": "start",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "label",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "label",
"reflectToAttr": false,
"docs": "The visible label associated with the select.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "labelPlacement",
"type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\" | undefined",
"complexType": {
"original": "'start' | 'end' | 'floating' | 'stacked' | 'fixed'",
"resolved": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\" | undefined",
"references": {}
},
"mutable": false,
"attr": "label-placement",
"reflectToAttr": false,
"docs": "Where to place the label relative to the select.\n`\"start\"`: The label will appear to the left of the select in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the select in LTR and to the left in RTL.\n`\"floating\"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select.\n`\"stacked\"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\nWhen using `\"floating\"` or `\"stacked\"` we recommend initializing the select with either a `value` or a `placeholder`.",
"docsTags": [],
"default": "'start'",
"values": [
{
"value": "end",
"type": "string"
},
{
"value": "fixed",
"type": "string"
},
{
"value": "floating",
"type": "string"
},
{
"value": "stacked",
"type": "string"
},
{
"value": "start",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "legacy",
"type": "boolean | undefined",
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"mutable": false,
"attr": "legacy",
"reflectToAttr": false,
"docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
"docsTags": [],
"values": [
{
"type": "boolean"
},
{
"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": "multiple",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "multiple",
"reflectToAttr": false,
"docs": "If `true`, the select can accept multiple values.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "name",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"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": "okText",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "ok-text",
"reflectToAttr": false,
"docs": "The text to display on the ok button.",
"docsTags": [],
"default": "'OK'",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "placeholder",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "placeholder",
"reflectToAttr": false,
"docs": "The text to display when the select is empty.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "selectedText",
"type": "null | string | undefined",
"complexType": {
"original": "string | null",
"resolved": "null | string | undefined",
"references": {}
},
"mutable": false,
"attr": "selected-text",
"reflectToAttr": false,
"docs": "The text to display instead of the selected option's value.",
"docsTags": [],
"values": [
{
"type": "null"
},
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "shape",
"type": "\"round\" | undefined",
"complexType": {
"original": "'round'",
"resolved": "\"round\" | undefined",
"references": {}
},
"mutable": false,
"attr": "shape",
"reflectToAttr": false,
"docs": "The shape of the select. If \"round\" it will have an increased border radius.",
"docsTags": [],
"values": [
{
"value": "round",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "value",
"type": "any",
"complexType": {
"original": "any | null",
"resolved": "any",
"references": {}
},
"mutable": true,
"attr": "value",
"reflectToAttr": false,
"docs": "The value of the select.",
"docsTags": [],
"values": [
{
"type": "any"
}
],
"optional": true,
"required": false
}
],
"methods": [
{
"name": "open",
"returns": {
"type": "Promise<any>",
"docs": ""
},
"complexType": {
"signature": "(event?: UIEvent) => Promise<any>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "event The user interface event that called the open."
}
],
"text": "The user interface event that called the open."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"UIEvent": {
"location": "global",
"id": ""
},
"HTMLElement": {
"location": "global",
"id": ""
}
},
"return": "Promise<any>"
},
"signature": "open(event?: UIEvent) => Promise<any>",
"parameters": [],
"docs": "Open the select overlay. The overlay is either an alert, action sheet, or popover,\ndepending on the `interface` property on the `ion-select`.",
"docsTags": [
{
"name": "param",
"text": "event The user interface event that called the open."
}
]
}
],
"events": [
{
"event": "ionBlur",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the select loses focus.",
"docsTags": []
},
{
"event": "ionCancel",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the selection is cancelled.",
"docsTags": []
},
{
"event": "ionChange",
"detail": "SelectChangeEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "SelectChangeEventDetail",
"resolved": "SelectChangeEventDetail<any>",
"references": {
"SelectChangeEventDetail": {
"location": "import",
"path": "./select-interface",
"id": "src/components/select/select-interface.ts::SelectChangeEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the value has changed.",
"docsTags": []
},
{
"event": "ionDismiss",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the overlay is dismissed.",
"docsTags": []
},
{
"event": "ionFocus",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the select has focus.",
"docsTags": []
}
],
"listeners": [],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the select"
},
{
"name": "--border-color Color of the select border",
"annotation": "prop",
"docs": ""
},
{
"name": "--border-radius Radius of the select border",
"annotation": "prop",
"docs": ""
},
{
"name": "--border-style Style of the select border",
"annotation": "prop",
"docs": ""
},
{
"name": "--border-width Width of the select border",
"annotation": "prop",
"docs": ""
},
{
"name": "--highlight-color-focused The color of the highlight on the select when focused",
"annotation": "prop",
"docs": ""
},
{
"name": "--highlight-color-invalid The color of the highlight on the select when invalid",
"annotation": "prop",
"docs": ""
},
{
"name": "--highlight-color-valid The color of the highlight on the select when valid",
"annotation": "prop",
"docs": ""
},
{
"name": "--padding-bottom",
"annotation": "prop",
"docs": "Bottom padding of the select"
},
{
"name": "--padding-end",
"annotation": "prop",
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select"
},
{
"name": "--padding-start",
"annotation": "prop",
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select"
},
{
"name": "--padding-top",
"annotation": "prop",
"docs": "Top padding of the select"
},
{
"name": "--placeholder-color",
"annotation": "prop",
"docs": "Color of the select placeholder text"
},
{
"name": "--placeholder-opacity",
"annotation": "prop",
"docs": "Opacity of the select placeholder text"
},
{
"name": "--ripple-color",
"annotation": "prop",
"docs": "The color of the ripple effect on MD mode."
}
],
"slots": [],
"parts": [
{
"name": "icon",
"docs": "The select icon container."
},
{
"name": "placeholder",
"docs": "The text displayed in the select when there is no value."
},
{
"name": "text",
"docs": "The displayed value of the select."
}
],
"dependents": [],
"dependencies": [
"ion-select-popover",
"ion-popover",
"ion-action-sheet",
"ion-alert",
"ion-icon"
],
"dependencyGraph": {
"ion-select": [
"ion-select-popover",
"ion-popover",
"ion-action-sheet",
"ion-alert",
"ion-icon"
],
"ion-select-popover": [
"ion-item",
"ion-checkbox",
"ion-label",
"ion-radio-group",
"ion-radio",
"ion-list",
"ion-list-header"
],
"ion-item": [
"ion-icon",
"ion-ripple-effect",
"ion-note"
],
"ion-popover": [
"ion-backdrop"
],
"ion-action-sheet": [
"ion-backdrop",
"ion-icon",
"ion-ripple-effect"
],
"ion-alert": [
"ion-ripple-effect",
"ion-backdrop"
]
}
},
{
"filePath": "./src/components/select-option/select-option.tsx",
"encapsulation": "shadow",
"tag": "ion-select-option",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the user cannot interact with the select option. This property does not apply when `interface=\"action-sheet\"` as `ion-action-sheet` does not allow for disabled buttons.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "value",
"type": "any",
"complexType": {
"original": "any | null",
"resolved": "any",
"references": {}
},
"mutable": false,
"attr": "value",
"reflectToAttr": false,
"docs": "The text value of the option.",
"docsTags": [],
"values": [
{
"type": "any"
}
],
"optional": true,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/skeleton-text/skeleton-text.tsx",
"encapsulation": "shadow",
"tag": "ion-skeleton-text",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "animated",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "animated",
"reflectToAttr": false,
"docs": "If `true`, the skeleton text will animate.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the skeleton text"
},
{
"name": "--background-rgb",
"annotation": "prop",
"docs": "Background of the skeleton text in rgb format"
},
{
"name": "--border-radius",
"annotation": "prop",
"docs": "Border radius of the skeleton text"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/spinner/spinner.tsx",
"encapsulation": "shadow",
"tag": "ion-spinner",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "duration",
"type": "number | undefined",
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"mutable": false,
"attr": "duration",
"reflectToAttr": false,
"docs": "Duration of the spinner animation in milliseconds. The default varies based on the spinner.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "name",
"type": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | undefined",
"complexType": {
"original": "SpinnerTypes",
"resolved": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | undefined",
"references": {
"SpinnerTypes": {
"location": "import",
"path": "./spinner-configs",
"id": "/Users/alice/Code/ionic-framework/core::SpinnerTypes"
}
}
},
"mutable": false,
"attr": "name",
"reflectToAttr": false,
"docs": "The name of the SVG spinner to use. If a name is not provided, the platform's default\nspinner will be used.",
"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": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "paused",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "paused",
"reflectToAttr": false,
"docs": "If `true`, the spinner's animation will be paused.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [
{
"name": "--color",
"annotation": "prop",
"docs": "Color of the spinner"
}
],
"slots": [],
"parts": [],
"dependents": [
"ion-infinite-scroll-content",
"ion-loading",
"ion-refresher-content"
],
"dependencies": [],
"dependencyGraph": {
"ion-infinite-scroll-content": [
"ion-spinner"
],
"ion-loading": [
"ion-spinner"
],
"ion-refresher-content": [
"ion-spinner"
]
}
},
{
"filePath": "./src/components/split-pane/split-pane.tsx",
"encapsulation": "shadow",
"tag": "ion-split-pane",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "contentId",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "content-id",
"reflectToAttr": true,
"docs": "The `id` of the main content. When using\na router this is typically `ion-router-outlet`.\nWhen not using a router, this is typically\nyour main view's `ion-content`. This is not the\nid of the `ion-content` inside of your `ion-menu`.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the split pane will be hidden.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "when",
"type": "boolean | string",
"complexType": {
"original": "string | boolean",
"resolved": "boolean | string",
"references": {}
},
"mutable": false,
"attr": "when",
"reflectToAttr": false,
"docs": "When the split-pane should be shown.\nCan be a CSS media query expression, or a shortcut expression.\nCan also be a boolean expression.",
"docsTags": [],
"default": "QUERY['lg']",
"values": [
{
"type": "boolean"
},
{
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [
{
"event": "ionSplitPaneVisible",
"detail": "{ visible: boolean; }",
"bubbles": true,
"complexType": {
"original": "{ visible: boolean }",
"resolved": "{ visible: boolean; }",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Expression to be called when the split-pane visibility has changed",
"docsTags": []
}
],
"listeners": [],
"styles": [
{
"name": "--border",
"annotation": "prop",
"docs": "Border between panes"
},
{
"name": "--side-max-width",
"annotation": "prop",
"docs": "Maximum width of the side pane. Does not apply when split pane is collapsed."
},
{
"name": "--side-min-width",
"annotation": "prop",
"docs": "Minimum width of the side pane. Does not apply when split pane is collapsed."
},
{
"name": "--side-width",
"annotation": "prop",
"docs": "Width of the side pane. Does not apply when split pane is collapsed."
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/tab/tab.tsx",
"encapsulation": "shadow",
"tag": "ion-tab",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "component",
"type": "Function | HTMLElement | null | string | undefined",
"complexType": {
"original": "ComponentRef",
"resolved": "Function | HTMLElement | null | string | undefined",
"references": {
"ComponentRef": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::ComponentRef"
}
}
},
"mutable": false,
"attr": "component",
"reflectToAttr": false,
"docs": "The component to display inside of the tab.",
"docsTags": [],
"values": [
{
"type": "Function"
},
{
"type": "HTMLElement"
},
{
"type": "null"
},
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "tab",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "tab",
"reflectToAttr": false,
"docs": "A tab id must be provided for each `ion-tab`. It's used internally to reference\nthe selected tab or by the router to switch between them.",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": false,
"required": true
}
],
"methods": [
{
"name": "setActive",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<void>"
},
"signature": "setActive() => Promise<void>",
"parameters": [],
"docs": "Set the active component for the tab",
"docsTags": []
}
],
"events": [],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/tab-bar/tab-bar.tsx",
"encapsulation": "shadow",
"tag": "ion-tab-bar",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"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": "selectedTab",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "selected-tab",
"reflectToAttr": false,
"docs": "The selected tab component",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "translucent",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "translucent",
"reflectToAttr": false,
"docs": "If `true`, the tab bar 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
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the tab bar"
},
{
"name": "--border",
"annotation": "prop",
"docs": "Border of the tab bar"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Color of the tab bar"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/tab-button/tab-button.tsx",
"encapsulation": "shadow",
"tag": "ion-tab-button",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "part",
"text": "native - The native HTML anchor element that wraps all child elements."
}
],
"usage": {},
"props": [
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the user cannot interact with the tab button.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "download",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "download",
"reflectToAttr": false,
"docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "href",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "href",
"reflectToAttr": false,
"docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "layout",
"type": "\"icon-bottom\" | \"icon-end\" | \"icon-hide\" | \"icon-start\" | \"icon-top\" | \"label-hide\" | undefined",
"complexType": {
"original": "TabButtonLayout",
"resolved": "\"icon-bottom\" | \"icon-end\" | \"icon-hide\" | \"icon-start\" | \"icon-top\" | \"label-hide\" | undefined",
"references": {
"TabButtonLayout": {
"location": "import",
"path": "../tab-bar/tab-bar-interface",
"id": "/Users/alice/Code/ionic-framework/core::TabButtonLayout"
}
}
},
"mutable": true,
"attr": "layout",
"reflectToAttr": false,
"docs": "Set the layout of the text and icon in the tab bar.\nIt defaults to `\"icon-top\"`.",
"docsTags": [],
"values": [
{
"value": "icon-bottom",
"type": "string"
},
{
"value": "icon-end",
"type": "string"
},
{
"value": "icon-hide",
"type": "string"
},
{
"value": "icon-start",
"type": "string"
},
{
"value": "icon-top",
"type": "string"
},
{
"value": "label-hide",
"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": "rel",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "rel",
"reflectToAttr": false,
"docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "selected",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": true,
"attr": "selected",
"reflectToAttr": false,
"docs": "The selected tab component",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "tab",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "tab",
"reflectToAttr": false,
"docs": "A tab id must be provided for each `ion-tab`. It's used internally to reference\nthe selected tab or by the router to switch between them.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "target",
"type": "string | undefined",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "target",
"reflectToAttr": false,
"docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [
{
"event": "ionTabBarChanged",
"target": "window",
"capture": false,
"passive": false
}
],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the tab button"
},
{
"name": "--background-focused",
"annotation": "prop",
"docs": "Background of the tab button when focused with the tab key"
},
{
"name": "--background-focused-opacity",
"annotation": "prop",
"docs": "Opacity of the tab button background when focused with the tab key"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Color of the tab button"
},
{
"name": "--color-focused",
"annotation": "prop",
"docs": "Color of the tab button when focused with the tab key"
},
{
"name": "--color-selected",
"annotation": "prop",
"docs": "Color of the selected tab button"
},
{
"name": "--padding-bottom",
"annotation": "prop",
"docs": "Bottom padding of the tab button"
},
{
"name": "--padding-end",
"annotation": "prop",
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button"
},
{
"name": "--padding-start",
"annotation": "prop",
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button"
},
{
"name": "--padding-top",
"annotation": "prop",
"docs": "Top padding of the tab button"
},
{
"name": "--ripple-color",
"annotation": "prop",
"docs": "Color of the button ripple effect"
}
],
"slots": [],
"parts": [
{
"name": "native",
"docs": "The native HTML anchor element that wraps all child elements."
}
],
"dependents": [],
"dependencies": [
"ion-ripple-effect"
],
"dependencyGraph": {
"ion-tab-button": [
"ion-ripple-effect"
]
}
},
{
"filePath": "./src/components/tabs/tabs.tsx",
"encapsulation": "shadow",
"tag": "ion-tabs",
"docs": "",
"docsTags": [
{
"name": "slot",
"text": "- Content is placed between the named slots if provided without a slot."
},
{
"name": "slot",
"text": "top - Content is placed at the top of the screen."
},
{
"name": "slot",
"text": "bottom - Content is placed at the bottom of the screen."
}
],
"usage": {},
"props": [],
"methods": [
{
"name": "getSelected",
"returns": {
"type": "Promise<string | undefined>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<string | undefined>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
}
},
"return": "Promise<string | undefined>"
},
"signature": "getSelected() => Promise<string | undefined>",
"parameters": [],
"docs": "Get the currently selected tab.",
"docsTags": []
},
{
"name": "getTab",
"returns": {
"type": "Promise<HTMLIonTabElement | undefined>",
"docs": ""
},
"complexType": {
"signature": "(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
}
],
"text": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"HTMLIonTabElement": {
"location": "global",
"id": "src/components.d.ts::HTMLIonTabElement"
}
},
"return": "Promise<HTMLIonTabElement | undefined>"
},
"signature": "getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>",
"parameters": [],
"docs": "Get a specific tab by the value of its `tab` property or an element reference.",
"docsTags": [
{
"name": "param",
"text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
}
]
},
{
"name": "select",
"returns": {
"type": "Promise<boolean>",
"docs": ""
},
"complexType": {
"signature": "(tab: string | HTMLIonTabElement) => Promise<boolean>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
}
],
"text": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"HTMLIonTabElement": {
"location": "global",
"id": "src/components.d.ts::HTMLIonTabElement"
}
},
"return": "Promise<boolean>"
},
"signature": "select(tab: string | HTMLIonTabElement) => Promise<boolean>",
"parameters": [],
"docs": "Select a tab by the value of its `tab` property or an element reference.",
"docsTags": [
{
"name": "param",
"text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
}
]
}
],
"events": [
{
"event": "ionTabsDidChange",
"detail": "{ tab: string; }",
"bubbles": false,
"complexType": {
"original": "{ tab: string }",
"resolved": "{ tab: string; }",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the navigation has finished transitioning to a new component.",
"docsTags": []
},
{
"event": "ionTabsWillChange",
"detail": "{ tab: string; }",
"bubbles": false,
"complexType": {
"original": "{ tab: string }",
"resolved": "{ tab: string; }",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the navigation is about to transition to a new component.",
"docsTags": []
}
],
"listeners": [],
"styles": [],
"slots": [
{
"name": "",
"docs": "Content is placed between the named slots if provided without a slot."
},
{
"name": "bottom",
"docs": "Content is placed at the bottom of the screen."
},
{
"name": "top",
"docs": "Content is placed at the top of the screen."
}
],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/text/text.tsx",
"encapsulation": "shadow",
"tag": "ion-text",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"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": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/textarea/textarea.tsx",
"encapsulation": "scoped",
"tag": "ion-textarea",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
}
],
"usage": {},
"props": [
{
"name": "autoGrow",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "auto-grow",
"reflectToAttr": true,
"docs": "If `true`, the textarea container will grow and shrink based\non the contents of the textarea.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "autocapitalize",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "autocapitalize",
"reflectToAttr": false,
"docs": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.",
"docsTags": [],
"default": "'none'",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "autofocus",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "autofocus",
"reflectToAttr": false,
"docs": "This Boolean attribute lets you specify that a form control should have input focus when the page loads.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "clearOnEdit",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "clear-on-edit",
"reflectToAttr": false,
"docs": "If `true`, the value will be cleared after focus upon edit.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "cols",
"type": "number | undefined",
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"mutable": false,
"attr": "cols",
"reflectToAttr": false,
"docs": "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "counter",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "counter",
"reflectToAttr": false,
"docs": "If `true`, a character counter will display the ratio of characters used and the total character limit.\nDevelopers must also set the `maxlength` property for the counter to be calculated correctly.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "counterFormatter",
"type": "((inputLength: number, maxLength: number) => string) | undefined",
"complexType": {
"original": "(inputLength: number, maxLength: number) => string",
"resolved": "((inputLength: number, maxLength: number) => string) | undefined",
"references": {}
},
"mutable": false,
"reflectToAttr": false,
"docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
"docsTags": [],
"values": [
{
"type": "((inputLength: number, maxLength: number) => string)"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "debounce",
"type": "number | undefined",
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"mutable": false,
"attr": "debounce",
"reflectToAttr": false,
"docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the user cannot interact with the textarea.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "enterkeyhint",
"type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
"complexType": {
"original": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
"resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
"references": {}
},
"mutable": false,
"attr": "enterkeyhint",
"reflectToAttr": false,
"docs": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
"docsTags": [],
"values": [
{
"value": "done",
"type": "string"
},
{
"value": "enter",
"type": "string"
},
{
"value": "go",
"type": "string"
},
{
"value": "next",
"type": "string"
},
{
"value": "previous",
"type": "string"
},
{
"value": "search",
"type": "string"
},
{
"value": "send",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "errorText",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "error-text",
"reflectToAttr": false,
"docs": "Text that is placed under the textarea and displayed when an error is detected.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "fill",
"type": "\"outline\" | \"solid\" | undefined",
"complexType": {
"original": "'outline' | 'solid'",
"resolved": "\"outline\" | \"solid\" | undefined",
"references": {}
},
"mutable": false,
"attr": "fill",
"reflectToAttr": false,
"docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
"docsTags": [],
"values": [
{
"value": "outline",
"type": "string"
},
{
"value": "solid",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "helperText",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "helper-text",
"reflectToAttr": false,
"docs": "Text that is placed under the textarea and displayed when no error is detected.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "inputmode",
"type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
"complexType": {
"original": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
"resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
"references": {}
},
"mutable": false,
"attr": "inputmode",
"reflectToAttr": false,
"docs": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
"docsTags": [],
"values": [
{
"value": "decimal",
"type": "string"
},
{
"value": "email",
"type": "string"
},
{
"value": "none",
"type": "string"
},
{
"value": "numeric",
"type": "string"
},
{
"value": "search",
"type": "string"
},
{
"value": "tel",
"type": "string"
},
{
"value": "text",
"type": "string"
},
{
"value": "url",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "label",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "label",
"reflectToAttr": false,
"docs": "The visible label associated with the textarea.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "labelPlacement",
"type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
"complexType": {
"original": "'start' | 'end' | 'floating' | 'stacked' | 'fixed'",
"resolved": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
"references": {}
},
"mutable": false,
"attr": "label-placement",
"reflectToAttr": false,
"docs": "Where to place the label relative to the textarea.\n`\"start\"`: The label will appear to the left of the textarea in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the textarea in LTR and to the left in RTL.\n`\"floating\"`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea.\n`\"stacked\"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
"docsTags": [],
"default": "'start'",
"values": [
{
"value": "end",
"type": "string"
},
{
"value": "fixed",
"type": "string"
},
{
"value": "floating",
"type": "string"
},
{
"value": "stacked",
"type": "string"
},
{
"value": "start",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "legacy",
"type": "boolean | undefined",
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"mutable": false,
"attr": "legacy",
"reflectToAttr": false,
"docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
"docsTags": [],
"values": [
{
"type": "boolean"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "maxlength",
"type": "number | undefined",
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"mutable": false,
"attr": "maxlength",
"reflectToAttr": false,
"docs": "This attribute specifies the maximum number of characters that the user can enter.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "minlength",
"type": "number | undefined",
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"mutable": false,
"attr": "minlength",
"reflectToAttr": false,
"docs": "This attribute specifies the minimum number of characters that the user can enter.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"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": "name",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"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": "placeholder",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "placeholder",
"reflectToAttr": false,
"docs": "Instructional text that shows before the input has a value.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "readonly",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "readonly",
"reflectToAttr": false,
"docs": "If `true`, the user cannot modify the value.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "required",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "required",
"reflectToAttr": false,
"docs": "If `true`, the user must fill in a value before submitting a form.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "rows",
"type": "number | undefined",
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"mutable": false,
"attr": "rows",
"reflectToAttr": false,
"docs": "The number of visible text lines for the control.",
"docsTags": [],
"values": [
{
"type": "number"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "shape",
"type": "\"round\" | undefined",
"complexType": {
"original": "'round'",
"resolved": "\"round\" | undefined",
"references": {}
},
"mutable": false,
"attr": "shape",
"reflectToAttr": false,
"docs": "The shape of the textarea. If \"round\" it will have an increased border radius.",
"docsTags": [],
"values": [
{
"value": "round",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "spellcheck",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "spellcheck",
"reflectToAttr": false,
"docs": "If `true`, the element will have its spelling and grammar checked.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "value",
"type": "null | string | undefined",
"complexType": {
"original": "string | null",
"resolved": "null | string | undefined",
"references": {}
},
"mutable": true,
"attr": "value",
"reflectToAttr": false,
"docs": "The value of the textarea.",
"docsTags": [],
"default": "''",
"values": [
{
"type": "null"
},
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "wrap",
"type": "\"hard\" | \"off\" | \"soft\" | undefined",
"complexType": {
"original": "'hard' | 'soft' | 'off'",
"resolved": "\"hard\" | \"off\" | \"soft\" | undefined",
"references": {}
},
"mutable": false,
"attr": "wrap",
"reflectToAttr": false,
"docs": "Indicates how the control wraps text.",
"docsTags": [],
"values": [
{
"value": "hard",
"type": "string"
},
{
"value": "off",
"type": "string"
},
{
"value": "soft",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
}
],
"methods": [
{
"name": "getInputElement",
"returns": {
"type": "Promise<HTMLTextAreaElement>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<HTMLTextAreaElement>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"HTMLTextAreaElement": {
"location": "global",
"id": ""
}
},
"return": "Promise<HTMLTextAreaElement>"
},
"signature": "getInputElement() => Promise<HTMLTextAreaElement>",
"parameters": [],
"docs": "Returns the native `<textarea>` element used under the hood.",
"docsTags": []
},
{
"name": "setFocus",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "/Users/alice/Code/ionic-framework/core::Promise"
}
},
"return": "Promise<void>"
},
"signature": "setFocus() => Promise<void>",
"parameters": [],
"docs": "Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global\n`textarea.focus()`.",
"docsTags": []
}
],
"events": [
{
"event": "ionBlur",
"detail": "FocusEvent",
"bubbles": true,
"complexType": {
"original": "FocusEvent",
"resolved": "FocusEvent",
"references": {
"FocusEvent": {
"location": "global",
"id": ""
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the input loses focus.",
"docsTags": []
},
{
"event": "ionChange",
"detail": "TextareaChangeEventDetail",
"bubbles": true,
"complexType": {
"original": "TextareaChangeEventDetail",
"resolved": "TextareaChangeEventDetail",
"references": {
"TextareaChangeEventDetail": {
"location": "import",
"path": "./textarea-interface",
"id": "src/components/textarea/textarea-interface.ts::TextareaChangeEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "The `ionChange` event is fired for `<ion-textarea>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nThe `ionChange` event is fired when the element loses focus after its value\nhas been modified.",
"docsTags": []
},
{
"event": "ionFocus",
"detail": "FocusEvent",
"bubbles": true,
"complexType": {
"original": "FocusEvent",
"resolved": "FocusEvent",
"references": {
"FocusEvent": {
"location": "global",
"id": ""
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the input has focus.",
"docsTags": []
},
{
"event": "ionInput",
"detail": "TextareaInputEventDetail",
"bubbles": true,
"complexType": {
"original": "TextareaInputEventDetail",
"resolved": "TextareaInputEventDetail",
"references": {
"TextareaInputEventDetail": {
"location": "import",
"path": "./textarea-interface",
"id": "src/components/textarea/textarea-interface.ts::TextareaInputEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "The `ionInput` event fires when the `value` of an `<ion-textarea>` element\nhas been changed.\n\nWhen `clearOnEdit` is enabled, the `ionInput` event will be fired when\nthe user clears the textarea by performing a keydown event.",
"docsTags": []
}
],
"listeners": [],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the textarea"
},
{
"name": "--border-color",
"annotation": "prop",
"docs": "Color of the border below the textarea when using helper text, error text, or counter"
},
{
"name": "--border-radius",
"annotation": "prop",
"docs": "Border radius of the textarea"
},
{
"name": "--border-style",
"annotation": "prop",
"docs": "Style of the border below the textarea when using helper text, error text, or counter"
},
{
"name": "--border-width",
"annotation": "prop",
"docs": "Width of the border below the textarea when using helper text, error text, or counter"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Color of the text"
},
{
"name": "--highlight-color-focused",
"annotation": "prop",
"docs": "The color of the highlight on the textarea when focused"
},
{
"name": "--highlight-color-invalid",
"annotation": "prop",
"docs": "The color of the highlight on the textarea when invalid"
},
{
"name": "--highlight-color-valid",
"annotation": "prop",
"docs": "The color of the highlight on the textarea when valid"
},
{
"name": "--padding-bottom",
"annotation": "prop",
"docs": "Bottom padding of the textarea"
},
{
"name": "--padding-end",
"annotation": "prop",
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea"
},
{
"name": "--padding-start",
"annotation": "prop",
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea"
},
{
"name": "--padding-top",
"annotation": "prop",
"docs": "Top padding of the textarea"
},
{
"name": "--placeholder-color",
"annotation": "prop",
"docs": "Color of the placeholder text"
},
{
"name": "--placeholder-font-style",
"annotation": "prop",
"docs": "Style of the placeholder text"
},
{
"name": "--placeholder-font-weight",
"annotation": "prop",
"docs": "Weight of the placeholder text"
},
{
"name": "--placeholder-opacity",
"annotation": "prop",
"docs": "Opacity of the placeholder text"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/thumbnail/thumbnail.tsx",
"encapsulation": "shadow",
"tag": "ion-thumbnail",
"docs": "",
"docsTags": [],
"usage": {},
"props": [],
"methods": [],
"events": [],
"listeners": [],
"styles": [
{
"name": "--border-radius",
"annotation": "prop",
"docs": "Border radius of the thumbnail"
},
{
"name": "--size",
"annotation": "prop",
"docs": "Size of the thumbnail"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/title/title.tsx",
"encapsulation": "shadow",
"tag": "ion-title",
"docs": "",
"docsTags": [],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "size",
"type": "\"large\" | \"small\" | undefined",
"complexType": {
"original": "'large' | 'small'",
"resolved": "\"large\" | \"small\" | undefined",
"references": {}
},
"mutable": false,
"attr": "size",
"reflectToAttr": false,
"docs": "The size of the toolbar title.",
"docsTags": [],
"values": [
{
"value": "large",
"type": "string"
},
{
"value": "small",
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [
{
"name": "--color",
"annotation": "prop",
"docs": "Text color of the title"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/toast/toast.tsx",
"encapsulation": "shadow",
"tag": "ion-toast",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "part",
"text": "button - Any button element that is displayed inside of the toast."
},
{
"name": "part",
"text": "container - The element that wraps all child elements."
},
{
"name": "part",
"text": "header - The header text of the toast."
},
{
"name": "part",
"text": "message - The body text of the toast."
},
{
"name": "part",
"text": "icon - The icon that appears next to the toast content."
}
],
"usage": {},
"props": [
{
"name": "animated",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "animated",
"reflectToAttr": false,
"docs": "If `true`, the toast will animate.",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "buttons",
"type": "(string | ToastButton)[] | undefined",
"complexType": {
"original": "(ToastButton | string)[]",
"resolved": "(string | ToastButton)[] | undefined",
"references": {
"ToastButton": {
"location": "import",
"path": "./toast-interface",
"id": "src/components/toast/toast-interface.ts::ToastButton"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "An array of buttons for the toast.",
"docsTags": [],
"values": [
{
"type": "(string"
},
{
"type": "ToastButton)[]"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "cssClass",
"type": "string | string[] | undefined",
"complexType": {
"original": "string | string[]",
"resolved": "string | string[] | undefined",
"references": {}
},
"mutable": false,
"attr": "css-class",
"reflectToAttr": false,
"docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "string[]"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "duration",
"type": "number",
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"mutable": false,
"attr": "duration",
"reflectToAttr": false,
"docs": "How many milliseconds to wait before hiding the toast. By default, it will show\nuntil `dismiss()` is called.",
"docsTags": [],
"default": "config.getNumber('toastDuration', 0)",
"values": [
{
"type": "number"
}
],
"optional": false,
"required": false
},
{
"name": "enterAnimation",
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"complexType": {
"original": "AnimationBuilder",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Animation to use when the toast is presented.",
"docsTags": [],
"values": [
{
"type": "((baseEl: any, opts?: any) => Animation)"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "header",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "header",
"reflectToAttr": false,
"docs": "Header to be shown in the toast.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "htmlAttributes",
"type": "undefined | { [key: string]: any; }",
"complexType": {
"original": "{ [key: string]: any }",
"resolved": "undefined | { [key: string]: any; }",
"references": {}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Additional attributes to pass to the toast.",
"docsTags": [],
"values": [
{
"type": "undefined"
},
{
"type": "{ [key: string]: any; }"
}
],
"optional": true,
"required": false
},
{
"name": "icon",
"type": "string | undefined",
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "icon",
"reflectToAttr": false,
"docs": "The name of the icon to display, or the path to a valid SVG file. See `ion-icon`.\nhttps://ionic.io/ionicons",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "isOpen",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "is-open",
"reflectToAttr": false,
"docs": "If `true`, the toast will open. If `false`, the toast will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the toastController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe toast dismisses. You will need to do that in your code.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "keyboardClose",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "keyboard-close",
"reflectToAttr": false,
"docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "layout",
"type": "\"baseline\" | \"stacked\"",
"complexType": {
"original": "ToastLayout",
"resolved": "\"baseline\" | \"stacked\"",
"references": {
"ToastLayout": {
"location": "import",
"path": "./toast-interface",
"id": "/Users/alice/Code/ionic-framework/core::ToastLayout"
}
}
},
"mutable": false,
"attr": "layout",
"reflectToAttr": false,
"docs": "Defines how the message and buttons are laid out in the toast.\n'baseline': The message and the buttons will appear on the same line.\nMessage text may wrap within the message container.\n'stacked': The buttons containers and message will stack on top\nof each other. Use this if you have long text in your buttons.",
"docsTags": [],
"default": "'baseline'",
"values": [
{
"value": "baseline",
"type": "string"
},
{
"value": "stacked",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "leaveAnimation",
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"complexType": {
"original": "AnimationBuilder",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/utils/animation/animation-interface.ts::AnimationBuilder"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Animation to use when the toast is dismissed.",
"docsTags": [],
"values": [
{
"type": "((baseEl: any, opts?: any) => Animation)"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "message",
"type": "IonicSafeString | string | undefined",
"complexType": {
"original": "string | IonicSafeString",
"resolved": "IonicSafeString | string | undefined",
"references": {
"IonicSafeString": {
"location": "import",
"path": "../../utils/sanitization",
"id": "src/utils/sanitization/index.ts::IonicSafeString"
}
}
},
"mutable": false,
"attr": "message",
"reflectToAttr": false,
"docs": "Message to be shown in the toast.\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
"docsTags": [],
"values": [
{
"type": "IonicSafeString"
},
{
"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": "position",
"type": "\"bottom\" | \"middle\" | \"top\"",
"complexType": {
"original": "ToastPosition",
"resolved": "\"bottom\" | \"middle\" | \"top\"",
"references": {
"ToastPosition": {
"location": "import",
"path": "./toast-interface",
"id": "/Users/alice/Code/ionic-framework/core::ToastPosition"
}
}
},
"mutable": false,
"attr": "position",
"reflectToAttr": false,
"docs": "The position of the toast on the screen.",
"docsTags": [],
"default": "'bottom'",
"values": [
{
"value": "bottom",
"type": "string"
},
{
"value": "middle",
"type": "string"
},
{
"value": "top",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "translucent",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "translucent",
"reflectToAttr": false,
"docs": "If `true`, the toast 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",
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"mutable": false,
"attr": "trigger",
"reflectToAttr": false,
"docs": "An ID corresponding to the trigger element that\ncauses the toast to open when clicked.",
"docsTags": [],
"values": [
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
}
],
"methods": [
{
"name": "dismiss",
"returns": {
"type": "Promise<boolean>",
"docs": ""
},
"complexType": {
"signature": "(data?: any, role?: string) => Promise<boolean>",
"parameters": [
{
"tags": [
{
"name": "param",
"text": "data Any data to emit in the dismiss events."
}
],
"text": "Any data to emit in the dismiss events."
},
{
"tags": [
{
"name": "param",
"text": "role The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
}
],
"text": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
}
],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"ToastDismissOptions": {
"location": "global",
"id": "/Users/alice/Code/ionic-framework/core::ToastDismissOptions"
}
},
"return": "Promise<boolean>"
},
"signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
"parameters": [],
"docs": "Dismiss the toast 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 toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
}
]
},
{
"name": "onDidDismiss",
"returns": {
"type": "Promise<OverlayEventDetail<T>>",
"docs": ""
},
"complexType": {
"signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
},
"T": {
"location": "global",
"id": "src/components/toast/toast.tsx::T"
}
},
"return": "Promise<OverlayEventDetail<T>>"
},
"signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"docs": "Returns a promise that resolves when the toast did dismiss.",
"docsTags": []
},
{
"name": "onWillDismiss",
"returns": {
"type": "Promise<OverlayEventDetail<T>>",
"docs": ""
},
"complexType": {
"signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
},
"T": {
"location": "global",
"id": "src/components/toast/toast.tsx::T"
}
},
"return": "Promise<OverlayEventDetail<T>>"
},
"signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
"parameters": [],
"docs": "Returns a promise that resolves when the toast will dismiss.",
"docsTags": []
},
{
"name": "present",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": ""
},
"ToastPresentOptions": {
"location": "global",
"id": "/Users/alice/Code/ionic-framework/core::ToastPresentOptions"
}
},
"return": "Promise<void>"
},
"signature": "present() => Promise<void>",
"parameters": [],
"docs": "Present the toast overlay after it has been created.",
"docsTags": []
}
],
"events": [
{
"event": "didDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the toast has dismissed.\nShorthand for ionToastDidDismiss.",
"docsTags": []
},
{
"event": "didPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the toast has presented.\nShorthand for ionToastWillDismiss.",
"docsTags": []
},
{
"event": "ionToastDidDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the toast has dismissed.",
"docsTags": []
},
{
"event": "ionToastDidPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted after the toast has presented.",
"docsTags": []
},
{
"event": "ionToastWillDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the toast has dismissed.",
"docsTags": []
},
{
"event": "ionToastWillPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the toast has presented.",
"docsTags": []
},
{
"event": "willDismiss",
"detail": "OverlayEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "OverlayEventDetail",
"resolved": "OverlayEventDetail<any>",
"references": {
"OverlayEventDetail": {
"location": "import",
"path": "../../utils/overlays-interface",
"id": "src/utils/overlays-interface.ts::OverlayEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the toast has dismissed.\nShorthand for ionToastWillDismiss.",
"docsTags": []
},
{
"event": "willPresent",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted before the toast has presented.\nShorthand for ionToastWillPresent.",
"docsTags": []
}
],
"listeners": [],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the toast"
},
{
"name": "--border-color",
"annotation": "prop",
"docs": "Border color of the toast"
},
{
"name": "--border-radius",
"annotation": "prop",
"docs": "Border radius of the toast"
},
{
"name": "--border-style",
"annotation": "prop",
"docs": "Border style of the toast"
},
{
"name": "--border-width",
"annotation": "prop",
"docs": "Border width of the toast"
},
{
"name": "--box-shadow",
"annotation": "prop",
"docs": "Box shadow of the toast"
},
{
"name": "--button-color",
"annotation": "prop",
"docs": "Color of the button text"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Color of the toast text"
},
{
"name": "--end",
"annotation": "prop",
"docs": "Position from the right if direction is left-to-right, and from the left if direction is right-to-left"
},
{
"name": "--height",
"annotation": "prop",
"docs": "Height of the toast"
},
{
"name": "--max-height",
"annotation": "prop",
"docs": "Maximum height of the toast"
},
{
"name": "--max-width",
"annotation": "prop",
"docs": "Maximum width of the toast"
},
{
"name": "--min-height",
"annotation": "prop",
"docs": "Minimum height of the toast"
},
{
"name": "--min-width",
"annotation": "prop",
"docs": "Minimum width of the toast"
},
{
"name": "--start",
"annotation": "prop",
"docs": "Position from the left if direction is left-to-right, and from the right if direction is right-to-left"
},
{
"name": "--white-space",
"annotation": "prop",
"docs": "White space of the toast message"
},
{
"name": "--width",
"annotation": "prop",
"docs": "Width of the toast"
}
],
"slots": [],
"parts": [
{
"name": "button",
"docs": "Any button element that is displayed inside of the toast."
},
{
"name": "container",
"docs": "The element that wraps all child elements."
},
{
"name": "header",
"docs": "The header text of the toast."
},
{
"name": "icon",
"docs": "The icon that appears next to the toast content."
},
{
"name": "message",
"docs": "The body text of the toast."
}
],
"dependents": [],
"dependencies": [
"ion-icon",
"ion-ripple-effect"
],
"dependencyGraph": {
"ion-toast": [
"ion-icon",
"ion-ripple-effect"
]
}
},
{
"filePath": "./src/components/toggle/toggle.tsx",
"encapsulation": "shadow",
"tag": "ion-toggle",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "slot",
"text": "- The label text to associate with the toggle. Use the \"labelPlacement\" property to control where the label is placed relative to the toggle."
},
{
"name": "part",
"text": "track - The background track of the toggle."
},
{
"name": "part",
"text": "handle - The toggle handle, or knob, used to change the checked state."
}
],
"usage": {},
"props": [
{
"name": "checked",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": true,
"attr": "checked",
"reflectToAttr": false,
"docs": "If `true`, the toggle is selected.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "disabled",
"reflectToAttr": false,
"docs": "If `true`, the user cannot interact with the toggle.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "enableOnOffLabels",
"type": "boolean | undefined",
"complexType": {
"original": "boolean | undefined",
"resolved": "boolean | undefined",
"references": {}
},
"mutable": false,
"attr": "enable-on-off-labels",
"reflectToAttr": false,
"docs": "Enables the on/off accessibility switch labels within the toggle.",
"docsTags": [],
"default": "config.get('toggleOnOffLabels')",
"values": [
{
"type": "boolean"
},
{
"type": "undefined"
}
],
"optional": false,
"required": false
},
{
"name": "justify",
"type": "\"end\" | \"space-between\" | \"start\"",
"complexType": {
"original": "'start' | 'end' | 'space-between'",
"resolved": "\"end\" | \"space-between\" | \"start\"",
"references": {}
},
"mutable": false,
"attr": "justify",
"reflectToAttr": false,
"docs": "How to pack the label and toggle within a line.\n`\"start\"`: The label and toggle will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and toggle will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and toggle will appear on opposite\nends of the line with space between the two elements.",
"docsTags": [],
"default": "'space-between'",
"values": [
{
"value": "end",
"type": "string"
},
{
"value": "space-between",
"type": "string"
},
{
"value": "start",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "labelPlacement",
"type": "\"end\" | \"fixed\" | \"start\"",
"complexType": {
"original": "'start' | 'end' | 'fixed'",
"resolved": "\"end\" | \"fixed\" | \"start\"",
"references": {}
},
"mutable": false,
"attr": "label-placement",
"reflectToAttr": false,
"docs": "Where to place the label relative to the input.\n`\"start\"`: The label will appear to the left of the toggle in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the toggle in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
"docsTags": [],
"default": "'start'",
"values": [
{
"value": "end",
"type": "string"
},
{
"value": "fixed",
"type": "string"
},
{
"value": "start",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "legacy",
"type": "boolean | undefined",
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"mutable": false,
"attr": "legacy",
"reflectToAttr": false,
"docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
"docsTags": [],
"values": [
{
"type": "boolean"
},
{
"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": "name",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"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": "null | string | undefined",
"complexType": {
"original": "string | null",
"resolved": "null | string | undefined",
"references": {}
},
"mutable": false,
"attr": "value",
"reflectToAttr": false,
"docs": "The value of the toggle does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\nit's only used when the toggle participates in a native `<form>`.",
"docsTags": [],
"default": "'on'",
"values": [
{
"type": "null"
},
{
"type": "string"
},
{
"type": "undefined"
}
],
"optional": true,
"required": false
}
],
"methods": [],
"events": [
{
"event": "ionBlur",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the toggle loses focus.",
"docsTags": []
},
{
"event": "ionChange",
"detail": "ToggleChangeEventDetail<any>",
"bubbles": true,
"complexType": {
"original": "ToggleChangeEventDetail",
"resolved": "ToggleChangeEventDetail<any>",
"references": {
"ToggleChangeEventDetail": {
"location": "import",
"path": "./toggle-interface",
"id": "src/components/toggle/toggle-interface.ts::ToggleChangeEventDetail"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the user switches the toggle on or off. Does not emit\nwhen programmatically changing the value of the `checked` property.",
"docsTags": []
},
{
"event": "ionFocus",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Emitted when the toggle has focus.",
"docsTags": []
}
],
"listeners": [],
"styles": [
{
"name": "--border-radius",
"annotation": "prop",
"docs": "Border radius of the toggle track"
},
{
"name": "--handle-background",
"annotation": "prop",
"docs": "Background of the toggle handle"
},
{
"name": "--handle-background-checked",
"annotation": "prop",
"docs": "Background of the toggle handle when checked"
},
{
"name": "--handle-border-radius",
"annotation": "prop",
"docs": "Border radius of the toggle handle"
},
{
"name": "--handle-box-shadow",
"annotation": "prop",
"docs": "Box shadow of the toggle handle"
},
{
"name": "--handle-height",
"annotation": "prop",
"docs": "Height of the toggle handle"
},
{
"name": "--handle-max-height",
"annotation": "prop",
"docs": "Maximum height of the toggle handle"
},
{
"name": "--handle-spacing",
"annotation": "prop",
"docs": "Horizontal spacing around the toggle handle"
},
{
"name": "--handle-transition",
"annotation": "prop",
"docs": "Transition of the toggle handle"
},
{
"name": "--handle-width",
"annotation": "prop",
"docs": "Width of the toggle handle"
},
{
"name": "--track-background",
"annotation": "prop",
"docs": "Background of the toggle track"
},
{
"name": "--track-background-checked",
"annotation": "prop",
"docs": "Background of the toggle track when checked"
}
],
"slots": [
{
"name": "",
"docs": "The label text to associate with the toggle. Use the \"labelPlacement\" property to control where the label is placed relative to the toggle."
}
],
"parts": [
{
"name": "handle",
"docs": "The toggle handle, or knob, used to change the checked state."
},
{
"name": "track",
"docs": "The background track of the toggle."
}
],
"dependents": [],
"dependencies": [
"ion-icon"
],
"dependencyGraph": {
"ion-toggle": [
"ion-icon"
]
}
},
{
"filePath": "./src/components/toolbar/toolbar.tsx",
"encapsulation": "shadow",
"tag": "ion-toolbar",
"docs": "",
"docsTags": [
{
"name": "virtualProp",
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
},
{
"name": "slot",
"text": "- Content is placed between the named slots if provided without a slot."
},
{
"name": "slot",
"text": "start - Content is placed to the left of the toolbar text in LTR, and to the right in RTL."
},
{
"name": "slot",
"text": "secondary - Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode."
},
{
"name": "slot",
"text": "primary - Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode."
},
{
"name": "slot",
"text": "end - Content is placed to the right of the toolbar text in LTR, and to the left in RTL."
}
],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "/Users/alice/Code/ionic-framework/core::Color"
}
}
},
"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": [
{
"value": "danger",
"type": "string"
},
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "tertiary",
"type": "string"
},
{
"value": "warning",
"type": "string"
},
{
"type": "string & Record<never, never>"
},
{
"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": [
{
"event": "ionStyle",
"capture": false,
"passive": false
}
],
"styles": [
{
"name": "--background",
"annotation": "prop",
"docs": "Background of the toolbar"
},
{
"name": "--border-color",
"annotation": "prop",
"docs": "Color of the toolbar border"
},
{
"name": "--border-style",
"annotation": "prop",
"docs": "Style of the toolbar border"
},
{
"name": "--border-width",
"annotation": "prop",
"docs": "Width of the toolbar border"
},
{
"name": "--color",
"annotation": "prop",
"docs": "Color of the toolbar text"
},
{
"name": "--min-height",
"annotation": "prop",
"docs": "Minimum height of the toolbar"
},
{
"name": "--opacity",
"annotation": "prop",
"docs": "Opacity of the toolbar background"
},
{
"name": "--padding-bottom",
"annotation": "prop",
"docs": "Bottom padding of the toolbar"
},
{
"name": "--padding-end",
"annotation": "prop",
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar"
},
{
"name": "--padding-start",
"annotation": "prop",
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar"
},
{
"name": "--padding-top",
"annotation": "prop",
"docs": "Top padding of the toolbar"
}
],
"slots": [
{
"name": "",
"docs": "Content is placed between the named slots if provided without a slot."
},
{
"name": "end",
"docs": "Content is placed to the right of the toolbar text in LTR, and to the left in RTL."
},
{
"name": "primary",
"docs": "Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode."
},
{
"name": "secondary",
"docs": "Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode."
},
{
"name": "start",
"docs": "Content is placed to the left of the toolbar text in LTR, and to the right in RTL."
}
],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
}
],
"typeLibrary": {
"src/components/accordion-group/accordion-group-interface.ts::AccordionGroupChangeEventDetail": {
"declaration": "export interface AccordionGroupChangeEventDetail<T = any> {\n value: T;\n}",
"docstring": "",
"path": "src/components/accordion-group/accordion-group-interface.ts"
},
"src/components.d.ts::HTMLIonAccordionElement": {
"declaration": "interface HTMLIonAccordionElement extends Components.IonAccordion, HTMLStencilElement {\n }",
"docstring": "",
"path": "src/components.d.ts"
},
"src/interface.d.ts::FrameworkDelegate": {
"declaration": "export interface FrameworkDelegate {\n attachViewToDom(container: any, component: any, propsOrDataObj?: any, cssClasses?: string[]): Promise<HTMLElement>;\n removeViewFromDom(container: any, component: any): Promise<void>;\n}",
"docstring": "",
"path": "src/interface.d.ts"
},
"src/utils/animation/animation-interface.ts::AnimationBuilder": {
"declaration": "(baseEl: any, opts?: any) => Animation",
"docstring": "",
"path": "src/utils/animation/animation-interface.ts"
},
"src/components/action-sheet/action-sheet-interface.ts::ActionSheetButton": {
"declaration": "export interface ActionSheetButton<T = any> {\n text?: string;\n role?: 'cancel' | 'destructive' | 'selected' | string;\n icon?: string;\n cssClass?: string | string[];\n id?: string;\n handler?: () => boolean | void | Promise<boolean | void>;\n data?: T;\n}",
"docstring": "",
"path": "src/components/action-sheet/action-sheet-interface.ts"
},
"src/utils/overlays-interface.ts::OverlayEventDetail": {
"declaration": "export interface OverlayEventDetail<T = any> {\n data?: T;\n role?: string;\n}",
"docstring": "",
"path": "src/utils/overlays-interface.ts"
},
"src/utils/sanitization/index.ts::IonicSafeString": {
"declaration": "export class IonicSafeString {\n constructor(public value: string) {}\n}",
"docstring": "",
"path": "src/utils/sanitization/index.ts"
},
"src/components/alert/alert-interface.ts::AlertButton": {
"declaration": "export interface AlertButton {\n text: string;\n role?: 'cancel' | 'destructive' | string;\n cssClass?: string | string[];\n id?: string;\n // TODO(FW-2832): type\n handler?: (value: any) => AlertButtonOverlayHandler | Promise<AlertButtonOverlayHandler>;\n}",
"docstring": "",
"path": "src/components/alert/alert-interface.ts"
},
"src/components/alert/alert-interface.ts::AlertInput": {
"declaration": "export interface AlertInput {\n type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';\n name?: string;\n placeholder?: string;\n value?: any; // TODO(FW-2832): type\n /**\n * The label text to display next to the input, if the input type is `radio` or `checkbox`.\n */\n label?: string;\n checked?: boolean;\n disabled?: boolean;\n id?: string;\n handler?: (input: AlertInput) => void;\n min?: string | number;\n max?: string | number;\n cssClass?: string | string[];\n attributes?: { [key: string]: any };\n tabindex?: number;\n}",
"docstring": "",
"path": "src/components/alert/alert-interface.ts"
},
"src/components/breadcrumb/breadcrumb-interface.ts::BreadcrumbCollapsedClickEventDetail": {
"declaration": "export interface BreadcrumbCollapsedClickEventDetail {\n ionShadowTarget?: HTMLElement;\n collapsedBreadcrumbs?: HTMLIonBreadcrumbElement[];\n}",
"docstring": "",
"path": "src/components/breadcrumb/breadcrumb-interface.ts"
},
"src/components/checkbox/checkbox-interface.ts::CheckboxChangeEventDetail": {
"declaration": "export interface CheckboxChangeEventDetail<T = any> {\n value: T;\n checked: boolean;\n}",
"docstring": "",
"path": "src/components/checkbox/checkbox-interface.ts"
},
"src/interface.d.ts::StyleEventDetail": {
"declaration": "export interface StyleEventDetail {\n [styleName: string]: boolean;\n}",
"docstring": "",
"path": "src/interface.d.ts"
},
"src/components/content/content-interface.ts::ScrollBaseDetail": {
"declaration": "export interface ScrollBaseDetail {\n isScrolling: boolean;\n}",
"docstring": "",
"path": "src/components/content/content-interface.ts"
},
"src/components/content/content-interface.ts::ScrollDetail": {
"declaration": "export interface ScrollDetail extends GestureDetail, ScrollBaseDetail {\n scrollTop: number;\n scrollLeft: number;\n}",
"docstring": "",
"path": "src/components/content/content-interface.ts"
},
"src/components/datetime/datetime-interface.ts::TitleSelectedDatesFormatter": {
"declaration": "(selectedDates: string[]) => string",
"docstring": "",
"path": "src/components/datetime/datetime-interface.ts"
},
"src/components/datetime/datetime-interface.ts::DatetimeHighlightCallback": {
"declaration": "(dateIsoString: string) => DatetimeHighlightStyle | undefined",
"docstring": "",
"path": "src/components/datetime/datetime-interface.ts"
},
"src/components/datetime/datetime-interface.ts::DatetimeChangeEventDetail": {
"declaration": "export interface DatetimeChangeEventDetail {\n value?: string | string[] | null;\n}",
"docstring": "",
"path": "src/components/datetime/datetime-interface.ts"
},
"src/components/input/input-interface.ts::InputInputEventDetail": {
"declaration": "export interface InputInputEventDetail {\n value?: string | number | null;\n event?: Event;\n}",
"docstring": "",
"path": "src/components/input/input-interface.ts"
},
"src/components/input/input-interface.ts::InputChangeEventDetail": {
"declaration": "export interface InputChangeEventDetail {\n value?: string | number | null;\n event?: Event;\n}",
"docstring": "",
"path": "src/components/input/input-interface.ts"
},
"src/components/item/item-interface.ts::CounterFormatter": {
"declaration": "(inputLength: number, maxLength: number) => string",
"docstring": "",
"path": "src/components/item/item-interface.ts"
},
"src/components/menu/menu-interface.ts::MenuChangeEventDetail": {
"declaration": "export interface MenuChangeEventDetail {\n disabled: boolean;\n open: boolean;\n}",
"docstring": "",
"path": "src/components/menu/menu-interface.ts"
},
"src/interface.d.ts::ComponentProps": {
"declaration": "{ [key: string]: any }",
"docstring": "",
"path": "src/interface.d.ts"
},
"src/components/modal/modal-interface.ts::ModalBreakpointChangeEventDetail": {
"declaration": "export interface ModalBreakpointChangeEventDetail {\n breakpoint: number;\n}",
"docstring": "",
"path": "src/components/modal/modal-interface.ts"
},
"src/components/modal/modal.tsx::ModalPresentOptions": {
"declaration": "interface ModalOverlayOptions {\n /**\n * The element that presented the modal.\n */\n presentingEl?: HTMLElement;\n /**\n * The current breakpoint of the sheet modal.\n */\n currentBreakpoint?: number;\n /**\n * The point after which the backdrop will being\n * to fade in when using a sheet modal.\n */\n backdropBreakpoint: number;\n}",
"docstring": "",
"path": "src/components/modal/modal.tsx"
},
"src/components/modal/modal.tsx::ModalDismissOptions": {
"declaration": "interface ModalOverlayOptions {\n /**\n * The element that presented the modal.\n */\n presentingEl?: HTMLElement;\n /**\n * The current breakpoint of the sheet modal.\n */\n currentBreakpoint?: number;\n /**\n * The point after which the backdrop will being\n * to fade in when using a sheet modal.\n */\n backdropBreakpoint: number;\n}",
"docstring": "",
"path": "src/components/modal/modal.tsx"
},
"src/components/nav/nav-interface.ts::NavOptions": {
"declaration": "export interface NavOptions extends RouterOutletOptions {\n progressAnimation?: boolean;\n updateURL?: boolean;\n delegate?: FrameworkDelegate;\n viewIsReady?: (enteringEl: HTMLElement) => Promise<any>;\n}",
"docstring": "",
"path": "src/components/nav/nav-interface.ts"
},
"src/components/nav/nav-interface.ts::TransitionDoneFn": {
"declaration": "(\n hasCompleted: boolean,\n requiresTransition: boolean,\n enteringView?: ViewController,\n leavingView?: ViewController,\n direction?: string\n) => void",
"docstring": "",
"path": "src/components/nav/nav-interface.ts"
},
"src/components/nav/nav-interface.ts::NavComponentWithProps": {
"declaration": "export interface NavComponentWithProps<T = any> {\n component: NavComponent;\n componentProps?: ComponentProps<T> | null;\n}",
"docstring": "",
"path": "src/components/nav/nav-interface.ts"
},
"src/components/nav/view-controller.ts::ViewController": {
"declaration": "export class ViewController {\n state = VIEW_STATE_NEW;\n nav?: any;\n element?: HTMLElement;\n delegate?: FrameworkDelegate;\n animationBuilder?: AnimationBuilder;\n\n constructor(public component: any, public params: ComponentProps | undefined) {}\n\n async init(container: HTMLElement) {\n this.state = VIEW_STATE_ATTACHED;\n\n if (!this.element) {\n const component = this.component;\n this.element = await attachComponent(\n this.delegate,\n container,\n component,\n ['ion-page', 'ion-page-invisible'],\n this.params\n );\n }\n }\n\n /**\n * DOM WRITE\n */\n _destroy() {\n assert(this.state !== VIEW_STATE_DESTROYED, 'view state must be ATTACHED');\n\n const element = this.element;\n if (element) {\n if (this.delegate) {\n this.delegate.removeViewFromDom(element.parentElement, element);\n } else {\n element.remove();\n }\n }\n this.nav = undefined;\n this.state = VIEW_STATE_DESTROYED;\n }\n}",
"docstring": "",
"path": "src/components/nav/view-controller.ts"
},
"src/components/nav/nav-interface.ts::TransitionInstruction": {
"declaration": "export interface TransitionInstruction {\n opts: NavOptions | undefined | null;\n /** The index where to insert views. A negative number means at the end */\n insertStart?: number;\n insertViews?: any[];\n removeView?: ViewController;\n /** The index of the first view to remove. A negative number means the last view */\n removeStart?: number;\n /** The number of view to remove. A negative number means all views from removeStart */\n removeCount?: number;\n resolve?: (hasCompleted: boolean) => void;\n reject?: (rejectReason: string) => void;\n done?: TransitionDoneFn;\n leavingRequiresTransition?: boolean;\n enteringRequiresTransition?: boolean;\n}",
"docstring": "",
"path": "src/components/nav/nav-interface.ts"
},
"src/components/router/utils/interface.ts::RouteWrite": {
"declaration": "export interface RouteWrite {\n changed: boolean;\n element: HTMLElement | undefined;\n markVisible?: () => void | Promise<void>;\n}",
"docstring": "",
"path": "src/components/router/utils/interface.ts"
},
"src/components/router/utils/interface.ts::RouteID": {
"declaration": "export interface RouteID {\n id: string;\n element: HTMLElement | undefined;\n params?: { [key: string]: any };\n}",
"docstring": "",
"path": "src/components/router/utils/interface.ts"
},
"src/components/picker/picker-interface.ts::PickerButton": {
"declaration": "export interface PickerButton {\n text?: string;\n role?: string;\n cssClass?: string | string[];\n handler?: (value: any) => boolean | void;\n}",
"docstring": "",
"path": "src/components/picker/picker-interface.ts"
},
"src/components/picker/picker-interface.ts::PickerColumn": {
"declaration": "export interface 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}",
"docstring": "",
"path": "src/components/picker/picker-interface.ts"
},
"src/components/picker-column-internal/picker-column-internal-interfaces.ts::PickerColumnItem": {
"declaration": "export interface PickerColumnItem {\n text: string;\n value: string | number;\n disabled?: boolean;\n}",
"docstring": "",
"path": "src/components/picker-column-internal/picker-column-internal-interfaces.ts"
},
"src/components/picker-internal/picker-internal-interfaces.ts::PickerInternalChangeEventDetail": {
"declaration": "export interface PickerInternalChangeEventDetail {\n useInputMode: boolean;\n inputModeColumn?: HTMLIonPickerColumnInternalElement;\n}",
"docstring": "",
"path": "src/components/picker-internal/picker-internal-interfaces.ts"
},
"src/components/popover/popover.tsx::PopoverPresentOptions": {
"declaration": "interface PopoverPresentOptions {\n /**\n * The original target event that presented the popover.\n */\n event: Event;\n /**\n * Describes how to calculate the popover width.\n */\n size: PopoverSize;\n /**\n * The element that causes the popover to open.\n */\n trigger?: HTMLElement | null;\n /**\n * Describes what to position the popover relative to.\n */\n reference: PositionReference;\n /**\n * Side of the `reference` point to position the popover on.\n */\n side: PositionSide;\n /**\n * Describes how to align the popover content with the `reference` point.\n */\n align?: PositionAlign;\n}",
"docstring": "",
"path": "src/components/popover/popover.tsx"
},
"src/components.d.ts::HTMLIonPopoverElement": {
"declaration": "interface HTMLIonPopoverElement extends Components.IonPopover, HTMLStencilElement {\n }",
"docstring": "",
"path": "src/components.d.ts"
},
"src/components/radio-group/radio-group-interface.ts::RadioGroupChangeEventDetail": {
"declaration": "export interface RadioGroupChangeEventDetail<T = any> {\n value: T;\n event?: Event;\n}",
"docstring": "",
"path": "src/components/radio-group/radio-group-interface.ts"
},
"src/components/range/range-interface.ts::PinFormatter": {
"declaration": "(value: number) => number | string",
"docstring": "",
"path": "src/components/range/range-interface.ts"
},
"src/components/range/range-interface.ts::RangeChangeEventDetail": {
"declaration": "export interface RangeChangeEventDetail {\n value: RangeValue;\n}",
"docstring": "",
"path": "src/components/range/range-interface.ts"
},
"src/components/range/range-interface.ts::RangeKnobMoveStartEventDetail": {
"declaration": "export interface RangeKnobMoveStartEventDetail {\n value: RangeValue;\n}",
"docstring": "",
"path": "src/components/range/range-interface.ts"
},
"src/components/range/range-interface.ts::RangeKnobMoveEndEventDetail": {
"declaration": "export interface RangeKnobMoveEndEventDetail {\n value: RangeValue;\n}",
"docstring": "",
"path": "src/components/range/range-interface.ts"
},
"src/components/refresher/refresher-interface.ts::RefresherEventDetail": {
"declaration": "export interface RefresherEventDetail {\n complete(): void;\n}",
"docstring": "",
"path": "src/components/refresher/refresher-interface.ts"
},
"src/components/reorder-group/reorder-group-interface.ts::ItemReorderEventDetail": {
"declaration": "export interface ItemReorderEventDetail {\n from: number;\n to: number;\n complete: (data?: boolean | any[]) => any;\n}",
"docstring": "",
"path": "src/components/reorder-group/reorder-group-interface.ts"
},
"src/components/route/route-interface.ts::NavigationHookCallback": {
"declaration": "() => NavigationHookResult | Promise<NavigationHookResult>",
"docstring": "",
"path": "src/components/route/route-interface.ts"
},
"src/components/router/utils/interface.ts::RouterEventDetail": {
"declaration": "export interface RouterEventDetail {\n from: string | null;\n redirectedFrom: string | null;\n to: string;\n}",
"docstring": "",
"path": "src/components/router/utils/interface.ts"
},
"src/components/nav/nav-interface.ts::SwipeGestureHandler": {
"declaration": "export interface SwipeGestureHandler {\n canStart(): boolean;\n onStart(): void;\n onEnd(shouldComplete: boolean): void;\n}",
"docstring": "",
"path": "src/components/nav/nav-interface.ts"
},
"src/components/nav/nav-interface.ts::RouterOutletOptions": {
"declaration": "export interface RouterOutletOptions {\n animated?: boolean;\n animationBuilder?: AnimationBuilder;\n duration?: number;\n easing?: string;\n showGoBack?: boolean;\n direction?: NavDirection;\n deepWait?: boolean;\n mode?: Mode;\n keyboardClose?: boolean;\n skipIfBusy?: boolean;\n progressAnimation?: boolean;\n}",
"docstring": "",
"path": "src/components/nav/nav-interface.ts"
},
"src/components/searchbar/searchbar-interface.ts::SearchbarInputEventDetail": {
"declaration": "export interface SearchbarInputEventDetail {\n value?: string | null;\n event?: Event;\n}",
"docstring": "",
"path": "src/components/searchbar/searchbar-interface.ts"
},
"src/components/searchbar/searchbar-interface.ts::SearchbarChangeEventDetail": {
"declaration": "export interface SearchbarChangeEventDetail {\n value?: string | null;\n event?: Event;\n}",
"docstring": "",
"path": "src/components/searchbar/searchbar-interface.ts"
},
"src/components/segment/segment-interface.ts::SegmentChangeEventDetail": {
"declaration": "export interface SegmentChangeEventDetail {\n value?: string;\n}",
"docstring": "",
"path": "src/components/segment/segment-interface.ts"
},
"src/components/select/select-interface.ts::SelectCompareFn": {
"declaration": "(currentValue: any, compareValue: any) => boolean",
"docstring": "",
"path": "src/components/select/select-interface.ts"
},
"src/components/select/select-interface.ts::SelectChangeEventDetail": {
"declaration": "export interface SelectChangeEventDetail<T = any> {\n value: T;\n}",
"docstring": "",
"path": "src/components/select/select-interface.ts"
},
"src/components/select-popover/select-popover-interface.ts::SelectPopoverOption": {
"declaration": "export interface SelectPopoverOption {\n text: string;\n value: string;\n disabled: boolean;\n checked: boolean;\n cssClass?: string | string[];\n handler?: (value: any) => boolean | void | { [key: string]: any };\n}",
"docstring": "",
"path": "src/components/select-popover/select-popover-interface.ts"
},
"src/components/tab-bar/tab-bar-interface.ts::TabBarChangedEventDetail": {
"declaration": "export interface TabBarChangedEventDetail {\n tab?: string;\n}",
"docstring": "",
"path": "src/components/tab-bar/tab-bar-interface.ts"
},
"src/components/tab-bar/tab-bar-interface.ts::TabButtonClickEventDetail": {
"declaration": "export interface TabButtonClickEventDetail {\n tab: string;\n selected: boolean;\n href?: string;\n}",
"docstring": "",
"path": "src/components/tab-bar/tab-bar-interface.ts"
},
"src/components.d.ts::HTMLIonTabElement": {
"declaration": "interface HTMLIonTabElement extends Components.IonTab, HTMLStencilElement {\n }",
"docstring": "",
"path": "src/components.d.ts"
},
"src/components/textarea/textarea-interface.ts::TextareaChangeEventDetail": {
"declaration": "export interface TextareaChangeEventDetail {\n value?: string | null;\n event?: Event;\n}",
"docstring": "",
"path": "src/components/textarea/textarea-interface.ts"
},
"src/components/textarea/textarea-interface.ts::TextareaInputEventDetail": {
"declaration": "export interface TextareaInputEventDetail {\n value?: string | null;\n event?: Event;\n}",
"docstring": "",
"path": "src/components/textarea/textarea-interface.ts"
},
"src/components/toast/toast-interface.ts::ToastButton": {
"declaration": "export interface ToastButton {\n text?: string;\n icon?: string;\n side?: 'start' | 'end';\n role?: 'cancel' | string;\n cssClass?: string | string[];\n handler?: () => boolean | void | Promise<boolean | void>;\n}",
"docstring": "",
"path": "src/components/toast/toast-interface.ts"
},
"src/components/toggle/toggle-interface.ts::ToggleChangeEventDetail": {
"declaration": "export interface ToggleChangeEventDetail<T = any> {\n value: T;\n checked: boolean;\n}",
"docstring": "",
"path": "src/components/toggle/toggle-interface.ts"
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment