@ionic/vue
Version:
Vue specific wrapper for @ionic/core
1,141 lines • 162 kB
JSON
{
"ion-accordion/disabled": {
"type": "boolean",
"description": "If `true`, the accordion cannot be interacted with.",
"options": []
},
"ion-accordion/mode": {
"type": "\"ios\" | \"md\"",
"description": "The mode determines which platform styles to use.",
"options": [
"ios",
"md"
]
},
"ion-accordion/readonly": {
"type": "boolean",
"description": "If `true`, the accordion cannot be interacted with,\nbut does not alter the opacity.",
"options": []
},
"ion-accordion/toggle-icon": {
"type": "string",
"description": "The toggle icon to use. This icon will be\nrotated when the accordion is expanded\nor collapsed.",
"options": []
},
"ion-accordion/toggle-icon-slot": {
"type": "\"end\" | \"start\"",
"description": "The slot inside of `ion-item` to\nplace the toggle icon. Defaults to `'end'`.",
"options": [
"end",
"start"
]
},
"ion-accordion/value": {
"type": "string",
"description": "The value of the accordion. Defaults to an autogenerated\nvalue.",
"options": []
},
"ion-accordion-group/animated": {
"type": "boolean",
"description": "If `true`, all accordions inside of the\naccordion group will animate when expanding\nor collapsing.",
"options": []
},
"ion-accordion-group/disabled": {
"type": "boolean",
"description": "If `true`, the accordion group cannot be interacted with.",
"options": []
},
"ion-accordion-group/expand": {
"type": "\"compact\" | \"inset\"",
"description": "Describes the expansion behavior for each accordion.\nPossible values are `\"compact\"` and `\"inset\"`.\nDefaults to `\"compact\"`.",
"options": [
"compact",
"inset"
]
},
"ion-accordion-group/mode": {
"type": "\"ios\" | \"md\"",
"description": "The mode determines which platform styles to use.",
"options": [
"ios",
"md"
]
},
"ion-accordion-group/multiple": {
"type": "boolean | undefined",
"description": "If `true`, the accordion group can have multiple\naccordion components expanded at the same time.",
"options": []
},
"ion-accordion-group/readonly": {
"type": "boolean",
"description": "If `true`, the accordion group cannot be interacted with,\nbut does not alter the opacity.",
"options": []
},
"ion-accordion-group/value": {
"type": "null | string | string[] | undefined",
"description": "The value of the accordion group.",
"options": []
},
"ion-action-sheet/animated": {
"type": "boolean",
"description": "If `true`, the action sheet will animate.",
"options": []
},
"ion-action-sheet/backdrop-dismiss": {
"type": "boolean",
"description": "If `true`, the action sheet will be dismissed when the backdrop is clicked.",
"options": []
},
"ion-action-sheet/buttons": {
"type": "(string | ActionSheetButton<any>)[]",
"description": "An array of buttons for the action sheet.",
"options": []
},
"ion-action-sheet/css-class": {
"type": "string | string[] | undefined",
"description": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
"options": []
},
"ion-action-sheet/enter-animation": {
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"description": "Animation to use when the action sheet is presented.",
"options": []
},
"ion-action-sheet/header": {
"type": "string | undefined",
"description": "Title for the action sheet.",
"options": []
},
"ion-action-sheet/html-attributes": {
"type": "undefined | { [key: string]: any; }",
"description": "Additional attributes to pass to the action sheet.",
"options": []
},
"ion-action-sheet/keyboard-close": {
"type": "boolean",
"description": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
"options": []
},
"ion-action-sheet/leave-animation": {
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"description": "Animation to use when the action sheet is dismissed.",
"options": []
},
"ion-action-sheet/mode": {
"type": "\"ios\" | \"md\"",
"description": "The mode determines which platform styles to use.",
"options": [
"ios",
"md"
]
},
"ion-action-sheet/sub-header": {
"type": "string | undefined",
"description": "Subtitle for the action sheet.",
"options": []
},
"ion-action-sheet/translucent": {
"type": "boolean",
"description": "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).",
"options": []
},
"ion-alert/animated": {
"type": "boolean",
"description": "If `true`, the alert will animate.",
"options": []
},
"ion-alert/backdrop-dismiss": {
"type": "boolean",
"description": "If `true`, the alert will be dismissed when the backdrop is clicked.",
"options": []
},
"ion-alert/buttons": {
"type": "(string | AlertButton)[]",
"description": "Array of buttons to be added to the alert.",
"options": []
},
"ion-alert/css-class": {
"type": "string | string[] | undefined",
"description": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
"options": []
},
"ion-alert/enter-animation": {
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"description": "Animation to use when the alert is presented.",
"options": []
},
"ion-alert/header": {
"type": "string | undefined",
"description": "The main title in the heading of the alert.",
"options": []
},
"ion-alert/html-attributes": {
"type": "undefined | { [key: string]: any; }",
"description": "Additional attributes to pass to the alert.",
"options": []
},
"ion-alert/inputs": {
"type": "AlertInput[]",
"description": "Array of input to show in the alert.",
"options": []
},
"ion-alert/keyboard-close": {
"type": "boolean",
"description": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
"options": []
},
"ion-alert/leave-animation": {
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"description": "Animation to use when the alert is dismissed.",
"options": []
},
"ion-alert/message": {
"type": "IonicSafeString | string | undefined",
"description": "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`<Ionic>`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
"options": []
},
"ion-alert/mode": {
"type": "\"ios\" | \"md\"",
"description": "The mode determines which platform styles to use.",
"options": [
"ios",
"md"
]
},
"ion-alert/sub-header": {
"type": "string | undefined",
"description": "The subtitle in the heading of the alert. Displayed under the title.",
"options": []
},
"ion-alert/translucent": {
"type": "boolean",
"description": "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).",
"options": []
},
"ion-back-button/color": {
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"description": "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).",
"options": [
"danger",
"dark",
"light",
"medium",
"primary",
"secondary",
"success",
"tertiary",
"warning"
]
},
"ion-back-button/default-href": {
"type": "string | undefined",
"description": "The url to navigate back to by default when there is no history.",
"options": []
},
"ion-back-button/disabled": {
"type": "boolean",
"description": "If `true`, the user cannot interact with the button.",
"options": []
},
"ion-back-button/icon": {
"type": "null | string | undefined",
"description": "The built-in named SVG icon name or the exact `src` of an SVG file\nto use for the back button.",
"options": []
},
"ion-back-button/mode": {
"type": "\"ios\" | \"md\"",
"description": "The mode determines which platform styles to use.",
"options": [
"ios",
"md"
]
},
"ion-back-button/router-animation": {
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"description": "When using a router, it specifies the transition animation when navigating to\nanother page.",
"options": []
},
"ion-back-button/text": {
"type": "null | string | undefined",
"description": "The text to display in the back button.",
"options": []
},
"ion-back-button/type": {
"type": "\"button\" | \"reset\" | \"submit\"",
"description": "The type of the button.",
"options": [
"button",
"reset",
"submit"
]
},
"ion-backdrop/stop-propagation": {
"type": "boolean",
"description": "If `true`, the backdrop will stop propagation on tap.",
"options": []
},
"ion-backdrop/tappable": {
"type": "boolean",
"description": "If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.",
"options": []
},
"ion-backdrop/visible": {
"type": "boolean",
"description": "If `true`, the backdrop will be visible.",
"options": []
},
"ion-badge/color": {
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"description": "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).",
"options": [
"danger",
"dark",
"light",
"medium",
"primary",
"secondary",
"success",
"tertiary",
"warning"
]
},
"ion-badge/mode": {
"type": "\"ios\" | \"md\"",
"description": "The mode determines which platform styles to use.",
"options": [
"ios",
"md"
]
},
"ion-breadcrumb/active": {
"type": "boolean",
"description": "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.",
"options": []
},
"ion-breadcrumb/color": {
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"description": "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).",
"options": [
"danger",
"dark",
"light",
"medium",
"primary",
"secondary",
"success",
"tertiary",
"warning"
]
},
"ion-breadcrumb/disabled": {
"type": "boolean",
"description": "If `true`, the user cannot interact with the breadcrumb.",
"options": []
},
"ion-breadcrumb/download": {
"type": "string | undefined",
"description": "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).",
"options": []
},
"ion-breadcrumb/href": {
"type": "string | undefined",
"description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
"options": []
},
"ion-breadcrumb/mode": {
"type": "\"ios\" | \"md\"",
"description": "The mode determines which platform styles to use.",
"options": [
"ios",
"md"
]
},
"ion-breadcrumb/rel": {
"type": "string | undefined",
"description": "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).",
"options": []
},
"ion-breadcrumb/router-animation": {
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"description": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
"options": []
},
"ion-breadcrumb/router-direction": {
"type": "\"back\" | \"forward\" | \"root\"",
"description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
"options": [
"back",
"forward",
"root"
]
},
"ion-breadcrumb/separator": {
"type": "boolean | undefined",
"description": "If true, show a separator between this breadcrumb and the next.\nDefaults to `true` for all breadcrumbs except the last.",
"options": []
},
"ion-breadcrumb/target": {
"type": "string | undefined",
"description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
"options": []
},
"ion-breadcrumbs/color": {
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"description": "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).",
"options": [
"danger",
"dark",
"light",
"medium",
"primary",
"secondary",
"success",
"tertiary",
"warning"
]
},
"ion-breadcrumbs/items-after-collapse": {
"type": "number",
"description": "The number of breadcrumbs to show after the collapsed indicator.\nIf `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\nthe breadcrumbs will not be collapsed.",
"options": []
},
"ion-breadcrumbs/items-before-collapse": {
"type": "number",
"description": "The number of breadcrumbs to show before the collapsed indicator.\nIf `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\nthe breadcrumbs will not be collapsed.",
"options": []
},
"ion-breadcrumbs/max-items": {
"type": "number | undefined",
"description": "The maximum number of breadcrumbs to show before collapsing.",
"options": []
},
"ion-breadcrumbs/mode": {
"type": "\"ios\" | \"md\"",
"description": "The mode determines which platform styles to use.",
"options": [
"ios",
"md"
]
},
"ion-button/button-type": {
"type": "string",
"description": "The type of button.",
"options": []
},
"ion-button/color": {
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"description": "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).",
"options": [
"danger",
"dark",
"light",
"medium",
"primary",
"secondary",
"success",
"tertiary",
"warning"
]
},
"ion-button/disabled": {
"type": "boolean",
"description": "If `true`, the user cannot interact with the button.",
"options": []
},
"ion-button/download": {
"type": "string | undefined",
"description": "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).",
"options": []
},
"ion-button/expand": {
"type": "\"block\" | \"full\" | undefined",
"description": "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.",
"options": [
"block",
"full"
]
},
"ion-button/fill": {
"type": "\"clear\" | \"default\" | \"outline\" | \"solid\" | undefined",
"description": "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\"`.",
"options": [
"clear",
"default",
"outline",
"solid"
]
},
"ion-button/form": {
"type": "HTMLFormElement | string | undefined",
"description": "The HTML form element or form element id. Used to submit a form when the button is not a child of the form.",
"options": []
},
"ion-button/href": {
"type": "string | undefined",
"description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
"options": []
},
"ion-button/mode": {
"type": "\"ios\" | \"md\"",
"description": "The mode determines which platform styles to use.",
"options": [
"ios",
"md"
]
},
"ion-button/rel": {
"type": "string | undefined",
"description": "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).",
"options": []
},
"ion-button/router-animation": {
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"description": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
"options": []
},
"ion-button/router-direction": {
"type": "\"back\" | \"forward\" | \"root\"",
"description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
"options": [
"back",
"forward",
"root"
]
},
"ion-button/shape": {
"type": "\"round\" | undefined",
"description": "Set to `\"round\"` for a button with more rounded corners.",
"options": [
"round"
]
},
"ion-button/size": {
"type": "\"default\" | \"large\" | \"small\" | undefined",
"description": "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.",
"options": [
"default",
"large",
"small"
]
},
"ion-button/strong": {
"type": "boolean",
"description": "If `true`, activates a button with a heavier font weight.",
"options": []
},
"ion-button/target": {
"type": "string | undefined",
"description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
"options": []
},
"ion-button/type": {
"type": "\"button\" | \"reset\" | \"submit\"",
"description": "The type of the button.",
"options": [
"button",
"reset",
"submit"
]
},
"ion-buttons/collapse": {
"type": "boolean",
"description": "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)",
"options": []
},
"ion-card/button": {
"type": "boolean",
"description": "If `true`, a button tag will be rendered and the card will be tappable.",
"options": []
},
"ion-card/color": {
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"description": "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).",
"options": [
"danger",
"dark",
"light",
"medium",
"primary",
"secondary",
"success",
"tertiary",
"warning"
]
},
"ion-card/disabled": {
"type": "boolean",
"description": "If `true`, the user cannot interact with the card.",
"options": []
},
"ion-card/download": {
"type": "string | undefined",
"description": "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).",
"options": []
},
"ion-card/href": {
"type": "string | undefined",
"description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
"options": []
},
"ion-card/mode": {
"type": "\"ios\" | \"md\"",
"description": "The mode determines which platform styles to use.",
"options": [
"ios",
"md"
]
},
"ion-card/rel": {
"type": "string | undefined",
"description": "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).",
"options": []
},
"ion-card/router-animation": {
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
"description": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
"options": []
},
"ion-card/router-direction": {
"type": "\"back\" | \"forward\" | \"root\"",
"description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
"options": [
"back",
"forward",
"root"
]
},
"ion-card/target": {
"type": "string | undefined",
"description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
"options": []
},
"ion-card/type": {
"type": "\"button\" | \"reset\" | \"submit\"",
"description": "The type of the button. Only used when an `onclick` or `button` property is present.",
"options": [
"button",
"reset",
"submit"
]
},
"ion-card-content/mode": {
"type": "\"ios\" | \"md\"",
"description": "The mode determines which platform styles to use.",
"options": [
"ios",
"md"
]
},
"ion-card-header/color": {
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"description": "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).",
"options": [
"danger",
"dark",
"light",
"medium",
"primary",
"secondary",
"success",
"tertiary",
"warning"
]
},
"ion-card-header/mode": {
"type": "\"ios\" | \"md\"",
"description": "The mode determines which platform styles to use.",
"options": [
"ios",
"md"
]
},
"ion-card-header/translucent": {
"type": "boolean",
"description": "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).",
"options": []
},
"ion-card-subtitle/color": {
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"description": "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).",
"options": [
"danger",
"dark",
"light",
"medium",
"primary",
"secondary",
"success",
"tertiary",
"warning"
]
},
"ion-card-subtitle/mode": {
"type": "\"ios\" | \"md\"",
"description": "The mode determines which platform styles to use.",
"options": [
"ios",
"md"
]
},
"ion-card-title/color": {
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"description": "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).",
"options": [
"danger",
"dark",
"light",
"medium",
"primary",
"secondary",
"success",
"tertiary",
"warning"
]
},
"ion-card-title/mode": {
"type": "\"ios\" | \"md\"",
"description": "The mode determines which platform styles to use.",
"options": [
"ios",
"md"
]
},
"ion-checkbox/checked": {
"type": "boolean",
"description": "If `true`, the checkbox is selected.",
"options": []
},
"ion-checkbox/color": {
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"description": "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).",
"options": [
"danger",
"dark",
"light",
"medium",
"primary",
"secondary",
"success",
"tertiary",
"warning"
]
},
"ion-checkbox/disabled": {
"type": "boolean",
"description": "If `true`, the user cannot interact with the checkbox.",
"options": []
},
"ion-checkbox/indeterminate": {
"type": "boolean",
"description": "If `true`, the checkbox will visually appear as indeterminate.",
"options": []
},
"ion-checkbox/mode": {
"type": "\"ios\" | \"md\"",
"description": "The mode determines which platform styles to use.",
"options": [
"ios",
"md"
]
},
"ion-checkbox/name": {
"type": "string",
"description": "The name of the control, which is submitted with the form data.",
"options": []
},
"ion-checkbox/value": {
"type": "any",
"description": "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>`.",
"options": []
},
"ion-chip/color": {
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"description": "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).",
"options": [
"danger",
"dark",
"light",
"medium",
"primary",
"secondary",
"success",
"tertiary",
"warning"
]
},
"ion-chip/disabled": {
"type": "boolean",
"description": "If `true`, the user cannot interact with the chip.",
"options": []
},
"ion-chip/mode": {
"type": "\"ios\" | \"md\"",
"description": "The mode determines which platform styles to use.",
"options": [
"ios",
"md"
]
},
"ion-chip/outline": {
"type": "boolean",
"description": "Display an outline style button.",
"options": []
},
"ion-col/offset": {
"type": "string | undefined",
"description": "The amount to offset the column, in terms of how many columns it should shift to the end\nof the total available.",
"options": []
},
"ion-col/offset-lg": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-col/offset-md": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-col/offset-sm": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-col/offset-xl": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-col/offset-xs": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-col/pull": {
"type": "string | undefined",
"description": "The amount to pull the column, in terms of how many columns it should shift to the start of\nthe total available.",
"options": []
},
"ion-col/pull-lg": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-col/pull-md": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-col/pull-sm": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-col/pull-xl": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-col/pull-xs": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-col/push": {
"type": "string | undefined",
"description": "The amount to push the column, in terms of how many columns it should shift to the end\nof the total available.",
"options": []
},
"ion-col/push-lg": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-col/push-md": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-col/push-sm": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-col/push-xl": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-col/push-xs": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-col/size": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-col/size-lg": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-col/size-md": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-col/size-sm": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-col/size-xl": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-col/size-xs": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-content/color": {
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"description": "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).",
"options": [
"danger",
"dark",
"light",
"medium",
"primary",
"secondary",
"success",
"tertiary",
"warning"
]
},
"ion-content/force-overscroll": {
"type": "boolean | undefined",
"description": "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, the does not disable the system bounce on iOS. That is an OS level setting.",
"options": []
},
"ion-content/fullscreen": {
"type": "boolean",
"description": "If `true`, the content will scroll behind the headers\nand footers. This effect can easily be seen by setting the toolbar\nto transparent.",
"options": []
},
"ion-content/scroll-events": {
"type": "boolean",
"description": "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`.",
"options": []
},
"ion-content/scroll-x": {
"type": "boolean",
"description": "If you want to enable the content scrolling in the X axis, set this property to `true`.",
"options": []
},
"ion-content/scroll-y": {
"type": "boolean",
"description": "If you want to disable the content scrolling in the Y axis, set this property to `false`.",
"options": []
},
"ion-datetime/cancel-text": {
"type": "string",
"description": "The text to display on the picker's cancel button.",
"options": []
},
"ion-datetime/clear-text": {
"type": "string",
"description": "The text to display on the picker's \"Clear\" button.",
"options": []
},
"ion-datetime/color": {
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"description": "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).",
"options": [
"danger",
"dark",
"light",
"medium",
"primary",
"secondary",
"success",
"tertiary",
"warning"
]
},
"ion-datetime/day-values": {
"type": "number | number[] | string | undefined",
"description": "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.",
"options": []
},
"ion-datetime/disabled": {
"type": "boolean",
"description": "If `true`, the user cannot interact with the datetime.",
"options": []
},
"ion-datetime/done-text": {
"type": "string",
"description": "The text to display on the picker's \"Done\" button.",
"options": []
},
"ion-datetime/first-day-of-week": {
"type": "number",
"description": "The first day of the week to use for `ion-datetime`. The\ndefault value is `0` and represents Sunday.",
"options": []
},
"ion-datetime/hour-cycle": {
"type": "\"h12\" | \"h23\" | undefined",
"description": "The hour cycle of the `ion-datetime`. If no value is set, this is\nspecified by the current locale.",
"options": [
"h12",
"h23"
]
},
"ion-datetime/hour-values": {
"type": "number | number[] | string | undefined",
"description": "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.",
"options": []
},
"ion-datetime/is-date-enabled": {
"type": "((dateIsoString: string) => boolean) | undefined",
"description": "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.",
"options": []
},
"ion-datetime/locale": {
"type": "string",
"description": "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.",
"options": []
},
"ion-datetime/max": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-datetime/min": {
"type": "string | undefined",
"description": "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.",
"options": []
},
"ion-datetime/minute-values": {
"type": "number | number[] | string | undefined",
"description": "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\"`.",
"options": []
},
"ion-datetime/mode": {
"type": "\"ios\" | \"md\"",
"description": "The mode determines which platform styles to use.",
"options": [
"ios",
"md"
]
},
"ion-datetime/month-values": {
"type": "number | number[] | string | undefined",
"description": "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`.",
"options": []
},
"ion-datetime/multiple": {
"type": "boolean",
"description": "If `true`, multiple dates can be selected at once. Only\napplies to `presentation=\"date\"` and `preferWheel=\"false\"`.",
"options": []
},
"ion-datetime/name": {
"type": "string",
"description": "The name of the control, which is submitted with the form data.",
"options": []
},
"ion-datetime/prefer-wheel": {
"type": "boolean",
"description": "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'`.",
"options": []
},
"ion-datetime/presentation": {
"type": "\"date\" | \"date-time\" | \"month\" | \"month-year\" | \"time\" | \"time-date\" | \"year\"",
"description": "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.",
"options": [
"date",
"date-time",
"month",
"month-year",
"time",
"time-date",
"year"
]
},
"ion-datetime/readonly": {
"type": "boolean",
"description": "If `true`, the datetime appears normal but is not interactive.",
"options": []
},
"ion-datetime/show-clear-button": {
"type": "boolean",
"description": "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.",
"options": []
},
"ion-datetime/show-default-buttons": {
"type": "boolean",
"description": "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.",
"options": []
},
"ion-datetime/show-default-time-label": {
"type": "boolean",
"description": "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.",
"options": []
},
"ion-datetime/show-default-title": {
"type": "boolean",
"description": "If `true`, a header will be shown above the calendar\npicker. This will include both the slotted title, and\nthe selected date.",
"options": []
},
"ion-datetime/size": {
"type": "\"cover\" | \"fixed\"",
"description": "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.",
"options": [
"cover",
"fixed"
]
},
"ion-datetime/title-selected-dates-formatter": {
"type": "((selectedDates: string[]) => string) | undefined",
"description": "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\".",
"options": []
},
"ion-datetime/value": {
"type": "null | string | string[] | undefined",
"description": "The value of the datetime as a valid ISO 8601 datetime string.\nShould be an array of strings if `multiple=\"true\"`.",
"options": []
},
"ion-datetime/year-values": {
"type": "number | number[] | string | undefined",
"description": "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\"`.",
"options": []
},
"ion-datetime-button/color": {
"type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"description": "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).",
"options": [
"danger",
"dark",
"light",
"medium",
"primary",
"secondary",
"success",
"tertiary",
"warning"
]
},
"ion-datetime-button/datetime": {
"type": "string | undefined",
"description": "The ID of the `ion-datetime` instance\nassociated with the datetime button.",
"options": []
},
"ion-datetime-button/disabled": {
"type": "boolean",
"description": "If `true`, the user cannot interact with the button.",
"options": []
},
"io