@ionic/core/dist/html.html-data.json

{
  "version": 1.1,
  "tags": [
    {
      "name": "ion-action-sheet",
      "description": {
        "kind": "markdown",
        "value": "An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in `ios` mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop."
      },
      "attributes": [
        {
          "name": "animated",
          "description": "If `true`, the action sheet will animate."
        },
        {
          "name": "backdrop-dismiss",
          "description": "If `true`, the action sheet will be dismissed when the backdrop is clicked."
        },
        {
          "name": "css-class",
          "description": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
        },
        {
          "name": "header",
          "description": "Title for the action sheet."
        },
        {
          "name": "keyboard-close",
          "description": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "sub-header",
          "description": "Subtitle for the action sheet."
        },
        {
          "name": "translucent",
          "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)."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/action-sheet/action-sheet.tsx"
        }
      ]
    },
    {
      "name": "ion-alert",
      "description": {
        "kind": "markdown",
        "value": "An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a `header`, `subHeader` and `message`."
      },
      "attributes": [
        {
          "name": "animated",
          "description": "If `true`, the alert will animate."
        },
        {
          "name": "backdrop-dismiss",
          "description": "If `true`, the alert will be dismissed when the backdrop is clicked."
        },
        {
          "name": "css-class",
          "description": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
        },
        {
          "name": "header",
          "description": "The main title in the heading of the alert."
        },
        {
          "name": "keyboard-close",
          "description": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
        },
        {
          "name": "message",
          "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`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)"
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "sub-header",
          "description": "The subtitle in the heading of the alert. Displayed under the title."
        },
        {
          "name": "translucent",
          "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)."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/alert/alert.tsx"
        }
      ]
    },
    {
      "name": "ion-app",
      "description": {
        "kind": "markdown",
        "value": "App is a container element for an Ionic application. There should only be one `<ion-app>` element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the `<ion-app>` when they are presented."
      },
      "attributes": [],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/app/app.tsx"
        }
      ]
    },
    {
      "name": "ion-avatar",
      "description": {
        "kind": "markdown",
        "value": "Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object.\n\nAvatars can be used by themselves or inside of any element. If placed inside of an `ion-chip` or `ion-item`, the avatar will resize to fit the parent component. To position an avatar on the left or right side of an item, set the slot to `start` or `end`, respectively."
      },
      "attributes": [],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/avatar/avatar.tsx"
        }
      ]
    },
    {
      "name": "ion-back-button",
      "description": {
        "kind": "markdown",
        "value": "The back button navigates back in the app's history upon click. It is smart enough to know what to render based on the mode and when to show based on the navigation stack.\n\nTo change what is displayed in the back button, use the `text` and `icon` properties."
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "default-href",
          "description": "The url to navigate back to by default when there is no history."
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the button."
        },
        {
          "name": "icon",
          "description": "The icon name to use for the back button."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "text",
          "description": "The text to display in the back button."
        },
        {
          "name": "type",
          "description": "The type of the button.",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/back-button/back-button.tsx"
        }
      ]
    },
    {
      "name": "ion-backdrop",
      "description": {
        "kind": "markdown",
        "value": "Backdrops are full screen components that overlay other components. They are useful behind components that transition in on top of other content and can be used to dismiss that component."
      },
      "attributes": [
        {
          "name": "stop-propagation",
          "description": "If `true`, the backdrop will stop propagation on tap."
        },
        {
          "name": "tappable",
          "description": "If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event."
        },
        {
          "name": "visible",
          "description": "If `true`, the backdrop will be visible."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/backdrop/backdrop.tsx"
        }
      ]
    },
    {
      "name": "ion-badge",
      "description": {
        "kind": "markdown",
        "value": "Badges are inline block elements that usually appear near another element. Typically they contain a number or other characters. They can be used as a notification that there are additional items associated with an element and indicate how many items there are."
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/badge/badge.tsx"
        }
      ]
    },
    {
      "name": "ion-button",
      "description": {
        "kind": "markdown",
        "value": "Buttons provide a clickable element, which can be used in forms, or anywhere that needs simple, standard button functionality. They may display text, icons, or both. Buttons can be styled with several attributes to look a specific way."
      },
      "attributes": [
        {
          "name": "button-type",
          "description": "The type of button."
        },
        {
          "name": "color",
          "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)."
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the button."
        },
        {
          "name": "download",
          "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)."
        },
        {
          "name": "expand",
          "description": "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button\nwithout left and right borders.",
          "values": [
            {
              "name": "block"
            },
            {
              "name": "full"
            }
          ]
        },
        {
          "name": "fill",
          "description": "Set to `\"clear\"` for a transparent button, to `\"outline\"` for a transparent\nbutton with a border, or to `\"solid\"`. The default style is `\"solid\"` except inside of\na toolbar, where the default is `\"clear\"`.",
          "values": [
            {
              "name": "clear"
            },
            {
              "name": "default"
            },
            {
              "name": "outline"
            },
            {
              "name": "solid"
            }
          ]
        },
        {
          "name": "href",
          "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "rel",
          "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)."
        },
        {
          "name": "router-direction",
          "description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
          "values": [
            {
              "name": "back"
            },
            {
              "name": "forward"
            },
            {
              "name": "root"
            }
          ]
        },
        {
          "name": "shape",
          "description": "The button shape.",
          "values": [
            {
              "name": "round"
            }
          ]
        },
        {
          "name": "size",
          "description": "The button size.",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "large"
            },
            {
              "name": "small"
            }
          ]
        },
        {
          "name": "strong",
          "description": "If `true`, activates a button with a heavier font weight."
        },
        {
          "name": "target",
          "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
        },
        {
          "name": "type",
          "description": "The type of the button.",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/button/button.tsx"
        }
      ]
    },
    {
      "name": "ion-buttons",
      "description": {
        "kind": "markdown",
        "value": "The Buttons component is a container element. Buttons placed in a toolbar should be placed inside of the `<ion-buttons>` element.\n\nThe `<ion-buttons>` element can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot.\n\n| Slot         | Description                                                                                              |\n|--------------|----------------------------------------------------------------------------------------------------------|\n| `secondary`  | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode.  |\n| `primary`    | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode.      |\n| `start`      | Positions to the `left` of the content in LTR, and to the `right` in RTL.                                |\n| `end`        | Positions to the `right` of the content in LTR, and to the `left` in RTL.                                |"
      },
      "attributes": [
        {
          "name": "collapse",
          "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)"
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/buttons/buttons.tsx"
        }
      ]
    },
    {
      "name": "ion-card",
      "description": {
        "kind": "markdown",
        "value": "Cards are a standard piece of UI that serves as an entry point to more detailed\ninformation. A card can be a single component, but is often made up of some\nheader, title, subtitle, and content. `ion-card` is broken up into several\nsub-components to reflect this. Please see `ion-card-content`,\n`ion-card-header`, `ion-card-title`, `ion-card-subtitle`."
      },
      "attributes": [
        {
          "name": "button",
          "description": "If `true`, a button tag will be rendered and the card will be tappable."
        },
        {
          "name": "color",
          "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)."
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the card."
        },
        {
          "name": "download",
          "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)."
        },
        {
          "name": "href",
          "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "rel",
          "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)."
        },
        {
          "name": "router-direction",
          "description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
          "values": [
            {
              "name": "back"
            },
            {
              "name": "forward"
            },
            {
              "name": "root"
            }
          ]
        },
        {
          "name": "target",
          "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
        },
        {
          "name": "type",
          "description": "The type of the button. Only used when an `onclick` or `button` property is present.",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/card/card.tsx"
        }
      ]
    },
    {
      "name": "ion-card-content",
      "description": {
        "kind": "markdown",
        "value": "`ion-card-content` is child component of `ion-card` that adds some content padding.\nIt is recommended that any text content for a card should be placed in an `ion-card-content`."
      },
      "attributes": [
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/card-content/card-content.tsx"
        }
      ]
    },
    {
      "name": "ion-card-header",
      "description": {
        "kind": "markdown",
        "value": "`ion-card-header` is a header component for `ion-card`."
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "translucent",
          "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)."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/card-header/card-header.tsx"
        }
      ]
    },
    {
      "name": "ion-card-subtitle",
      "description": {
        "kind": "markdown",
        "value": "`ion-card-subtitle` is a child component of `ion-card`"
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/card-subtitle/card-subtitle.tsx"
        }
      ]
    },
    {
      "name": "ion-card-title",
      "description": {
        "kind": "markdown",
        "value": "`ion-card-title` is a child component of `ion-card`"
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/card-title/card-title.tsx"
        }
      ]
    },
    {
      "name": "ion-checkbox",
      "description": {
        "kind": "markdown",
        "value": "Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property."
      },
      "attributes": [
        {
          "name": "checked",
          "description": "If `true`, the checkbox is selected."
        },
        {
          "name": "color",
          "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)."
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the checkbox."
        },
        {
          "name": "indeterminate",
          "description": "If `true`, the checkbox will visually appear as indeterminate."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "name",
          "description": "The name of the control, which is submitted with the form data."
        },
        {
          "name": "value",
          "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>`."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/checkbox/checkbox.tsx"
        }
      ]
    },
    {
      "name": "ion-chip",
      "description": {
        "kind": "markdown",
        "value": "Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons."
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the chip."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "outline",
          "description": "Display an outline style button."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/chip/chip.tsx"
        }
      ]
    },
    {
      "name": "ion-col",
      "description": {
        "kind": "markdown",
        "value": "Columns are cellular components of the [grid](../grid) system and go inside of a [row](../row).\nThey will expand to fill their row. All content within a grid should go inside of a column.\n\nSee [Grid Layout](/docs/layout/grid) for more information."
      },
      "attributes": [
        {
          "name": "offset",
          "description": "The amount to offset the column, in terms of how many columns it should shift to the end\nof the total available."
        },
        {
          "name": "offset-lg",
          "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."
        },
        {
          "name": "offset-md",
          "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."
        },
        {
          "name": "offset-sm",
          "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."
        },
        {
          "name": "offset-xl",
          "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."
        },
        {
          "name": "offset-xs",
          "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."
        },
        {
          "name": "pull",
          "description": "The amount to pull the column, in terms of how many columns it should shift to the start of\nthe total available."
        },
        {
          "name": "pull-lg",
          "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."
        },
        {
          "name": "pull-md",
          "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."
        },
        {
          "name": "pull-sm",
          "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."
        },
        {
          "name": "pull-xl",
          "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."
        },
        {
          "name": "pull-xs",
          "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."
        },
        {
          "name": "push",
          "description": "The amount to push the column, in terms of how many columns it should shift to the end\nof the total available."
        },
        {
          "name": "push-lg",
          "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."
        },
        {
          "name": "push-md",
          "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."
        },
        {
          "name": "push-sm",
          "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."
        },
        {
          "name": "push-xl",
          "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."
        },
        {
          "name": "push-xs",
          "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."
        },
        {
          "name": "size",
          "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."
        },
        {
          "name": "size-lg",
          "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."
        },
        {
          "name": "size-md",
          "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."
        },
        {
          "name": "size-sm",
          "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."
        },
        {
          "name": "size-xl",
          "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."
        },
        {
          "name": "size-xs",
          "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."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/col/col.tsx"
        }
      ]
    },
    {
      "name": "ion-content",
      "description": {
        "kind": "markdown",
        "value": "The content component provides an easy to use content area with some useful methods\nto control the scrollable area. There should only be one content in a single\nview.\n\nContent, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties)."
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "force-overscroll",
          "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."
        },
        {
          "name": "fullscreen",
          "description": "If `true`, the content will scroll behind the headers\nand footers. This effect can easily be seen by setting the toolbar\nto transparent."
        },
        {
          "name": "scroll-events",
          "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`."
        },
        {
          "name": "scroll-x",
          "description": "If you want to enable the content scrolling in the X axis, set this property to `true`."
        },
        {
          "name": "scroll-y",
          "description": "If you want to disable the content scrolling in the Y axis, set this property to `false`."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/content/content.tsx"
        }
      ]
    },
    {
      "name": "ion-datetime",
      "description": {
        "kind": "markdown",
        "value": "Datetimes present a picker interface from the bottom of a page, making it easy for\nusers to select dates and times. The picker displays scrollable columns that can be\nused to individually select years, months, days, hours and minute values. Datetimes\nare similar to the native `input` elements of type `datetime-local`, however, Ionic's\nDatetime component makes it easy to display the date and time in a preferred format,\nand manage the datetime values."
      },
      "attributes": [
        {
          "name": "cancel-text",
          "description": "The text to display on the picker's cancel button."
        },
        {
          "name": "day-names",
          "description": "Full day of the week names. This can be used to provide\nlocale names for each day in the week. Defaults to English."
        },
        {
          "name": "day-short-names",
          "description": "Short abbreviated day of the week names. This can be used to provide\nlocale names for each day in the week. Defaults to English.\nDefaults to: `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`"
        },
        {
          "name": "day-values",
          "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."
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the datetime."
        },
        {
          "name": "display-format",
          "description": "The display format of the date and time as text that shows\nwithin the item. When the `pickerFormat` input is not used, then the\n`displayFormat` is used for both display the formatted text, and determining\nthe datetime picker's columns. See the `pickerFormat` input description for\nmore info. Defaults to `MMM D, YYYY`."
        },
        {
          "name": "display-timezone",
          "description": "The timezone to use for display purposes only. See\n[Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString)\nfor a list of supported timezones. If no value is provided, the\ncomponent will default to displaying times in the user's local timezone."
        },
        {
          "name": "done-text",
          "description": "The text to display on the picker's \"Done\" button."
        },
        {
          "name": "hour-values",
          "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."
        },
        {
          "name": "max",
          "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."
        },
        {
          "name": "min",
          "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."
        },
        {
          "name": "minute-values",
          "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\"`."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "month-names",
          "description": "Full names for each month name. This can be used to provide\nlocale month names. Defaults to English."
        },
        {
          "name": "month-short-names",
          "description": "Short abbreviated names for each month name. This can be used to provide\nlocale month names. Defaults to English."
        },
        {
          "name": "month-values",
          "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`."
        },
        {
          "name": "name",
          "description": "The name of the control, which is submitted with the form data."
        },
        {
          "name": "picker-format",
          "description": "The format of the date and time picker columns the user selects.\nA datetime input can have one or many datetime parts, each getting their\nown column which allow individual selection of that particular datetime part. For\nexample, year and month columns are two individually selectable columns which help\nchoose an exact date from the datetime picker. Each column follows the string\nparse format. Defaults to use `displayFormat`."
        },
        {
          "name": "placeholder",
          "description": "The text to display when there's no date selected yet.\nUsing lowercase to match the input attribute"
        },
        {
          "name": "readonly",
          "description": "If `true`, the datetime appears normal but is not interactive."
        },
        {
          "name": "value",
          "description": "The value of the datetime as a valid ISO 8601 datetime string."
        },
        {
          "name": "year-values",
          "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\"`."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/datetime/datetime.tsx"
        }
      ]
    },
    {
      "name": "ion-fab",
      "description": {
        "kind": "markdown",
        "value": "Fabs are container elements that contain one or more fab buttons. They should be placed in a fixed position that does not scroll with the content. Fab should have one main fab-button. Fabs can also contain fab-lists which contain related buttons that show when the main fab button is clicked. The same fab container can contain several [fab-list](../fab-list) elements with different side values."
      },
      "attributes": [
        {
          "name": "activated",
          "description": "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."
        },
        {
          "name": "edge",
          "description": "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."
        },
        {
          "name": "horizontal",
          "description": "Where to align the fab horizontally in the viewport.",
          "values": [
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "vertical",
          "description": "Where to align the fab vertically in the viewport.",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "center"
            },
            {
              "name": "top"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/fab/fab.tsx"
        }
      ]
    },
    {
      "name": "ion-fab-button",
      "description": {
        "kind": "markdown",
        "value": "Floating Action Buttons (FABs) represent the primary action in an application. By default, they have a circular shape. When pressed, the button may open more related actions. As the name suggests, FABs generally float over the content in a fixed position. This is not achieved exclusively by using an `<ion-fab-button>FAB</ion-fab-button>`. They need to be wrapped with an `<ion-fab>` component in order to be fixed over the content.\n\nIf the FAB button is not wrapped with `<ion-fab>`, it will scroll with the content. FAB buttons have a default size, a mini size and can accept different colors:"
      },
      "attributes": [
        {
          "name": "activated",
          "description": "If `true`, the fab button will be show a close icon."
        },
        {
          "name": "close-icon",
          "description": "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."
        },
        {
          "name": "color",
          "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)."
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the fab button."
        },
        {
          "name": "download",
          "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)."
        },
        {
          "name": "href",
          "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "rel",
          "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)."
        },
        {
          "name": "router-direction",
          "description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
          "values": [
            {
              "name": "back"
            },
            {
              "name": "forward"
            },
            {
              "name": "root"
            }
          ]
        },
        {
          "name": "show",
          "description": "If `true`, the fab button will show when in a fab-list."
        },
        {
          "name": "size",
          "description": "The size of the button. Set this to `small` in order to have a mini fab button.",
          "values": [
            {
              "name": "small"
            }
          ]
        },
        {
          "name": "target",
          "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
        },
        {
          "name": "translucent",
          "description": "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)."
        },
        {
          "name": "type",
          "description": "The type of the button.",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/fab-button/fab-button.tsx"
        }
      ]
    },
    {
      "name": "ion-fab-list",
      "description": {
        "kind": "markdown",
        "value": "The `ion-fab-list` element is a container for multiple fab buttons. This collection of fab buttons contains actions related to the main fab button and is flung out on click. To specify what side the buttons should appear on, set the `side` property to 'start', 'end', 'top', 'bottom'"
      },
      "attributes": [
        {
          "name": "activated",
          "description": "If `true`, the fab list will show all fab buttons in the list."
        },
        {
          "name": "side",
          "description": "The side the fab list will show on relative to the main fab button.",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "end"
            },
            {
              "name": "start"
            },
            {
              "name": "top"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/fab-list/fab-list.tsx"
        }
      ]
    },
    {
      "name": "ion-footer",
      "description": {
        "kind": "markdown",
        "value": "Footer is a root component of a page that sits at the bottom of the page.\nFooter can be a wrapper for ion-toolbar to make sure the content area is sized correctly."
      },
      "attributes": [
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "translucent",
          "description": "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."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/footer/footer.tsx"
        }
      ]
    },
    {
      "name": "ion-grid",
      "description": {
        "kind": "markdown",
        "value": "The grid is a powerful mobile-first flexbox system for building custom layouts.\n\nIt is composed of three units — a grid, [row(s)](../row) and [column(s)](../col). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.\n\nSee the [Responsive Grid documentation](/docs/layout/grid) for more information."
      },
      "attributes": [
        {
          "name": "fixed",
          "description": "If `true`, the grid will have a fixed width based on the screen size."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/grid/grid.tsx"
        }
      ]
    },
    {
      "name": "ion-header",
      "description": {
        "kind": "markdown",
        "value": "Header is a parent component that holds the toolbar component.\nIt's important to note that ion-header needs to be the one of the three root elements of a page"
      },
      "attributes": [
        {
          "name": "collapse",
          "description": "Describes the scroll effect that will be applied to the header\n`condense` only applies in iOS mode.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)",
          "values": [
            {
              "name": "condense"
            }
          ]
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "translucent",
          "description": "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."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/header/header.tsx"
        }
      ]
    },
    {
      "name": "ion-img",
      "description": {
        "kind": "markdown",
        "value": "Img is a tag that will lazily load an image when ever the tag is in the viewport. This is extremely useful when generating a large list as images are only loaded when they're visible. The component uses [Intersection Observer](https://caniuse.com/#feat=intersectionobserver) internally, which is supported in most modern browser, but falls back to a `setTimeout` when it is not supported."
      },
      "attributes": [
        {
          "name": "alt",
          "description": "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."
        },
        {
          "name": "src",
          "description": "The image URL. This attribute is mandatory for the `<img>` element."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/img/img.tsx"
        }
      ]
    },
    {
      "name": "ion-infinite-scroll",
      "description": {
        "kind": "markdown",
        "value": "The Infinite Scroll component calls an action to be performed when the user scrolls a specified distance from the bottom or top of the page.\n\nThe expression assigned to the `ionInfinite` event is called when the user reaches that defined distance. When this expression has finished any and all tasks, it should call the `complete()` method on the infinite scroll instance."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "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."
        },
        {
          "name": "position",
          "description": "The position of the infinite scroll element.\nThe value can be either `top` or `bottom`.",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "top"
            }
          ]
        },
        {
          "name": "threshold",
          "description": "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."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/infinite-scroll/infinite-scroll.tsx"
        }
      ]
    },
    {
      "name": "ion-infinite-scroll-content",
      "description": {
        "kind": "markdown",
        "value": "The `ion-infinite-scroll-content` component is the default child used by the `ion-infinite-scroll`. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the `loadingSpinner` and `loadingText` properties."
      },
      "attributes": [
        {
          "name": "loading-spinner",
          "description": "An animated SVG spinner that shows while loading.",
          "values": [
            {
              "name": "bubbles"
            },
            {
              "name": "circles"
            },
            {
              "name": "circular"
            },
            {
              "name": "crescent"
            },
            {
              "name": "dots"
            },
            {
              "name": "lines"
            },
            {
              "name": "lines-small"
            }
          ]
        },
        {
          "name": "loading-text",
          "description": "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)"
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx"
        }
      ]
    },
    {
      "name": "ion-input",
      "description": {
        "kind": "markdown",
        "value": "The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input, but works great on desktop devices and integrates with the keyboard on mobile devices.\n\nIt is meant for text `type` inputs only, such as `\"text\"`, `\"password\"`, `\"email\"`, `\"number\"`, `\"search\"`, `\"tel\"`, and `\"url\"`. It supports all standard text input events including keyup, keydown, keypress, and more."
      },
      "attributes": [
        {
          "name": "accept",
          "description": "If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers."
        },
        {
          "name": "autocapitalize",
          "description": "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\"`."
        },
        {
          "name": "autocomplete",
          "description": "Indicates whether the value of the control can be automatically completed by the browser.",
          "values": [
            {
              "name": "on"
            },
            {
              "name": "off"
            },
            {
              "name": "name"
            },
            {
              "name": "honorific-prefix"
            },
            {
              "name": "given-name"
            },
            {
              "name": "additional-name"
            },
            {
              "name": "family-name"
            },
            {
              "name": "honorific-suffix"
            },
            {
              "name": "nickname"
            },
            {
              "name": "email"
            },
            {
              "name": "username"
            },
            {
              "name": "new-password"
            },
            {
              "name": "current-password"
            },
            {
              "name": "one-time-code"
            },
            {
              "name": "organization-title"
            },
            {
              "name": "organization"
            },
            {
              "name": "street-address"
            },
            {
              "name": "address-line1"
            },
            {
              "name": "address-line2"
            },
            {
              "name": "address-line3"
            },
            {
              "name": "address-level4"
            },
            {
              "name": "address-level3"
            },
            {
              "name": "address-level2"
            },
            {
              "name": "address-level1"
            },
            {
              "name": "country"
            },
            {
              "name": "country-name"
            },
            {
              "name": "postal-code"
            },
            {
              "name": "cc-name"
            },
            {
              "name": "cc-given-name"
            },
            {
              "name": "cc-additional-name"
            },
            {
              "name": "cc-family-name"
            },
            {
              "name": "cc-number"
            },
            {
              "name": "cc-exp"
            },
            {
              "name": "cc-exp-month"
            },
            {
              "name": "cc-exp-year"
            },
            {
              "name": "cc-csc"
            },
            {
              "name": "cc-type"
            },
            {
              "name": "transaction-currency"
            },
            {
              "name": "transaction-amount"
            },
            {
              "name": "language"
            },
            {
              "name": "bday"
            },
            {
              "name": "bday-day"
            },
            {
              "name": "bday-month"
            },
            {
              "name": "bday-year"
            },
            {
              "name": "sex"
            },
            {
              "name": "tel"
            },
            {
              "name": "tel-country-code"
            },
            {
              "name": "tel-national"
            },
            {
              "name": "tel-area-code"
            },
            {
              "name": "tel-local"
            },
            {
              "name": "tel-extension"
            },
            {
              "name": "impp"
            },
            {
              "name": "url"
            },
            {
              "name": "photo"
            }
          ]
        },
        {
          "name": "autocorrect",
          "description": "Whether auto correction should be enabled when the user is entering/editing the text value.",
          "values": [
            {
              "name": "off"
            },
            {
              "name": "on"
            }
          ]
        },
        {
          "name": "autofocus",
          "description": "This Boolean attribute lets you specify that a form control should have input focus when the page loads."
        },
        {
          "name": "clear-input",
          "description": "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input."
        },
        {
          "name": "clear-on-edit",
          "description": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types."
        },
        {
          "name": "color",
          "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)."
        },
        {
          "name": "debounce",
          "description": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`."
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the input."
        },
        {
          "name": "enterkeyhint",
          "description": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
          "values": [
            {
              "name": "done"
            },
            {
              "name": "enter"
            },
            {
              "name": "go"
            },
            {
              "name": "next"
            },
            {
              "name": "previous"
            },
            {
              "name": "search"
            },
            {
              "name": "send"
            }
          ]
        },
        {
          "name": "inputmode",
          "description": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
          "values": [
            {
              "name": "decimal"
            },
            {
              "name": "email"
            },
            {
              "name": "none"
            },
            {
              "name": "numeric"
            },
            {
              "name": "search"
            },
            {
              "name": "tel"
            },
            {
              "name": "text"
            },
            {
              "name": "url"
            }
          ]
        },
        {
          "name": "max",
          "description": "The maximum value, which must not be less than its minimum (min attribute) value."
        },
        {
          "name": "maxlength",
          "description": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter."
        },
        {
          "name": "min",
          "description": "The minimum value, which must not be greater than its maximum (max attribute) value."
        },
        {
          "name": "minlength",
          "description": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "multiple",
          "description": "If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored."
        },
        {
          "name": "name",
          "description": "The name of the control, which is submitted with the form data."
        },
        {
          "name": "pattern",
          "description": "A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information."
        },
        {
          "name": "placeholder",
          "description": "Instructional text that shows before the input has a value."
        },
        {
          "name": "readonly",
          "description": "If `true`, the user cannot modify the value."
        },
        {
          "name": "required",
          "description": "If `true`, the user must fill in a value before submitting a form."
        },
        {
          "name": "size",
          "description": "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored."
        },
        {
          "name": "spellcheck",
          "description": "If `true`, the element will have its spelling and grammar checked."
        },
        {
          "name": "step",
          "description": "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."
        },
        {
          "name": "type",
          "description": "The type of control to display. The default type is text.",
          "values": [
            {
              "name": "date"
            },
            {
              "name": "datetime-local"
            },
            {
              "name": "email"
            },
            {
              "name": "month"
            },
            {
              "name": "number"
            },
            {
              "name": "password"
            },
            {
              "name": "search"
            },
            {
              "name": "tel"
            },
            {
              "name": "text"
            },
            {
              "name": "time"
            },
            {
              "name": "url"
            },
            {
              "name": "week"
            }
          ]
        },
        {
          "name": "value",
          "description": "The value of the input."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/input/input.tsx"
        }
      ]
    },
    {
      "name": "ion-item",
      "description": {
        "kind": "markdown",
        "value": "Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. Generally they are placed in a list with other items. Items can be swiped, deleted, reordered, edited, and more."
      },
      "attributes": [
        {
          "name": "button",
          "description": "If `true`, a button tag will be rendered and the item will be tappable."
        },
        {
          "name": "color",
          "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)."
        },
        {
          "name": "detail",
          "description": "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."
        },
        {
          "name": "detail-icon",
          "description": "The icon to use when `detail` is set to `true`."
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the item."
        },
        {
          "name": "download",
          "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)."
        },
        {
          "name": "href",
          "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
        },
        {
          "name": "lines",
          "description": "How the bottom border should be displayed on the item.",
          "values": [
            {
              "name": "full"
            },
            {
              "name": "inset"
            },
            {
              "name": "none"
            }
          ]
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "rel",
          "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)."
        },
        {
          "name": "router-direction",
          "description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
          "values": [
            {
              "name": "back"
            },
            {
              "name": "forward"
            },
            {
              "name": "root"
            }
          ]
        },
        {
          "name": "target",
          "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
        },
        {
          "name": "type",
          "description": "The type of the button. Only used when an `onclick` or `button` property is present.",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/item/item.tsx"
        }
      ]
    },
    {
      "name": "ion-item-divider",
      "description": {
        "kind": "markdown",
        "value": "Item Dividers are block elements that can be used to separate items in a list. They are similar to list headers, but instead of being placed at the top of a list, they should go in between groups of items."
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "sticky",
          "description": "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"
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/item-divider/item-divider.tsx"
        }
      ]
    },
    {
      "name": "ion-item-group",
      "description": {
        "kind": "markdown",
        "value": "Item groups are containers that organize similar items together. They can contain item dividers to divide the items into multiple sections. They can also be used to group sliding items."
      },
      "attributes": [],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/item-group/item-group.tsx"
        }
      ]
    },
    {
      "name": "ion-item-option",
      "description": {
        "kind": "markdown",
        "value": "The option button for an `ion-item-sliding`. Must be placed inside of an `<ion-item-options>`.\nYou can combine the `ionSwipe` event and the `expandable` directive to create a full swipe\naction for the item."
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the item option."
        },
        {
          "name": "download",
          "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)."
        },
        {
          "name": "expandable",
          "description": "If `true`, the option will expand to take up the available width and cover any other options."
        },
        {
          "name": "href",
          "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "rel",
          "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)."
        },
        {
          "name": "target",
          "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
        },
        {
          "name": "type",
          "description": "The type of the button.",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/item-option/item-option.tsx"
        }
      ]
    },
    {
      "name": "ion-item-options",
      "description": {
        "kind": "markdown",
        "value": "The option buttons for an `ion-item-sliding`. These buttons can be placed either on the [start or end side](#side-description).\nYou can combine the `ionSwipe` event plus the `expandable` directive to create a full swipe action for the item."
      },
      "attributes": [
        {
          "name": "side",
          "description": "The side the option button should be on. Possible values: `\"start\"` and `\"end\"`. If you have multiple `ion-item-options`, a side must be provided for each.",
          "values": [
            {
              "name": "end"
            },
            {
              "name": "start"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/item-options/item-options.tsx"
        }
      ]
    },
    {
      "name": "ion-item-sliding",
      "description": {
        "kind": "markdown",
        "value": "A sliding item contains an item that can be dragged to reveal buttons. It requires an [item](../item) component as a child. All options to reveal should be placed in the [item options](../item-options) element."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the sliding item."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/item-sliding/item-sliding.tsx"
        }
      ]
    },
    {
      "name": "ion-label",
      "description": {
        "kind": "markdown",
        "value": "Label is a wrapper element that can be used in combination with `ion-item`, `ion-input`, `ion-toggle`, and more. The position of the label inside of an item can be inline, fixed, stacked, or floating."
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "position",
          "description": "The position determines where and how the label behaves inside an item.",
          "values": [
            {
              "name": "fixed"
            },
            {
              "name": "floating"
            },
            {
              "name": "stacked"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/label/label.tsx"
        }
      ]
    },
    {
      "name": "ion-list",
      "description": {
        "kind": "markdown",
        "value": "Lists are made up of multiple rows of items which can contain text, buttons, toggles,\nicons, thumbnails, and much more. Lists generally contain items with similar data content, such as images and text.\n\nLists support several interactions including swiping items to reveal options, dragging to reorder items within the list, and deleting items."
      },
      "attributes": [
        {
          "name": "inset",
          "description": "If `true`, the list will have margin around it and rounded corners."
        },
        {
          "name": "lines",
          "description": "How the bottom border should be displayed on all items.",
          "values": [
            {
              "name": "full"
            },
            {
              "name": "inset"
            },
            {
              "name": "none"
            }
          ]
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/list/list.tsx"
        }
      ]
    },
    {
      "name": "ion-list-header",
      "description": {
        "kind": "markdown",
        "value": "ListHeader a header component for a list.\nUnlike ItemDivider, ListHeaders are styled to be stand-out from the rest of the list items."
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "lines",
          "description": "How the bottom border should be displayed on the list header.",
          "values": [
            {
              "name": "full"
            },
            {
              "name": "inset"
            },
            {
              "name": "none"
            }
          ]
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/list-header/list-header.tsx"
        }
      ]
    },
    {
      "name": "ion-loading",
      "description": {
        "kind": "markdown",
        "value": "An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting `showBackdrop: false` upon creation."
      },
      "attributes": [
        {
          "name": "animated",
          "description": "If `true`, the loading indicator will animate."
        },
        {
          "name": "backdrop-dismiss",
          "description": "If `true`, the loading indicator will be dismissed when the backdrop is clicked."
        },
        {
          "name": "css-class",
          "description": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
        },
        {
          "name": "duration",
          "description": "Number of milliseconds to wait before dismissing the loading indicator."
        },
        {
          "name": "keyboard-close",
          "description": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
        },
        {
          "name": "message",
          "description": "Optional text content to display in the loading indicator."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "show-backdrop",
          "description": "If `true`, a backdrop will be displayed behind the loading indicator."
        },
        {
          "name": "spinner",
          "description": "The name of the spinner to display.",
          "values": [
            {
              "name": "bubbles"
            },
            {
              "name": "circles"
            },
            {
              "name": "circular"
            },
            {
              "name": "crescent"
            },
            {
              "name": "dots"
            },
            {
              "name": "lines"
            },
            {
              "name": "lines-small"
            }
          ]
        },
        {
          "name": "translucent",
          "description": "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)."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/loading/loading.tsx"
        }
      ]
    },
    {
      "name": "ion-menu",
      "description": {
        "kind": "markdown",
        "value": "The Menu component is a navigation drawer that slides in from the side of the current view.\nBy default, it slides in from the left, but the side can be overridden.\nThe menu will be displayed differently based on the mode, however the display type can be changed to any of the available menu types.\nThe menu element should be a sibling to the root content element.\nThere can be any number of menus attached to the content.\nThese can be controlled from the templates, or programmatically using the MenuController."
      },
      "attributes": [
        {
          "name": "content-id",
          "description": "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`."
        },
        {
          "name": "disabled",
          "description": "If `true`, the menu is disabled."
        },
        {
          "name": "max-edge-start",
          "description": "The edge threshold for dragging the menu open.\nIf a drag/swipe happens over this value, the menu is not triggered."
        },
        {
          "name": "menu-id",
          "description": "An id for the menu."
        },
        {
          "name": "side",
          "description": "Which side of the view the menu should be placed.",
          "values": [
            {
              "name": "end"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "swipe-gesture",
          "description": "If `true`, swiping the menu is enabled."
        },
        {
          "name": "type",
          "description": "The display type of the menu.\nAvailable options: `\"overlay\"`, `\"reveal\"`, `\"push\"`."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/menu/menu.tsx"
        }
      ]
    },
    {
      "name": "ion-menu-button",
      "description": {
        "kind": "markdown",
        "value": "Menu Button is component that automatically creates the icon and functionality to open a menu on a page."
      },
      "attributes": [
        {
          "name": "auto-hide",
          "description": "Automatically hides the menu button when the corresponding menu is not active"
        },
        {
          "name": "color",
          "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)."
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the menu button."
        },
        {
          "name": "menu",
          "description": "Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle"
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "type",
          "description": "The type of the button.",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/menu-button/menu-button.tsx"
        }
      ]
    },
    {
      "name": "ion-menu-toggle",
      "description": {
        "kind": "markdown",
        "value": "The MenuToggle component can be used to toggle a menu open or closed.\n\nBy default, it's only visible when the selected menu is active. A menu is active when it can be opened/closed. If the menu is disabled or it's being presented as a split-pane, the menu is marked as non-active and ion-menu-toggle hides itself.\n\nIn case it's desired to keep `ion-menu-toggle` always visible, the `autoHide` property can be set to `false`."
      },
      "attributes": [
        {
          "name": "auto-hide",
          "description": "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."
        },
        {
          "name": "menu",
          "description": "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."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/menu-toggle/menu-toggle.tsx"
        }
      ]
    },
    {
      "name": "ion-modal",
      "description": {
        "kind": "markdown",
        "value": "A Modal is a dialog that appears on top of the app's content, and must be dismissed by the app before interaction can resume. It is useful as a select component when there are a lot of options to choose from, or when filtering items in a list, as well as many other use cases."
      },
      "attributes": [
        {
          "name": "animated",
          "description": "If `true`, the modal will animate."
        },
        {
          "name": "backdrop-dismiss",
          "description": "If `true`, the modal will be dismissed when the backdrop is clicked."
        },
        {
          "name": "component",
          "description": "The component to display inside of the modal."
        },
        {
          "name": "css-class",
          "description": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
        },
        {
          "name": "keyboard-close",
          "description": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "show-backdrop",
          "description": "If `true`, a backdrop will be displayed behind the modal."
        },
        {
          "name": "swipe-to-close",
          "description": "If `true`, the modal can be swiped to dismiss. Only applies in iOS mode."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/modal/modal.tsx"
        }
      ]
    },
    {
      "name": "ion-nav",
      "description": {
        "kind": "markdown",
        "value": "Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.\n\nUnlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL."
      },
      "attributes": [
        {
          "name": "animated",
          "description": "If `true`, the nav should animate the transition of components."
        },
        {
          "name": "root",
          "description": "Root NavComponent to load"
        },
        {
          "name": "swipe-gesture",
          "description": "If the nav component should allow for swipe-to-go-back."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/nav/nav.tsx"
        }
      ]
    },
    {
      "name": "ion-nav-link",
      "description": {
        "kind": "markdown",
        "value": "A navigation link is used to navigate to a specified component. The component can be navigated to by going `forward`, `back` or as a `root` component.\n\nIt is the element form of calling the `push()`, `pop()`, and `setRoot()` methods on the navigation controller."
      },
      "attributes": [
        {
          "name": "component",
          "description": "Component to navigate to. Only used if the `routerDirection` is `\"forward\"` or `\"root\"`."
        },
        {
          "name": "router-direction",
          "description": "The transition direction when navigating to another page.",
          "values": [
            {
              "name": "back"
            },
            {
              "name": "forward"
            },
            {
              "name": "root"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/nav-link/nav-link.tsx"
        }
      ]
    },
    {
      "name": "ion-note",
      "description": {
        "kind": "markdown",
        "value": "Notes are text elements generally used as subtitles that provide more information. Notes are styled to appear grey by default. Notes can be used in an item as metadata text."
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/note/note.tsx"
        }
      ]
    },
    {
      "name": "ion-picker",
      "description": {
        "kind": "markdown",
        "value": "A Picker is a dialog that displays a row of buttons and columns underneath. It appears on top of the app's content, and at the bottom of the viewport."
      },
      "attributes": [
        {
          "name": "animated",
          "description": "If `true`, the picker will animate."
        },
        {
          "name": "backdrop-dismiss",
          "description": "If `true`, the picker will be dismissed when the backdrop is clicked."
        },
        {
          "name": "css-class",
          "description": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
        },
        {
          "name": "duration",
          "description": "Number of milliseconds to wait before dismissing the picker."
        },
        {
          "name": "keyboard-close",
          "description": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "show-backdrop",
          "description": "If `true`, a backdrop will be displayed behind the picker."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/picker/picker.tsx"
        }
      ]
    },
    {
      "name": "ion-popover",
      "description": {
        "kind": "markdown",
        "value": "A Popover is a dialog that appears on top of the current page. It can be used for anything, but generally it is used for overflow actions that don't fit in the navigation bar."
      },
      "attributes": [
        {
          "name": "animated",
          "description": "If `true`, the popover will animate."
        },
        {
          "name": "backdrop-dismiss",
          "description": "If `true`, the popover will be dismissed when the backdrop is clicked."
        },
        {
          "name": "component",
          "description": "The component to display inside of the popover."
        },
        {
          "name": "css-class",
          "description": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
        },
        {
          "name": "event",
          "description": "The event to pass to the popover animation."
        },
        {
          "name": "keyboard-close",
          "description": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "show-backdrop",
          "description": "If `true`, a backdrop will be displayed behind the popover."
        },
        {
          "name": "translucent",
          "description": "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)."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/popover/popover.tsx"
        }
      ]
    },
    {
      "name": "ion-progress-bar",
      "description": {
        "kind": "markdown",
        "value": "Progress bars inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. There are two types of progress bars: `determinate` and `indeterminate`."
      },
      "attributes": [
        {
          "name": "buffer",
          "description": "If the buffer and value are smaller than 1, the buffer circles will show.\nThe buffer should be between [0, 1]."
        },
        {
          "name": "color",
          "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)."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "reversed",
          "description": "If true, reverse the progress bar direction."
        },
        {
          "name": "type",
          "description": "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).",
          "values": [
            {
              "name": "determinate"
            },
            {
              "name": "indeterminate"
            }
          ]
        },
        {
          "name": "value",
          "description": "The value determines how much of the active bar should display when the\n`type` is `\"determinate\"`.\nThe value should be between [0, 1]."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/progress-bar/progress-bar.tsx"
        }
      ]
    },
    {
      "name": "ion-radio",
      "description": {
        "kind": "markdown",
        "value": "Radios should be used inside of an [`ion-radio-group`](../radio-group). Pressing on a radio will check it. They can also be checked programmatically by setting the value property of the parent `ion-radio-group` to the value of the radio.\n\nWhen radios are inside of a radio group, only one radio in the group will be checked at any time. Pressing a radio will check it and uncheck the previously selected radio, if there is one. If a radio is not in a group with another radio, then both radios will have the ability to be checked at the same time."
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the radio."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "name",
          "description": "The name of the control, which is submitted with the form data."
        },
        {
          "name": "value",
          "description": "the value of the radio."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/radio/radio.tsx"
        }
      ]
    },
    {
      "name": "ion-radio-group",
      "description": {
        "kind": "markdown",
        "value": "A radio group is a group of [radio buttons](../radio). It allows\na user to select at most one radio button from a set. Checking one radio\nbutton that belongs to a radio group unchecks any previous checked\nradio button within the same group."
      },
      "attributes": [
        {
          "name": "allow-empty-selection",
          "description": "If `true`, the radios can be deselected."
        },
        {
          "name": "name",
          "description": "The name of the control, which is submitted with the form data."
        },
        {
          "name": "value",
          "description": "the value of the radio group."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/radio-group/radio-group.tsx"
        }
      ]
    },
    {
      "name": "ion-range",
      "description": {
        "kind": "markdown",
        "value": "The Range slider lets users select from a range of values by moving\nthe slider knob. It can accept dual knobs, but by default one knob\ncontrols the value of the range."
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "debounce",
          "description": "How long, in milliseconds, to wait to trigger the\n`ionChange` event after each change in the range value.\nThis also impacts form bindings such as `ngModel` or `v-model`."
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the range."
        },
        {
          "name": "dual-knobs",
          "description": "Show two knobs."
        },
        {
          "name": "max",
          "description": "Maximum integer value of the range."
        },
        {
          "name": "min",
          "description": "Minimum integer value of the range."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "name",
          "description": "The name of the control, which is submitted with the form data."
        },
        {
          "name": "pin",
          "description": "If `true`, a pin with integer value is shown when the knob\nis pressed."
        },
        {
          "name": "snaps",
          "description": "If `true`, the knob snaps to tick marks evenly spaced based\non the step property value."
        },
        {
          "name": "step",
          "description": "Specifies the value granularity."
        },
        {
          "name": "ticks",
          "description": "If `true`, tick marks are displayed based on the step value.\nOnly applies when `snaps` is `true`."
        },
        {
          "name": "value",
          "description": "the value of the range."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/range/range.tsx"
        }
      ]
    },
    {
      "name": "ion-refresher",
      "description": {
        "kind": "markdown",
        "value": "The refresher provides pull-to-refresh functionality on a content component.\nThe pull-to-refresh pattern lets a user pull down on a list of data using touch\nin order to retrieve more data.\n\nData should be modified during the refresher's output events. Once the async\noperation has completed and the refreshing should end, call `complete()` on the\nrefresher."
      },
      "attributes": [
        {
          "name": "close-duration",
          "description": "Time it takes to close the refresher.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher."
        },
        {
          "name": "disabled",
          "description": "If `true`, the refresher will be hidden."
        },
        {
          "name": "pull-factor",
          "description": "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."
        },
        {
          "name": "pull-max",
          "description": "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."
        },
        {
          "name": "pull-min",
          "description": "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."
        },
        {
          "name": "snapback-duration",
          "description": "Time it takes the refresher to to snap back to the `refreshing` state.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/refresher/refresher.tsx"
        }
      ]
    },
    {
      "name": "ion-refresher-content",
      "description": {
        "kind": "markdown",
        "value": "The refresher content contains the text, icon and spinner to display during a pull-to-refresh. Ionic provides the pulling icon and refreshing spinner based on the platform. However, the default icon, spinner, and text can be customized based on the state of the refresher."
      },
      "attributes": [
        {
          "name": "pulling-icon",
          "description": "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."
        },
        {
          "name": "pulling-text",
          "description": "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)"
        },
        {
          "name": "refreshing-spinner",
          "description": "An animated SVG spinner that shows when refreshing begins",
          "values": [
            {
              "name": "bubbles"
            },
            {
              "name": "circles"
            },
            {
              "name": "circular"
            },
            {
              "name": "crescent"
            },
            {
              "name": "dots"
            },
            {
              "name": "lines"
            },
            {
              "name": "lines-small"
            }
          ]
        },
        {
          "name": "refreshing-text",
          "description": "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)"
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/refresher-content/refresher-content.tsx"
        }
      ]
    },
    {
      "name": "ion-reorder",
      "description": {
        "kind": "markdown",
        "value": "Reorder is a component that allows an item in a group of items to be dragged to change its order within that group. It must be used within an `ion-reorder-group` to provide a visual drag and drop interface.\n\n`ion-reorder` is the anchor used to drag and drop the items inside of the `ion-reorder-group`. See the [Reorder Group](../reorder-group) for more information on how to complete the reorder operation."
      },
      "attributes": [],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/reorder/reorder.tsx"
        }
      ]
    },
    {
      "name": "ion-reorder-group",
      "description": {
        "kind": "markdown",
        "value": "The reorder group is a wrapper component for items using the `ion-reorder` component. See the [Reorder documentation](../reorder/) for further information about the anchor component that is used to drag items within the `ion-reorder-group`.\n\nOnce the user drags an item and drops it in a new position, the `ionItemReorder` event is dispatched. A handler for it should be implemented that calls the `complete()` method.\n\nThe `detail` property of the `ionItemReorder` event includes all of the relevant information about the reorder operation, including the `from` and `to` indexes. In the context of reordering, an item moves `from` an index `to` a new index."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "If `true`, the reorder will be hidden."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/reorder-group/reorder-group.tsx"
        }
      ]
    },
    {
      "name": "ion-ripple-effect",
      "description": {
        "kind": "markdown",
        "value": "The ripple effect component adds the [Material Design ink ripple interaction effect](https://material.io/develop/web/components/ripples/). This component can only be used inside of an `<ion-app>` and can be added to any component.\n\nIt's important to note that the parent should have [relative positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position) because the ripple effect is absolutely positioned and will cover the closest parent with relative positioning. The parent element should also be given the `ion-activatable` class, which tells the ripple effect that the element is clickable.\n\nThe default type, `\"bounded\"`, will expand the ripple effect from the click position outwards. To add a ripple effect that always starts in the center of the element and expands in a circle, add an `\"unbounded\"` type. It's recommended to add `overflow: hidden` to the parent element to avoid the ripple overflowing its container, especially with an unbounded ripple."
      },
      "attributes": [
        {
          "name": "type",
          "description": "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.",
          "values": [
            {
              "name": "bounded"
            },
            {
              "name": "unbounded"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/ripple-effect/ripple-effect.tsx"
        }
      ]
    },
    {
      "name": "ion-route",
      "description": {
        "kind": "markdown",
        "value": "The route component takes a component and renders it when the Browser URL matches the url property.\n\n> Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](../router-outlet) and the Angular router."
      },
      "attributes": [
        {
          "name": "component",
          "description": "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."
        },
        {
          "name": "url",
          "description": "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."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/route/route.tsx"
        }
      ]
    },
    {
      "name": "ion-route-redirect",
      "description": {
        "kind": "markdown",
        "value": "A route redirect can only be used with an `ion-router` as a direct child of it.\n\n> Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](../router-outlet) and the Angular router.\n\nThe route redirect has two configurable properties:\n - `from`\n - `to`\n\nIt redirects \"from\" a URL \"to\" another URL. When the defined `ion-route-redirect` rule matches, the router will redirect from the path specified in the `from` property to the path in the `to` property. In order for a redirect to occur the `from` path needs to be an exact match to the navigated URL."
      },
      "attributes": [
        {
          "name": "from",
          "description": "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."
        },
        {
          "name": "to",
          "description": "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."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/route-redirect/route-redirect.tsx"
        }
      ]
    },
    {
      "name": "ion-router",
      "description": {
        "kind": "markdown",
        "value": "The router is a component for handling routing inside vanilla and Stencil JavaScript projects.\n\n> Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](../router-outlet) and the Angular router.\n\nApps should have a single `ion-router` component in the codebase.\nThis component controls all interactions with the browser history and it aggregates updates through an event system.\n\n`ion-router` is just a URL coordinator for the navigation outlets of ionic: `ion-nav` and `ion-tabs`.\n\nThat means the `ion-router` never touches the DOM, it does NOT show the components or emit any kind of lifecycle events, it just tells `ion-nav` and `ion-tabs` what and when to \"show\" based on the browser's URL.\n\nIn order to configure this relationship between components (to load/select) and URLs, `ion-router` uses a declarative syntax using JSX/HTML to define a tree of routes."
      },
      "attributes": [
        {
          "name": "root",
          "description": "By default `ion-router` will match the routes at the root path (\"/\").\nThat can be changed when"
        },
        {
          "name": "use-hash",
          "description": "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."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/router/router.tsx"
        }
      ]
    },
    {
      "name": "ion-router-link",
      "description": {
        "kind": "markdown",
        "value": "The router link component is used for navigating to a specified link. Similar to the browser's anchor tag, it can accept a href for the location, and a direction for the transition animation.\n\n> Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use an `<a>` and `routerLink` with the Angular router."
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "href",
          "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
        },
        {
          "name": "rel",
          "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)."
        },
        {
          "name": "router-direction",
          "description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
          "values": [
            {
              "name": "back"
            },
            {
              "name": "forward"
            },
            {
              "name": "root"
            }
          ]
        },
        {
          "name": "target",
          "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/router-link/router-link.tsx"
        }
      ]
    },
    {
      "name": "ion-router-outlet",
      "description": {
        "kind": "markdown",
        "value": "Router outlet is a component used in routing within an Angular, React, or Vue app. It behaves in a similar way to Angular's built-in router outlet component and Vue's router view component, but contains the logic for providing a stacked navigation, and animating views in and out.\n\n> Note: this component should only be used with Angular, React, and Vue projects. For vanilla or Stencil JavaScript projects, use [`ion-router`](../router) and [`ion-route`](../route).\n\nAlthough router outlet has methods for navigating around, it's recommended to use the navigation methods in your framework's router."
      },
      "attributes": [
        {
          "name": "animated",
          "description": "If `true`, the router-outlet should animate the transition of components."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/router-outlet/route-outlet.tsx"
        }
      ]
    },
    {
      "name": "ion-row",
      "description": {
        "kind": "markdown",
        "value": "Rows are horizontal components of the [grid](../grid) system and contain varying numbers of\n[columns](../col). They ensure the columns are positioned properly.\n\nSee [Grid Layout](/docs/layout/grid) for more information."
      },
      "attributes": [],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/row/row.tsx"
        }
      ]
    },
    {
      "name": "ion-searchbar",
      "description": {
        "kind": "markdown",
        "value": "Searchbars represent a text field that can be used to search through a collection. They can be displayed inside of a toolbar or the main content.\n\nA Searchbar should be used instead of an input to search lists. A clear button is displayed upon entering input in the searchbar's text field. Clicking on the clear button will erase the text field and the input will remain focused. A cancel button can be enabled which will clear the input and lose the focus upon click."
      },
      "attributes": [
        {
          "name": "animated",
          "description": "If `true`, enable searchbar animation."
        },
        {
          "name": "autocomplete",
          "description": "Set the input's autocomplete property.",
          "values": [
            {
              "name": "on"
            },
            {
              "name": "off"
            },
            {
              "name": "name"
            },
            {
              "name": "honorific-prefix"
            },
            {
              "name": "given-name"
            },
            {
              "name": "additional-name"
            },
            {
              "name": "family-name"
            },
            {
              "name": "honorific-suffix"
            },
            {
              "name": "nickname"
            },
            {
              "name": "email"
            },
            {
              "name": "username"
            },
            {
              "name": "new-password"
            },
            {
              "name": "current-password"
            },
            {
              "name": "one-time-code"
            },
            {
              "name": "organization-title"
            },
            {
              "name": "organization"
            },
            {
              "name": "street-address"
            },
            {
              "name": "address-line1"
            },
            {
              "name": "address-line2"
            },
            {
              "name": "address-line3"
            },
            {
              "name": "address-level4"
            },
            {
              "name": "address-level3"
            },
            {
              "name": "address-level2"
            },
            {
              "name": "address-level1"
            },
            {
              "name": "country"
            },
            {
              "name": "country-name"
            },
            {
              "name": "postal-code"
            },
            {
              "name": "cc-name"
            },
            {
              "name": "cc-given-name"
            },
            {
              "name": "cc-additional-name"
            },
            {
              "name": "cc-family-name"
            },
            {
              "name": "cc-number"
            },
            {
              "name": "cc-exp"
            },
            {
              "name": "cc-exp-month"
            },
            {
              "name": "cc-exp-year"
            },
            {
              "name": "cc-csc"
            },
            {
              "name": "cc-type"
            },
            {
              "name": "transaction-currency"
            },
            {
              "name": "transaction-amount"
            },
            {
              "name": "language"
            },
            {
              "name": "bday"
            },
            {
              "name": "bday-day"
            },
            {
              "name": "bday-month"
            },
            {
              "name": "bday-year"
            },
            {
              "name": "sex"
            },
            {
              "name": "tel"
            },
            {
              "name": "tel-country-code"
            },
            {
              "name": "tel-national"
            },
            {
              "name": "tel-area-code"
            },
            {
              "name": "tel-local"
            },
            {
              "name": "tel-extension"
            },
            {
              "name": "impp"
            },
            {
              "name": "url"
            },
            {
              "name": "photo"
            }
          ]
        },
        {
          "name": "autocorrect",
          "description": "Set the input's autocorrect property.",
          "values": [
            {
              "name": "off"
            },
            {
              "name": "on"
            }
          ]
        },
        {
          "name": "cancel-button-icon",
          "description": "Set the cancel button icon. Only applies to `md` mode.\nDefaults to `\"arrow-back-sharp\"`."
        },
        {
          "name": "cancel-button-text",
          "description": "Set the the cancel button text. Only applies to `ios` mode."
        },
        {
          "name": "clear-icon",
          "description": "Set the clear icon. Defaults to `\"close-circle\"` for `ios` and `\"close-sharp\"` for `md`."
        },
        {
          "name": "color",
          "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)."
        },
        {
          "name": "debounce",
          "description": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`."
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the input."
        },
        {
          "name": "enterkeyhint",
          "description": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
          "values": [
            {
              "name": "done"
            },
            {
              "name": "enter"
            },
            {
              "name": "go"
            },
            {
              "name": "next"
            },
            {
              "name": "previous"
            },
            {
              "name": "search"
            },
            {
              "name": "send"
            }
          ]
        },
        {
          "name": "inputmode",
          "description": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
          "values": [
            {
              "name": "decimal"
            },
            {
              "name": "email"
            },
            {
              "name": "none"
            },
            {
              "name": "numeric"
            },
            {
              "name": "search"
            },
            {
              "name": "tel"
            },
            {
              "name": "text"
            },
            {
              "name": "url"
            }
          ]
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "placeholder",
          "description": "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)"
        },
        {
          "name": "search-icon",
          "description": "The icon to use as the search icon. Defaults to `\"search-outline\"` in\n`ios` mode and `\"search-sharp\"` in `md` mode."
        },
        {
          "name": "show-cancel-button",
          "description": "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.",
          "values": [
            {
              "name": "always"
            },
            {
              "name": "focus"
            },
            {
              "name": "never"
            }
          ]
        },
        {
          "name": "show-clear-button",
          "description": "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.",
          "values": [
            {
              "name": "always"
            },
            {
              "name": "focus"
            },
            {
              "name": "never"
            }
          ]
        },
        {
          "name": "spellcheck",
          "description": "If `true`, enable spellcheck on the input."
        },
        {
          "name": "type",
          "description": "Set the type of the input.",
          "values": [
            {
              "name": "email"
            },
            {
              "name": "number"
            },
            {
              "name": "password"
            },
            {
              "name": "search"
            },
            {
              "name": "tel"
            },
            {
              "name": "text"
            },
            {
              "name": "url"
            }
          ]
        },
        {
          "name": "value",
          "description": "the value of the searchbar."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/searchbar/searchbar.tsx"
        }
      ]
    },
    {
      "name": "ion-segment",
      "description": {
        "kind": "markdown",
        "value": "Segments display a group of related buttons, sometimes known as segmented controls, in a horizontal row. They can be displayed inside of a toolbar or the main content.\n\nTheir functionality is similar to tabs, where selecting one will deselect all others. Segments are useful for toggling between different views inside of the content. Tabs should be used instead of a segment when clicking on a control should navigate between pages."
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the segment."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "scrollable",
          "description": "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."
        },
        {
          "name": "swipe-gesture",
          "description": "If `true`, users will be able to swipe between segment buttons to activate them."
        },
        {
          "name": "value",
          "description": "the value of the segment."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/segment/segment.tsx"
        }
      ]
    },
    {
      "name": "ion-segment-button",
      "description": {
        "kind": "markdown",
        "value": "Segment buttons are groups of related buttons inside of a [Segment](../segment). They are displayed in a horizontal row. A segment button can be checked by default by setting the `value` of the segment to the `value` of the segment button. Only one segment button can be selected at a time."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the segment button."
        },
        {
          "name": "layout",
          "description": "Set the layout of the text and icon in the segment.",
          "values": [
            {
              "name": "icon-bottom"
            },
            {
              "name": "icon-end"
            },
            {
              "name": "icon-hide"
            },
            {
              "name": "icon-start"
            },
            {
              "name": "icon-top"
            },
            {
              "name": "label-hide"
            }
          ]
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "type",
          "description": "The type of the button.",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        },
        {
          "name": "value",
          "description": "The value of the segment button."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/segment-button/segment-button.tsx"
        }
      ]
    },
    {
      "name": "ion-select",
      "description": {
        "kind": "markdown",
        "value": "Selects are form controls to select an option, or options, from a set of options, similar to a native `<select>` element. When a user taps the select, a dialog appears with all of the options in a large, easy to select list.\n\nA select should be used with child `<ion-select-option>` elements. If the child option is not given a `value` attribute then its text will be used as the value.\n\nIf `value` is set on the `<ion-select>`, the selected option will be chosen based on that value."
      },
      "attributes": [
        {
          "name": "cancel-text",
          "description": "The text to display on the cancel button."
        },
        {
          "name": "compare-with",
          "description": "A property name or function used to compare object values"
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the select."
        },
        {
          "name": "interface",
          "description": "The interface the select should use: `action-sheet`, `popover` or `alert`.",
          "values": [
            {
              "name": "action-sheet"
            },
            {
              "name": "alert"
            },
            {
              "name": "popover"
            }
          ]
        },
        {
          "name": "interface-options",
          "description": "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."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "multiple",
          "description": "If `true`, the select can accept multiple values."
        },
        {
          "name": "name",
          "description": "The name of the control, which is submitted with the form data."
        },
        {
          "name": "ok-text",
          "description": "The text to display on the ok button."
        },
        {
          "name": "placeholder",
          "description": "The text to display when the select is empty."
        },
        {
          "name": "selected-text",
          "description": "The text to display instead of the selected option's value."
        },
        {
          "name": "value",
          "description": "the value of the select."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/select/select.tsx"
        }
      ]
    },
    {
      "name": "ion-select-option",
      "description": {
        "kind": "markdown",
        "value": "Select Options are components that are child elements of a Select. Each option defined is passed and displayed in the Select dialog. For more information, see the [Select docs](../select)."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "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."
        },
        {
          "name": "value",
          "description": "The text value of the option."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/select-option/select-option.tsx"
        }
      ]
    },
    {
      "name": "ion-skeleton-text",
      "description": {
        "kind": "markdown",
        "value": "Skeleton Text is a component for rendering placeholder content. The element will render a gray block at the specified width."
      },
      "attributes": [
        {
          "name": "animated",
          "description": "If `true`, the skeleton text will animate."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/skeleton-text/skeleton-text.tsx"
        }
      ]
    },
    {
      "name": "ion-slide",
      "description": {
        "kind": "markdown",
        "value": "The Slide component is a child component of [Slides](../slides). The template\nshould be written as `ion-slide`. Any slide content should be written\nin this component and it should be used in conjunction with [Slides](../slides).\n\nSee the [Slides API Docs](../slides) for more usage information."
      },
      "attributes": [],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/slide/slide.tsx"
        }
      ]
    },
    {
      "name": "ion-slides",
      "description": {
        "kind": "markdown",
        "value": "The Slides component is a multi-section container. Each section can be swiped\nor dragged between. It contains any number of [Slide](../slide) components.\n\nThis guide will cover migration from the deprecated `ion-slides` component to the framework-specific solutions that Swiper.js provides as well as the existing `ion-slides` API for developers who are still using that component.\n\nAdopted from Swiper.js:\nThe most modern mobile touch slider and framework with hardware accelerated transitions.\n\nhttp://www.idangero.us/swiper/\n\nCopyright 2016, Vladimir Kharlampidi\nThe iDangero.us\nhttp://www.idangero.us/\n\nLicensed under MIT"
      },
      "attributes": [
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "options",
          "description": "Options to pass to the swiper instance.\nSee http://idangero.us/swiper/api/ for valid options"
        },
        {
          "name": "pager",
          "description": "If `true`, show the pagination."
        },
        {
          "name": "scrollbar",
          "description": "If `true`, show the scrollbar."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/slides/slides.tsx"
        }
      ]
    },
    {
      "name": "ion-spinner",
      "description": {
        "kind": "markdown",
        "value": "The Spinner component provides a variety of animated SVG spinners. Spinners are visual indicators that the app is loading content or performing another process that the user needs to wait on.\n\nThe default spinner to use is based on the platform. The default spinner for `ios` is `\"lines\"`, and the default for `android` is `\"crescent\"`. If the platform is not `ios` or `android`, the spinner will default to `crescent`. If the `name` property is set, then that spinner will be used instead of the platform specific spinner."
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "duration",
          "description": "Duration of the spinner animation in milliseconds. The default varies based on the spinner."
        },
        {
          "name": "name",
          "description": "The name of the SVG spinner to use. If a name is not provided, the platform's default\nspinner will be used.",
          "values": [
            {
              "name": "bubbles"
            },
            {
              "name": "circles"
            },
            {
              "name": "circular"
            },
            {
              "name": "crescent"
            },
            {
              "name": "dots"
            },
            {
              "name": "lines"
            },
            {
              "name": "lines-small"
            }
          ]
        },
        {
          "name": "paused",
          "description": "If `true`, the spinner's animation will be paused."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/spinner/spinner.tsx"
        }
      ]
    },
    {
      "name": "ion-split-pane",
      "description": {
        "kind": "markdown",
        "value": "A split pane is useful when creating multi-view layouts. It allows UI elements, like menus, to be\ndisplayed as the viewport width increases.\n\nIf the device's screen width is below a certain size, the split pane will collapse and the menu will be hidden. This is ideal for creating an app that will be served in a browser and deployed through the app store to phones and tablets."
      },
      "attributes": [
        {
          "name": "content-id",
          "description": "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`."
        },
        {
          "name": "disabled",
          "description": "If `true`, the split pane will be hidden."
        },
        {
          "name": "when",
          "description": "When the split-pane should be shown.\nCan be a CSS media query expression, or a shortcut expression.\nCan also be a boolean expression."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/split-pane/split-pane.tsx"
        }
      ]
    },
    {
      "name": "ion-tab",
      "description": {
        "kind": "markdown",
        "value": "The tab component is a child component of [tabs](../tabs). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation.\n\n> Note: This component should only be used with vanilla or Stencil JavaScript projects. For Angular, React, and Vue apps you do not need to use `ion-tab` to declare your tab components.\n\nSee the [tabs documentation](../tabs/) for more details on configuring tabs."
      },
      "attributes": [
        {
          "name": "component",
          "description": "The component to display inside of the tab."
        },
        {
          "name": "tab",
          "description": "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."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/tab/tab.tsx"
        }
      ]
    },
    {
      "name": "ion-tab-bar",
      "description": {
        "kind": "markdown",
        "value": "The tab bar is a UI component that contains a set of [tab buttons](../tab-button). A tab bar must be provided inside of [tabs](../tabs) to communicate with each [tab](../tab)."
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "selected-tab",
          "description": "The selected tab component"
        },
        {
          "name": "translucent",
          "description": "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)."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/tab-bar/tab-bar.tsx"
        }
      ]
    },
    {
      "name": "ion-tab-button",
      "description": {
        "kind": "markdown",
        "value": "A tab button is a UI component that is placed inside of a [tab bar](../tab-bar). The tab button can specify the layout of the icon and label and connect to a [tab view](../tab).\n\nSee the [tabs documentation](../tabs) for more details on configuring tabs."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the tab button."
        },
        {
          "name": "download",
          "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)."
        },
        {
          "name": "href",
          "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
        },
        {
          "name": "layout",
          "description": "Set the layout of the text and icon in the tab bar.\nIt defaults to `'icon-top'`.",
          "values": [
            {
              "name": "icon-bottom"
            },
            {
              "name": "icon-end"
            },
            {
              "name": "icon-hide"
            },
            {
              "name": "icon-start"
            },
            {
              "name": "icon-top"
            },
            {
              "name": "label-hide"
            }
          ]
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "rel",
          "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)."
        },
        {
          "name": "selected",
          "description": "The selected tab component"
        },
        {
          "name": "tab",
          "description": "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."
        },
        {
          "name": "target",
          "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/tab-button/tab-button.tsx"
        }
      ]
    },
    {
      "name": "ion-tabs",
      "description": {
        "kind": "markdown",
        "value": "Tabs are a top level navigation component to implement a tab-based navigation.\nThe component is a container of individual [Tab](../tab/) components.\n\nThe `ion-tabs` component does not have any styling and works as a router outlet in order to handle navigation. It does not provide any UI feedback or mechanism to switch between tabs. In order to do so, an `ion-tab-bar` should be provided as a direct child of `ion-tabs`.\n\nBoth `ion-tabs` and `ion-tab-bar` can be used as standalone elements. They don’t depend on each other to work, but they are usually used together in order to implement a tab-based navigation that behaves like a native app.\n\nThe `ion-tab-bar` needs a slot defined in order to be projected to the right place in an `ion-tabs` component."
      },
      "attributes": [],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/tabs/tabs.tsx"
        }
      ]
    },
    {
      "name": "ion-text",
      "description": {
        "kind": "markdown",
        "value": "The text component is a simple component that can be used to style the text color of any element. The `ion-text` element should wrap the element in order to change the text color of that element."
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/text/text.tsx"
        }
      ]
    },
    {
      "name": "ion-textarea",
      "description": {
        "kind": "markdown",
        "value": "The textarea component is used for multi-line text input. A native textarea element is rendered inside of the component. The user experience and interactivity of the textarea component is improved by having control over the native textarea.\n\nUnlike the native textarea element, the Ionic textarea does not support loading its value from the inner content. The textarea value should be set in the `value` attribute.\n\nThe textarea component accepts the [native textarea attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) in addition to the Ionic properties."
      },
      "attributes": [
        {
          "name": "auto-grow",
          "description": "If `true`, the element height will increase based on the value."
        },
        {
          "name": "autocapitalize",
          "description": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user."
        },
        {
          "name": "autofocus",
          "description": "This Boolean attribute lets you specify that a form control should have input focus when the page loads."
        },
        {
          "name": "clear-on-edit",
          "description": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types."
        },
        {
          "name": "color",
          "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)."
        },
        {
          "name": "cols",
          "description": "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer."
        },
        {
          "name": "debounce",
          "description": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`."
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the textarea."
        },
        {
          "name": "enterkeyhint",
          "description": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
          "values": [
            {
              "name": "done"
            },
            {
              "name": "enter"
            },
            {
              "name": "go"
            },
            {
              "name": "next"
            },
            {
              "name": "previous"
            },
            {
              "name": "search"
            },
            {
              "name": "send"
            }
          ]
        },
        {
          "name": "inputmode",
          "description": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
          "values": [
            {
              "name": "decimal"
            },
            {
              "name": "email"
            },
            {
              "name": "none"
            },
            {
              "name": "numeric"
            },
            {
              "name": "search"
            },
            {
              "name": "tel"
            },
            {
              "name": "text"
            },
            {
              "name": "url"
            }
          ]
        },
        {
          "name": "maxlength",
          "description": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter."
        },
        {
          "name": "minlength",
          "description": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "name",
          "description": "The name of the control, which is submitted with the form data."
        },
        {
          "name": "placeholder",
          "description": "Instructional text that shows before the input has a value."
        },
        {
          "name": "readonly",
          "description": "If `true`, the user cannot modify the value."
        },
        {
          "name": "required",
          "description": "If `true`, the user must fill in a value before submitting a form."
        },
        {
          "name": "rows",
          "description": "The number of visible text lines for the control."
        },
        {
          "name": "spellcheck",
          "description": "If `true`, the element will have its spelling and grammar checked."
        },
        {
          "name": "value",
          "description": "The value of the textarea."
        },
        {
          "name": "wrap",
          "description": "Indicates how the control wraps text.",
          "values": [
            {
              "name": "hard"
            },
            {
              "name": "off"
            },
            {
              "name": "soft"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/textarea/textarea.tsx"
        }
      ]
    },
    {
      "name": "ion-thumbnail",
      "description": {
        "kind": "markdown",
        "value": "Thumbnails are square components that usually wrap an image or icon. They can be used to make it easier to display a group of larger images or provide a preview of the full-size image.\n\nThumbnails can be used by themselves or inside of any element. If placed inside of an `ion-item`, the thumbnail will resize to fit the parent component. To position a thumbnail on the left or right side of an item, set the slot to `start` or `end`, respectively."
      },
      "attributes": [],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/thumbnail/thumbnail.tsx"
        }
      ]
    },
    {
      "name": "ion-title",
      "description": {
        "kind": "markdown",
        "value": "`ion-title` is a component that sets the title of the `Toolbar`."
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "size",
          "description": "The size of the toolbar title.",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "small"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/title/title.tsx"
        }
      ]
    },
    {
      "name": "ion-toast",
      "description": {
        "kind": "markdown",
        "value": "A Toast is a subtle notification commonly used in modern applications. It can be used to provide feedback about an operation or to display a system message. The toast appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app."
      },
      "attributes": [
        {
          "name": "animated",
          "description": "If `true`, the toast will animate."
        },
        {
          "name": "color",
          "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)."
        },
        {
          "name": "css-class",
          "description": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
        },
        {
          "name": "duration",
          "description": "How many milliseconds to wait before hiding the toast. By default, it will show\nuntil `dismiss()` is called."
        },
        {
          "name": "header",
          "description": "Header to be shown in the toast."
        },
        {
          "name": "keyboard-close",
          "description": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
        },
        {
          "name": "message",
          "description": "Message to be shown in the toast."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "position",
          "description": "The position of the toast on the screen.",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "middle"
            },
            {
              "name": "top"
            }
          ]
        },
        {
          "name": "translucent",
          "description": "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)."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/toast/toast.tsx"
        }
      ]
    },
    {
      "name": "ion-toggle",
      "description": {
        "kind": "markdown",
        "value": "Toggles change the state of a single option. Toggles can be switched on or off by pressing or swiping them. They can also be checked programmatically by setting the `checked` property."
      },
      "attributes": [
        {
          "name": "checked",
          "description": "If `true`, the toggle is selected."
        },
        {
          "name": "color",
          "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)."
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the toggle."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "name",
          "description": "The name of the control, which is submitted with the form data."
        },
        {
          "name": "value",
          "description": "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>`."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/toggle/toggle.tsx"
        }
      ]
    },
    {
      "name": "ion-toolbar",
      "description": {
        "kind": "markdown",
        "value": "Toolbars are positioned above or below content. When a toolbar is placed in an `<ion-header>` it will appear fixed at the top of the content, and when it is in an `<ion-footer>` it will appear fixed at the bottom. Fullscreen content will scroll behind a toolbar in a header or footer. When placed within an `<ion-content>`, toolbars will scroll with the content."
      },
      "attributes": [
        {
          "name": "color",
          "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)."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/toolbar/toolbar.tsx"
        }
      ]
    },
    {
      "name": "ion-virtual-scroll",
      "description": {
        "kind": "markdown",
        "value": "Virtual Scroll displays a virtual, \"infinite\" list. An array of records\nis passed to the virtual scroll containing the data to create templates\nfor. The template created for each record, referred to as a cell, can\nconsist of items, headers, and footers. For performance reasons, not every record\nin the list is rendered at once; instead a small subset of records (enough to fill the viewport)\nare rendered and reused as the user scrolls.\n\nThis guide will go over the recommended virtual scrolling packages for each framework integration as well as documentation for the deprecated `ion-virtual-scroll` component for Ionic Angular. We recommend using the framework-specific solutions listed below, but the `ion-virtual-scroll` documentation is available below for developers who are still using that component."
      },
      "attributes": [
        {
          "name": "approx-footer-height",
          "description": "The approximate width of each footer template's cell.\nThis dimension is used to help determine how many cells should\nbe created when initialized, and to help calculate the height of\nthe scrollable area. This height value can only use `px` units.\nNote that the actual rendered size of each cell comes from the\napp's CSS, whereas this approximation is used to help calculate\ninitial dimensions before the item has been rendered."
        },
        {
          "name": "approx-header-height",
          "description": "The approximate height of each header template's cell.\nThis dimension is used to help determine how many cells should\nbe created when initialized, and to help calculate the height of\nthe scrollable area. This height value can only use `px` units.\nNote that the actual rendered size of each cell comes from the\napp's CSS, whereas this approximation is used to help calculate\ninitial dimensions before the item has been rendered."
        },
        {
          "name": "approx-item-height",
          "description": "It is important to provide this\nif virtual item height will be significantly larger than the default\nThe approximate height of each virtual item template's cell.\nThis dimension is used to help determine how many cells should\nbe created when initialized, and to help calculate the height of\nthe scrollable area. This height value can only use `px` units.\nNote that the actual rendered size of each cell comes from the\napp's CSS, whereas this approximation is used to help calculate\ninitial dimensions before the item has been rendered."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/virtual-scroll/virtual-scroll.tsx"
        }
      ]
    }
  ]
}