18623 lines
1.3 MiB
Executable file
18623 lines
1.3 MiB
Executable file
{
|
||
"timestamp": "2021-10-27T12:55:38",
|
||
"compiler": {
|
||
"name": "@stencil/core",
|
||
"version": "2.5.0",
|
||
"typescriptVersion": "4.2.3"
|
||
},
|
||
"components": [
|
||
{
|
||
"filePath": "./src/components/action-sheet/action-sheet.tsx",
|
||
"encapsulation": "scoped",
|
||
"tag": "ion-action-sheet",
|
||
"readme": "# ion-action-sheet\n\nAn 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.\n\n## Buttons\n\nA button's `role` property can either be `destructive` or `cancel`. Buttons without a role property will have the default look for the platform. Buttons with the `cancel` role will always load as the bottom button, no matter where they are in the array. All other buttons will be displayed in the order they have been added to the `buttons` array. Note: We recommend that `destructive` buttons are always the first button in the array, making them the top button. Additionally, if the action sheet is dismissed by tapping the backdrop, then it will fire the handler from the button with the cancel role.\n\n## Customization\n\nAction Sheet uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector.\n\nWe recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. View the [Usage](#usage) section for an example of how to pass a class using `cssClass`.\n\n```css\n/* DOES NOT WORK - not specific enough */\n.action-sheet-group {\n background: #e5e5e5;\n}\n\n/* Works - pass \"my-custom-class\" in cssClass to increase specificity */\n.my-custom-class .action-sheet-group {\n background: #e5e5e5;\n}\n```\n\nAny of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Action Sheet without needing to target individual elements:\n\n```css\n.my-custom-class {\n --background: #e5e5e5;\n}\n```\n\n> If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information.\n\n## Interfaces\n\n### ActionSheetButton\n\n```typescript\ninterface ActionSheetButton {\n text?: string;\n role?: 'cancel' | 'destructive' | 'selected' | string;\n icon?: string;\n cssClass?: string | string[];\n handler?: () => boolean | void | Promise<boolean | void>;\n}\n```\n\n### ActionSheetOptions\n\n```typescript\ninterface ActionSheetOptions {\n header?: string;\n subHeader?: string;\n cssClass?: string | string[];\n buttons: (ActionSheetButton | string)[];\n backdropDismiss?: boolean;\n translucent?: boolean;\n animated?: boolean;\n mode?: Mode;\n keyboardClose?: boolean;\n id?: string;\n htmlAttributes?: ActionSheetAttributes;\n\n enterAnimation?: AnimationBuilder;\n leaveAnimation?: AnimationBuilder;\n}\n```\n\n### ActionSheetAttributes\n\n```typescript\ninterface ActionSheetAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}\n```\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```typescript\nimport { Component } from '@angular/core';\nimport { ActionSheetController } from '@ionic/angular';\n\n@Component({\n selector: 'action-sheet-example',\n templateUrl: 'action-sheet-example.html',\n styleUrls: ['./action-sheet-example.css'],\n})\nexport class ActionSheetExample {\n\n constructor(public actionSheetController: ActionSheetController) {}\n\n async presentActionSheet() {\n const actionSheet = await this.actionSheetController.create({\n header: 'Albums',\n cssClass: 'my-custom-class',\n buttons: [{\n text: 'Delete',\n role: 'destructive',\n icon: 'trash',\n handler: () => {\n console.log('Delete clicked');\n }\n }, {\n text: 'Share',\n icon: 'share',\n handler: () => {\n console.log('Share clicked');\n }\n }, {\n text: 'Play (open modal)',\n icon: 'caret-forward-circle',\n handler: () => {\n console.log('Play clicked');\n }\n }, {\n text: 'Favorite',\n icon: 'heart',\n handler: () => {\n console.log('Favorite clicked');\n }\n }, {\n text: 'Cancel',\n icon: 'close',\n role: 'cancel',\n handler: () => {\n console.log('Cancel clicked');\n }\n }]\n });\n await actionSheet.present();\n\n const { role } = await actionSheet.onDidDismiss();\n console.log('onDidDismiss resolved with role', role);\n }\n\n}\n```\n\n\n### Style Placement\n\nIn Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Action Sheet can be presented from within a page, the `ion-action-sheet` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config).\n",
|
||
"javascript": "```javascript\nasync function presentActionSheet() {\n const actionSheet = document.createElement('ion-action-sheet');\n\n actionSheet.header = 'Albums';\n actionSheet.cssClass = 'my-custom-class';\n actionSheet.buttons = [{\n text: 'Delete',\n role: 'destructive',\n icon: 'trash',\n handler: () => {\n console.log('Delete clicked');\n }\n }, {\n text: 'Share',\n icon: 'share',\n handler: () => {\n console.log('Share clicked');\n }\n }, {\n text: 'Play (open modal)',\n icon: 'caret-forward-circle',\n handler: () => {\n console.log('Play clicked');\n }\n }, {\n text: 'Favorite',\n icon: 'heart',\n handler: () => {\n console.log('Favorite clicked');\n }\n }, {\n text: 'Cancel',\n icon: 'close',\n role: 'cancel',\n handler: () => {\n console.log('Cancel clicked');\n }\n }];\n document.body.appendChild(actionSheet);\n await actionSheet.present();\n\n const { role } = await actionSheet.onDidDismiss();\n console.log('onDidDismiss resolved with role', role);\n}\n```\n",
|
||
"react": "```tsx\n/* Using with useIonActionSheet Hook */\n\nimport React from 'react';\nimport {\n IonButton,\n IonContent,\n IonPage,\n useIonActionSheet,\n} from '@ionic/react';\n\nconst ActionSheetExample: React.FC = () => {\n const [present, dismiss] = useIonActionSheet();\n\n return (\n <IonPage>\n <IonContent>\n <IonButton\n expand=\"block\"\n onClick={() =>\n present({\n buttons: [{ text: 'Ok' }, { text: 'Cancel' }],\n header: 'Action Sheet'\n })\n }\n >\n Show ActionSheet\n </IonButton>\n <IonButton\n expand=\"block\"\n onClick={() =>\n present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet')\n }\n >\n Show ActionSheet using params\n </IonButton>\n <IonButton\n expand=\"block\"\n onClick={() => {\n present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet');\n setTimeout(dismiss, 3000);\n }}\n >\n Show ActionSheet, hide after 3 seconds\n </IonButton>\n </IonContent>\n </IonPage>\n );\n};\n```\n\n```tsx\n/* Using with IonActionSheet Component */\n\nimport React, { useState } from 'react';\nimport { IonActionSheet, IonContent, IonButton } from '@ionic/react';\nimport { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons';\n\nexport const ActionSheetExample: React.FC = () => {\n const [showActionSheet, setShowActionSheet] = useState(false);\n\n return (\n <IonContent>\n <IonButton onClick={() => setShowActionSheet(true)} expand=\"block\">\n Show Action Sheet\n </IonButton>\n <IonActionSheet\n isOpen={showActionSheet}\n onDidDismiss={() => setShowActionSheet(false)}\n cssClass='my-custom-class'\n buttons={[{\n text: 'Delete',\n role: 'destructive',\n icon: trash,\n handler: () => {\n console.log('Delete clicked');\n }\n }, {\n text: 'Share',\n icon: share,\n handler: () => {\n console.log('Share clicked');\n }\n }, {\n text: 'Play (open modal)',\n icon: caretForwardCircle,\n handler: () => {\n console.log('Play clicked');\n }\n }, {\n text: 'Favorite',\n icon: heart,\n handler: () => {\n console.log('Favorite clicked');\n }\n }, {\n text: 'Cancel',\n icon: close,\n role: 'cancel',\n handler: () => {\n console.log('Cancel clicked');\n }\n }]}\n >\n </IonActionSheet>\n </IonContent>\n );\n}\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\nimport { actionSheetController } from '@ionic/core';\n\n@Component({\n tag: 'action-sheet-example',\n styleUrl: 'action-sheet-example.css'\n})\nexport class ActionSheetExample {\n async presentActionSheet() {\n const actionSheet = await actionSheetController.create({\n header: 'Albums',\n cssClass: 'my-custom-class',\n buttons: [{\n text: 'Delete',\n role: 'destructive',\n icon: 'trash',\n handler: () => {\n console.log('Delete clicked');\n }\n }, {\n text: 'Share',\n icon: 'share',\n handler: () => {\n console.log('Share clicked');\n }\n }, {\n text: 'Play (open modal)',\n icon: 'caret-forward-circle',\n handler: () => {\n console.log('Play clicked');\n }\n }, {\n text: 'Favorite',\n icon: 'heart',\n handler: () => {\n console.log('Favorite clicked');\n }\n }, {\n text: 'Cancel',\n icon: 'close',\n role: 'cancel',\n handler: () => {\n console.log('Cancel clicked');\n }\n }]\n });\n await actionSheet.present();\n\n const { role } = await actionSheet.onDidDismiss();\n console.log('onDidDismiss resolved with role', role);\n }\n\n render() {\n return [\n <ion-content>\n <ion-button onClick={() => this.presentActionSheet()}>Present Action Sheet</ion-button>\n </ion-content>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-button @click=\"presentActionSheet\">Show Action Sheet</ion-button>\n</template>\n\n<script>\nimport { IonButton, actionSheetController } from '@ionic/vue';\nimport { defineComponent } from 'vue';\nimport { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';\n\nexport default defineComponent({\n components: { IonButton },\n methods: {\n async presentActionSheet() {\n const actionSheet = await actionSheetController\n .create({\n header: 'Albums',\n cssClass: 'my-custom-class',\n buttons: [\n {\n text: 'Delete',\n role: 'destructive',\n icon: trash,\n handler: () => {\n console.log('Delete clicked')\n },\n },\n {\n text: 'Share',\n icon: share,\n handler: () => {\n console.log('Share clicked')\n },\n },\n {\n text: 'Play (open modal)',\n icon: caretForwardCircle,\n handler: () => {\n console.log('Play clicked')\n },\n },\n {\n text: 'Favorite',\n icon: heart,\n handler: () => {\n console.log('Favorite clicked')\n },\n },\n {\n text: 'Cancel',\n icon: close,\n role: 'cancel',\n handler: () => {\n console.log('Cancel clicked')\n },\n },\n ],\n });\n await actionSheet.present();\n\n const { role } = await actionSheet.onDidDismiss();\n console.log('onDidDismiss resolved with role', role);\n },\n },\n});\n</script>\n```\n\nDevelopers can also use this component directly in their template:\n\n```html\n<template>\n <ion-button @click=\"setOpen(true)\">Show Action Sheet</ion-button>\n <ion-action-sheet\n :is-open=\"isOpenRef\"\n header=\"Albums\"\n css-class=\"my-custom-class\"\n :buttons=\"buttons\"\n @didDismiss=\"setOpen(false)\"\n >\n </ion-action-sheet>\n</template>\n\n<script>\nimport { IonActionSheet, IonButton } from '@ionic/vue';\nimport { defineComponent, ref } from 'vue';\nimport { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';\n\nexport default defineComponent({\n components: { IonActionSheet, IonButton },\n setup() {\n const isOpenRef = ref(false);\n const setOpen = (state: boolean) => isOpenRef.value = state;\n const buttons = [\n {\n text: 'Delete',\n role: 'destructive',\n icon: trash,\n handler: () => {\n console.log('Delete clicked')\n },\n },\n {\n text: 'Share',\n icon: share,\n handler: () => {\n console.log('Share clicked')\n },\n },\n {\n text: 'Play (open modal)',\n icon: caretForwardCircle,\n handler: () => {\n console.log('Play clicked')\n },\n },\n {\n text: 'Favorite',\n icon: heart,\n handler: () => {\n console.log('Favorite clicked')\n },\n },\n {\n text: 'Cancel',\n icon: close,\n role: 'cancel',\n handler: () => {\n console.log('Cancel clicked')\n },\n },\n ];\n \n return { buttons, isOpenRef, setOpen }\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "animated",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "animated",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the action sheet will animate.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "backdropDismiss",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "backdrop-dismiss",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the action sheet will be dismissed when the backdrop is clicked.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "buttons",
|
||
"type": "(string | ActionSheetButton)[]",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "An array of buttons for the action sheet.",
|
||
"docsTags": [],
|
||
"default": "[]",
|
||
"values": [
|
||
{
|
||
"type": "(string"
|
||
},
|
||
{
|
||
"type": "ActionSheetButton)[]"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "cssClass",
|
||
"type": "string | string[] | undefined",
|
||
"mutable": false,
|
||
"attr": "css-class",
|
||
"reflectToAttr": false,
|
||
"docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "string[]"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "enterAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Animation to use when the action sheet is presented.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "header",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "header",
|
||
"reflectToAttr": false,
|
||
"docs": "Title for the action sheet.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "htmlAttributes",
|
||
"type": "ActionSheetAttributes | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Additional attributes to pass to the action sheet.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "ActionSheetAttributes"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "keyboardClose",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "keyboard-close",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "leaveAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Animation to use when the action sheet is dismissed.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "subHeader",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "sub-header",
|
||
"reflectToAttr": false,
|
||
"docs": "Subtitle for the action sheet.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "translucent",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "translucent",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the action sheet will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "dismiss",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Dismiss the action sheet overlay after it has been presented.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "data Any data to emit in the dismiss events."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "role The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "onDidDismiss",
|
||
"returns": {
|
||
"type": "Promise<OverlayEventDetail<T>>",
|
||
"docs": ""
|
||
},
|
||
"signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
|
||
"parameters": [],
|
||
"docs": "Returns a promise that resolves when the action sheet did dismiss.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "onWillDismiss",
|
||
"returns": {
|
||
"type": "Promise<OverlayEventDetail<T>>",
|
||
"docs": ""
|
||
},
|
||
"signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
|
||
"parameters": [],
|
||
"docs": "Returns a promise that resolves when the action sheet will dismiss.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "present",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "present() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Present the action sheet overlay after it has been created.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionActionSheetDidDismiss",
|
||
"detail": "OverlayEventDetail<any>",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted after the alert has dismissed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionActionSheetDidPresent",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted after the alert has presented.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionActionSheetWillDismiss",
|
||
"detail": "OverlayEventDetail<any>",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted before the alert has dismissed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionActionSheetWillPresent",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted before the alert has presented.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--backdrop-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the backdrop"
|
||
},
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the action sheet group"
|
||
},
|
||
{
|
||
"name": "--button-background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the action sheet button"
|
||
},
|
||
{
|
||
"name": "--button-background-activated",
|
||
"annotation": "prop",
|
||
"docs": "Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple."
|
||
},
|
||
{
|
||
"name": "--button-background-activated-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the action sheet button background when pressed"
|
||
},
|
||
{
|
||
"name": "--button-background-focused",
|
||
"annotation": "prop",
|
||
"docs": "Background of the action sheet button when tabbed to"
|
||
},
|
||
{
|
||
"name": "--button-background-focused-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the action sheet button background when tabbed to"
|
||
},
|
||
{
|
||
"name": "--button-background-hover",
|
||
"annotation": "prop",
|
||
"docs": "Background of the action sheet button on hover"
|
||
},
|
||
{
|
||
"name": "--button-background-hover-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the action sheet button background on hover"
|
||
},
|
||
{
|
||
"name": "--button-background-selected",
|
||
"annotation": "prop",
|
||
"docs": "Background of the selected action sheet button"
|
||
},
|
||
{
|
||
"name": "--button-background-selected-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the selected action sheet button background"
|
||
},
|
||
{
|
||
"name": "--button-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the action sheet button"
|
||
},
|
||
{
|
||
"name": "--button-color-activated",
|
||
"annotation": "prop",
|
||
"docs": "Color of the action sheet button when pressed"
|
||
},
|
||
{
|
||
"name": "--button-color-focused",
|
||
"annotation": "prop",
|
||
"docs": "Color of the action sheet button when tabbed to"
|
||
},
|
||
{
|
||
"name": "--button-color-hover",
|
||
"annotation": "prop",
|
||
"docs": "Color of the action sheet button on hover"
|
||
},
|
||
{
|
||
"name": "--button-color-selected",
|
||
"annotation": "prop",
|
||
"docs": "Color of the selected action sheet button"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the action sheet text"
|
||
},
|
||
{
|
||
"name": "--height",
|
||
"annotation": "prop",
|
||
"docs": "height of the action sheet"
|
||
},
|
||
{
|
||
"name": "--max-height",
|
||
"annotation": "prop",
|
||
"docs": "Maximum height of the action sheet"
|
||
},
|
||
{
|
||
"name": "--max-width",
|
||
"annotation": "prop",
|
||
"docs": "Maximum width of the action sheet"
|
||
},
|
||
{
|
||
"name": "--min-height",
|
||
"annotation": "prop",
|
||
"docs": "Minimum height of the action sheet"
|
||
},
|
||
{
|
||
"name": "--min-width",
|
||
"annotation": "prop",
|
||
"docs": "Minimum width of the action sheet"
|
||
},
|
||
{
|
||
"name": "--width",
|
||
"annotation": "prop",
|
||
"docs": "Width of the action sheet"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-backdrop",
|
||
"ion-icon",
|
||
"ion-ripple-effect"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-action-sheet": [
|
||
"ion-backdrop",
|
||
"ion-icon",
|
||
"ion-ripple-effect"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/alert/alert.tsx",
|
||
"encapsulation": "scoped",
|
||
"tag": "ion-alert",
|
||
"readme": "# ion-alert\n\nAn 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`.\n\n## Buttons\n\nIn the array of `buttons`, each button includes properties for its `text`, and optionally a `handler`. If a handler returns `false` then the alert will not automatically be dismissed when the button is clicked. All buttons will show up in the order they have been added to the `buttons` array from left to right. Note: The right most button (the last one in the array) is the main button.\n\nOptionally, a `role` property can be added to a button, such as `cancel`. If a `cancel` role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role.\n\n\n## Inputs\n\nAlerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of \"text\" inputs can be mixed, such as `url`, `email`, `text`, `textarea` etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.\n\n## Customization\n\nAlert uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector.\n\nWe recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. View the [Usage](#usage) section for an example of how to pass a class using `cssClass`.\n\n```css\n/* DOES NOT WORK - not specific enough */\n.alert-wrapper {\n background: #e5e5e5;\n}\n\n/* Works - pass \"my-custom-class\" in cssClass to increase specificity */\n.my-custom-class .alert-wrapper {\n background: #e5e5e5;\n}\n```\n\nAny of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Alert without needing to target individual elements:\n\n```css\n.my-custom-class {\n --background: #e5e5e5;\n}\n```\n\n> If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information.\n\n## Interfaces\n\n### AlertButton\n\n```typescript\ninterface AlertButton {\n text: string;\n role?: 'cancel' | 'destructive' | string;\n cssClass?: string | string[];\n handler?: (value: any) => boolean | void | {[key: string]: any};\n}\n```\n\n\n### AlertInput\n\n```typescript\ninterface AlertInput {\n type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';\n name?: string;\n placeholder?: string;\n value?: any;\n label?: string;\n checked?: boolean;\n disabled?: boolean;\n id?: string;\n handler?: (input: AlertInput) => void;\n min?: string | number;\n max?: string | number;\n cssClass?: string | string[];\n attributes?: AlertInputAttributes | AlertTextareaAttributes;\n tabindex?: number;\n}\n```\n\n### AlertInputAttributes\n\n```typescript\ninterface AlertInputAttributes extends JSXBase.InputHTMLAttributes<HTMLInputElement> {}\n```\n\n### AlertOptions\n\n```typescript\ninterface AlertOptions {\n header?: string;\n subHeader?: string;\n message?: string | IonicSafeString;\n cssClass?: string | string[];\n inputs?: AlertInput[];\n buttons?: (AlertButton | string)[];\n backdropDismiss?: boolean;\n translucent?: boolean;\n animated?: boolean;\n htmlAttributes?: AlertAttributes;\n\n mode?: Mode;\n keyboardClose?: boolean;\n id?: string;\n\n enterAnimation?: AnimationBuilder;\n leaveAnimation?: AnimationBuilder;\n}\n```\n\n### AlertAttributes\n```typescript\ninterface AlertAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}\n```\n\n### AlertTextareaAttributes\n```typescript\ninterface AlertTextareaAttributes extends JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n```\n\n\n",
|
||
"docs": "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`.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```typescript\nimport { Component } from '@angular/core';\nimport { AlertController } from '@ionic/angular';\n\n@Component({\n selector: 'alert-example',\n templateUrl: 'alert-example.html',\n styleUrls: ['./alert-example.css'],\n})\nexport class AlertExample {\n\n constructor(public alertController: AlertController) {}\n\n async presentAlert() {\n const alert = await this.alertController.create({\n cssClass: 'my-custom-class',\n header: 'Alert',\n subHeader: 'Subtitle',\n message: 'This is an alert message.',\n buttons: ['OK']\n });\n\n await alert.present();\n\n const { role } = await alert.onDidDismiss();\n console.log('onDidDismiss resolved with role', role);\n }\n\n async presentAlertMultipleButtons() {\n const alert = await this.alertController.create({\n cssClass: 'my-custom-class',\n header: 'Alert',\n subHeader: 'Subtitle',\n message: 'This is an alert message.',\n buttons: ['Cancel', 'Open Modal', 'Delete']\n });\n\n await alert.present();\n }\n\n async presentAlertConfirm() {\n const alert = await this.alertController.create({\n cssClass: 'my-custom-class',\n header: 'Confirm!',\n message: 'Message <strong>text</strong>!!!',\n buttons: [\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: (blah) => {\n console.log('Confirm Cancel: blah');\n }\n }, {\n text: 'Okay',\n handler: () => {\n console.log('Confirm Okay');\n }\n }\n ]\n });\n\n await alert.present();\n }\n\n async presentAlertPrompt() {\n const alert = await this.alertController.create({\n cssClass: 'my-custom-class',\n header: 'Prompt!',\n inputs: [\n {\n name: 'name1',\n type: 'text',\n placeholder: 'Placeholder 1'\n },\n {\n name: 'name2',\n type: 'text',\n id: 'name2-id',\n value: 'hello',\n placeholder: 'Placeholder 2'\n },\n // multiline input.\n {\n name: 'paragraph',\n id: 'paragraph',\n type: 'textarea',\n placeholder: 'Placeholder 3'\n },\n {\n name: 'name3',\n value: 'http://ionicframework.com',\n type: 'url',\n placeholder: 'Favorite site ever'\n },\n // input date with min & max\n {\n name: 'name4',\n type: 'date',\n min: '2017-03-01',\n max: '2018-01-12'\n },\n // input date without min nor max\n {\n name: 'name5',\n type: 'date'\n },\n {\n name: 'name6',\n type: 'number',\n min: -5,\n max: 10\n },\n {\n name: 'name7',\n type: 'number'\n },\n {\n name: 'name8',\n type: 'password',\n placeholder: 'Advanced Attributes',\n cssClass: 'specialClass',\n attributes: {\n maxlength: 4,\n inputmode: 'decimal'\n }\n }\n ],\n buttons: [\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: () => {\n console.log('Confirm Cancel');\n }\n }, {\n text: 'Ok',\n handler: () => {\n console.log('Confirm Ok');\n }\n }\n ]\n });\n\n await alert.present();\n }\n\n async presentAlertRadio() {\n const alert = await this.alertController.create({\n cssClass: 'my-custom-class',\n header: 'Radio',\n inputs: [\n {\n name: 'radio1',\n type: 'radio',\n label: 'Radio 1',\n value: 'value1',\n handler: () => {\n console.log('Radio 1 selected');\n },\n checked: true\n },\n {\n name: 'radio2',\n type: 'radio',\n label: 'Radio 2',\n value: 'value2',\n handler: () => {\n console.log('Radio 2 selected');\n }\n },\n {\n name: 'radio3',\n type: 'radio',\n label: 'Radio 3',\n value: 'value3',\n handler: () => {\n console.log('Radio 3 selected');\n }\n },\n {\n name: 'radio4',\n type: 'radio',\n label: 'Radio 4',\n value: 'value4',\n handler: () => {\n console.log('Radio 4 selected');\n }\n },\n {\n name: 'radio5',\n type: 'radio',\n label: 'Radio 5',\n value: 'value5',\n handler: () => {\n console.log('Radio 5 selected');\n }\n },\n {\n name: 'radio6',\n type: 'radio',\n label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',\n value: 'value6',\n handler: () => {\n console.log('Radio 6 selected');\n }\n }\n ],\n buttons: [\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: () => {\n console.log('Confirm Cancel');\n }\n }, {\n text: 'Ok',\n handler: () => {\n console.log('Confirm Ok');\n }\n }\n ]\n });\n\n await alert.present();\n }\n\n async presentAlertCheckbox() {\n const alert = await this.alertController.create({\n cssClass: 'my-custom-class',\n header: 'Checkbox',\n inputs: [\n {\n name: 'checkbox1',\n type: 'checkbox',\n label: 'Checkbox 1',\n value: 'value1',\n handler: () => {\n console.log('Checkbox 1 selected');\n },\n checked: true\n },\n\n {\n name: 'checkbox2',\n type: 'checkbox',\n label: 'Checkbox 2',\n value: 'value2',\n handler: () => {\n console.log('Checkbox 2 selected');\n }\n },\n\n {\n name: 'checkbox3',\n type: 'checkbox',\n label: 'Checkbox 3',\n value: 'value3',\n handler: () => {\n console.log('Checkbox 3 selected');\n }\n },\n\n {\n name: 'checkbox4',\n type: 'checkbox',\n label: 'Checkbox 4',\n value: 'value4',\n handler: () => {\n console.log('Checkbox 4 selected');\n }\n },\n\n {\n name: 'checkbox5',\n type: 'checkbox',\n label: 'Checkbox 5',\n value: 'value5',\n handler: () => {\n console.log('Checkbox 5 selected');\n }\n },\n\n {\n name: 'checkbox6',\n type: 'checkbox',\n label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',\n value: 'value6',\n handler: () => {\n console.log('Checkbox 6 selected');\n }\n }\n ],\n buttons: [\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: () => {\n console.log('Confirm Cancel');\n }\n }, {\n text: 'Ok',\n handler: () => {\n console.log('Confirm Ok');\n }\n }\n ]\n });\n\n await alert.present();\n }\n}\n```\n\n\n### Style Placement\n\nIn Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Alert can be presented from within a page, the `ion-alert` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config).",
|
||
"javascript": "```javascript\nfunction presentAlert() {\n const alert = document.createElement('ion-alert');\n alert.cssClass = 'my-custom-class';\n alert.header = 'Alert';\n alert.subHeader = 'Subtitle';\n alert.message = 'This is an alert message.';\n alert.buttons = ['OK'];\n\n document.body.appendChild(alert);\n await alert.present();\n\n const { role } = await alert.onDidDismiss();\n console.log('onDidDismiss resolved with role', role);\n}\n\nfunction presentAlertMultipleButtons() {\n const alert = document.createElement('ion-alert');\n alert.cssClass = 'my-custom-class';\n alert.header = 'Alert';\n alert.subHeader = 'Subtitle';\n alert.message = 'This is an alert message.';\n alert.buttons = ['Cancel', 'Open Modal', 'Delete'];\n\n document.body.appendChild(alert);\n return alert.present();\n}\n\nfunction presentAlertConfirm() {\n const alert = document.createElement('ion-alert');\n alert.cssClass = 'my-custom-class';\n alert.header = 'Confirm!';\n alert.message = 'Message <strong>text</strong>!!!';\n alert.buttons = [\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: (blah) => {\n console.log('Confirm Cancel: blah');\n }\n }, {\n text: 'Okay',\n handler: () => {\n console.log('Confirm Okay')\n }\n }\n ];\n\n document.body.appendChild(alert);\n return alert.present();\n}\n\nfunction presentAlertPrompt() {\n const alert = document.createElement('ion-alert');\n alert.cssClass = 'my-custom-class';\n alert.header = 'Prompt!';\n alert.inputs = [\n {\n placeholder: 'Placeholder 1'\n },\n {\n name: 'name2',\n id: 'name2-id',\n value: 'hello',\n placeholder: 'Placeholder 2'\n },\n // multiline input.\n {\n name: 'paragraph',\n id: 'paragraph',\n type: 'textarea',\n placeholder: 'Placeholder 3'\n },\n {\n name: 'name3',\n value: 'http://ionicframework.com',\n type: 'url',\n placeholder: 'Favorite site ever'\n },\n // input date with min & max\n {\n name: 'name4',\n type: 'date',\n min: '2017-03-01',\n max: '2018-01-12'\n },\n // input date without min nor max\n {\n name: 'name5',\n type: 'date'\n },\n {\n name: 'name6',\n type: 'number',\n min: -5,\n max: 10\n },\n {\n name: 'name7',\n type: 'number'\n },\n {\n name: 'name8',\n type: 'password',\n placeholder: 'Advanced Attributes',\n cssClass: 'specialClass',\n attributes: {\n maxlength: 4,\n inputmode: 'decimal'\n }\n }\n ];\n alert.buttons = [\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: () => {\n console.log('Confirm Cancel')\n }\n }, {\n text: 'Ok',\n handler: () => {\n console.log('Confirm Ok')\n }\n }\n ];\n\n document.body.appendChild(alert);\n return alert.present();\n}\n\nfunction presentAlertRadio() {\n const alert = document.createElement('ion-alert');\n alert.cssClass = 'my-custom-class';\n alert.header = 'Radio';\n alert.inputs = [\n {\n type: 'radio',\n label: 'Radio 1',\n value: 'value1',\n handler: () => {\n console.log('Radio 1 selected');\n },\n checked: true\n },\n {\n type: 'radio',\n label: 'Radio 2',\n value: 'value2',\n handler: () => {\n console.log('Radio 2 selected');\n }\n },\n {\n type: 'radio',\n label: 'Radio 3',\n value: 'value3',\n handler: () => {\n console.log('Radio 3 selected');\n }\n },\n {\n type: 'radio',\n label: 'Radio 4',\n value: 'value4',\n handler: () => {\n console.log('Radio 4 selected');\n }\n },\n {\n type: 'radio',\n label: 'Radio 5',\n value: 'value5',\n handler: () => {\n console.log('Radio 5 selected');\n }\n },\n {\n type: 'radio',\n label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',\n value: 'value6',\n handler: () => {\n console.log('Radio 6 selected');\n }\n }\n ];\n alert.buttons = [\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: () => {\n console.log('Confirm Cancel')\n }\n }, {\n text: 'Ok',\n handler: () => {\n console.log('Confirm Ok')\n }\n }\n ];\n document.body.appendChild(alert);\n return alert.present();\n}\n\nfunction presentAlertCheckbox() {\n const alert = document.createElement('ion-alert');\n alert.cssClass = 'my-custom-class';\n alert.header = 'Checkbox';\n alert.inputs = [\n {\n type: 'checkbox',\n label: 'Checkbox 1',\n value: 'value1',\n handler: () => {\n console.log('Checkbox 1 selected');\n },\n checked: true\n },\n\n {\n type: 'checkbox',\n label: 'Checkbox 2',\n value: 'value2',\n handler: () => {\n console.log('Checkbox 2 selected');\n }\n },\n\n {\n type: 'checkbox',\n label: 'Checkbox 3',\n value: 'value3',\n handler: () => {\n console.log('Checkbox 3 selected');\n }\n },\n\n {\n type: 'checkbox',\n label: 'Checkbox 4',\n value: 'value4',\n handler: () => {\n console.log('Checkbox 4 selected');\n }\n },\n\n {\n type: 'checkbox',\n label: 'Checkbox 5',\n value: 'value5',\n handler: () => {\n console.log('Checkbox 5 selected');\n }\n },\n\n {\n type: 'checkbox',\n label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',\n value: 'value6',\n handler: () => {\n console.log('Checkbox 6 selected');\n }\n }\n ];\n alert.buttons = [\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: () => {\n console.log('Confirm Cancel')\n }\n }, {\n text: 'Ok',\n handler: () => {\n console.log('Confirm Ok')\n }\n }\n ];\n\n document.body.appendChild(alert);\n return alert.present();\n}\n```\n",
|
||
"react": "```tsx\n/* Using with useIonAlert Hook */\n\nimport React from 'react';\nimport { IonButton, IonContent, IonPage, useIonAlert } from '@ionic/react';\n\nconst AlertExample: React.FC = () => {\n const [present] = useIonAlert();\n return (\n <IonPage>\n <IonContent fullscreen>\n <IonButton\n expand=\"block\"\n onClick={() =>\n present({\n cssClass: 'my-css',\n header: 'Alert',\n message: 'alert from hook',\n buttons: [\n 'Cancel',\n { text: 'Ok', handler: (d) => console.log('ok pressed') },\n ],\n onDidDismiss: (e) => console.log('did dismiss'),\n })\n }\n >\n Show Alert\n </IonButton>\n <IonButton\n expand=\"block\"\n onClick={() => present('hello with params', [{ text: 'Ok' }])}\n >\n Show Alert using params\n </IonButton>\n </IonContent>\n </IonPage>\n );\n};\n```\n\n```tsx\n/* Using with IonAlert Component */\n\nimport React, { useState } from 'react';\nimport { IonAlert, IonButton, IonContent } from '@ionic/react';\n\nexport const AlertExample: React.FC = () => {\n\n const [showAlert1, setShowAlert1] = useState(false);\n const [showAlert2, setShowAlert2] = useState(false);\n const [showAlert3, setShowAlert3] = useState(false);\n const [showAlert4, setShowAlert4] = useState(false);\n const [showAlert5, setShowAlert5] = useState(false);\n const [showAlert6, setShowAlert6] = useState(false);\n\n return (\n <IonContent>\n <IonButton onClick={() => setShowAlert1(true)} expand=\"block\">Show Alert 1</IonButton>\n <IonButton onClick={() => setShowAlert2(true)} expand=\"block\">Show Alert 2</IonButton>\n <IonButton onClick={() => setShowAlert3(true)} expand=\"block\">Show Alert 3</IonButton>\n <IonButton onClick={() => setShowAlert4(true)} expand=\"block\">Show Alert 4</IonButton>\n <IonButton onClick={() => setShowAlert5(true)} expand=\"block\">Show Alert 5</IonButton>\n <IonButton onClick={() => setShowAlert6(true)} expand=\"block\">Show Alert 6</IonButton>\n <IonAlert\n isOpen={showAlert1}\n onDidDismiss={() => setShowAlert1(false)}\n cssClass='my-custom-class'\n header={'Alert'}\n subHeader={'Subtitle'}\n message={'This is an alert message.'}\n buttons={['OK']}\n />\n\n <IonAlert\n isOpen={showAlert2}\n onDidDismiss={() => setShowAlert2(false)}\n cssClass='my-custom-class'\n header={'Alert'}\n subHeader={'Subtitle'}\n message={'This is an alert message.'}\n buttons={['Cancel', 'Open Modal', 'Delete']}\n />\n\n <IonAlert\n isOpen={showAlert3}\n onDidDismiss={() => setShowAlert3(false)}\n cssClass='my-custom-class'\n header={'Confirm!'}\n message={'Message <strong>text</strong>!!!'}\n buttons={[\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: blah => {\n console.log('Confirm Cancel: blah');\n }\n },\n {\n text: 'Okay',\n handler: () => {\n console.log('Confirm Okay');\n }\n }\n ]}\n />\n\n <IonAlert\n isOpen={showAlert4}\n onDidDismiss={() => setShowAlert4(false)}\n cssClass='my-custom-class'\n header={'Prompt!'}\n inputs={[\n {\n name: 'name1',\n type: 'text',\n placeholder: 'Placeholder 1'\n },\n {\n name: 'name2',\n type: 'text',\n id: 'name2-id',\n value: 'hello',\n placeholder: 'Placeholder 2'\n },\n {\n name: 'name3',\n value: 'http://ionicframework.com',\n type: 'url',\n placeholder: 'Favorite site ever'\n },\n // input date with min & max\n {\n name: 'name4',\n type: 'date',\n min: '2017-03-01',\n max: '2018-01-12'\n },\n // input date without min nor max\n {\n name: 'name5',\n type: 'date'\n },\n {\n name: 'name6',\n type: 'number',\n min: -5,\n max: 10\n },\n {\n name: 'name7',\n type: 'number'\n },\n {\n name: 'name8',\n type: 'password',\n placeholder: 'Advanced Attributes',\n cssClass: 'specialClass',\n attributes: {\n maxlength: 4,\n inputmode: 'decimal'\n }\n }\n ]}\n buttons={[\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: () => {\n console.log('Confirm Cancel');\n }\n },\n {\n text: 'Ok',\n handler: () => {\n console.log('Confirm Ok');\n }\n }\n ]}\n />\n\n <IonAlert\n isOpen={showAlert5}\n onDidDismiss={() => setShowAlert5(false)}\n cssClass='my-custom-class'\n header={'Radio'}\n inputs={[\n {\n name: 'radio1',\n type: 'radio',\n label: 'Radio 1',\n value: 'value1',\n handler: () => {\n console.log('Radio 1 selected');\n },\n checked: true\n },\n {\n name: 'radio2',\n type: 'radio',\n label: 'Radio 2',\n value: 'value2',\n handler: () => {\n console.log('Radio 2 selected');\n }\n },\n {\n name: 'radio3',\n type: 'radio',\n label: 'Radio 3',\n value: 'value3',\n handler: () => {\n console.log('Radio 3 selected');\n }\n },\n {\n name: 'radio4',\n type: 'radio',\n label: 'Radio 4',\n value: 'value4',\n handler: () => {\n console.log('Radio 4 selected');\n }\n },\n {\n name: 'radio5',\n type: 'radio',\n label: 'Radio 5',\n value: 'value5',\n handler: () => {\n console.log('Radio 5 selected');\n }\n },\n {\n name: 'radio6',\n type: 'radio',\n label: 'Radio 6',\n value: 'value6',\n handler: () => {\n console.log('Radio 6 selected');\n }\n }\n ]}\n buttons={[\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: () => {\n console.log('Confirm Cancel');\n }\n },\n {\n text: 'Ok',\n handler: () => {\n console.log('Confirm Ok');\n }\n }\n ]}\n />\n\n <IonAlert\n isOpen={showAlert6}\n onDidDismiss={() => setShowAlert6(false)}\n cssClass='my-custom-class'\n header={'Checkbox'}\n inputs={[\n {\n name: 'checkbox1',\n type: 'checkbox',\n label: 'Checkbox 1',\n value: 'value1',\n handler: () => {\n console.log('Checkbox 1 selected');\n },\n checked: true\n },\n {\n name: 'checkbox2',\n type: 'checkbox',\n label: 'Checkbox 2',\n value: 'value2',\n handler: () => {\n console.log('Checkbox 2 selected');\n }\n },\n {\n name: 'checkbox3',\n type: 'checkbox',\n label: 'Checkbox 3',\n value: 'value3',\n handler: () => {\n console.log('Checkbox 3 selected');\n }\n },\n {\n name: 'checkbox4',\n type: 'checkbox',\n label: 'Checkbox 4',\n value: 'value4',\n handler: () => {\n console.log('Checkbox 4 selected');\n }\n },\n {\n name: 'checkbox5',\n type: 'checkbox',\n label: 'Checkbox 5',\n value: 'value5',\n handler: () => {\n console.log('Checkbox 5 selected');\n }\n },\n {\n name: 'checkbox6',\n type: 'checkbox',\n label: 'Checkbox 6',\n value: 'value6',\n handler: () => {\n console.log('Checkbox 6 selected');\n }\n }\n ]}\n buttons={[\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: () => {\n console.log('Confirm Cancel');\n }\n },\n {\n text: 'Ok',\n handler: () => {\n console.log('Confirm Ok');\n }\n }\n ]}\n />\n </IonContent>\n );\n}\n\nexport default AlertExample;\n\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\nimport { alertController } from '@ionic/core';\n\n@Component({\n tag: 'alert-example',\n styleUrl: 'alert-example.css'\n})\nexport class AlertExample {\n async presentAlert() {\n const alert = await alertController.create({\n cssClass: 'my-custom-class',\n header: 'Alert',\n subHeader: 'Subtitle',\n message: 'This is an alert message.',\n buttons: ['OK']\n });\n\n await alert.present();\n\n const { role } = await alert.onDidDismiss();\n console.log('onDidDismiss resolved with role', role);\n }\n\n async presentAlertMultipleButtons() {\n const alert = await alertController.create({\n cssClass: 'my-custom-class',\n header: 'Alert',\n subHeader: 'Subtitle',\n message: 'This is an alert message.',\n buttons: ['Cancel', 'Open Modal', 'Delete']\n });\n\n await alert.present();\n }\n\n async presentAlertConfirm() {\n const alert = await alertController.create({\n cssClass: 'my-custom-class',\n header: 'Confirm!',\n message: 'Message <strong>text</strong>!!!',\n buttons: [\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: (blah) => {\n console.log('Confirm Cancel: blah');\n }\n }, {\n text: 'Okay',\n handler: () => {\n console.log('Confirm Okay');\n }\n }\n ]\n });\n\n await alert.present();\n }\n\n async presentAlertPrompt() {\n const alert = await alertController.create({\n cssClass: 'my-custom-class',\n header: 'Prompt!',\n inputs: [\n {\n name: 'name1',\n type: 'text',\n placeholder: 'Placeholder 1'\n },\n {\n name: 'name2',\n type: 'text',\n id: 'name2-id',\n value: 'hello',\n placeholder: 'Placeholder 2'\n },\n // multiline input.\n {\n name: 'paragraph',\n id: 'paragraph',\n type: 'textarea',\n placeholder: 'Placeholder 3'\n },\n {\n name: 'name3',\n value: 'http://ionicframework.com',\n type: 'url',\n placeholder: 'Favorite site ever'\n },\n // input date with min & max\n {\n name: 'name4',\n type: 'date',\n min: '2017-03-01',\n max: '2018-01-12'\n },\n // input date without min nor max\n {\n name: 'name5',\n type: 'date'\n },\n {\n name: 'name6',\n type: 'number',\n min: -5,\n max: 10\n },\n {\n name: 'name7',\n type: 'number'\n },\n {\n name: 'name8',\n type: 'password',\n placeholder: 'Advanced Attributes',\n cssClass: 'specialClass',\n attributes: {\n maxlength: 4,\n inputmode: 'decimal'\n }\n }\n ],\n buttons: [\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: () => {\n console.log('Confirm Cancel');\n }\n }, {\n text: 'Ok',\n handler: () => {\n console.log('Confirm Ok');\n }\n }\n ]\n });\n\n await alert.present();\n }\n\n async presentAlertRadio() {\n const alert = await alertController.create({\n cssClass: 'my-custom-class',\n header: 'Radio',\n inputs: [\n {\n name: 'radio1',\n type: 'radio',\n label: 'Radio 1',\n value: 'value1',\n handler: () => {\n console.log('Radio 1 selected');\n },\n checked: true\n },\n {\n name: 'radio2',\n type: 'radio',\n label: 'Radio 2',\n value: 'value2',\n handler: () => {\n console.log('Radio 2 selected');\n }\n },\n {\n name: 'radio3',\n type: 'radio',\n label: 'Radio 3',\n value: 'value3',\n handler: () => {\n console.log('Radio 3 selected');\n }\n },\n {\n name: 'radio4',\n type: 'radio',\n label: 'Radio 4',\n value: 'value4',\n handler: () => {\n console.log('Radio 4 selected');\n }\n },\n {\n name: 'radio5',\n type: 'radio',\n label: 'Radio 5',\n value: 'value5',\n handler: () => {\n console.log('Radio 5 selected');\n }\n },\n {\n name: 'radio6',\n type: 'radio',\n label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',\n value: 'value6',\n handler: () => {\n console.log('Radio 6 selected');\n }\n }\n ],\n buttons: [\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: () => {\n console.log('Confirm Cancel');\n }\n }, {\n text: 'Ok',\n handler: () => {\n console.log('Confirm Ok');\n }\n }\n ]\n });\n\n await alert.present();\n }\n\n async presentAlertCheckbox() {\n const alert = await alertController.create({\n cssClass: 'my-custom-class',\n header: 'Checkbox',\n inputs: [\n {\n name: 'checkbox1',\n type: 'checkbox',\n label: 'Checkbox 1',\n value: 'value1',\n handler: () => {\n console.log('Checkbox 1 selected');\n },\n checked: true\n },\n {\n name: 'checkbox2',\n type: 'checkbox',\n label: 'Checkbox 2',\n value: 'value2',\n handler: () => {\n console.log('Checkbox 2 selected');\n }\n },\n\n {\n name: 'checkbox3',\n type: 'checkbox',\n label: 'Checkbox 3',\n value: 'value3',\n handler: () => {\n console.log('Checkbox 3 selected');\n }\n },\n\n {\n name: 'checkbox4',\n type: 'checkbox',\n label: 'Checkbox 4',\n value: 'value4',\n handler: () => {\n console.log('Checkbox 4 selected');\n }\n },\n\n {\n name: 'checkbox5',\n type: 'checkbox',\n label: 'Checkbox 5',\n value: 'value5',\n handler: () => {\n console.log('Checkbox 5 selected');\n }\n },\n\n {\n name: 'checkbox6',\n type: 'checkbox',\n label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',\n value: 'value6',\n handler: () => {\n console.log('Checkbox 6 selected');\n }\n }\n ],\n buttons: [\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: () => {\n console.log('Confirm Cancel');\n }\n }, {\n text: 'Ok',\n handler: () => {\n console.log('Confirm Ok');\n }\n }\n ]\n });\n\n await alert.present();\n }\n\n\n render() {\n return [\n <ion-content>\n <ion-button onClick={() => this.presentAlert()}>Present Alert</ion-button>\n <ion-button onClick={() => this.presentAlertMultipleButtons()}>Present Alert: Multiple Buttons</ion-button>\n <ion-button onClick={() => this.presentAlertConfirm()}>Present Alert: Confirm</ion-button>\n <ion-button onClick={() => this.presentAlertPrompt()}>Present Alert: Prompt</ion-button>\n <ion-button onClick={() => this.presentAlertRadio()}>Present Alert: Radio</ion-button>\n <ion-button onClick={() => this.presentAlertCheckbox()}>Present Alert: Checkbox</ion-button>\n </ion-content>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-button @click=\"presentAlert\">Show Alert</ion-button>\n <ion-button @click=\"presentAlertMultipleButtons\">Show Alert (multiple buttons)</ion-button>\n <ion-button @click=\"presentAlertConfirm\">Show Alert (confirm)</ion-button>\n <ion-button @click=\"presentAlertPrompt\">Show Alert (prompt)</ion-button>\n <ion-button @click=\"presentAlertRadio\">Show Alert (radio)</ion-button>\n <ion-button @click=\"presentAlertCheckbox\">Show Alert (checkbox)</ion-button>\n</template>\n\n<script>\nimport { IonButton, alertController } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonButton },\n methods: {\n async presentAlert() {\n const alert = await alertController\n .create({\n cssClass: 'my-custom-class',\n header: 'Alert',\n subHeader: 'Subtitle',\n message: 'This is an alert message.',\n buttons: ['OK'],\n });\n await alert.present();\n\n const { role } = await alert.onDidDismiss();\n console.log('onDidDismiss resolved with role', role);\n },\n\n async presentAlertMultipleButtons() {\n const alert = await alertController\n .create({\n cssClass: 'my-custom-class',\n header: 'Alert',\n subHeader: 'Subtitle',\n message: 'This is an alert message.',\n buttons: ['Cancel', 'Open Modal', 'Delete'],\n });\n return alert.present();\n },\n\n async presentAlertConfirm() {\n const alert = await alertController\n .create({\n cssClass: 'my-custom-class',\n header: 'Confirm!',\n message: 'Message <strong>text</strong>!!!',\n buttons: [\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: blah => {\n console.log('Confirm Cancel:', blah)\n },\n },\n {\n text: 'Okay',\n handler: () => {\n console.log('Confirm Okay')\n },\n },\n ],\n });\n return alert.present();\n },\n\n async presentAlertPrompt() {\n const alert = await alertController\n .create({\n cssClass: 'my-custom-class',\n header: 'Prompt!',\n inputs: [\n {\n placeholder: 'Placeholder 1',\n },\n {\n name: 'name2',\n id: 'name2-id',\n value: 'hello',\n placeholder: 'Placeholder 2',\n },\n {\n name: 'name3',\n value: 'http://ionicframework.com',\n type: 'url',\n placeholder: 'Favorite site ever',\n },\n // input date with min & max\n {\n name: 'name4',\n type: 'date',\n min: '2017-03-01',\n max: '2018-01-12',\n },\n // input date without min nor max\n {\n name: 'name5',\n type: 'date',\n },\n {\n name: 'name6',\n type: 'number',\n min: -5,\n max: 10,\n },\n {\n name: 'name7',\n type: 'number',\n },\n {\n name: 'name8',\n type: 'password',\n placeholder: 'Advanced Attributes',\n cssClass: 'specialClass',\n attributes: {\n maxlength: 4,\n inputmode: 'decimal'\n }\n }\n ],\n buttons: [\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: () => {\n console.log('Confirm Cancel')\n },\n },\n {\n text: 'Ok',\n handler: () => {\n console.log('Confirm Ok')\n },\n },\n ],\n });\n return alert.present();\n },\n\n async presentAlertRadio() {\n const alert = await alertController\n .create({\n cssClass: 'my-custom-class',\n header: 'Radio',\n inputs: [\n {\n type: 'radio',\n label: 'Radio 1',\n value: 'value1',\n handler: () => {\n console.log('Radio 1 selected');\n },\n checked: true,\n },\n {\n type: 'radio',\n label: 'Radio 2',\n value: 'value2',\n handler: () => {\n console.log('Radio 2 selected');\n }\n },\n {\n type: 'radio',\n label: 'Radio 3',\n value: 'value3',\n handler: () => {\n console.log('Radio 3 selected');\n }\n },\n {\n type: 'radio',\n label: 'Radio 4',\n value: 'value4',\n handler: () => {\n console.log('Radio 4 selected');\n }\n },\n {\n type: 'radio',\n label: 'Radio 5',\n value: 'value5',\n handler: () => {\n console.log('Radio 5 selected');\n }\n },\n {\n type: 'radio',\n label: 'Radio 6',\n value: 'value6',\n handler: () => {\n console.log('Radio 6 selected');\n }\n },\n ],\n buttons: [\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: () => {\n console.log('Confirm Cancel')\n },\n },\n {\n text: 'Ok',\n handler: () => {\n console.log('Confirm Ok')\n },\n },\n ],\n });\n return alert.present();\n },\n\n async presentAlertCheckbox() {\n const alert = await alertController\n .create({\n cssClass: 'my-custom-class',\n header: 'Checkbox',\n inputs: [\n {\n type: 'checkbox',\n label: 'Checkbox 1',\n value: 'value1',\n handler: () => {\n console.log('Checkbox 1 selected');\n },\n checked: true,\n },\n\n {\n type: 'checkbox',\n label: 'Checkbox 2',\n value: 'value2',\n handler: () => {\n console.log('Checkbox 2 selected');\n }\n },\n\n {\n type: 'checkbox',\n label: 'Checkbox 3',\n value: 'value3',\n handler: () => {\n console.log('Checkbox 3 selected');\n }\n },\n\n {\n type: 'checkbox',\n label: 'Checkbox 4',\n value: 'value4',\n handler: () => {\n console.log('Checkbox 4 selected');\n }\n },\n\n {\n type: 'checkbox',\n label: 'Checkbox 5',\n value: 'value5',\n handler: () => {\n console.log('Checkbox 5 selected');\n }\n },\n\n {\n type: 'checkbox',\n label: 'Checkbox 6',\n value: 'value6',\n handler: () => {\n console.log('Checkbox 6 selected');\n }\n },\n ],\n buttons: [\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: () => {\n console.log('Confirm Cancel')\n },\n },\n {\n text: 'Ok',\n handler: () => {\n console.log('Confirm Ok')\n },\n },\n ],\n });\n return alert.present();\n },\n },\n});\n</script>\n```\n\nDevelopers can also use this component directly in their template:\n\n```html\n<template>\n <ion-button @click=\"setOpen(true)\">Show Alert</ion-button>\n <ion-alert\n :is-open=\"isOpenRef\"\n header=\"Alert\"\n sub-header=\"Subtitle\"\n message=\"This is an alert message.\"\n css-class=\"my-custom-class\"\n :buttons=\"buttons\"\n @didDismiss=\"setOpen(false)\"\n >\n </ion-alert>\n</template>\n\n<script>\nimport { IonAlert, IonButton } from '@ionic/vue';\nimport { defineComponent, ref } from 'vue';\n\nexport default defineComponent({\n components: { IonAlert, IonButton },\n setup() {\n const isOpenRef = ref(false);\n const setOpen = (state: boolean) => isOpenRef.value = state;\n const buttons = ['Ok'];\n \n return { buttons, isOpenRef, setOpen }\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "animated",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "animated",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the alert will animate.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "backdropDismiss",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "backdrop-dismiss",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the alert will be dismissed when the backdrop is clicked.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "buttons",
|
||
"type": "(string | AlertButton)[]",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Array of buttons to be added to the alert.",
|
||
"docsTags": [],
|
||
"default": "[]",
|
||
"values": [
|
||
{
|
||
"type": "(string"
|
||
},
|
||
{
|
||
"type": "AlertButton)[]"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "cssClass",
|
||
"type": "string | string[] | undefined",
|
||
"mutable": false,
|
||
"attr": "css-class",
|
||
"reflectToAttr": false,
|
||
"docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "string[]"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "enterAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Animation to use when the alert is presented.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "header",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "header",
|
||
"reflectToAttr": false,
|
||
"docs": "The main title in the heading of the alert.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "htmlAttributes",
|
||
"type": "AlertAttributes | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Additional attributes to pass to the alert.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "AlertAttributes"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "inputs",
|
||
"type": "AlertInput[]",
|
||
"mutable": true,
|
||
"reflectToAttr": false,
|
||
"docs": "Array of input to show in the alert.",
|
||
"docsTags": [],
|
||
"default": "[]",
|
||
"values": [
|
||
{
|
||
"type": "AlertInput[]"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "keyboardClose",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "keyboard-close",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "leaveAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Animation to use when the alert is dismissed.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "message",
|
||
"type": "IonicSafeString | string | undefined",
|
||
"mutable": false,
|
||
"attr": "message",
|
||
"reflectToAttr": false,
|
||
"docs": "The main message to be displayed in the alert.\n`message` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`<Ionic>`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "IonicSafeString"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "subHeader",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "sub-header",
|
||
"reflectToAttr": false,
|
||
"docs": "The subtitle in the heading of the alert. Displayed under the title.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "translucent",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "translucent",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the alert will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "dismiss",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Dismiss the alert overlay after it has been presented.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "data Any data to emit in the dismiss events."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "role The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "onDidDismiss",
|
||
"returns": {
|
||
"type": "Promise<OverlayEventDetail<T>>",
|
||
"docs": ""
|
||
},
|
||
"signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
|
||
"parameters": [],
|
||
"docs": "Returns a promise that resolves when the alert did dismiss.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "onWillDismiss",
|
||
"returns": {
|
||
"type": "Promise<OverlayEventDetail<T>>",
|
||
"docs": ""
|
||
},
|
||
"signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
|
||
"parameters": [],
|
||
"docs": "Returns a promise that resolves when the alert will dismiss.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "present",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "present() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Present the alert overlay after it has been created.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionAlertDidDismiss",
|
||
"detail": "OverlayEventDetail<any>",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted after the alert has dismissed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionAlertDidPresent",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted after the alert has presented.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionAlertWillDismiss",
|
||
"detail": "OverlayEventDetail<any>",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted before the alert has dismissed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionAlertWillPresent",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted before the alert has presented.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [
|
||
{
|
||
"event": "keydown",
|
||
"target": "document",
|
||
"capture": false,
|
||
"passive": false
|
||
}
|
||
],
|
||
"styles": [
|
||
{
|
||
"name": "--backdrop-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the backdrop"
|
||
},
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the alert"
|
||
},
|
||
{
|
||
"name": "--height",
|
||
"annotation": "prop",
|
||
"docs": "Height of the alert"
|
||
},
|
||
{
|
||
"name": "--max-height",
|
||
"annotation": "prop",
|
||
"docs": "Maximum height of the alert"
|
||
},
|
||
{
|
||
"name": "--max-width",
|
||
"annotation": "prop",
|
||
"docs": "Maximum width of the alert"
|
||
},
|
||
{
|
||
"name": "--min-height",
|
||
"annotation": "prop",
|
||
"docs": "Minimum height of the alert"
|
||
},
|
||
{
|
||
"name": "--min-width",
|
||
"annotation": "prop",
|
||
"docs": "Minimum width of the alert"
|
||
},
|
||
{
|
||
"name": "--width",
|
||
"annotation": "prop",
|
||
"docs": "Width of the alert"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-ripple-effect",
|
||
"ion-backdrop"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-alert": [
|
||
"ion-ripple-effect",
|
||
"ion-backdrop"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/app/app.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-app",
|
||
"readme": "# ion-app\n\nApp 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.\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {},
|
||
"props": [],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/avatar/avatar.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-avatar",
|
||
"readme": "# ion-avatar\n\nAvatars 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.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"angular": "```html\n<ion-avatar>\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\">\n</ion-avatar>\n\n<ion-chip>\n <ion-avatar>\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\">\n </ion-avatar>\n <ion-label>Chip Avatar</ion-label>\n</ion-chip>\n\n<ion-item>\n <ion-avatar slot=\"start\">\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\">\n </ion-avatar>\n <ion-label>Item Avatar</ion-label>\n</ion-item>\n```",
|
||
"javascript": "```html\n<ion-avatar>\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\">\n</ion-avatar>\n\n<ion-chip>\n <ion-avatar>\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\">\n </ion-avatar>\n <ion-label>Chip Avatar</ion-label>\n</ion-chip>\n\n<ion-item>\n <ion-avatar slot=\"start\">\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\">\n </ion-avatar>\n <ion-label>Item Avatar</ion-label>\n</ion-item>\n```",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react';\n\nexport const AvatarExample: React.FC = () => (\n <IonContent>\n <IonAvatar>\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\" />\n </IonAvatar>\n\n <IonChip>\n <IonAvatar>\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\" />\n </IonAvatar>\n <IonLabel>Chip Avatar</IonLabel>\n </IonChip>\n\n <IonItem>\n <IonAvatar slot=\"start\">\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\" />\n </IonAvatar>\n <IonLabel>Item Avatar</IonLabel>\n </IonItem>\n </IonContent>\n);\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'avatar-example',\n styleUrl: 'avatar-example.css'\n})\nexport class AvatarExample {\n render() {\n return [\n <ion-avatar>\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\"/>\n </ion-avatar>,\n\n <ion-chip>\n <ion-avatar>\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\"/>\n </ion-avatar>\n <ion-label>Chip Avatar</ion-label>\n </ion-chip>,\n\n <ion-item>\n <ion-avatar slot=\"start\">\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\"/>\n </ion-avatar>\n <ion-label>Item Avatar</ion-label>\n </ion-item>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-avatar>\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\">\n </ion-avatar>\n\n <ion-chip>\n <ion-avatar>\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\">\n </ion-avatar>\n <ion-label>Chip Avatar</ion-label>\n </ion-chip>\n\n <ion-item>\n <ion-avatar slot=\"start\">\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\">\n </ion-avatar>\n <ion-label>Item Avatar</ion-label>\n </ion-item>\n</template>\n\n<script>\nimport { IonAvatar, IonChip, IonItem, IonLabel } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonAvatar, IonChip, IonItem, IonLabel }\n});\n</script>\n```"
|
||
},
|
||
"props": [],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Border radius of the avatar and inner image"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/back-button/back-button.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-back-button",
|
||
"readme": "# ion-back-button\n\nThe 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.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
},
|
||
{
|
||
"text": "native - The native HTML button element that wraps all child elements.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "icon - The back button icon (uses ion-icon).",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "text - The back button text.",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<!-- Default back button -->\n<ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<!-- Back button with a default href -->\n<ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button defaultHref=\"home\"></ion-back-button>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<!-- Back button with custom text and icon -->\n<ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button\n [text]=\"buttonText\"\n [icon]=\"buttonIcon\">\n </ion-back-button>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<!-- Back button with no text and custom icon -->\n<ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button text=\"\" icon=\"add\"></ion-back-button>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<!-- Danger back button next to a menu button -->\n<ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-menu-button></ion-menu-button>\n <ion-back-button color=\"danger\"></ion-back-button>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n```",
|
||
"javascript": "```html\n<!-- Default back button -->\n<ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<!-- Back button with a default href -->\n<ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button default-href=\"home\"></ion-back-button>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<!-- Back button with custom text and icon -->\n<ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button text=\"Volver\" icon=\"close\"></ion-back-button>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<!-- Back button with no text and custom icon -->\n<ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button text=\"\" icon=\"add\"></ion-back-button>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<!-- Danger back button next to a menu button -->\n<ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-menu-button></ion-menu-button>\n <ion-back-button color=\"danger\"></ion-back-button>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n```",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton, IonContent } from '@ionic/react';\n\nexport const BackButtonExample: React.FC = () => (\n <IonContent>\n {/*-- Default back button --*/}\n <IonHeader>\n <IonToolbar>\n <IonButtons slot=\"start\">\n <IonBackButton />\n </IonButtons>\n </IonToolbar>\n </IonHeader>\n\n {/*-- Back button with a default href --*/}\n <IonHeader>\n <IonToolbar>\n <IonButtons slot=\"start\">\n <IonBackButton defaultHref=\"home\" />\n </IonButtons>\n </IonToolbar>\n </IonHeader>\n\n {/*-- Back button with custom text and icon --*/}\n <IonHeader>\n <IonToolbar>\n <IonButtons slot=\"start\">\n <IonBackButton text=\"buttonText\" icon=\"buttonIcon\" />\n </IonButtons>\n </IonToolbar>\n </IonHeader>\n\n {/*-- Back button with no text and custom icon --*/}\n <IonHeader>\n <IonToolbar>\n <IonButtons slot=\"start\">\n <IonBackButton text=\"\" icon=\"add\" />\n </IonButtons>\n </IonToolbar>\n </IonHeader>\n\n {/*-- Danger back button next to a menu button --*/}\n <IonHeader>\n <IonToolbar>\n <IonButtons slot=\"start\">\n <IonMenuButton />\n <IonBackButton color=\"danger\" />\n </IonButtons>\n </IonToolbar>\n </IonHeader>\n </IonContent>\n);\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'back-button-example',\n styleUrl: 'back-button-example.css'\n})\nexport class BackButtonExample {\n render() {\n const buttonText = \"Custom\";\n const buttonIcon = \"add\";\n\n return [\n // Default back button\n <ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n </ion-toolbar>\n </ion-header>,\n\n // Back button with a default href\n <ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button defaultHref=\"home\"></ion-back-button>\n </ion-buttons>\n </ion-toolbar>\n </ion-header>,\n\n // Back button with custom text and icon\n <ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button\n text={buttonText}\n icon={buttonIcon}>\n </ion-back-button>\n </ion-buttons>\n </ion-toolbar>\n </ion-header>,\n\n // Back button with no text and custom icon\n <ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button text=\"\" icon=\"add\"></ion-back-button>\n </ion-buttons>\n </ion-toolbar>\n </ion-header>,\n\n // Danger back button next to a menu button\n <ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-menu-button></ion-menu-button>\n <ion-back-button color=\"danger\"></ion-back-button>\n </ion-buttons>\n </ion-toolbar>\n </ion-header>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <!-- Default back button -->\n <ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n </ion-toolbar>\n </ion-header>\n\n <!-- Back button with a default href -->\n <ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button default-href=\"home\"></ion-back-button>\n </ion-buttons>\n </ion-toolbar>\n </ion-header>\n\n <!-- Back button with custom text and icon -->\n <ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button\n :text=\"buttonText\"\n :icon=\"buttonIcon\">\n </ion-back-button>\n </ion-buttons>\n </ion-toolbar>\n </ion-header>\n\n <!-- Back button with no text and custom icon -->\n <ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button text=\"\" icon=\"add\"></ion-back-button>\n </ion-buttons>\n </ion-toolbar>\n </ion-header>\n\n <!-- Danger back button next to a menu button -->\n <ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-menu-button></ion-menu-button>\n <ion-back-button color=\"danger\"></ion-back-button>\n </ion-buttons>\n </ion-toolbar>\n </ion-header>\n</template>\n\n<script>\nimport { IonButtons, IonHeader, IonMenuButton, IonToolbar } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonButtons, IonHeader, IonMenuButton, IonToolbar }\n});\n</script>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "defaultHref",
|
||
"type": "string | undefined",
|
||
"mutable": true,
|
||
"attr": "default-href",
|
||
"reflectToAttr": false,
|
||
"docs": "The url to navigate back to by default when there is no history.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": true,
|
||
"docs": "If `true`, the user cannot interact with the button.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"type": "null | string | undefined",
|
||
"mutable": false,
|
||
"attr": "icon",
|
||
"reflectToAttr": false,
|
||
"docs": "The icon name to use for the back button.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "routerAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "When using a router, it specifies the transition animation when navigating to\nanother page.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "text",
|
||
"type": "null | string | undefined",
|
||
"mutable": false,
|
||
"attr": "text",
|
||
"reflectToAttr": false,
|
||
"docs": "The text to display in the back button.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "type",
|
||
"type": "\"button\" | \"reset\" | \"submit\"",
|
||
"mutable": false,
|
||
"attr": "type",
|
||
"reflectToAttr": false,
|
||
"docs": "The type of the button.",
|
||
"docsTags": [],
|
||
"default": "'button'",
|
||
"values": [
|
||
{
|
||
"value": "button",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "reset",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "submit",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the button"
|
||
},
|
||
{
|
||
"name": "--background-focused",
|
||
"annotation": "prop",
|
||
"docs": "Background of the button when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--background-focused-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the button background when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--background-hover",
|
||
"annotation": "prop",
|
||
"docs": "Background of the button on hover"
|
||
},
|
||
{
|
||
"name": "--background-hover-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the background on hover"
|
||
},
|
||
{
|
||
"name": "--border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Border radius of the button"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Text color of the button"
|
||
},
|
||
{
|
||
"name": "--color-focused",
|
||
"annotation": "prop",
|
||
"docs": "Text color of the button when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--color-hover",
|
||
"annotation": "prop",
|
||
"docs": "Text color of the button on hover"
|
||
},
|
||
{
|
||
"name": "--icon-font-size",
|
||
"annotation": "prop",
|
||
"docs": "Font size of the button icon"
|
||
},
|
||
{
|
||
"name": "--icon-font-weight",
|
||
"annotation": "prop",
|
||
"docs": "Font weight of the button icon"
|
||
},
|
||
{
|
||
"name": "--icon-margin-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom margin of the button icon"
|
||
},
|
||
{
|
||
"name": "--icon-margin-end",
|
||
"annotation": "prop",
|
||
"docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon"
|
||
},
|
||
{
|
||
"name": "--icon-margin-start",
|
||
"annotation": "prop",
|
||
"docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon"
|
||
},
|
||
{
|
||
"name": "--icon-margin-top",
|
||
"annotation": "prop",
|
||
"docs": "Top margin of the button icon"
|
||
},
|
||
{
|
||
"name": "--icon-padding-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom padding of the button icon"
|
||
},
|
||
{
|
||
"name": "--icon-padding-end",
|
||
"annotation": "prop",
|
||
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon"
|
||
},
|
||
{
|
||
"name": "--icon-padding-start",
|
||
"annotation": "prop",
|
||
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon"
|
||
},
|
||
{
|
||
"name": "--icon-padding-top",
|
||
"annotation": "prop",
|
||
"docs": "Top padding of the button icon"
|
||
},
|
||
{
|
||
"name": "--margin-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom margin of the button"
|
||
},
|
||
{
|
||
"name": "--margin-end",
|
||
"annotation": "prop",
|
||
"docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button"
|
||
},
|
||
{
|
||
"name": "--margin-start",
|
||
"annotation": "prop",
|
||
"docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button"
|
||
},
|
||
{
|
||
"name": "--margin-top",
|
||
"annotation": "prop",
|
||
"docs": "Top margin of the button"
|
||
},
|
||
{
|
||
"name": "--min-height",
|
||
"annotation": "prop",
|
||
"docs": "Minimum height of the button"
|
||
},
|
||
{
|
||
"name": "--min-width",
|
||
"annotation": "prop",
|
||
"docs": "Minimum width of the button"
|
||
},
|
||
{
|
||
"name": "--opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the button"
|
||
},
|
||
{
|
||
"name": "--padding-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom padding of the button"
|
||
},
|
||
{
|
||
"name": "--padding-end",
|
||
"annotation": "prop",
|
||
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button"
|
||
},
|
||
{
|
||
"name": "--padding-start",
|
||
"annotation": "prop",
|
||
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button"
|
||
},
|
||
{
|
||
"name": "--padding-top",
|
||
"annotation": "prop",
|
||
"docs": "Top padding of the button"
|
||
},
|
||
{
|
||
"name": "--ripple-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the button ripple effect"
|
||
},
|
||
{
|
||
"name": "--transition",
|
||
"annotation": "prop",
|
||
"docs": "Transition of the button"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [
|
||
{
|
||
"name": "icon",
|
||
"docs": "The back button icon (uses ion-icon)."
|
||
},
|
||
{
|
||
"name": "native",
|
||
"docs": "The native HTML button element that wraps all child elements."
|
||
},
|
||
{
|
||
"name": "text",
|
||
"docs": "The back button text."
|
||
}
|
||
],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-icon",
|
||
"ion-ripple-effect"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-back-button": [
|
||
"ion-icon",
|
||
"ion-ripple-effect"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/backdrop/backdrop.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-backdrop",
|
||
"readme": "# ion-backdrop\n\nBackdrops 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.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"angular": "```html\n<!-- Default backdrop -->\n<ion-backdrop></ion-backdrop>\n\n<!-- Backdrop that is not tappable -->\n<ion-backdrop tappable=\"false\"></ion-backdrop>\n\n<!-- Backdrop that is not visible -->\n<ion-backdrop visible=\"false\"></ion-backdrop>\n\n<!-- Backdrop with propagation -->\n<ion-backdrop stopPropagation=\"false\"></ion-backdrop>\n\n<!-- Backdrop that sets dynamic properties -->\n<ion-backdrop\n [tappable]=\"enableBackdropDismiss\"\n [visible]=\"showBackdrop\"\n [stopPropagation]=\"shouldPropagate\">\n</ion-backdrop>\n```\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'backdrop-example',\n templateUrl: 'backdrop-example.html',\n styleUrls: ['./backdrop-example.css'],\n})\nexport class BackdropExample {\n enableBackdropDismiss = false;\n showBackdrop = false;\n shouldPropagate = false;\n}\n```\n",
|
||
"javascript": "```html\n<!-- Default backdrop -->\n<ion-backdrop></ion-backdrop>\n\n<!-- Backdrop that is not tappable -->\n<ion-backdrop tappable=\"false\"></ion-backdrop>\n\n<!-- Backdrop that is not visible -->\n<ion-backdrop visible=\"false\"></ion-backdrop>\n\n<!-- Backdrop with propagation -->\n<ion-backdrop stop-propagation=\"false\"></ion-backdrop>\n\n<!-- Backdrop that sets dynamic properties -->\n<ion-backdrop id=\"customBackdrop\"></ion-backdrop>\n```\n\n```javascript\nvar backdrop = document.getElementById('customBackdrop');\nbackdrop.visible = false;\nbackdrop.tappable = false;\nbackdrop.stopPropagation = false;\n```",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonBackdrop, IonContent } from '@ionic/react';\n\nexport const BackdropExample: React.FC = () => (\n <IonContent>\n {/*-- Default backdrop --*/}\n <IonBackdrop />\n\n {/*-- Backdrop that is not tappable --*/}\n <IonBackdrop tappable={false} />\n\n {/*-- Backdrop that is not visible --*/}\n <IonBackdrop visible={false} />\n\n {/*-- Backdrop with propagation --*/}\n <IonBackdrop stopPropagation={false} />\n\n <IonBackdrop tappable={true} visible={true} stopPropagation={true} />\n </IonContent>\n);\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'backdrop-example',\n styleUrl: 'backdrop-example.css'\n})\nexport class BackdropExample {\n render() {\n const enableBackdropDismiss = false;\n const showBackdrop = false;\n const shouldPropagate = false;\n\n return [\n // Default backdrop\n <ion-backdrop></ion-backdrop>,\n\n // Backdrop that is not tappable\n <ion-backdrop tappable={false}></ion-backdrop>,\n\n // Backdrop that is not visible\n <ion-backdrop visible={false}></ion-backdrop>,\n\n // Backdrop with propagation\n <ion-backdrop stopPropagation={false}></ion-backdrop>,\n\n // Backdrop that sets dynamic properties\n <ion-backdrop\n tappable={enableBackdropDismiss}\n visible={showBackdrop}\n stopPropagation={shouldPropagate}>\n </ion-backdrop>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <!-- Default backdrop -->\n <ion-backdrop></ion-backdrop>\n\n <!-- Backdrop that is not tappable -->\n <ion-backdrop tappable=\"false\"></ion-backdrop>\n\n <!-- Backdrop that is not visible -->\n <ion-backdrop visible=\"false\"></ion-backdrop>\n\n <!-- Backdrop with propagation -->\n <ion-backdrop stop-propagation=\"false\"></ion-backdrop>\n\n <!-- Backdrop that sets dynamic properties -->\n <ion-backdrop\n :tappable=\"enableBackdropDismiss\"\n :visible=\"showBackdrop\"\n :stop-propagation=\"shouldPropagate\">\n </ion-backdrop>\n</template>\n\n<script>\nimport { IonBackdrop } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonBackdrop },\n setup() {\n return {\n enableBackdropDismiss: true,\n showBackdrop: true,\n shouldPropagate: true\n }\n }\n});\n</script>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "stopPropagation",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "stop-propagation",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the backdrop will stop propagation on tap.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "tappable",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "tappable",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "visible",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "visible",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the backdrop will be visible.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [
|
||
{
|
||
"event": "ionBackdropTap",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the backdrop is tapped.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [
|
||
{
|
||
"event": "click",
|
||
"capture": true,
|
||
"passive": false
|
||
}
|
||
],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [
|
||
"ion-action-sheet",
|
||
"ion-alert",
|
||
"ion-loading",
|
||
"ion-menu",
|
||
"ion-modal",
|
||
"ion-picker",
|
||
"ion-popover"
|
||
],
|
||
"dependencies": [],
|
||
"dependencyGraph": {
|
||
"ion-action-sheet": [
|
||
"ion-backdrop"
|
||
],
|
||
"ion-alert": [
|
||
"ion-backdrop"
|
||
],
|
||
"ion-loading": [
|
||
"ion-backdrop"
|
||
],
|
||
"ion-menu": [
|
||
"ion-backdrop"
|
||
],
|
||
"ion-modal": [
|
||
"ion-backdrop"
|
||
],
|
||
"ion-picker": [
|
||
"ion-backdrop"
|
||
],
|
||
"ion-popover": [
|
||
"ion-backdrop"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/badge/badge.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-badge",
|
||
"readme": "# ion-badge\n\nBadges 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.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<!-- Default -->\n<ion-badge>99</ion-badge>\n\n<!-- Colors -->\n<ion-badge color=\"primary\">11</ion-badge>\n<ion-badge color=\"secondary\">22</ion-badge>\n<ion-badge color=\"tertiary\">33</ion-badge>\n<ion-badge color=\"success\">44</ion-badge>\n<ion-badge color=\"warning\">55</ion-badge>\n<ion-badge color=\"danger\">66</ion-badge>\n<ion-badge color=\"light\">77</ion-badge>\n<ion-badge color=\"medium\">88</ion-badge>\n<ion-badge color=\"dark\">99</ion-badge>\n\n<!-- Item with badge on left and right -->\n<ion-item>\n <ion-badge slot=\"start\">11</ion-badge>\n <ion-label>My Item</ion-label>\n <ion-badge slot=\"end\">22</ion-badge>\n</ion-item>\n```",
|
||
"javascript": "```html\n<!-- Default -->\n<ion-badge>99</ion-badge>\n\n<!-- Colors -->\n<ion-badge color=\"primary\">11</ion-badge>\n<ion-badge color=\"secondary\">22</ion-badge>\n<ion-badge color=\"tertiary\">33</ion-badge>\n<ion-badge color=\"success\">44</ion-badge>\n<ion-badge color=\"warning\">55</ion-badge>\n<ion-badge color=\"danger\">66</ion-badge>\n<ion-badge color=\"light\">77</ion-badge>\n<ion-badge color=\"medium\">88</ion-badge>\n<ion-badge color=\"dark\">99</ion-badge>\n\n<!-- Item with badge on left and right -->\n<ion-item>\n <ion-badge slot=\"start\">11</ion-badge>\n <ion-label>My Item</ion-label>\n <ion-badge slot=\"end\">22</ion-badge>\n</ion-item>\n```",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonBadge, IonItem, IonLabel, IonContent } from '@ionic/react';\n\nexport const BadgeExample: React.FC = () => (\n <IonContent>\n {/*-- Default --*/}\n <IonBadge>99</IonBadge>\n\n {/*-- Colors --*/}\n <IonBadge color=\"primary\">11</IonBadge>\n <IonBadge color=\"secondary\">22</IonBadge>\n <IonBadge color=\"tertiary\">33</IonBadge>\n <IonBadge color=\"success\">44</IonBadge>\n <IonBadge color=\"warning\">55</IonBadge>\n <IonBadge color=\"danger\">66</IonBadge>\n <IonBadge color=\"light\">77</IonBadge>\n <IonBadge color=\"medium\">88</IonBadge>\n <IonBadge color=\"dark\">99</IonBadge>\n\n {/*-- Item with badge on left and right --*/}\n <IonItem>\n <IonBadge slot=\"start\">11</IonBadge>\n <IonLabel>My Item</IonLabel>\n <IonBadge slot=\"end\">22</IonBadge>\n </IonItem>\n </IonContent>\n);\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'badge-example',\n styleUrl: 'badge-example.css'\n})\nexport class BadgeExample {\n render() {\n return [\n // Default\n <ion-badge>99</ion-badge>,\n\n // Colors\n <ion-badge color=\"primary\">11</ion-badge>,\n <ion-badge color=\"secondary\">22</ion-badge>,\n <ion-badge color=\"tertiary\">33</ion-badge>,\n <ion-badge color=\"success\">44</ion-badge>,\n <ion-badge color=\"warning\">55</ion-badge>,\n <ion-badge color=\"danger\">66</ion-badge>,\n <ion-badge color=\"light\">77</ion-badge>,\n <ion-badge color=\"medium\">88</ion-badge>,\n <ion-badge color=\"dark\">99</ion-badge>,\n\n // Item with badge on left and right\n <ion-item>\n <ion-badge slot=\"start\">11</ion-badge>\n <ion-label>My Item</ion-label>\n <ion-badge slot=\"end\">22</ion-badge>\n </ion-item>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <!-- Default -->\n <ion-badge>99</ion-badge>\n\n <!-- Colors -->\n <ion-badge color=\"primary\">11</ion-badge>\n <ion-badge color=\"secondary\">22</ion-badge>\n <ion-badge color=\"tertiary\">33</ion-badge>\n <ion-badge color=\"success\">44</ion-badge>\n <ion-badge color=\"warning\">55</ion-badge>\n <ion-badge color=\"danger\">66</ion-badge>\n <ion-badge color=\"light\">77</ion-badge>\n <ion-badge color=\"medium\">88</ion-badge>\n <ion-badge color=\"dark\">99</ion-badge>\n\n <!-- Item with badge on left and right -->\n <ion-item>\n <ion-badge slot=\"start\">11</ion-badge>\n <ion-label>My Item</ion-label>\n <ion-badge slot=\"end\">22</ion-badge>\n </ion-item>\n</template>\n\n<script>\nimport { IonBadge, IonItem, IonLabel } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonBadge, IonItem, IonLabel }\n});\n</script>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the badge"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Text color of the badge"
|
||
},
|
||
{
|
||
"name": "--padding-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom padding of the badge"
|
||
},
|
||
{
|
||
"name": "--padding-end",
|
||
"annotation": "prop",
|
||
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge"
|
||
},
|
||
{
|
||
"name": "--padding-start",
|
||
"annotation": "prop",
|
||
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge"
|
||
},
|
||
{
|
||
"name": "--padding-top",
|
||
"annotation": "prop",
|
||
"docs": "Top padding of the badge"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/button/button.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-button",
|
||
"readme": "# ion-button\n\nButtons 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.\n\n## Expand\n\nThis attribute lets you specify how wide the button should be. By default, buttons are inline blocks, but setting this attribute will change the button to a full-width block element.\n\n| Value | Details |\n|----------------|------------------------------------------------------------------------------|\n| `block` | Full-width button with rounded corners. |\n| `full` | Full-width button with square corners and no border on the left or right. |\n\n## Fill\n\nThis attributes determines the background and border color of the button. By default, buttons have a solid background unless the button is inside of a toolbar, in which case it has a transparent background.\n\n| Value | Details |\n|----------------|------------------------------------------------------------------------------|\n| `clear` | Button with a transparent background that resembles a flat button. |\n| `outline` | Button with a transparent background and a visible border. |\n| `solid` | Button with a filled background. Useful for buttons in a toolbar. |\n\n## Size\n\nThis attribute specifies the size of the button. Setting this attribute will change the height and padding of a button.\n\n| Value | Details |\n|----------------|------------------------------------------------------------------------------|\n| `small` | Button with less height and padding. Default for buttons in an item. |\n| `default` | Button with the default height and padding. Useful for buttons in an item. |\n| `large` | Button with more height and padding. |\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
},
|
||
{
|
||
"text": "- Content is placed between the named slots if provided without a slot.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "icon-only - Should be used on an icon in a button that has no text.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "start - Content is placed to the left of the button text in LTR, and to the right in RTL.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "end - Content is placed to the right of the button text in LTR, and to the left in RTL.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "native - The native HTML button or anchor element that wraps all child elements.",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "\n```html\n<!-- Default -->\n<ion-button>Default</ion-button>\n\n<!-- Anchor -->\n<ion-button href=\"#\">Anchor</ion-button>\n\n<!-- Colors -->\n<ion-button color=\"primary\">Primary</ion-button>\n<ion-button color=\"secondary\">Secondary</ion-button>\n<ion-button color=\"tertiary\">Tertiary</ion-button>\n<ion-button color=\"success\">Success</ion-button>\n<ion-button color=\"warning\">Warning</ion-button>\n<ion-button color=\"danger\">Danger</ion-button>\n<ion-button color=\"light\">Light</ion-button>\n<ion-button color=\"medium\">Medium</ion-button>\n<ion-button color=\"dark\">Dark</ion-button>\n\n<!-- Expand -->\n<ion-button expand=\"full\">Full Button</ion-button>\n<ion-button expand=\"block\">Block Button</ion-button>\n\n<!-- Round -->\n<ion-button shape=\"round\">Round Button</ion-button>\n\n<!-- Fill -->\n<ion-button expand=\"full\" fill=\"outline\">Outline + Full</ion-button>\n<ion-button expand=\"block\" fill=\"outline\">Outline + Block</ion-button>\n<ion-button shape=\"round\" fill=\"outline\">Outline + Round</ion-button>\n\n<!-- Icons -->\n<ion-button>\n <ion-icon slot=\"start\" name=\"star\"></ion-icon>\n Left Icon\n</ion-button>\n\n<ion-button>\n Right Icon\n <ion-icon slot=\"end\" name=\"star\"></ion-icon>\n</ion-button>\n\n<ion-button>\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n</ion-button>\n\n<!-- Sizes -->\n<ion-button size=\"large\">Large</ion-button>\n<ion-button>Default</ion-button>\n<ion-button size=\"small\">Small</ion-button>\n```\n",
|
||
"javascript": "\n```html\n<!-- Default -->\n<ion-button>Default</ion-button>\n\n<!-- Anchor -->\n<ion-button href=\"#\">Anchor</ion-button>\n\n<!-- Colors -->\n<ion-button color=\"primary\">Primary</ion-button>\n<ion-button color=\"secondary\">Secondary</ion-button>\n<ion-button color=\"tertiary\">Tertiary</ion-button>\n<ion-button color=\"success\">Success</ion-button>\n<ion-button color=\"warning\">Warning</ion-button>\n<ion-button color=\"danger\">Danger</ion-button>\n<ion-button color=\"light\">Light</ion-button>\n<ion-button color=\"medium\">Medium</ion-button>\n<ion-button color=\"dark\">Dark</ion-button>\n\n<!-- Expand -->\n<ion-button expand=\"full\">Full Button</ion-button>\n<ion-button expand=\"block\">Block Button</ion-button>\n\n<!-- Round -->\n<ion-button shape=\"round\">Round Button</ion-button>\n\n<!-- Fill -->\n<ion-button expand=\"full\" fill=\"outline\">Outline + Full</ion-button>\n<ion-button expand=\"block\" fill=\"outline\">Outline + Block</ion-button>\n<ion-button shape=\"round\" fill=\"outline\">Outline + Round</ion-button>\n\n<!-- Icons -->\n<ion-button>\n <ion-icon slot=\"start\" name=\"star\"></ion-icon>\n Left Icon\n</ion-button>\n\n<ion-button>\n Right Icon\n <ion-icon slot=\"end\" name=\"star\"></ion-icon>\n</ion-button>\n\n<ion-button>\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n</ion-button>\n\n<!-- Sizes -->\n<ion-button size=\"large\">Large</ion-button>\n<ion-button>Default</ion-button>\n<ion-button size=\"small\">Small</ion-button>\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\n\nimport { IonButton, IonIcon, IonContent } from '@ionic/react';\nimport { star } from 'ionicons/icons';\n\nexport const ButtonExample: React.FC = () => (\n <IonContent>\n {/*-- Default --*/}\n <IonButton>Default</IonButton>\n\n {/*-- Anchor --*/}\n <IonButton href=\"#\">Anchor</IonButton>\n\n {/*-- Colors --*/}\n <IonButton color=\"primary\">Primary</IonButton>\n <IonButton color=\"secondary\">Secondary</IonButton>\n <IonButton color=\"tertiary\">Tertiary</IonButton>\n <IonButton color=\"success\">Success</IonButton>\n <IonButton color=\"warning\">Warning</IonButton>\n <IonButton color=\"danger\">Danger</IonButton>\n <IonButton color=\"light\">Light</IonButton>\n <IonButton color=\"medium\">Medium</IonButton>\n <IonButton color=\"dark\">Dark</IonButton>\n\n {/*-- Expand --*/}\n <IonButton expand=\"full\">Full Button</IonButton>\n <IonButton expand=\"block\">Block Button</IonButton>\n\n {/*-- Round --*/}\n <IonButton shape=\"round\">Round Button</IonButton>\n\n {/*-- Fill --*/}\n <IonButton expand=\"full\" fill=\"outline\">Outline + Full</IonButton>\n <IonButton expand=\"block\" fill=\"outline\">Outline + Block</IonButton>\n <IonButton shape=\"round\" fill=\"outline\">Outline + Round</IonButton>\n\n {/*-- Icons --*/}\n <IonButton>\n <IonIcon slot=\"start\" icon={star} />\n Left Icon\n </IonButton>\n\n <IonButton>\n Right Icon\n <IonIcon slot=\"end\" icon={star} />\n </IonButton>\n\n <IonButton>\n <IonIcon slot=\"icon-only\" icon={star} />\n </IonButton>\n\n {/*-- Sizes --*/}\n <IonButton size=\"large\">Large</IonButton>\n <IonButton>Default</IonButton>\n <IonButton size=\"small\">Small</IonButton>\n </IonContent>\n);\n\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'button-example',\n styleUrl: 'button-example.css'\n})\nexport class ButtonExample {\n render() {\n return [\n // Default\n <ion-button>Default</ion-button>,\n\n // Anchor\n <ion-button href=\"#\">Anchor</ion-button>,\n\n // Colors\n <ion-button color=\"primary\">Primary</ion-button>,\n <ion-button color=\"secondary\">Secondary</ion-button>,\n <ion-button color=\"tertiary\">Tertiary</ion-button>,\n <ion-button color=\"success\">Success</ion-button>,\n <ion-button color=\"warning\">Warning</ion-button>,\n <ion-button color=\"danger\">Danger</ion-button>,\n <ion-button color=\"light\">Light</ion-button>,\n <ion-button color=\"medium\">Medium</ion-button>,\n <ion-button color=\"dark\">Dark</ion-button>,\n\n // Expand\n <ion-button expand=\"full\">Full Button</ion-button>,\n <ion-button expand=\"block\">Block Button</ion-button>,\n\n // Round\n <ion-button shape=\"round\">Round Button</ion-button>,\n\n // Fill\n <ion-button expand=\"full\" fill=\"outline\">Outline + Full</ion-button>,\n <ion-button expand=\"block\" fill=\"outline\">Outline + Block</ion-button>,\n <ion-button shape=\"round\" fill=\"outline\">Outline + Round</ion-button>,\n\n // Icons\n <ion-button>\n <ion-icon slot=\"start\" name=\"star\"></ion-icon>\n Left Icon\n </ion-button>,\n\n <ion-button>\n Right Icon\n <ion-icon slot=\"end\" name=\"star\"></ion-icon>\n </ion-button>,\n\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-button>,\n\n // Sizes\n <ion-button size=\"large\">Large</ion-button>,\n <ion-button>Default</ion-button>,\n <ion-button size=\"small\">Small</ion-button>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <!-- Default -->\n <ion-button>Default</ion-button>\n\n <!-- Anchor -->\n <ion-button href=\"#\">Anchor</ion-button>\n\n <!-- Colors -->\n <ion-button color=\"primary\">Primary</ion-button>\n <ion-button color=\"secondary\">Secondary</ion-button>\n <ion-button color=\"tertiary\">Tertiary</ion-button>\n <ion-button color=\"success\">Success</ion-button>\n <ion-button color=\"warning\">Warning</ion-button>\n <ion-button color=\"danger\">Danger</ion-button>\n <ion-button color=\"light\">Light</ion-button>\n <ion-button color=\"medium\">Medium</ion-button>\n <ion-button color=\"dark\">Dark</ion-button>\n\n <!-- Expand -->\n <ion-button expand=\"full\">Full Button</ion-button>\n <ion-button expand=\"block\">Block Button</ion-button>\n\n <!-- Round -->\n <ion-button shape=\"round\">Round Button</ion-button>\n\n <!-- Fill -->\n <ion-button expand=\"full\" fill=\"outline\">Outline + Full</ion-button>\n <ion-button expand=\"block\" fill=\"outline\">Outline + Block</ion-button>\n <ion-button shape=\"round\" fill=\"outline\">Outline + Round</ion-button>\n\n <!-- Icons -->\n <ion-button>\n <ion-icon slot=\"start\" name=\"star\"></ion-icon>\n Left Icon\n </ion-button>\n\n <ion-button>\n Right Icon\n <ion-icon slot=\"end\" name=\"star\"></ion-icon>\n </ion-button>\n\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-button>\n\n <!-- Sizes -->\n <ion-button size=\"large\">Large</ion-button>\n <ion-button>Default</ion-button>\n <ion-button size=\"small\">Small</ion-button>\n</template>\n\n<script>\nimport { IonButton } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonButton }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "buttonType",
|
||
"type": "string",
|
||
"mutable": true,
|
||
"attr": "button-type",
|
||
"reflectToAttr": false,
|
||
"docs": "The type of button.",
|
||
"docsTags": [],
|
||
"default": "'button'",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": true,
|
||
"docs": "If `true`, the user cannot interact with the button.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "download",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "download",
|
||
"reflectToAttr": false,
|
||
"docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "expand",
|
||
"type": "\"block\" | \"full\" | undefined",
|
||
"mutable": false,
|
||
"attr": "expand",
|
||
"reflectToAttr": true,
|
||
"docs": "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button\nwithout left and right borders.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "block",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "full",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "fill",
|
||
"type": "\"clear\" | \"default\" | \"outline\" | \"solid\" | undefined",
|
||
"mutable": true,
|
||
"attr": "fill",
|
||
"reflectToAttr": true,
|
||
"docs": "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\"`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "clear",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "default",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "outline",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "solid",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "href",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "href",
|
||
"reflectToAttr": false,
|
||
"docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "rel",
|
||
"reflectToAttr": false,
|
||
"docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "routerAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "routerDirection",
|
||
"type": "\"back\" | \"forward\" | \"root\"",
|
||
"mutable": false,
|
||
"attr": "router-direction",
|
||
"reflectToAttr": false,
|
||
"docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
|
||
"docsTags": [],
|
||
"default": "'forward'",
|
||
"values": [
|
||
{
|
||
"value": "back",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "forward",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "root",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "shape",
|
||
"type": "\"round\" | undefined",
|
||
"mutable": false,
|
||
"attr": "shape",
|
||
"reflectToAttr": true,
|
||
"docs": "The button shape.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "round",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "size",
|
||
"type": "\"default\" | \"large\" | \"small\" | undefined",
|
||
"mutable": false,
|
||
"attr": "size",
|
||
"reflectToAttr": true,
|
||
"docs": "The button size.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "default",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "large",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "small",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "strong",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "strong",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, activates a button with a heavier font weight.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "target",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "target",
|
||
"reflectToAttr": false,
|
||
"docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "type",
|
||
"type": "\"button\" | \"reset\" | \"submit\"",
|
||
"mutable": false,
|
||
"attr": "type",
|
||
"reflectToAttr": false,
|
||
"docs": "The type of the button.",
|
||
"docsTags": [],
|
||
"default": "'button'",
|
||
"values": [
|
||
{
|
||
"value": "button",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "reset",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "submit",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [
|
||
{
|
||
"event": "ionBlur",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the button loses focus.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionFocus",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the button has focus.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the button"
|
||
},
|
||
{
|
||
"name": "--background-activated",
|
||
"annotation": "prop",
|
||
"docs": "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple."
|
||
},
|
||
{
|
||
"name": "--background-activated-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the button when pressed"
|
||
},
|
||
{
|
||
"name": "--background-focused",
|
||
"annotation": "prop",
|
||
"docs": "Background of the button when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--background-focused-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the button when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--background-hover",
|
||
"annotation": "prop",
|
||
"docs": "Background of the button on hover"
|
||
},
|
||
{
|
||
"name": "--background-hover-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the background on hover"
|
||
},
|
||
{
|
||
"name": "--border-color",
|
||
"annotation": "prop",
|
||
"docs": "Border color of the button"
|
||
},
|
||
{
|
||
"name": "--border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Border radius of the button"
|
||
},
|
||
{
|
||
"name": "--border-style",
|
||
"annotation": "prop",
|
||
"docs": "Border style of the button"
|
||
},
|
||
{
|
||
"name": "--border-width",
|
||
"annotation": "prop",
|
||
"docs": "Border width of the button"
|
||
},
|
||
{
|
||
"name": "--box-shadow",
|
||
"annotation": "prop",
|
||
"docs": "Box shadow of the button"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Text color of the button"
|
||
},
|
||
{
|
||
"name": "--color-activated",
|
||
"annotation": "prop",
|
||
"docs": "Text color of the button when pressed"
|
||
},
|
||
{
|
||
"name": "--color-focused",
|
||
"annotation": "prop",
|
||
"docs": "Text color of the button when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--color-hover",
|
||
"annotation": "prop",
|
||
"docs": "Text color of the button when hover"
|
||
},
|
||
{
|
||
"name": "--opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the button"
|
||
},
|
||
{
|
||
"name": "--padding-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom padding of the button"
|
||
},
|
||
{
|
||
"name": "--padding-end",
|
||
"annotation": "prop",
|
||
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button"
|
||
},
|
||
{
|
||
"name": "--padding-start",
|
||
"annotation": "prop",
|
||
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button"
|
||
},
|
||
{
|
||
"name": "--padding-top",
|
||
"annotation": "prop",
|
||
"docs": "Top padding of the button"
|
||
},
|
||
{
|
||
"name": "--ripple-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the button ripple effect"
|
||
},
|
||
{
|
||
"name": "--transition",
|
||
"annotation": "prop",
|
||
"docs": "Transition of the button"
|
||
}
|
||
],
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"docs": "Content is placed between the named slots if provided without a slot."
|
||
},
|
||
{
|
||
"name": "end",
|
||
"docs": "Content is placed to the right of the button text in LTR, and to the left in RTL."
|
||
},
|
||
{
|
||
"name": "icon-only",
|
||
"docs": "Should be used on an icon in a button that has no text."
|
||
},
|
||
{
|
||
"name": "start",
|
||
"docs": "Content is placed to the left of the button text in LTR, and to the right in RTL."
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "native",
|
||
"docs": "The native HTML button or anchor element that wraps all child elements."
|
||
}
|
||
],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-ripple-effect"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-button": [
|
||
"ion-ripple-effect"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/buttons/buttons.tsx",
|
||
"encapsulation": "scoped",
|
||
"tag": "ion-buttons",
|
||
"readme": "# ion-buttons\n\nThe 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. |\n\n",
|
||
"docs": "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. |",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"angular": "```html\n<ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n <ion-title>Back Button</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons slot=\"secondary\">\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"person-circle\"></ion-icon>\n </ion-button>\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Default Buttons</ion-title>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"secondary\">\n <ion-icon slot=\"icon-only\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n </ion-button>\n </ion-buttons>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons slot=\"primary\">\n <ion-button (click)=\"clickedStar()\">\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Right side menu toggle</ion-title>\n <ion-buttons slot=\"end\">\n <ion-menu-button autoHide=\"false\"></ion-menu-button>\n </ion-buttons>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons collapse=\"true\">\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Collapsible Buttons</ion-title>\n</ion-toolbar>\n```",
|
||
"javascript": "```html\n<ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n <ion-title>Back Button</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons slot=\"secondary\">\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"person-circle\"></ion-icon>\n </ion-button>\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Default Buttons</ion-title>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"secondary\">\n <ion-icon slot=\"icon-only\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n </ion-button>\n </ion-buttons>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons slot=\"primary\">\n <ion-button onclick=\"clickedStar()\">\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Right side menu toggle</ion-title>\n <ion-buttons slot=\"end\">\n <ion-menu-toggle auto-hide=\"false\">\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n </ion-button>\n </ion-menu-toggle>\n </ion-buttons>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons collapse=\"true\">\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Collapsible Buttons</ion-title>\n</ion-toolbar>\n```",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonButtons, IonToolbar, IonBackButton, IonTitle, IonButton, IonIcon, IonMenuButton, IonContent } from '@ionic/react';\nimport { personCircle, search, star, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons';\n\nexport const ButtonsExample: React.FC = () => (\n <IonContent>\n <IonToolbar>\n <IonButtons slot=\"start\">\n <IonBackButton defaultHref=\"/\" />\n </IonButtons>\n <IonTitle>Back Button</IonTitle>\n </IonToolbar>\n\n <IonToolbar>\n <IonButtons slot=\"secondary\">\n <IonButton>\n <IonIcon slot=\"icon-only\" icon={personCircle} />\n </IonButton>\n <IonButton>\n <IonIcon slot=\"icon-only\" icon={search} />\n </IonButton>\n </IonButtons>\n <IonTitle>Default Buttons</IonTitle>\n <IonButtons slot=\"primary\">\n <IonButton color=\"secondary\">\n <IonIcon slot=\"icon-only\" ios={ellipsisHorizontal} md={ellipsisVertical} />\n </IonButton>\n </IonButtons>\n </IonToolbar>\n\n <IonToolbar>\n <IonButtons slot=\"primary\">\n <IonButton onClick={() => {}}>\n <IonIcon slot=\"icon-only\" icon={star} />\n </IonButton>\n </IonButtons>\n <IonTitle>Right side menu toggle</IonTitle>\n <IonButtons slot=\"end\">\n <IonMenuButton autoHide={false} />\n </IonButtons>\n </IonToolbar>\n\n <IonToolbar>\n <IonButtons collapse=\"true\">\n <IonButton>\n <IonIcon slot=\"icon-only\" icon={star} />\n </IonButton>\n </IonButtons>\n <IonTitle>Collapsible Buttons</IonTitle>\n </IonToolbar>\n </IonContent>\n);\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'buttons-example',\n styleUrl: 'buttons-example.css'\n})\nexport class ButtonsExample {\n\n clickedStar() {\n console.log(\"Clicked star button\");\n }\n\n render() {\n return [\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n <ion-title>Back Button</ion-title>\n </ion-toolbar>,\n\n <ion-toolbar>\n <ion-buttons slot=\"secondary\">\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"person-circle\"></ion-icon>\n </ion-button>\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Default Buttons</ion-title>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"secondary\">\n <ion-icon slot=\"icon-only\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n </ion-button>\n </ion-buttons>\n </ion-toolbar>,\n\n <ion-toolbar>\n <ion-buttons slot=\"primary\">\n <ion-button onClick={() => this.clickedStar()}>\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Right side menu toggle</ion-title>\n <ion-buttons slot=\"end\">\n <ion-menu-button autoHide={false}></ion-menu-button>\n </ion-buttons>\n </ion-toolbar>,\n\n <ion-toolbar>\n <ion-buttons collapse={true}>\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Collapsible Buttons</ion-title>\n </ion-toolbar>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n <ion-title>Back Button</ion-title>\n </ion-toolbar>\n\n <ion-toolbar>\n <ion-buttons slot=\"secondary\">\n <ion-button>\n <ion-icon slot=\"icon-only\" :icon=\"personCircle\"></ion-icon>\n </ion-button>\n <ion-button>\n <ion-icon slot=\"icon-only\" :icon=\"search\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Default Buttons</ion-title>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"secondary\">\n <ion-icon slot=\"icon-only\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n </ion-button>\n </ion-buttons>\n </ion-toolbar>\n\n <ion-toolbar>\n <ion-buttons slot=\"primary\">\n <ion-button @click=\"clickedStar()\">\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Right side menu toggle</ion-title>\n <ion-buttons slot=\"end\">\n <ion-menu-button auto-hide=\"false\"></ion-menu-button>\n </ion-buttons>\n </ion-toolbar>\n\n <ion-toolbar>\n <ion-buttons collapse=\"true\">\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Collapsible Buttons</ion-title>\n </ion-toolbar>\n</template>\n\n<script>\nimport { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/vue';\nimport { personCircle, search } from 'ionicons/icons';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar },\n setup() {\n const clickedStar = () => {\n console.log('Star clicked!');\n }\n return { personCircle, search, clickedStar };\n }\n});\n</script>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "collapse",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "collapse",
|
||
"reflectToAttr": false,
|
||
"docs": "If true, buttons will disappear when its\nparent toolbar has fully collapsed if the toolbar\nis not the first toolbar. If the toolbar is the\nfirst toolbar, the buttons will be hidden and will\nonly be shown once all toolbars have fully collapsed.\n\nOnly applies in `ios` mode with `collapse` set to\n`true` on `ion-header`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/card/card.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-card",
|
||
"readme": "# ion-card\n\nCards 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`.\n",
|
||
"docs": "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`.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
},
|
||
{
|
||
"text": "native - The native HTML button, anchor, or div element that wraps all child elements.",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<ion-card>\n <ion-card-header>\n <ion-card-subtitle>Card Subtitle</ion-card-subtitle>\n <ion-card-title>Card Title</ion-card-title>\n </ion-card-header>\n\n <ion-card-content>\n Keep close to Nature's heart... and break clear away, once in awhile,\n and climb a mountain or spend a week in the woods. Wash your spirit clean.\n </ion-card-content>\n</ion-card>\n\n<ion-card>\n <ion-item>\n <ion-icon name=\"pin\" slot=\"start\"></ion-icon>\n <ion-label>ion-item in a card, icon left, button right</ion-label>\n <ion-button fill=\"outline\" slot=\"end\">View</ion-button>\n </ion-item>\n\n <ion-card-content>\n This is content, without any paragraph or header tags,\n within an ion-card-content element.\n </ion-card-content>\n</ion-card>\n\n<ion-card>\n <ion-item href=\"#\" class=\"ion-activated\">\n <ion-icon name=\"wifi\" slot=\"start\"></ion-icon>\n <ion-label>Card Link Item 1 activated</ion-label>\n </ion-item>\n\n <ion-item href=\"#\">\n <ion-icon name=\"wine\" slot=\"start\"></ion-icon>\n <ion-label>Card Link Item 2</ion-label>\n </ion-item>\n\n <ion-item class=\"ion-activated\">\n <ion-icon name=\"warning\" slot=\"start\"></ion-icon>\n <ion-label>Card Button Item 1 activated</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-icon name=\"walk\" slot=\"start\"></ion-icon>\n <ion-label>Card Button Item 2</ion-label>\n </ion-item>\n</ion-card>\n```",
|
||
"javascript": "```html\n<ion-card>\n <ion-card-header>\n <ion-card-subtitle>Card Subtitle</ion-card-subtitle>\n <ion-card-title>Card Title</ion-card-title>\n </ion-card-header>\n\n <ion-card-content>\n Keep close to Nature's heart... and break clear away, once in awhile,\n and climb a mountain or spend a week in the woods. Wash your spirit clean.\n </ion-card-content>\n</ion-card>\n\n<ion-card>\n <ion-item>\n <ion-icon name=\"pin\" slot=\"start\"></ion-icon>\n <ion-label>ion-item in a card, icon left, button right</ion-label>\n <ion-button fill=\"outline\" slot=\"end\">View</ion-button>\n </ion-item>\n\n <ion-card-content>\n This is content, without any paragraph or header tags,\n within an ion-card-content element.\n </ion-card-content>\n</ion-card>\n\n<ion-card>\n <ion-item href=\"#\" class=\"ion-activated\">\n <ion-icon name=\"wifi\" slot=\"start\"></ion-icon>\n <ion-label>Card Link Item 1 activated</ion-label>\n </ion-item>\n\n <ion-item href=\"#\">\n <ion-icon name=\"wine\" slot=\"start\"></ion-icon>\n <ion-label>Card Link Item 2</ion-label>\n </ion-item>\n\n <ion-item class=\"ion-activated\">\n <ion-icon name=\"warning\" slot=\"start\"></ion-icon>\n <ion-label>Card Button Item 1 activated</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-icon name=\"walk\" slot=\"start\"></ion-icon>\n <ion-label>Card Button Item 2</ion-label>\n </ion-item>\n</ion-card>\n```",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent, IonItem, IonIcon, IonLabel, IonButton } from '@ionic/react';\nimport { pin, wifi, wine, warning, walk } from 'ionicons/icons';\n\nexport const CardExamples: React.FC = () => {\n return (\n <IonPage>\n <IonHeader>\n <IonToolbar>\n <IonTitle>CardExamples</IonTitle>\n </IonToolbar>\n </IonHeader>\n <IonContent>\n <IonCard>\n <IonCardHeader>\n <IonCardSubtitle>Card Subtitle</IonCardSubtitle>\n <IonCardTitle>Card Title</IonCardTitle>\n </IonCardHeader>\n\n <IonCardContent>\n Keep close to Nature's heart... and break clear away, once in awhile,\n and climb a mountain or spend a week in the woods. Wash your spirit clean.\n </IonCardContent>\n </IonCard>\n\n <IonCard>\n <IonItem>\n <IonIcon icon={pin} slot=\"start\" />\n <IonLabel>ion-item in a card, icon left, button right</IonLabel>\n <IonButton fill=\"outline\" slot=\"end\">View</IonButton>\n </IonItem>\n\n <IonCardContent>\n This is content, without any paragraph or header tags,\n within an ion-cardContent element.\n </IonCardContent>\n </IonCard>\n\n <IonCard>\n <IonItem href=\"#\" className=\"ion-activated\">\n <IonIcon icon={wifi} slot=\"start\" />\n <IonLabel>Card Link Item 1 activated</IonLabel>\n </IonItem>\n\n <IonItem href=\"#\">\n <IonIcon icon={wine} slot=\"start\" />\n <IonLabel>Card Link Item 2</IonLabel>\n </IonItem>\n\n <IonItem className=\"ion-activated\">\n <IonIcon icon={warning} slot=\"start\" />\n <IonLabel>Card Button Item 1 activated</IonLabel>\n </IonItem>\n\n <IonItem>\n <IonIcon icon={walk} slot=\"start\" />\n <IonLabel>Card Button Item 2</IonLabel>\n </IonItem>\n </IonCard>\n </IonContent>\n </IonPage>\n );\n};\n\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'card-example',\n styleUrl: 'card-example.css'\n})\nexport class CardExample {\n render() {\n return [\n <ion-card>\n <ion-card-header>\n <ion-card-subtitle>Card Subtitle</ion-card-subtitle>\n <ion-card-title>Card Title</ion-card-title>\n </ion-card-header>\n\n <ion-card-content>\n Keep close to Nature's heart... and break clear away, once in awhile,\n and climb a mountain or spend a week in the woods. Wash your spirit clean.\n </ion-card-content>\n </ion-card>,\n\n <ion-card>\n <ion-item>\n <ion-icon name=\"pin\" slot=\"start\"></ion-icon>\n <ion-label>ion-item in a card, icon left, button right</ion-label>\n <ion-button fill=\"outline\" slot=\"end\">View</ion-button>\n </ion-item>\n\n <ion-card-content>\n This is content, without any paragraph or header tags,\n within an ion-card-content element.\n </ion-card-content>\n </ion-card>,\n\n <ion-card>\n <ion-item href=\"#\" class=\"ion-activated\">\n <ion-icon name=\"wifi\" slot=\"start\"></ion-icon>\n <ion-label>Card Link Item 1 activated</ion-label>\n </ion-item>\n\n <ion-item href=\"#\">\n <ion-icon name=\"wine\" slot=\"start\"></ion-icon>\n <ion-label>Card Link Item 2</ion-label>\n </ion-item>\n\n <ion-item class=\"ion-activated\">\n <ion-icon name=\"warning\" slot=\"start\"></ion-icon>\n <ion-label>Card Button Item 1 activated</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-icon name=\"walk\" slot=\"start\"></ion-icon>\n <ion-label>Card Button Item 2</ion-label>\n </ion-item>\n </ion-card>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-card>\n <ion-card-header>\n <ion-card-subtitle>Card Subtitle</ion-card-subtitle>\n <ion-card-title>Card Title</ion-card-title>\n </ion-card-header>\n\n <ion-card-content>\n Keep close to Nature's heart... and break clear away, once in awhile,\n and climb a mountain or spend a week in the woods. Wash your spirit clean.\n </ion-card-content>\n </ion-card>\n\n <ion-card>\n <ion-item>\n <ion-icon :icon=\"pin\" slot=\"start\"></ion-icon>\n <ion-label>ion-item in a card, icon left, button right</ion-label>\n <ion-button fill=\"outline\" slot=\"end\">View</ion-button>\n </ion-item>\n\n <ion-card-content>\n This is content, without any paragraph or header tags,\n within an ion-card-content element.\n </ion-card-content>\n </ion-card>\n\n <ion-card>\n <ion-item href=\"#\" class=\"ion-activated\">\n <ion-icon :icon=\"wifi\" slot=\"start\"></ion-icon>\n <ion-label>Card Link Item 1 activated</ion-label>\n </ion-item>\n\n <ion-item href=\"#\">\n <ion-icon :icon=\"wine\" slot=\"start\"></ion-icon>\n <ion-label>Card Link Item 2</ion-label>\n </ion-item>\n\n <ion-item class=\"ion-activated\">\n <ion-icon :icon=\"warning\" slot=\"start\"></ion-icon>\n <ion-label>Card Button Item 1 activated</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-icon :icon=\"walk\" slot=\"start\"></ion-icon>\n <ion-label>Card Button Item 2</ion-label>\n </ion-item>\n </ion-card>\n</template>\n\n<script>\nimport { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonIcon, IonItem, IonLabel } from '@ionic/vue';\nimport { pin, walk, warning, wifi, wine } from 'ionicons/icons';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonIcon, IonItem, IonLabel }\n setup() {\n return { warning };\n }\n});\n</script>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "button",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "button",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, a button tag will be rendered and the card will be tappable.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot interact with the card.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "download",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "download",
|
||
"reflectToAttr": false,
|
||
"docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "href",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "href",
|
||
"reflectToAttr": false,
|
||
"docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "rel",
|
||
"reflectToAttr": false,
|
||
"docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "routerAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "routerDirection",
|
||
"type": "\"back\" | \"forward\" | \"root\"",
|
||
"mutable": false,
|
||
"attr": "router-direction",
|
||
"reflectToAttr": false,
|
||
"docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
|
||
"docsTags": [],
|
||
"default": "'forward'",
|
||
"values": [
|
||
{
|
||
"value": "back",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "forward",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "root",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "target",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "target",
|
||
"reflectToAttr": false,
|
||
"docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "type",
|
||
"type": "\"button\" | \"reset\" | \"submit\"",
|
||
"mutable": false,
|
||
"attr": "type",
|
||
"reflectToAttr": false,
|
||
"docs": "The type of the button. Only used when an `onclick` or `button` property is present.",
|
||
"docsTags": [],
|
||
"default": "'button'",
|
||
"values": [
|
||
{
|
||
"value": "button",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "reset",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "submit",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the card"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the card"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [
|
||
{
|
||
"name": "native",
|
||
"docs": "The native HTML button, anchor, or div element that wraps all child elements."
|
||
}
|
||
],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-ripple-effect"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-card": [
|
||
"ion-ripple-effect"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/card-content/card-content.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-card-content",
|
||
"readme": "# ion-card-content\n\n`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`.\n\n",
|
||
"docs": "`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`.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {},
|
||
"props": [
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/card-header/card-header.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-card-header",
|
||
"readme": "# ion-card-header\n\n`ion-card-header` is a header component for `ion-card`.\n\n",
|
||
"docs": "`ion-card-header` is a header component for `ion-card`.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "translucent",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "translucent",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the card header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/card-subtitle/card-subtitle.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-card-subtitle",
|
||
"readme": "# ion-card-subtitle\n\n`ion-card-subtitle` is a child component of `ion-card`\n",
|
||
"docs": "`ion-card-subtitle` is a child component of `ion-card`",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the card subtitle"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/card-title/card-title.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-card-title",
|
||
"readme": "# ion-card-title\n\n`ion-card-title` is a child component of `ion-card`\n\n",
|
||
"docs": "`ion-card-title` is a child component of `ion-card`",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the card title"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/checkbox/checkbox.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-checkbox",
|
||
"readme": "# ion-checkbox\n\nCheckboxes 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.\n\n\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
},
|
||
{
|
||
"text": "container - The container for the checkbox mark.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "mark - The checkmark used to indicate the checked state.",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<!-- Default Checkbox -->\n<ion-checkbox></ion-checkbox>\n\n<!-- Disabled Checkbox -->\n<ion-checkbox disabled=\"true\"></ion-checkbox>\n\n<!-- Checked Checkbox -->\n<ion-checkbox checked=\"true\"></ion-checkbox>\n\n<!-- Checkbox Colors -->\n<ion-checkbox color=\"primary\"></ion-checkbox>\n<ion-checkbox color=\"secondary\"></ion-checkbox>\n<ion-checkbox color=\"danger\"></ion-checkbox>\n<ion-checkbox color=\"light\"></ion-checkbox>\n<ion-checkbox color=\"dark\"></ion-checkbox>\n\n<!-- Checkboxes in a List -->\n<ion-list>\n <ion-item *ngFor=\"let entry of form\">\n <ion-label>{{entry.val}}</ion-label>\n <ion-checkbox slot=\"end\" [(ngModel)]=\"entry.isChecked\"></ion-checkbox>\n </ion-item>\n</ion-list>\n```\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-page-home',\n templateUrl: 'home.page.html',\n styleUrls: ['home.page.scss']\n})\nexport class HomePage {\n public form = [\n { val: 'Pepperoni', isChecked: true },\n { val: 'Sausage', isChecked: false },\n { val: 'Mushroom', isChecked: false }\n ];\n}\n```\n",
|
||
"javascript": "```html\n<!-- Default Checkbox -->\n<ion-checkbox></ion-checkbox>\n\n<!-- Disabled Checkbox -->\n<ion-checkbox disabled></ion-checkbox>\n\n<!-- Checked Checkbox -->\n<ion-checkbox checked></ion-checkbox>\n\n<!-- Checkbox Colors -->\n<ion-checkbox color=\"primary\"></ion-checkbox>\n<ion-checkbox color=\"secondary\"></ion-checkbox>\n<ion-checkbox color=\"danger\"></ion-checkbox>\n<ion-checkbox color=\"light\"></ion-checkbox>\n<ion-checkbox color=\"dark\"></ion-checkbox>\n\n<!-- Checkboxes in a List -->\n<ion-list>\n <ion-item>\n <ion-label>Pepperoni</ion-label>\n <ion-checkbox slot=\"end\" value=\"pepperoni\" checked></ion-checkbox>\n </ion-item>\n\n <ion-item>\n <ion-label>Sausage</ion-label>\n <ion-checkbox slot=\"end\" value=\"sausage\" disabled></ion-checkbox>\n </ion-item>\n\n <ion-item>\n <ion-label>Mushrooms</ion-label>\n <ion-checkbox slot=\"end\" value=\"mushrooms\"></ion-checkbox>\n </ion-item>\n</ion-list>\n```\n",
|
||
"react": "```tsx\nimport React, { useState } from 'react';\nimport { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCheckbox, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react';\n\nconst checkboxList = [\n { val: 'Pepperoni', isChecked: true },\n { val: 'Sausage', isChecked: false },\n { val: 'Mushroom', isChecked: false }\n];\n\nexport const CheckboxExamples: React.FC = () => {\n\n const [checked, setChecked] = useState(false);\n\n return (\n <IonPage>\n <IonHeader>\n <IonToolbar>\n <IonTitle>CheckboxExamples</IonTitle>\n </IonToolbar>\n </IonHeader>\n <IonContent>\n <IonList>\n <IonItemDivider>Default Checkbox</IonItemDivider>\n <IonItem>\n <IonLabel>Checked: {JSON.stringify(checked)}</IonLabel>\n <IonCheckbox checked={checked} onIonChange={e => setChecked(e.detail.checked)} />\n </IonItem>\n\n <IonItemDivider>Disabled Checkbox</IonItemDivider>\n <IonItem><IonCheckbox slot=\"end\" disabled={true} /></IonItem>\n\n <IonItemDivider>Checkbox Colors</IonItemDivider>\n <IonItem>\n <IonCheckbox slot=\"end\" color=\"primary\" />\n <IonCheckbox slot=\"end\" color=\"secondary\" />\n <IonCheckbox slot=\"end\" color=\"danger\" />\n <IonCheckbox slot=\"end\" color=\"light\" />\n <IonCheckbox slot=\"end\" color=\"dark\" />\n </IonItem>\n <IonItemDivider>Checkboxes in a List</IonItemDivider>\n\n {checkboxList.map(({ val, isChecked }, i) => (\n <IonItem key={i}>\n <IonLabel>{val}</IonLabel>\n <IonCheckbox slot=\"end\" value={val} checked={isChecked} />\n </IonItem>\n ))}\n </IonList>\n </IonContent>\n </IonPage>\n );\n};\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'checkbox-example',\n styleUrl: 'checkbox-example.css'\n})\nexport class CheckboxExample {\n private form = [\n { val: 'Pepperoni', isChecked: true },\n { val: 'Sausage', isChecked: false },\n { val: 'Mushroom', isChecked: false }\n ];\n\n render() {\n return [\n // Default Checkbox\n <ion-checkbox></ion-checkbox>,\n\n // Disabled Checkbox\n <ion-checkbox disabled={true}></ion-checkbox>,\n\n // Checked Checkbox\n <ion-checkbox checked={true}></ion-checkbox>,\n\n // Checkbox Colors\n <ion-checkbox color=\"primary\"></ion-checkbox>,\n <ion-checkbox color=\"secondary\"></ion-checkbox>,\n <ion-checkbox color=\"danger\"></ion-checkbox>,\n <ion-checkbox color=\"light\"></ion-checkbox>,\n <ion-checkbox color=\"dark\"></ion-checkbox>,\n\n // Checkboxes in a List\n <ion-list>\n {this.form.map(entry =>\n <ion-item>\n <ion-label>{entry.val}</ion-label>\n <ion-checkbox slot=\"end\" checked={entry.isChecked}></ion-checkbox>\n </ion-item>\n )}\n </ion-list>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <!-- Default Checkbox -->\n <ion-checkbox></ion-checkbox>\n\n <!-- Disabled Checkbox -->\n <ion-checkbox disabled=\"true\"></ion-checkbox>\n\n <!-- Checked Checkbox -->\n <ion-checkbox checked=\"true\"></ion-checkbox>\n\n <!-- Checkbox Colors -->\n <ion-checkbox color=\"primary\"></ion-checkbox>\n <ion-checkbox color=\"secondary\"></ion-checkbox>\n <ion-checkbox color=\"danger\"></ion-checkbox>\n <ion-checkbox color=\"light\"></ion-checkbox>\n <ion-checkbox color=\"dark\"></ion-checkbox>\n\n <!-- Checkboxes in a List -->\n <ion-list>\n <ion-item v-for=\"entry in form\">\n <ion-label>{{entry.val}}</ion-label>\n <ion-checkbox\n slot=\"end\"\n @update:modelValue=\"entry.isChecked = $event\"\n :modelValue=\"entry.isChecked\">\n </ion-checkbox>\n </ion-item>\n </ion-list>\n</template>\n\n<script>\nimport { IonCheckbox, IonItem, IonLabel, IonList } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonCheckbox, IonItem, IonLabel, IonList },\n setup() {\n const form = [\n { val: 'Pepperoni', isChecked: true },\n { val: 'Sausage', isChecked: false },\n { val: 'Mushroom', isChecked: false }\n ];\n \n return { form };\n }\n});\n</script>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "checked",
|
||
"type": "boolean",
|
||
"mutable": true,
|
||
"attr": "checked",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the checkbox is selected.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot interact with the checkbox.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "indeterminate",
|
||
"type": "boolean",
|
||
"mutable": true,
|
||
"attr": "indeterminate",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the checkbox will visually appear as indeterminate.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "name",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "name",
|
||
"reflectToAttr": false,
|
||
"docs": "The name of the control, which is submitted with the form data.",
|
||
"docsTags": [],
|
||
"default": "this.inputId",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "value",
|
||
"reflectToAttr": false,
|
||
"docs": "The value of the checkbox does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\nit's only used when the checkbox participates in a native `<form>`.",
|
||
"docsTags": [],
|
||
"default": "'on'",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [
|
||
{
|
||
"event": "ionBlur",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the checkbox loses focus.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionChange",
|
||
"detail": "CheckboxChangeEventDetail<any>",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the checked property has changed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionFocus",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the checkbox has focus.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the checkbox icon"
|
||
},
|
||
{
|
||
"name": "--background-checked",
|
||
"annotation": "prop",
|
||
"docs": "Background of the checkbox icon when checked"
|
||
},
|
||
{
|
||
"name": "--border-color",
|
||
"annotation": "prop",
|
||
"docs": "Border color of the checkbox icon"
|
||
},
|
||
{
|
||
"name": "--border-color-checked",
|
||
"annotation": "prop",
|
||
"docs": "Border color of the checkbox icon when checked"
|
||
},
|
||
{
|
||
"name": "--border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Border radius of the checkbox icon"
|
||
},
|
||
{
|
||
"name": "--border-style",
|
||
"annotation": "prop",
|
||
"docs": "Border style of the checkbox icon"
|
||
},
|
||
{
|
||
"name": "--border-width",
|
||
"annotation": "prop",
|
||
"docs": "Border width of the checkbox icon"
|
||
},
|
||
{
|
||
"name": "--checkmark-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the checkbox checkmark when checked"
|
||
},
|
||
{
|
||
"name": "--checkmark-width",
|
||
"annotation": "prop",
|
||
"docs": "Stroke width of the checkbox checkmark"
|
||
},
|
||
{
|
||
"name": "--size",
|
||
"annotation": "prop",
|
||
"docs": "Size of the checkbox icon"
|
||
},
|
||
{
|
||
"name": "--transition",
|
||
"annotation": "prop",
|
||
"docs": "Transition of the checkbox icon"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [
|
||
{
|
||
"name": "container",
|
||
"docs": "The container for the checkbox mark."
|
||
},
|
||
{
|
||
"name": "mark",
|
||
"docs": "The checkmark used to indicate the checked state."
|
||
}
|
||
],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/chip/chip.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-chip",
|
||
"readme": "# ion-chip\n\nChips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons.\n",
|
||
"docs": "Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<ion-chip>\n <ion-label>Default</ion-label>\n</ion-chip>\n\n<ion-chip>\n <ion-label color=\"secondary\">Secondary Label</ion-label>\n</ion-chip>\n\n<ion-chip color=\"secondary\">\n <ion-label color=\"dark\">Secondary w/ Dark label</ion-label>\n</ion-chip>\n\n<ion-chip [disabled]=\"true\">\n <ion-label>Disabled Chip</ion-label>\n</ion-chip>\n\n<ion-chip>\n <ion-icon name=\"pin\"></ion-icon>\n <ion-label>Default</ion-label>\n</ion-chip>\n\n<ion-chip>\n <ion-icon name=\"heart\" color=\"dark\"></ion-icon>\n <ion-label>Default</ion-label>\n</ion-chip>\n\n<ion-chip>\n <ion-label>Button Chip</ion-label>\n <ion-icon name=\"close-circle\"></ion-icon>\n</ion-chip>\n\n<ion-chip>\n <ion-icon name=\"pin\" color=\"primary\"></ion-icon>\n <ion-label>Icon Chip</ion-label>\n <ion-icon name=\"close\"></ion-icon>\n</ion-chip>\n\n<ion-chip>\n <ion-avatar>\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\">\n </ion-avatar>\n <ion-label>Avatar Chip</ion-label>\n <ion-icon name=\"close-circle\"></ion-icon>\n</ion-chip>\n```\n",
|
||
"javascript": "```html\n<ion-chip>\n <ion-label>Default</ion-label>\n</ion-chip>\n\n<ion-chip>\n <ion-label color=\"secondary\">Secondary Label</ion-label>\n</ion-chip>\n\n<ion-chip color=\"secondary\">\n <ion-label color=\"dark\">Secondary w/ Dark label</ion-label>\n</ion-chip>\n\n<ion-chip disabled=\"true\">\n <ion-label>Disabled Chip</ion-label>\n</ion-chip>\n\n<ion-chip>\n <ion-icon name=\"pin\"></ion-icon>\n <ion-label>Default</ion-label>\n</ion-chip>\n\n<ion-chip>\n <ion-icon name=\"heart\" color=\"dark\"></ion-icon>\n <ion-label>Default</ion-label>\n</ion-chip>\n\n<ion-chip>\n <ion-label>Button Chip</ion-label>\n <ion-icon name=\"close-circle\"></ion-icon>\n</ion-chip>\n\n<ion-chip>\n <ion-icon name=\"pin\" color=\"primary\"></ion-icon>\n <ion-label>Icon Chip</ion-label>\n <ion-icon name=\"close\"></ion-icon>\n</ion-chip>\n\n<ion-chip>\n <ion-avatar>\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\">\n </ion-avatar>\n <ion-label>Avatar Chip</ion-label>\n <ion-icon name=\"close-circle\"></ion-icon>\n</ion-chip>\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonChip, IonLabel, IonIcon, IonAvatar } from '@ionic/react';\nimport { pin, heart, closeCircle, close } from 'ionicons/icons';\n\nexport const ChipExamples: React.FC = () => {\n return (\n <IonPage>\n <IonHeader>\n <IonToolbar>\n <IonTitle>ChipExamples</IonTitle>\n </IonToolbar>\n </IonHeader>\n <IonContent>\n <IonChip>\n <IonLabel>Default</IonLabel>\n </IonChip>\n\n <IonChip>\n <IonLabel color=\"secondary\">Secondary Label</IonLabel>\n </IonChip>\n\n <IonChip color=\"secondary\">\n <IonLabel color=\"dark\">Secondary w/ Dark label</IonLabel>\n </IonChip>\n\n <IonChip disabled={true}>\n <IonLabel>Disabled Chip</IonLabel>\n </IonChip>\n\n <IonChip>\n <IonIcon icon={pin} />\n <IonLabel>Default</IonLabel>\n </IonChip>\n\n <IonChip>\n <IonIcon icon={heart} color=\"dark\" />\n <IonLabel>Default</IonLabel>\n </IonChip>\n\n <IonChip>\n <IonLabel>Button Chip</IonLabel>\n <IonIcon icon={closeCircle} />\n </IonChip>\n\n <IonChip>\n <IonIcon icon={pin} color=\"primary\" />\n <IonLabel>Icon Chip</IonLabel>\n <IonIcon icon={close} />\n </IonChip>\n\n <IonChip>\n <IonAvatar>\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\" />\n </IonAvatar>\n <IonLabel>Avatar Chip</IonLabel>\n <IonIcon icon={closeCircle} />\n </IonChip>\n </IonContent>\n </IonPage>\n );\n};\n\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'chip-example',\n styleUrl: 'chip-example.css'\n})\nexport class ChipExample {\n render() {\n return [\n <ion-chip>\n <ion-label>Default</ion-label>\n </ion-chip>,\n\n <ion-chip>\n <ion-label color=\"secondary\">Secondary Label</ion-label>\n </ion-chip>,\n\n <ion-chip color=\"secondary\">\n <ion-label color=\"dark\">Secondary w/ Dark label</ion-label>\n </ion-chip>,\n\n <ion-chip>\n <ion-icon name=\"pin\"></ion-icon>\n <ion-label>Default</ion-label>\n </ion-chip>,\n\n <ion-chip>\n <ion-icon name=\"heart\" color=\"dark\"></ion-icon>\n <ion-label>Default</ion-label>\n </ion-chip>,\n\n <ion-chip>\n <ion-label>Button Chip</ion-label>\n <ion-icon name=\"close-circle\"></ion-icon>\n </ion-chip>,\n\n <ion-chip>\n <ion-icon name=\"pin\" color=\"primary\"></ion-icon>\n <ion-label>Icon Chip</ion-label>\n <ion-icon name=\"close\"></ion-icon>\n </ion-chip>,\n\n <ion-chip>\n <ion-avatar>\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\"/>\n </ion-avatar>\n <ion-label>Avatar Chip</ion-label>\n <ion-icon name=\"close-circle\"></ion-icon>\n </ion-chip>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-chip>\n <ion-label>Default</ion-label>\n </ion-chip>\n\n <ion-chip>\n <ion-label color=\"secondary\">Secondary Label</ion-label>\n </ion-chip>\n\n <ion-chip color=\"secondary\">\n <ion-label color=\"dark\">Secondary w/ Dark label</ion-label>\n </ion-chip>\n\n <ion-chip :disabled=\"true\">\n <ion-label>Disabled Chip</ion-label>\n </ion-chip>\n\n <ion-chip>\n <ion-icon :icon=\"pin\"></ion-icon>\n <ion-label>Default</ion-label>\n </ion-chip>\n\n <ion-chip>\n <ion-icon :icon=\"heart\" color=\"dark\"></ion-icon>\n <ion-label>Default</ion-label>\n </ion-chip>\n\n <ion-chip>\n <ion-label>Button Chip</ion-label>\n <ion-icon :icon=\"closeCircle\"></ion-icon>\n </ion-chip>\n\n <ion-chip>\n <ion-icon :icon=\"pin\" color=\"primary\"></ion-icon>\n <ion-label>Icon Chip</ion-label>\n <ion-icon :icon=\"close\"></ion-icon>\n </ion-chip>\n\n <ion-chip>\n <ion-avatar>\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\">\n </ion-avatar>\n <ion-label>Avatar Chip</ion-label>\n <ion-icon :icon=\"closeCircle\"></ion-icon>\n </ion-chip>\n</template>\n\n<script>\nimport { IonAvatar, IonChip, IonIcon, IonLabel } from '@ionic/vue';\nimport { close, closeCircle, heart, pin } from 'ionicons/icons';\n\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonAvatar, IonChip, IonIcon, IonLabel },\n setup() {\n return { close, closeCircle, heart, pin }\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot interact with the chip.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "outline",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "outline",
|
||
"reflectToAttr": false,
|
||
"docs": "Display an outline style button.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the chip"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the chip"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-ripple-effect"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-chip": [
|
||
"ion-ripple-effect"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/col/col.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-col",
|
||
"readme": "# ion-col\n\nColumns 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.\n\n\n## Column Alignment\n\nBy default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/docs/layout/css-utilities#flex-item-properties) that can be applied to a column to customize this behavior.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {},
|
||
"props": [
|
||
{
|
||
"name": "offset",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "offset",
|
||
"reflectToAttr": false,
|
||
"docs": "The amount to offset the column, in terms of how many columns it should shift to the end\nof the total available.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "offsetLg",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "offset-lg",
|
||
"reflectToAttr": false,
|
||
"docs": "The amount to offset the column for lg screens, in terms of how many columns it should shift\nto the end of the total available.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "offsetMd",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "offset-md",
|
||
"reflectToAttr": false,
|
||
"docs": "The amount to offset the column for md screens, in terms of how many columns it should shift\nto the end of the total available.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "offsetSm",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "offset-sm",
|
||
"reflectToAttr": false,
|
||
"docs": "The amount to offset the column for sm screens, in terms of how many columns it should shift\nto the end of the total available.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "offsetXl",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "offset-xl",
|
||
"reflectToAttr": false,
|
||
"docs": "The amount to offset the column for xl screens, in terms of how many columns it should shift\nto the end of the total available.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "offsetXs",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "offset-xs",
|
||
"reflectToAttr": false,
|
||
"docs": "The amount to offset the column for xs screens, in terms of how many columns it should shift\nto the end of the total available.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "pull",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "pull",
|
||
"reflectToAttr": false,
|
||
"docs": "The amount to pull the column, in terms of how many columns it should shift to the start of\nthe total available.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "pullLg",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "pull-lg",
|
||
"reflectToAttr": false,
|
||
"docs": "The amount to pull the column for lg screens, in terms of how many columns it should shift\nto the start of the total available.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "pullMd",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "pull-md",
|
||
"reflectToAttr": false,
|
||
"docs": "The amount to pull the column for md screens, in terms of how many columns it should shift\nto the start of the total available.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "pullSm",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "pull-sm",
|
||
"reflectToAttr": false,
|
||
"docs": "The amount to pull the column for sm screens, in terms of how many columns it should shift\nto the start of the total available.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "pullXl",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "pull-xl",
|
||
"reflectToAttr": false,
|
||
"docs": "The amount to pull the column for xl screens, in terms of how many columns it should shift\nto the start of the total available.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "pullXs",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "pull-xs",
|
||
"reflectToAttr": false,
|
||
"docs": "The amount to pull the column for xs screens, in terms of how many columns it should shift\nto the start of the total available.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "push",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "push",
|
||
"reflectToAttr": false,
|
||
"docs": "The amount to push the column, in terms of how many columns it should shift to the end\nof the total available.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "pushLg",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "push-lg",
|
||
"reflectToAttr": false,
|
||
"docs": "The amount to push the column for lg screens, in terms of how many columns it should shift\nto the end of the total available.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "pushMd",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "push-md",
|
||
"reflectToAttr": false,
|
||
"docs": "The amount to push the column for md screens, in terms of how many columns it should shift\nto the end of the total available.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "pushSm",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "push-sm",
|
||
"reflectToAttr": false,
|
||
"docs": "The amount to push the column for sm screens, in terms of how many columns it should shift\nto the end of the total available.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "pushXl",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "push-xl",
|
||
"reflectToAttr": false,
|
||
"docs": "The amount to push the column for xl screens, in terms of how many columns it should shift\nto the end of the total available.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "pushXs",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "push-xs",
|
||
"reflectToAttr": false,
|
||
"docs": "The amount to push the column for xs screens, in terms of how many columns it should shift\nto the end of the total available.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "size",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "size",
|
||
"reflectToAttr": false,
|
||
"docs": "The size of the column, in terms of how many columns it should take up out of the total\navailable. If `\"auto\"` is passed, the column will be the size of its content.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "sizeLg",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "size-lg",
|
||
"reflectToAttr": false,
|
||
"docs": "The size of the column for lg screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "sizeMd",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "size-md",
|
||
"reflectToAttr": false,
|
||
"docs": "The size of the column for md screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "sizeSm",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "size-sm",
|
||
"reflectToAttr": false,
|
||
"docs": "The size of the column for sm screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "sizeXl",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "size-xl",
|
||
"reflectToAttr": false,
|
||
"docs": "The size of the column for xl screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "sizeXs",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "size-xs",
|
||
"reflectToAttr": false,
|
||
"docs": "The size of the column for xs screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [
|
||
{
|
||
"event": "resize",
|
||
"target": "window",
|
||
"capture": false,
|
||
"passive": true
|
||
}
|
||
],
|
||
"styles": [
|
||
{
|
||
"name": "--ion-grid-column-padding",
|
||
"annotation": "prop",
|
||
"docs": "Padding for the Column"
|
||
},
|
||
{
|
||
"name": "--ion-grid-column-padding-lg",
|
||
"annotation": "prop",
|
||
"docs": "Padding for the Column on lg screens and up"
|
||
},
|
||
{
|
||
"name": "--ion-grid-column-padding-md",
|
||
"annotation": "prop",
|
||
"docs": "Padding for the Column on md screens and up"
|
||
},
|
||
{
|
||
"name": "--ion-grid-column-padding-sm",
|
||
"annotation": "prop",
|
||
"docs": "Padding for the Column on sm screens and up"
|
||
},
|
||
{
|
||
"name": "--ion-grid-column-padding-xl",
|
||
"annotation": "prop",
|
||
"docs": "Padding for the Column on xl screens and up"
|
||
},
|
||
{
|
||
"name": "--ion-grid-column-padding-xs",
|
||
"annotation": "prop",
|
||
"docs": "Padding for the Column on xs screens and up"
|
||
},
|
||
{
|
||
"name": "--ion-grid-columns",
|
||
"annotation": "prop",
|
||
"docs": "The number of total Columns in the Grid"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/content/content.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-content",
|
||
"readme": "# ion-content\n\nThe 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).\n\n\n## Fixed Content\n\nIn order to place elements outside of the scrollable area, `slot=\"fixed\"` can be added to the element. This will absolutely position the element placing it in the top left. In order to place the element in a different position, style it using [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position).\n\n",
|
||
"docs": "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).",
|
||
"docsTags": [
|
||
{
|
||
"text": "- Content is placed in the scrollable area if provided without a slot.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "fixed - Should be used for fixed content that should not scroll.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "background - The background of the content.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "scroll - The scrollable container of the content.",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<ion-content\n [scrollEvents]=\"true\"\n (ionScrollStart)=\"logScrollStart()\"\n (ionScroll)=\"logScrolling($event)\"\n (ionScrollEnd)=\"logScrollEnd()\">\n <h1>Main Content</h1>\n\n <div slot=\"fixed\">\n <h1>Fixed Content</h1>\n </div>\n</ion-content>\n```\n\n",
|
||
"javascript": "```html\n<ion-content>\n <h1>Main Content</h1>\n\n <div slot=\"fixed\">\n <h1>Fixed Content</h1>\n </div>\n</ion-content>\n```\n\n```javascript\nvar content = document.querySelector('ion-content');\ncontent.scrollEvents = true;\ncontent.addEventListener('ionScrollStart', () => console.log('scroll start'));\ncontent.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));\ncontent.addEventListener('ionScrollEnd', () => console.log('scroll end'));\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonContent } from '@ionic/react';\n\nconst ContentExample: React.FC = () => (\n <IonContent\n scrollEvents={true}\n onIonScrollStart={() => {}}\n onIonScroll={() => {}}\n onIonScrollEnd={() => {}}>\n <h1>Main Content</h1>\n\n <div slot=\"fixed\">\n <h1>Fixed Content</h1>\n </div>\n </IonContent>\n);\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'content-example',\n styleUrl: 'content-example.css'\n})\nexport class ContentExample {\n logScrollStart() {\n console.log('Scroll start');\n }\n\n logScrolling(ev) {\n console.log('Scrolling', ev);\n }\n\n logScrollEnd() {\n console.log('Scroll end');\n }\n\n render() {\n return [\n <ion-content\n scrollEvents={true}\n onIonScrollStart={() => this.logScrollStart()}\n onIonScroll={(ev) => this.logScrolling(ev)}\n onIonScrollEnd={() => this.logScrollEnd()}>\n <h1>Main Content</h1>\n\n <div slot=\"fixed\">\n <h1>Fixed Content</h1>\n </div>\n </ion-content>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <ion-content\n :scroll-events=\"true\"\n @ionScrollStart=\"logScrollStart()\"\n @ionScroll=\"logScrolling($event)\"\n @ionScrollEnd=\"logScrollEnd()\">\n <h1>Main Content</h1>\n\n <div slot=\"fixed\">\n <h1>Fixed Content</h1>\n </div>\n </ion-content>\n</template>\n\n<script>\nimport { IonContent } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonContent }\n});\n</script>\n\n```\n\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "forceOverscroll",
|
||
"type": "boolean | undefined",
|
||
"mutable": true,
|
||
"attr": "force-overscroll",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.\nIf the content exceeds the bounds of ionContent, nothing will change.\nNote, the does not disable the system bounce on iOS. That is an OS level setting.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "fullscreen",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "fullscreen",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the content will scroll behind the headers\nand footers. This effect can easily be seen by setting the toolbar\nto transparent.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "scrollEvents",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "scroll-events",
|
||
"reflectToAttr": false,
|
||
"docs": "Because of performance reasons, ionScroll events are disabled by default, in order to enable them\nand start listening from (ionScroll), set this property to `true`.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "scrollX",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "scroll-x",
|
||
"reflectToAttr": false,
|
||
"docs": "If you want to enable the content scrolling in the X axis, set this property to `true`.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "scrollY",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "scroll-y",
|
||
"reflectToAttr": false,
|
||
"docs": "If you want to disable the content scrolling in the Y axis, set this property to `false`.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "getScrollElement",
|
||
"returns": {
|
||
"type": "Promise<HTMLElement>",
|
||
"docs": ""
|
||
},
|
||
"signature": "getScrollElement() => Promise<HTMLElement>",
|
||
"parameters": [],
|
||
"docs": "Get the element where the actual scrolling takes place.\nThis element can be used to subscribe to `scroll` events or manually modify\n`scrollTop`. However, it's recommended to use the API provided by `ion-content`:\n\ni.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events\nand `scrollToPoint()` to scroll the content into a certain point.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "scrollByPoint",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "scrollByPoint(x: number, y: number, duration: number) => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Scroll by a specified X/Y distance in the component.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "x The amount to scroll by on the horizontal axis."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "y The amount to scroll by on the vertical axis."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "duration The amount of time to take scrolling by that amount."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "scrollToBottom",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "scrollToBottom(duration?: number) => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Scroll to the bottom of the component.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "duration The amount of time to take scrolling to the bottom. Defaults to `0`."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "scrollToPoint",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "scrollToPoint(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Scroll to a specified X/Y location in the component.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "x The point to scroll to on the horizontal axis."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "y The point to scroll to on the vertical axis."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "duration The amount of time to take scrolling to that point. Defaults to `0`."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "scrollToTop",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "scrollToTop(duration?: number) => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Scroll to the top of the component.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "duration The amount of time to take scrolling to the top. Defaults to `0`."
|
||
}
|
||
]
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionScroll",
|
||
"detail": "ScrollDetail",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted while scrolling. This event is disabled by default.\nLook at the property: `scrollEvents`",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionScrollEnd",
|
||
"detail": "ScrollBaseDetail",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the scroll has ended.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionScrollStart",
|
||
"detail": "ScrollBaseDetail",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the scroll has started.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [
|
||
{
|
||
"event": "appload",
|
||
"target": "window",
|
||
"capture": false,
|
||
"passive": false
|
||
},
|
||
{
|
||
"event": "click",
|
||
"capture": true,
|
||
"passive": false
|
||
}
|
||
],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the content"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the content"
|
||
},
|
||
{
|
||
"name": "--keyboard-offset",
|
||
"annotation": "prop",
|
||
"docs": "Keyboard offset of the content"
|
||
},
|
||
{
|
||
"name": "--offset-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Offset bottom of the content"
|
||
},
|
||
{
|
||
"name": "--offset-top",
|
||
"annotation": "prop",
|
||
"docs": "Offset top of the content"
|
||
},
|
||
{
|
||
"name": "--padding-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom padding of the content"
|
||
},
|
||
{
|
||
"name": "--padding-end",
|
||
"annotation": "prop",
|
||
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content"
|
||
},
|
||
{
|
||
"name": "--padding-start",
|
||
"annotation": "prop",
|
||
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content"
|
||
},
|
||
{
|
||
"name": "--padding-top",
|
||
"annotation": "prop",
|
||
"docs": "Top padding of the content"
|
||
}
|
||
],
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"docs": "Content is placed in the scrollable area if provided without a slot."
|
||
},
|
||
{
|
||
"name": "fixed",
|
||
"docs": "Should be used for fixed content that should not scroll."
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "background",
|
||
"docs": "The background of the content."
|
||
},
|
||
{
|
||
"name": "scroll",
|
||
"docs": "The scrollable container of the content."
|
||
}
|
||
],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/datetime/datetime.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-datetime",
|
||
"readme": "# ion-datetime\n\nDatetimes 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.\n\n\n## Display and Picker Formats\n\nThe datetime component displays the values in two places: in the `<ion-datetime>` component,\nand in the picker interface that is presented from the bottom of the screen. The following\nchart lists all of the formats that can be used.\n\n| Format | Description | Example |\n| ------ | ------------------------------ | ----------------------- |\n| `YYYY` | Year, 4 digits | `2018` |\n| `YY` | Year, 2 digits | `18` |\n| `M` | Month | `1` ... `12` |\n| `MM` | Month, leading zero | `01` ... `12` |\n| `MMM` | Month, short name | `Jan` |\n| `MMMM` | Month, full name | `January` |\n| `D` | Day | `1` ... `31` |\n| `DD` | Day, leading zero | `01` ... `31` |\n| `DDD` | Day, short name | `Fri` |\n| `DDDD` | Day, full name | `Friday` |\n| `H` | Hour, 24-hour | `0` ... `23` |\n| `HH` | Hour, 24-hour, leading zero | `00` ... `23` |\n| `h` | Hour, 12-hour | `1` ... `12` |\n| `hh` | Hour, 12-hour, leading zero | `01` ... `12` |\n| `a` | 12-hour time period, lowercase | `am` `pm` |\n| `A` | 12-hour time period, uppercase | `AM` `PM` |\n| `m` | Minute | `1` ... `59` |\n| `mm` | Minute, leading zero | `01` ... `59` |\n| `s` | Second | `1` ... `59` |\n| `ss` | Second, leading zero | `01` ... `59` |\n| `Z` | UTC Timezone Offset | `Z or +HH:mm or -HH:mm` |\n\n**Important**: See the [Month Names and Day of the Week\nNames](#month-names-and-day-of-the-week-names) section below on how to use\ndifferent names for the month and day.\n\n### Display Format\n\nThe `displayFormat` property specifies how a datetime's value should be\nprinted, as formatted text, within the datetime component.\n\nA few examples are provided in the chart below. The formats mentioned\nabove can be passed in to the display format in any combination.\n\n| Display Format | Example |\n| ----------------------| ----------------------- |\n| `M-YYYY` | `6-2005` |\n| `MM/YY` | `06/05` |\n| `MMM YYYY` | `Jun 2005` |\n| `YYYY, MMMM` | `2005, June` |\n| `MMM DD, YYYY HH:mm` | `Jun 17, 2005 11:06` |\n\n**Important**: `ion-datetime` will by default display values relative to the user's timezone.\nGiven a value of `09:00:00+01:00`, the datetime component will\ndisplay it as `04:00:00-04:00` for users in a `-04:00` timezone offset.\nTo change the display to use a different timezone, use the displayTimezone property described below.\n\n### Display Timezone\n\nThe `displayTimezone` property allows you to change the default behavior\nof displaying values relative to the user's local timezone. In addition to \"UTC\" valid\ntime zone values are determined by the browser, and in most cases follow the time zone names\nof the [IANA time zone database](https://www.iana.org/time-zones), such as \"Asia/Shanghai\",\n\"Asia/Kolkata\", \"America/New_York\". In the following example:\n\n```html\n<ion-datetime value=\"2019-10-01T15:43:40.394Z\" display-timezone=\"utc\"></ion-datetime>\n```\n\nThe displayed value will not be converted and will be displayed as provided (UTC).\n\n\n### Picker Format\n\nThe `pickerFormat` property determines which columns should be shown in the picker\ninterface, the order of the columns, and which format to use within each\ncolumn. If `pickerFormat` is not provided then it will use the value of\n`displayFormat`. Refer to the chart in the [Display Format](#display-format) section\nfor some formatting examples.\n\n\n### Datetime Data\n\nHistorically, handling datetime values within JavaScript, or even within HTML\ninputs, has always been a challenge. Specifically, JavaScript's `Date` object is\nnotoriously difficult to correctly parse apart datetime strings or to format\ndatetime values. Even worse is how different browsers and JavaScript versions\nparse various datetime strings differently, especially per locale.\n\nFortunately, Ionic's datetime input has been designed so developers can avoid\nthe common pitfalls, allowing developers to easily format datetime values within\nthe input, and give the user a simple datetime picker for a great user\nexperience.\n\n##### ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ\n\nIonic uses the [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime)\nfor its value. The value is simply a string, rather than using JavaScript's\n`Date` object. Using the ISO datetime format makes it easy to serialize\nand parse within JSON objects and databases.\n\nAn ISO format can be used as a simple year, or just the hour and minute, or get\nmore detailed down to the millisecond and timezone. Any of the ISO formats below\ncan be used, and after a user selects a new value, Ionic will continue to use\nthe same ISO format which datetime value was originally given as.\n\n| Description | Format | Datetime Value Example |\n| -------------------- | ---------------------- | ---------------------------- |\n| Year | YYYY | 1994 |\n| Year and Month | YYYY-MM | 1994-12 |\n| Complete Date | YYYY-MM-DD | 1994-12-15 |\n| Date and Time | YYYY-MM-DDTHH:mm | 1994-12-15T13:47 |\n| UTC Timezone | YYYY-MM-DDTHH:mm:ssTZD | 1994-12-15T13:47:20.789Z |\n| Timezone Offset | YYYY-MM-DDTHH:mm:ssTZD | 1994-12-15T13:47:20.789+05:00 |\n| Hour and Minute | HH:mm | 13:47 |\n| Hour, Minute, Second | HH:mm:ss | 13:47:20 |\n\nNote that the year is always four-digits, milliseconds (if it's added) is always\nthree-digits, and all others are always two-digits. So the number representing\nJanuary always has a leading zero, such as `01`. Additionally, the hour is\nalways in the 24-hour format, so `00` is `12am` on a 12-hour clock, `13` means\n`1pm`, and `23` means `11pm`.\n\nAlso note that neither the `displayFormat` nor the `pickerFormat`\ncan set the datetime value's output, which is the value that is set by the\ncomponent's `ngModel`. The formats are merely for displaying the value as text\nand the picker's interface, but the datetime's value is always persisted as a\nvalid ISO 8601 datetime string.\n\n## Min and Max Datetimes\n\nDates are infinite in either direction, so for a user's selection there should\nbe at least some form of restricting the dates that can be selected. By default,\nthe maximum date is to the end of the current year, and the minimum date is from\nthe beginning of the year that was 100 years ago.\n\nTo customize the minimum and maximum datetime values, the `min` and `max`\ncomponent properties can be provided which may make more sense for the app's\nuse-case, rather than the default of the last 100 years. Following the same IS0\n8601 format listed in the table above, each component can restrict which dates\ncan be selected by the user. By passing `2016` to the `min` property and `2020-10-31`\nto the `max` property, the datetime will restrict the date selection between the\nbeginning of 2016, and October 31st of 2020.\n\n\n## Month Names and Day of the Week Names\n\nAt this time, there is no one-size-fits-all standard to automatically choose the\ncorrect language/spelling for a month name, or day of the week name, depending\non the language or locale.\n\nThe good news is that there is an [Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat)\nstandard which [most browsers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat#Browser_compatibility) have adopted.\n\nHowever, at this time the standard has not been fully implemented by all popular browsers\nso Ionic is unavailable to take advantage of it yet.\n\nAdditionally, Angular also provides an internationalization service, but it is still\nunder heavy development so Ionic does not depend on it at this time.\n\nThe current best practice is to provide an array of names if the app needs to use names other\nthan the default English version of month and day names. The month names and day names can be\neither configured at the app level, or individual `ion-datetime` level.\n\n\n### Advanced Datetime Validation and Manipulation\n\nThe datetime picker provides the simplicity of selecting an exact format, and\npersists the datetime values as a string using the standardized [ISO 8601\ndatetime format](https://www.w3.org/TR/NOTE-datetime). However, it's important\nto note that `ion-datetime` does not attempt to solve all situations when\nvalidating and manipulating datetime values. If datetime values need to be\nparsed from a certain format, or manipulated (such as adding 5 days to a date,\nsubtracting 30 minutes, etc.), or even formatting data to a specific locale,\nthen we highly recommend using [date-fns](https://date-fns.org) to work with\ndates in JavaScript.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
},
|
||
{
|
||
"text": "text - The value of the datetime.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "placeholder - The placeholder of the datetime.",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<ion-item>\n <ion-label>MMMM</ion-label>\n <ion-datetime displayFormat=\"MMMM\" value=\"2012-12-15T13:47:20.789\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>MM DD YY</ion-label>\n <ion-datetime displayFormat=\"MM DD YY\" placeholder=\"Select Date\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>Disabled</ion-label>\n <ion-datetime id=\"dynamicDisabled\" displayFormat=\"MM DD YY\" disabled value=\"1994-12-15\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>YYYY</ion-label>\n <ion-datetime [pickerOptions]=\"customPickerOptions\" placeholder=\"Custom Options\" displayFormat=\"YYYY\" min=\"1981\" max=\"2002\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"stacked\">MMMM YY</ion-label>\n <ion-datetime displayFormat=\"MMMM YY\" min=\"1989-06-04\" max=\"2004-08-23\" value=\"1994-12-15T13:47:20.789\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"floating\">MM/DD/YYYY</ion-label>\n <ion-datetime displayFormat=\"MM/DD/YYYY\" min=\"1994-03-14\" max=\"2012-12-09\" value=\"2002-09-23T15:03:46.789\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"floating\">MM/DD/YYYY</ion-label>\n <ion-datetime displayFormat=\"MM/DD/YYYY\" min=\"1994-03-14\" max=\"2012-12-09\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>\n <ion-datetime value=\"1995-04-15\" min=\"1990-02\" max=\"2000\"\n [dayShortNames]=\"customDayShortNames\"\n displayFormat=\"DDD. MMM DD, YY\"\n monthShortNames=\"jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>D MMM YYYY H:mm</ion-label>\n <ion-datetime displayFormat=\"D MMM YYYY H:mm\" min=\"1997\" max=\"2010\" value=\"2005-06-17T11:06Z\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>DDDD MMM D, YYYY</ion-label>\n <ion-datetime displayFormat=\"DDDD MMM D, YYYY\" min=\"2005\" max=\"2016\" value=\"2008-09-02\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>HH:mm</ion-label>\n <ion-datetime displayFormat=\"HH:mm\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>h:mm a</ion-label>\n <ion-datetime displayFormat=\"h:mm a\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>hh:mm A (15 min steps)</ion-label>\n <ion-datetime displayFormat=\"h:mm A\" minuteValues=\"0,15,30,45\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>Leap years, summer months</ion-label>\n <ion-datetime displayFormat=\"MM/YYYY\" pickerFormat=\"MMMM YYYY\" monthValues=\"6,7,8\" [yearValues]=\"customYearValues\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>Specific days/months/years</ion-label>\n <ion-datetime monthValues=\"6,7,8\" yearValues=\"2014,2015\" dayValues=\"01,02,03,04,05,06,08,09,10, 11, 12, 13, 14\" displayFormat=\"DD/MMM/YYYY\"></ion-datetime>\n</ion-item>\n```\n\n```typescript\n@Component({…})\nexport class MyComponent {\n customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];\n customDayShortNames = ['s\\u00f8n', 'man', 'tir', 'ons', 'tor', 'fre', 'l\\u00f8r'];\n customPickerOptions: any;\n\n constructor() {\n this.customPickerOptions = {\n buttons: [{\n text: 'Save',\n handler: () => console.log('Clicked Save!')\n }, {\n text: 'Log',\n handler: () => {\n console.log('Clicked Log. Do not Dismiss.');\n return false;\n }\n }]\n }\n }\n\n}\n```\n",
|
||
"javascript": "```html\n<ion-item>\n <ion-label>MMMM</ion-label>\n <ion-datetime display-format=\"MMMM\" value=\"2012-12-15T13:47:20.789\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>MM DD YY</ion-label>\n <ion-datetime display-format=\"MM DD YY\" placeholder=\"Select Date\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>Disabled</ion-label>\n <ion-datetime id=\"dynamicDisabled\" display-format=\"MM DD YY\" disabled value=\"1994-12-15\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>YYYY</ion-label>\n <ion-datetime id=\"customPickerOptions\" placeholder=\"Custom Options\" display-format=\"YYYY\" min=\"1981\" max=\"2002\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"stacked\">MMMM YY</ion-label>\n <ion-datetime display-format=\"MMMM YY\" min=\"1989-06-04\" max=\"2004-08-23\" value=\"1994-12-15T13:47:20.789\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"floating\">MM/DD/YYYY</ion-label>\n <ion-datetime display-format=\"MM/DD/YYYY\" min=\"1994-03-14\" max=\"2012-12-09\" value=\"2002-09-23T15:03:46.789\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"floating\">MM/DD/YYYY</ion-label>\n <ion-datetime display-format=\"MM/DD/YYYY\" min=\"1994-03-14\" max=\"2012-12-09\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>\n <ion-datetime id=\"customDayShortNames\" value=\"1995-04-15\" min=\"1990-02\" max=\"2000\"\n display-format=\"DDD. MMM DD, YY\"\n month-short-names=\"jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>D MMM YYYY H:mm</ion-label>\n <ion-datetime display-format=\"D MMM YYYY H:mm\" min=\"1997\" max=\"2010\" value=\"2005-06-17T11:06Z\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>DDDD MMM D, YYYY</ion-label>\n <ion-datetime display-format=\"DDDD MMM D, YYYY\" min=\"2005\" max=\"2016\" value=\"2008-09-02\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>HH:mm</ion-label>\n <ion-datetime display-format=\"HH:mm\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>h:mm a</ion-label>\n <ion-datetime display-format=\"h:mm a\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>hh:mm A (15 min steps)</ion-label>\n <ion-datetime display-format=\"h:mm A\" minute-values=\"0,15,30,45\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>Leap years, summer months</ion-label>\n <ion-datetime id=\"customYearValues\" display-format=\"MM/YYYY\" picker-format=\"MMMM YYYY\" month-values=\"6,7,8\"></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label>Specific days/months/years</ion-label>\n <ion-datetime month-values=\"6,7,8\" year-values=\"2014,2015\" day-values=\"01,02,03,04,05,06,08,09,10, 11, 12, 13, 14\" display-format=\"DD/MMM/YYYY\"></ion-datetime>\n</ion-item>\n```\n\n```javascript\nvar yearValuesArray = [2020, 2016, 2008, 2004, 2000, 1996];\nvar customYearValues = document.getElementById('customYearValues');\ncustomYearValues.yearValues = yearValuesArray;\n\nvar dayShortNamesArray = [\n 's\\u00f8n',\n 'man',\n 'tir',\n 'ons',\n 'tor',\n 'fre',\n 'l\\u00f8r'\n];\nvar customDayShortNames = document.getElementById('customDayShortNames');\ncustomDayShortNames.dayShortNames = dayShortNamesArray;\n\nvar customPickerButtons = {\n buttons: [{\n text: 'Save',\n handler: () => console.log('Clicked Save!')\n }, {\n text: 'Log',\n handler: () => {\n console.log('Clicked Log. Do not Dismiss.');\n return false;\n }\n }]\n}\nvar customPickerOptions = document.getElementById('customPickerOptions');\ncustomPickerOptions.pickerOptions = customPickerButtons;\n```",
|
||
"react": "```tsx\nimport React, { useState } from 'react';\nimport { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonItem, IonLabel, IonDatetime, IonFooter } from '@ionic/react';\n\nconst customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];\n\nconst customDayShortNames = [\n 's\\u00f8n',\n 'man',\n 'tir',\n 'ons',\n 'tor',\n 'fre',\n 'l\\u00f8r'\n];\n\nexport const DateTimeExamples: React.FC = () => {\n const [selectedDate, setSelectedDate] = useState<string>('2012-12-15T13:47:20.789');\n return (\n <IonPage>\n <IonHeader>\n <IonToolbar>\n <IonTitle>IonDatetime Examples</IonTitle>\n </IonToolbar>\n </IonHeader>\n <IonContent>\n <IonItem>\n <IonLabel>MMMM</IonLabel>\n <IonDatetime displayFormat=\"MMMM\" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>\n </IonItem>\n\n <IonItem>\n <IonLabel>MM DD YY</IonLabel>\n <IonDatetime displayFormat=\"MM DD YY\" placeholder=\"Select Date\" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>\n </IonItem>\n\n <IonItem>\n <IonLabel>Disabled</IonLabel>\n <IonDatetime id=\"dynamicDisabled\" displayFormat=\"MM DD YY\" disabled value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>\n </IonItem>\n\n <IonItem>\n <IonLabel>YYYY</IonLabel>\n <IonDatetime pickerOptions={{\n buttons: [\n {\n text: 'Save',\n handler: () => console.log('Clicked Save!')\n }, {\n text: 'Log',\n handler: () => {\n console.log('Clicked Log. Do not Dismiss.');\n return false;\n }\n }\n ]\n }}\n placeholder=\"Custom Options\" displayFormat=\"YYYY\" min=\"1981\" max=\"2002\"\n value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}>\n </IonDatetime>\n </IonItem>\n\n <IonItem>\n <IonLabel position=\"stacked\">MMMM YY</IonLabel>\n <IonDatetime displayFormat=\"MMMM YY\" min=\"1989-06-04\" max=\"2004-08-23\" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>\n </IonItem>\n\n <IonItem>\n <IonLabel position=\"floating\">MM/DD/YYYY</IonLabel>\n <IonDatetime displayFormat=\"MM/DD/YYYY\" min=\"1994-03-14\" max=\"2012-12-09\" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>\n </IonItem>\n\n <IonItem>\n <IonLabel position=\"floating\">MM/DD/YYYY</IonLabel>\n <IonDatetime displayFormat=\"MM/DD/YYYY\" min=\"1994-03-14\" max=\"2012-12-09\" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>\n </IonItem>\n\n <IonItem>\n <IonLabel>DDD. MMM DD, YY (custom locale)</IonLabel>\n <IonDatetime\n min=\"1990-02\"\n max=\"2000\"\n dayShortNames={customDayShortNames}\n displayFormat=\"DDD. MMM DD, YY\"\n monthShortNames=\"jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des\"\n value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}\n ></IonDatetime>\n </IonItem>\n\n <IonItem>\n <IonLabel>D MMM YYYY H:mm</IonLabel>\n <IonDatetime displayFormat=\"D MMM YYYY H:mm\" min=\"1997\" max=\"2010\" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>\n </IonItem>\n\n <IonItem>\n <IonLabel>DDDD MMM D, YYYY</IonLabel>\n <IonDatetime displayFormat=\"DDDD MMM D, YYYY\" min=\"2005\" max=\"2016\" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>\n </IonItem>\n\n <IonItem>\n <IonLabel>HH:mm</IonLabel>\n <IonDatetime displayFormat=\"HH:mm\" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>\n </IonItem>\n\n <IonItem>\n <IonLabel>h:mm a</IonLabel>\n <IonDatetime displayFormat=\"h:mm a\" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>\n </IonItem>\n\n <IonItem>\n <IonLabel>hh:mm A (15 min steps)</IonLabel>\n <IonDatetime displayFormat=\"h:mm A\" minuteValues=\"0,15,30,45\" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>\n </IonItem>\n\n <IonItem>\n <IonLabel>Leap years, summer months</IonLabel>\n <IonDatetime displayFormat=\"MM/YYYY\" pickerFormat=\"MMMM YYYY\" monthValues=\"6,7,8\" yearValues={customYearValues} value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>\n </IonItem>\n\n <IonItem>\n <IonLabel>Specific days/months/years</IonLabel>\n <IonDatetime\n monthValues='6,7,8'\n yearValues='2014,2015'\n dayValues=\"01,02,03,04,05,06,08,09,10, 11, 12, 13, 14\"\n displayFormat=\"DD/MMM/YYYY\"\n value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}\n ></IonDatetime>\n </IonItem>\n </IonContent>\n <IonFooter>\n <IonToolbar>\n Selected Date: {selectedDate ?? '(none)'}\n </IonToolbar>\n </IonFooter>\n </IonPage>\n );\n};\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'datetime-example',\n styleUrl: 'datetime-example.css'\n})\nexport class DatetimeExample {\n private customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];\n private customDayShortNames = ['s\\u00f8n', 'man', 'tir', 'ons', 'tor', 'fre', 'l\\u00f8r'];\n private customPickerOptions = {\n buttons: [{\n text: 'Save',\n handler: () => console.log('Clicked Save!')\n }, {\n text: 'Log',\n handler: () => {\n console.log('Clicked Log. Do not Dismiss.');\n return false;\n }\n }]\n }\n\n render() {\n return [\n <ion-item>\n <ion-label>MMMM</ion-label>\n <ion-datetime displayFormat=\"MMMM\" value=\"2012-12-15T13:47:20.789\"></ion-datetime>\n </ion-item>,\n\n <ion-item>\n <ion-label>MM DD YY</ion-label>\n <ion-datetime displayFormat=\"MM DD YY\" placeholder=\"Select Date\"></ion-datetime>\n </ion-item>,\n\n <ion-item>\n <ion-label>Disabled</ion-label>\n <ion-datetime id=\"dynamicDisabled\" displayFormat=\"MM DD YY\" disabled value=\"1994-12-15\"></ion-datetime>\n </ion-item>,\n\n <ion-item>\n <ion-label>YYYY</ion-label>\n <ion-datetime pickerOptions={this.customPickerOptions} placeholder=\"Custom Options\" displayFormat=\"YYYY\" min=\"1981\" max=\"2002\"></ion-datetime>\n </ion-item>,\n\n <ion-item>\n <ion-label position=\"stacked\">MMMM YY</ion-label>\n <ion-datetime displayFormat=\"MMMM YY\" min=\"1989-06-04\" max=\"2004-08-23\" value=\"1994-12-15T13:47:20.789\"></ion-datetime>\n </ion-item>,\n\n <ion-item>\n <ion-label position=\"floating\">MM/DD/YYYY</ion-label>\n <ion-datetime displayFormat=\"MM/DD/YYYY\" min=\"1994-03-14\" max=\"2012-12-09\" value=\"2002-09-23T15:03:46.789\"></ion-datetime>\n </ion-item>,\n\n <ion-item>\n <ion-label position=\"floating\">MM/DD/YYYY</ion-label>\n <ion-datetime displayFormat=\"MM/DD/YYYY\" min=\"1994-03-14\" max=\"2012-12-09\"></ion-datetime>\n </ion-item>,\n\n <ion-item>\n <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>\n <ion-datetime value=\"1995-04-15\" min=\"1990-02\" max=\"2000\"\n dayShortNames={this.customDayShortNames}\n displayFormat=\"DDD. MMM DD, YY\"\n monthShortNames=\"jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des\"></ion-datetime>\n </ion-item>,\n\n <ion-item>\n <ion-label>D MMM YYYY H:mm</ion-label>\n <ion-datetime displayFormat=\"D MMM YYYY H:mm\" min=\"1997\" max=\"2010\" value=\"2005-06-17T11:06Z\"></ion-datetime>\n </ion-item>,\n\n <ion-item>\n <ion-label>DDDD MMM D, YYYY</ion-label>\n <ion-datetime displayFormat=\"DDDD MMM D, YYYY\" min=\"2005\" max=\"2016\" value=\"2008-09-02\"></ion-datetime>\n </ion-item>,\n\n <ion-item>\n <ion-label>HH:mm</ion-label>\n <ion-datetime displayFormat=\"HH:mm\"></ion-datetime>\n </ion-item>,\n\n <ion-item>\n <ion-label>h:mm a</ion-label>\n <ion-datetime displayFormat=\"h:mm a\"></ion-datetime>\n </ion-item>,\n\n <ion-item>\n <ion-label>hh:mm A (15 min steps)</ion-label>\n <ion-datetime displayFormat=\"h:mm A\" minuteValues=\"0,15,30,45\"></ion-datetime>\n </ion-item>,\n\n <ion-item>\n <ion-label>Leap years, summer months</ion-label>\n <ion-datetime displayFormat=\"MM/YYYY\" pickerFormat=\"MMMM YYYY\" monthValues=\"6,7,8\" yearValues={this.customYearValues}></ion-datetime>\n </ion-item>,\n\n <ion-item>\n <ion-label>Specific days/months/years</ion-label>\n <ion-datetime monthValues=\"6,7,8\" yearValues=\"2014,2015\" dayValues=\"01,02,03,04,05,06,08,09,10, 11, 12, 13, 14\" displayFormat=\"DD/MMM/YYYY\"></ion-datetime>\n </ion-item>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <ion-item>\n <ion-label>MMMM</ion-label>\n <ion-datetime display-format=\"MMMM\" value=\"2012-12-15T13:47:20.789\"></ion-datetime>\n </ion-item>\n\n <ion-item>\n <ion-label>MM DD YY</ion-label>\n <ion-datetime display-format=\"MM DD YY\" placeholder=\"Select Date\"></ion-datetime>\n </ion-item>\n\n <ion-item>\n <ion-label>Disabled</ion-label>\n <ion-datetime id=\"dynamicDisabled\" display-format=\"MM DD YY\" disabled value=\"1994-12-15\"></ion-datetime>\n </ion-item>\n\n <ion-item>\n <ion-label>YYYY</ion-label>\n <ion-datetime :picker-options=\"customPickerOptions\" placeholder=\"Custom Options\" display-format=\"YYYY\" min=\"1981\" max=\"2002\"></ion-datetime>\n </ion-item>\n\n <ion-item>\n <ion-label position=\"stacked\">MMMM YY</ion-label>\n <ion-datetime display-format=\"MMMM YY\" min=\"1989-06-04\" max=\"2004-08-23\" value=\"1994-12-15T13:47:20.789\"></ion-datetime>\n </ion-item>\n\n <ion-item>\n <ion-label position=\"floating\">MM/DD/YYYY</ion-label>\n <ion-datetime display-format=\"MM/DD/YYYY\" min=\"1994-03-14\" max=\"2012-12-09\" value=\"2002-09-23T15:03:46.789\"></ion-datetime>\n </ion-item>\n\n <ion-item>\n <ion-label position=\"floating\">MM/DD/YYYY</ion-label>\n <ion-datetime display-format=\"MM/DD/YYYY\" min=\"1994-03-14\" max=\"2012-12-09\"></ion-datetime>\n </ion-item>\n\n <ion-item>\n <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>\n <ion-datetime value=\"1995-04-15\" min=\"1990-02\" max=\"2000\"\n :day-short-names=\"customDayShortNames\"\n display-format=\"DDD. MMM DD, YY\"\n month-short-names=\"jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des\"></ion-datetime>\n </ion-item>\n\n <ion-item>\n <ion-label>D MMM YYYY H:mm</ion-label>\n <ion-datetime display-format=\"D MMM YYYY H:mm\" min=\"1997\" max=\"2010\" value=\"2005-06-17T11:06Z\"></ion-datetime>\n </ion-item>\n\n <ion-item>\n <ion-label>DDDD MMM D, YYYY</ion-label>\n <ion-datetime display-format=\"DDDD MMM D, YYYY\" min=\"2005\" max=\"2016\" value=\"2008-09-02\"></ion-datetime>\n </ion-item>\n\n <ion-item>\n <ion-label>HH:mm</ion-label>\n <ion-datetime display-format=\"HH:mm\"></ion-datetime>\n </ion-item>\n\n <ion-item>\n <ion-label>h:mm a</ion-label>\n <ion-datetime display-format=\"h:mm a\"></ion-datetime>\n </ion-item>\n\n <ion-item>\n <ion-label>hh:mm A (15 min steps)</ion-label>\n <ion-datetime display-format=\"h:mm A\" minute-values=\"0,15,30,45\"></ion-datetime>\n </ion-item>\n\n <ion-item>\n <ion-label>Leap years, summer months</ion-label>\n <ion-datetime display-format=\"MM/YYYY\" picker-format=\"MMMM YYYY\" month-values=\"6,7,8\" :year-values=\"customYearValues\"></ion-datetime>\n </ion-item>\n\n <ion-item>\n <ion-label>Specific days/months/years</ion-label>\n <ion-datetime month-values=\"6,7,8\" year-values=\"2014,2015\" day-values=\"01,02,03,04,05,06,08,09,10, 11, 12, 13, 14\" display-format=\"DD/MMM/YYYY\"></ion-datetime>\n </ion-item>\n</template>\n\n<script>\nimport { IonDatetime, IonItem, IonLabel } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonDatetime, IonItem, IonLabel },\n setup() {\n const customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];\n const customDayShortNames = [\n 's\\u00f8n',\n 'man',\n 'tir',\n 'ons',\n 'tor',\n 'fre',\n 'l\\u00f8r'\n ];\n const customPickerOptions = {\n buttons: [{\n text: 'Save',\n handler: () => console.log('Clicked Save!')\n }, {\n text: 'Log',\n handler: () => {\n console.log('Clicked Log. Do not Dismiss.');\n return false;\n }\n }]\n }\n \n return {\n customYearValues,\n customDayShortNames,\n customPickerOptions\n }\n }\n});\n</script>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "cancelText",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "cancel-text",
|
||
"reflectToAttr": false,
|
||
"docs": "The text to display on the picker's cancel button.",
|
||
"docsTags": [],
|
||
"default": "'Cancel'",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "dayNames",
|
||
"type": "string | string[] | undefined",
|
||
"mutable": false,
|
||
"attr": "day-names",
|
||
"reflectToAttr": false,
|
||
"docs": "Full day of the week names. This can be used to provide\nlocale names for each day in the week. Defaults to English.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "string[]"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "dayShortNames",
|
||
"type": "string | string[] | undefined",
|
||
"mutable": false,
|
||
"attr": "day-short-names",
|
||
"reflectToAttr": false,
|
||
"docs": "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']`",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "string[]"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "dayValues",
|
||
"type": "number | number[] | string | undefined",
|
||
"mutable": false,
|
||
"attr": "day-values",
|
||
"reflectToAttr": false,
|
||
"docs": "Values used to create the list of selectable days. By default\nevery day is shown for the given month. However, to control exactly which days of\nthe month to display, the `dayValues` input can take a number, an array of numbers, or\na string of comma separated numbers. Note that even if the array days have an invalid\nnumber for the selected month, like `31` in February, it will correctly not show\ndays which are not valid for the selected month.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
},
|
||
{
|
||
"type": "number[]"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot interact with the datetime.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "displayFormat",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "display-format",
|
||
"reflectToAttr": false,
|
||
"docs": "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`.",
|
||
"docsTags": [],
|
||
"default": "'MMM D, YYYY'",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "displayTimezone",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "display-timezone",
|
||
"reflectToAttr": false,
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "doneText",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "done-text",
|
||
"reflectToAttr": false,
|
||
"docs": "The text to display on the picker's \"Done\" button.",
|
||
"docsTags": [],
|
||
"default": "'Done'",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "hourValues",
|
||
"type": "number | number[] | string | undefined",
|
||
"mutable": false,
|
||
"attr": "hour-values",
|
||
"reflectToAttr": false,
|
||
"docs": "Values used to create the list of selectable hours. By default\nthe hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However,\nto control exactly which hours to display, the `hourValues` input can take a number, an\narray of numbers, or a string of comma separated numbers.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
},
|
||
{
|
||
"type": "number[]"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "max",
|
||
"type": "string | undefined",
|
||
"mutable": true,
|
||
"attr": "max",
|
||
"reflectToAttr": false,
|
||
"docs": "The maximum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\n`1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the maximum could just be the year, such as `1994`.\nDefaults to the end of this year.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "min",
|
||
"type": "string | undefined",
|
||
"mutable": true,
|
||
"attr": "min",
|
||
"reflectToAttr": false,
|
||
"docs": "The minimum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\nsuch as `1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the minimum could just be the year, such as `1994`.\nDefaults to the beginning of the year, 100 years ago from today.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "minuteValues",
|
||
"type": "number | number[] | string | undefined",
|
||
"mutable": false,
|
||
"attr": "minute-values",
|
||
"reflectToAttr": false,
|
||
"docs": "Values used to create the list of selectable minutes. By default\nthe minutes range from `0` to `59`. However, to control exactly which minutes to display,\nthe `minuteValues` input can take a number, an array of numbers, or a string of comma\nseparated numbers. For example, if the minute selections should only be every 15 minutes,\nthen this input value would be `minuteValues=\"0,15,30,45\"`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
},
|
||
{
|
||
"type": "number[]"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "monthNames",
|
||
"type": "string | string[] | undefined",
|
||
"mutable": false,
|
||
"attr": "month-names",
|
||
"reflectToAttr": false,
|
||
"docs": "Full names for each month name. This can be used to provide\nlocale month names. Defaults to English.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "string[]"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "monthShortNames",
|
||
"type": "string | string[] | undefined",
|
||
"mutable": false,
|
||
"attr": "month-short-names",
|
||
"reflectToAttr": false,
|
||
"docs": "Short abbreviated names for each month name. This can be used to provide\nlocale month names. Defaults to English.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "string[]"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "monthValues",
|
||
"type": "number | number[] | string | undefined",
|
||
"mutable": false,
|
||
"attr": "month-values",
|
||
"reflectToAttr": false,
|
||
"docs": "Values used to create the list of selectable months. By default\nthe month values range from `1` to `12`. However, to control exactly which months to\ndisplay, the `monthValues` input can take a number, an array of numbers, or a string of\ncomma separated numbers. For example, if only summer months should be shown, then this\ninput value would be `monthValues=\"6,7,8\"`. Note that month numbers do *not* have a\nzero-based index, meaning January's value is `1`, and December's is `12`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
},
|
||
{
|
||
"type": "number[]"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "name",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "name",
|
||
"reflectToAttr": false,
|
||
"docs": "The name of the control, which is submitted with the form data.",
|
||
"docsTags": [],
|
||
"default": "this.inputId",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "pickerFormat",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "picker-format",
|
||
"reflectToAttr": false,
|
||
"docs": "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`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "pickerOptions",
|
||
"type": "undefined | { columns?: PickerColumn[] | undefined; buttons?: PickerButton[] | undefined; cssClass?: string | string[] | undefined; showBackdrop?: boolean | undefined; backdropDismiss?: boolean | undefined; animated?: boolean | undefined; mode?: Mode | undefined; keyboardClose?: boolean | undefined; id?: string | undefined; htmlAttributes?: PickerAttributes | undefined; enterAnimation?: AnimationBuilder | undefined; leaveAnimation?: AnimationBuilder | undefined; }",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Any additional options that the picker interface can accept.\nSee the [Picker API docs](../picker) for the picker options.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "undefined"
|
||
},
|
||
{
|
||
"type": "{ columns?: PickerColumn[]"
|
||
},
|
||
{
|
||
"type": "undefined; buttons?: PickerButton[]"
|
||
},
|
||
{
|
||
"type": "undefined; cssClass?: string"
|
||
},
|
||
{
|
||
"type": "string[]"
|
||
},
|
||
{
|
||
"type": "undefined; showBackdrop?: boolean"
|
||
},
|
||
{
|
||
"type": "undefined; backdropDismiss?: boolean"
|
||
},
|
||
{
|
||
"type": "undefined; animated?: boolean"
|
||
},
|
||
{
|
||
"type": "undefined; mode?: Mode"
|
||
},
|
||
{
|
||
"type": "undefined; keyboardClose?: boolean"
|
||
},
|
||
{
|
||
"type": "undefined; id?: string"
|
||
},
|
||
{
|
||
"type": "undefined; htmlAttributes?: PickerAttributes"
|
||
},
|
||
{
|
||
"type": "undefined; enterAnimation?: AnimationBuilder"
|
||
},
|
||
{
|
||
"type": "undefined; leaveAnimation?: AnimationBuilder"
|
||
},
|
||
{
|
||
"type": "undefined; }"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "placeholder",
|
||
"type": "null | string | undefined",
|
||
"mutable": false,
|
||
"attr": "placeholder",
|
||
"reflectToAttr": false,
|
||
"docs": "The text to display when there's no date selected yet.\nUsing lowercase to match the input attribute",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "readonly",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "readonly",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the datetime appears normal but is not interactive.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "null | string | undefined",
|
||
"mutable": true,
|
||
"attr": "value",
|
||
"reflectToAttr": false,
|
||
"docs": "The value of the datetime as a valid ISO 8601 datetime string.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "yearValues",
|
||
"type": "number | number[] | string | undefined",
|
||
"mutable": false,
|
||
"attr": "year-values",
|
||
"reflectToAttr": false,
|
||
"docs": "Values used to create the list of selectable years. By default\nthe year values range between the `min` and `max` datetime inputs. However, to\ncontrol exactly which years to display, the `yearValues` input can take a number, an array\nof numbers, or string of comma separated numbers. For example, to show upcoming and\nrecent leap years, then this input's value would be `yearValues=\"2024,2020,2016,2012,2008\"`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
},
|
||
{
|
||
"type": "number[]"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "open",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "open() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Opens the datetime overlay.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionBlur",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the datetime loses focus.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionCancel",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the datetime selection was cancelled.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionChange",
|
||
"detail": "DatetimeChangeEventDetail",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the value (selected date) has changed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionFocus",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the datetime has focus.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--padding-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom padding of the datetime"
|
||
},
|
||
{
|
||
"name": "--padding-end",
|
||
"annotation": "prop",
|
||
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the datetime"
|
||
},
|
||
{
|
||
"name": "--padding-start",
|
||
"annotation": "prop",
|
||
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the datetime"
|
||
},
|
||
{
|
||
"name": "--padding-top",
|
||
"annotation": "prop",
|
||
"docs": "Top padding of the datetime"
|
||
},
|
||
{
|
||
"name": "--placeholder-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the datetime placeholder"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [
|
||
{
|
||
"name": "placeholder",
|
||
"docs": "The placeholder of the datetime."
|
||
},
|
||
{
|
||
"name": "text",
|
||
"docs": "The value of the datetime."
|
||
}
|
||
],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/fab/fab.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-fab",
|
||
"readme": "# ion-fab\n\nFabs 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.\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"angular": "```html\n<ion-header>\n <ion-toolbar>\n <ion-title>Header</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content>\n <!-- fab placed to the top end -->\n <ion-fab vertical=\"top\" horizontal=\"end\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"add\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the bottom end -->\n <ion-fab vertical=\"bottom\" horizontal=\"end\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"arrow-forward-circle\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the top start -->\n <ion-fab vertical=\"top\" horizontal=\"start\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"arrow-back-circle\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the bottom start -->\n <ion-fab vertical=\"bottom\" horizontal=\"start\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"arrow-up-circle\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the (vertical) center and start -->\n <ion-fab vertical=\"center\" horizontal=\"start\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"share\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the (vertical) center and end -->\n <ion-fab vertical=\"center\" horizontal=\"end\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"add\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the top and end and on the top edge of the content overlapping header -->\n <ion-fab vertical=\"top\" horizontal=\"end\" edge slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"person\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right -->\n <ion-fab vertical=\"bottom\" horizontal=\"start\" edge slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"settings\"></ion-icon>\n </ion-fab-button>\n <ion-fab-list side=\"end\">\n <ion-fab-button><ion-icon name=\"logo-vimeo\"></ion-icon></ion-fab-button>\n </ion-fab-list>\n </ion-fab>\n\n <!-- fab placed in the center of the content with a list on each side -->\n <ion-fab vertical=\"center\" horizontal=\"center\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"share\"></ion-icon>\n </ion-fab-button>\n <ion-fab-list side=\"top\">\n <ion-fab-button><ion-icon name=\"logo-vimeo\"></ion-icon></ion-fab-button>\n </ion-fab-list>\n <ion-fab-list side=\"bottom\">\n <ion-fab-button><ion-icon name=\"logo-facebook\"></ion-icon></ion-fab-button>\n </ion-fab-list>\n <ion-fab-list side=\"start\">\n <ion-fab-button><ion-icon name=\"logo-instagram\"></ion-icon></ion-fab-button>\n </ion-fab-list>\n <ion-fab-list side=\"end\">\n <ion-fab-button><ion-icon name=\"logo-twitter\"></ion-icon></ion-fab-button>\n </ion-fab-list>\n </ion-fab>\n</ion-content>\n\n<ion-footer>\n <ion-toolbar>\n <ion-title>Footer</ion-title>\n </ion-toolbar>\n</ion-footer>\n```\n",
|
||
"javascript": "```html\n<ion-header>\n <ion-toolbar>\n <ion-title>Header</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content>\n <!-- fab placed to the top end -->\n <ion-fab vertical=\"top\" horizontal=\"end\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"add\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the bottom end -->\n <ion-fab vertical=\"bottom\" horizontal=\"end\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"arrow-forward-circle\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the top start -->\n <ion-fab vertical=\"top\" horizontal=\"start\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"arrow-back-circle\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the bottom start -->\n <ion-fab vertical=\"bottom\" horizontal=\"start\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"arrow-up-circle\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the (vertical) center and start -->\n <ion-fab vertical=\"center\" horizontal=\"start\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"share\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the (vertical) center and end -->\n <ion-fab vertical=\"center\" horizontal=\"end\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"add\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the top and end and on the top edge of the content overlapping header -->\n <ion-fab vertical=\"top\" horizontal=\"end\" edge slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"person\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right -->\n <ion-fab vertical=\"bottom\" horizontal=\"start\" edge slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"settings\"></ion-icon>\n </ion-fab-button>\n <ion-fab-list side=\"end\">\n <ion-fab-button><ion-icon name=\"logo-vimeo\"></ion-icon></ion-fab-button>\n </ion-fab-list>\n </ion-fab>\n\n <!-- fab placed in the center of the content with a list on each side -->\n <ion-fab vertical=\"center\" horizontal=\"center\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"share\"></ion-icon>\n </ion-fab-button>\n <ion-fab-list side=\"top\">\n <ion-fab-button><ion-icon name=\"logo-vimeo\"></ion-icon></ion-fab-button>\n </ion-fab-list>\n <ion-fab-list side=\"bottom\">\n <ion-fab-button><ion-icon name=\"logo-facebook\"></ion-icon></ion-fab-button>\n </ion-fab-list>\n <ion-fab-list side=\"start\">\n <ion-fab-button><ion-icon name=\"logo-instagram\"></ion-icon></ion-fab-button>\n </ion-fab-list>\n <ion-fab-list side=\"end\">\n <ion-fab-button><ion-icon name=\"logo-twitter\"></ion-icon></ion-fab-button>\n </ion-fab-list>\n </ion-fab>\n</ion-content>\n\n<ion-footer>\n <ion-toolbar>\n <ion-title>Footer</ion-title>\n </ion-toolbar>\n</ion-footer>\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonContent, IonHeader, IonFooter, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react';\nimport { add, settings, share, person, arrowForwardCircle, arrowBackCircle, arrowUpCircle, logoVimeo, logoFacebook, logoInstagram, logoTwitter } from 'ionicons/icons';\n\nexport const FabExamples: React.FC = () => {\n return (\n <IonPage>\n <IonHeader>\n <IonToolbar>\n <IonTitle>Header</IonTitle>\n </IonToolbar>\n </IonHeader>\n <IonContent>\n {/*-- fab placed to the top end --*/}\n <IonFab vertical=\"top\" horizontal=\"end\" slot=\"fixed\">\n <IonFabButton>\n <IonIcon icon={add} />\n </IonFabButton>\n </IonFab>\n\n {/*-- fab placed to the bottom end --*/}\n <IonFab vertical=\"bottom\" horizontal=\"end\" slot=\"fixed\">\n <IonFabButton>\n <IonIcon icon={arrowForwardCircle} />\n </IonFabButton>\n </IonFab>\n\n {/*-- fab placed to the top start --*/}\n <IonFab vertical=\"top\" horizontal=\"start\" slot=\"fixed\">\n <IonFabButton>\n <IonIcon icon={arrowBackCircle} />\n </IonFabButton>\n </IonFab>\n\n {/*-- fab placed to the bottom start --*/}\n <IonFab vertical=\"bottom\" horizontal=\"start\" slot=\"fixed\">\n <IonFabButton>\n <IonIcon icon={arrowUpCircle} />\n </IonFabButton>\n </IonFab>\n\n {/*-- fab placed to the (vertical) center and start --*/}\n <IonFab vertical=\"center\" horizontal=\"start\" slot=\"fixed\">\n <IonFabButton>\n <IonIcon icon={share} />\n </IonFabButton>\n </IonFab>\n\n {/*-- fab placed to the (vertical) center and end --*/}\n <IonFab vertical=\"center\" horizontal=\"end\" slot=\"fixed\">\n <IonFabButton>\n <IonIcon icon={add} />\n </IonFabButton>\n </IonFab>\n\n {/*-- fab placed to the top and end and on the top edge of the content overlapping header --*/}\n <IonFab vertical=\"top\" horizontal=\"end\" edge slot=\"fixed\">\n <IonFabButton>\n <IonIcon icon={person} />\n </IonFabButton>\n </IonFab>\n\n {/*-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right --*/}\n <IonFab vertical=\"bottom\" horizontal=\"start\" edge slot=\"fixed\">\n <IonFabButton>\n <IonIcon icon={settings} />\n </IonFabButton>\n <IonFabList side=\"end\">\n <IonFabButton><IonIcon icon={logoVimeo} /></IonFabButton>\n </IonFabList>\n </IonFab>\n\n {/*-- fab placed in the center of the content with a list on each side --*/}\n <IonFab vertical=\"center\" horizontal=\"center\" slot=\"fixed\">\n <IonFabButton>\n <IonIcon icon={share} />\n </IonFabButton>\n <IonFabList side=\"top\">\n <IonFabButton><IonIcon icon={logoVimeo} /></IonFabButton>\n </IonFabList>\n <IonFabList side=\"bottom\">\n <IonFabButton><IonIcon icon={logoFacebook} /></IonFabButton>\n </IonFabList>\n <IonFabList side=\"start\">\n <IonFabButton><IonIcon icon={logoInstagram} /></IonFabButton>\n </IonFabList>\n <IonFabList side=\"end\">\n <IonFabButton><IonIcon icon={logoTwitter} /></IonFabButton>\n </IonFabList>\n </IonFab>\n </IonContent>\n <IonFooter>\n <IonToolbar>\n <IonTitle>Footer</IonTitle>\n </IonToolbar>\n </IonFooter>\n </IonPage>\n );\n};\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'fab-example',\n styleUrl: 'fab-example.css'\n})\nexport class FabExample {\n render() {\n return [\n <ion-header>\n <ion-toolbar>\n <ion-title>Header</ion-title>\n </ion-toolbar>\n </ion-header>,\n\n <ion-content>\n {/* fab placed to the top end */}\n <ion-fab vertical=\"top\" horizontal=\"end\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"add\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n {/* fab placed to the bottom end */}\n <ion-fab vertical=\"bottom\" horizontal=\"end\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"arrow-forward-circle\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n {/* fab placed to the top start */}\n <ion-fab vertical=\"top\" horizontal=\"start\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"arrow-back-circle\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n {/* fab placed to the bottom start */}\n <ion-fab vertical=\"bottom\" horizontal=\"start\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"arrow-up-circle\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n {/* fab placed to the (vertical) center and start */}\n <ion-fab vertical=\"center\" horizontal=\"start\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"share\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n {/* fab placed to the (vertical) center and end */}\n <ion-fab vertical=\"center\" horizontal=\"end\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"add\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n {/* fab placed to the top and end and on the top edge of the content overlapping header */}\n <ion-fab vertical=\"top\" horizontal=\"end\" edge slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"person\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n {/* fab placed to the bottom and start and on the bottom edge of content overlapping footer with a list to the right */}\n <ion-fab vertical=\"bottom\" horizontal=\"start\" edge slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"settings\"></ion-icon>\n </ion-fab-button>\n <ion-fab-list side=\"end\">\n <ion-fab-button><ion-icon name=\"logo-vimeo\"></ion-icon></ion-fab-button>\n </ion-fab-list>\n </ion-fab>\n\n {/* fab placed in the center of the content with a list on each side */}\n <ion-fab vertical=\"center\" horizontal=\"center\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon name=\"share\"></ion-icon>\n </ion-fab-button>\n <ion-fab-list side=\"top\">\n <ion-fab-button><ion-icon name=\"logo-vimeo\"></ion-icon></ion-fab-button>\n </ion-fab-list>\n <ion-fab-list side=\"bottom\">\n <ion-fab-button><ion-icon name=\"logo-facebook\"></ion-icon></ion-fab-button>\n </ion-fab-list>\n <ion-fab-list side=\"start\">\n <ion-fab-button><ion-icon name=\"logo-instagram\"></ion-icon></ion-fab-button>\n </ion-fab-list>\n <ion-fab-list side=\"end\">\n <ion-fab-button><ion-icon name=\"logo-twitter\"></ion-icon></ion-fab-button>\n </ion-fab-list>\n </ion-fab>\n </ion-content>,\n\n <ion-footer>\n <ion-toolbar>\n <ion-title>\n Footer\n </ion-title>\n </ion-toolbar>\n </ion-footer>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-header>\n <ion-toolbar>\n <ion-title>Header</ion-title>\n </ion-toolbar>\n </ion-header>\n\n <ion-content>\n <!-- fab placed to the top end -->\n <ion-fab vertical=\"top\" horizontal=\"end\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon :icon=\"add\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the bottom end -->\n <ion-fab vertical=\"bottom\" horizontal=\"end\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon :icon=\"arrowForwardCircle\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the top start -->\n <ion-fab vertical=\"top\" horizontal=\"start\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon :icon=\"arrowBackCircle\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the bottom start -->\n <ion-fab vertical=\"bottom\" horizontal=\"start\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon :icon=\"arrowUpCircle\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the (vertical) center and start -->\n <ion-fab vertical=\"center\" horizontal=\"start\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon :icon=\"share\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the (vertical) center and end -->\n <ion-fab vertical=\"center\" horizontal=\"end\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon :icon=\"add\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the top and end and on the top edge of the content overlapping header -->\n <ion-fab vertical=\"top\" horizontal=\"end\" edge slot=\"fixed\">\n <ion-fab-button>\n <ion-icon :icon=\"person\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n\n <!-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right -->\n <ion-fab vertical=\"bottom\" horizontal=\"start\" edge slot=\"fixed\">\n <ion-fab-button>\n <ion-icon :icon=\"settings\"></ion-icon>\n </ion-fab-button>\n <ion-fab-list side=\"end\">\n <ion-fab-button><ion-icon :icon=\"logoVimeo\"></ion-icon></ion-fab-button>\n </ion-fab-list>\n </ion-fab>\n\n <!-- fab placed in the center of the content with a list on each side -->\n <ion-fab vertical=\"center\" horizontal=\"center\" slot=\"fixed\">\n <ion-fab-button>\n <ion-icon :icon=\"share\"></ion-icon>\n </ion-fab-button>\n <ion-fab-list side=\"top\">\n <ion-fab-button><ion-icon :icon=\"logoVimeo\"></ion-icon></ion-fab-button>\n </ion-fab-list>\n <ion-fab-list side=\"bottom\">\n <ion-fab-button><ion-icon :icon=\"logoFacebook\"></ion-icon></ion-fab-button>\n </ion-fab-list>\n <ion-fab-list side=\"start\">\n <ion-fab-button><ion-icon :icon=\"logoInstagram\"></ion-icon></ion-fab-button>\n </ion-fab-list>\n <ion-fab-list side=\"end\">\n <ion-fab-button><ion-icon :icon=\"logoTwitter\"></ion-icon></ion-fab-button>\n </ion-fab-list>\n </ion-fab>\n </ion-content>\n\n <ion-footer>\n <ion-toolbar>\n <ion-title>Footer</ion-title>\n </ion-toolbar>\n </ion-footer>\n</template>\n\n<script>\nimport { \n IonContent, \n IonFab, \n IonFabButton, \n IonFabList, \n IonFooter, \n IonHeader, \n IonIcon, \n IonTitle, \n IonToolbar \n} from '@ionic/vue';\nimport { \n add, \n arrowBackCircle,\n arrowForwardCircle, \n arrowUpCircle,\n logoFacebook, \n logoInstagram, \n logoTwitter, \n logoVimeo, \n person, \n settings, \n share\n} from 'ionicons/icons';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { \n IonContent, \n IonFab, \n IonFabButton, \n IonFabList, \n IonFooter, \n IonHeader, \n IonIcon, \n IonTitle, \n IonToolbar\n },\n setup() {\n return {\n add, \n arrowBackCircle,\n arrowForwardCircle, \n arrowUpCircle,\n logoFacebook, \n logoInstagram, \n logoTwitter, \n logoVimeo, \n person, \n settings, \n share\n }\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "activated",
|
||
"type": "boolean",
|
||
"mutable": true,
|
||
"attr": "activated",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.\nThat means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "edge",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "edge",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the fab will display on the edge of the header if\n`vertical` is `\"top\"`, and on the edge of the footer if\nit is `\"bottom\"`. Should be used with a `fixed` slot.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "horizontal",
|
||
"type": "\"center\" | \"end\" | \"start\" | undefined",
|
||
"mutable": false,
|
||
"attr": "horizontal",
|
||
"reflectToAttr": false,
|
||
"docs": "Where to align the fab horizontally in the viewport.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "center",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "end",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "start",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "vertical",
|
||
"type": "\"bottom\" | \"center\" | \"top\" | undefined",
|
||
"mutable": false,
|
||
"attr": "vertical",
|
||
"reflectToAttr": false,
|
||
"docs": "Where to align the fab vertically in the viewport.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "bottom",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "center",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "top",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "close",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "close() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Close an active FAB list container.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/fab-button/fab-button.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-fab-button",
|
||
"readme": "# ion-fab-button\n\nFloating 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:\n",
|
||
"docs": "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:",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
},
|
||
{
|
||
"text": "native - The native HTML button or anchor element that wraps all child elements.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "close-icon - The close icon that is displayed when a fab list opens (uses ion-icon).",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<ion-content>\n\n <!-- Fixed Floating Action Button that does not scroll with the content -->\n <ion-fab slot=\"fixed\">\n <ion-fab-button>Button</ion-fab-button>\n </ion-fab>\n\n <!-- Default Floating Action Button that scrolls with the content.-->\n <ion-fab-button>Default</ion-fab-button>\n\n <!-- Mini -->\n <ion-fab-button size=\"small\">Mini</ion-fab-button>\n\n <!-- Colors -->\n <ion-fab-button color=\"primary\">Primary</ion-fab-button>\n <ion-fab-button color=\"secondary\">Secondary</ion-fab-button>\n <ion-fab-button color=\"danger\">Danger</ion-fab-button>\n <ion-fab-button color=\"light\">Light</ion-fab-button>\n <ion-fab-button color=\"dark\">Dark</ion-fab-button>\n\n</ion-content>\n```\n",
|
||
"javascript": "```html\n<ion-content>\n\n <!-- Fixed Floating Action Button that does not scroll with the content -->\n <ion-fab slot=\"fixed\">\n <ion-fab-button>Button</ion-fab-button>\n </ion-fab>\n\n <!-- Default Floating Action Button that scrolls with the content.-->\n <ion-fab-button>Default</ion-fab-button>\n\n <!-- Mini -->\n <ion-fab-button size=\"small\">Mini</ion-fab-button>\n\n <!-- Colors -->\n <ion-fab-button color=\"primary\">Primary</ion-fab-button>\n <ion-fab-button color=\"secondary\">Secondary</ion-fab-button>\n <ion-fab-button color=\"danger\">Danger</ion-fab-button>\n <ion-fab-button color=\"light\">Light</ion-fab-button>\n <ion-fab-button color=\"dark\">Dark</ion-fab-button>\n\n</ion-content>\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonContent, IonFab, IonFabButton } from '@ionic/react';\n\nexport const FabButtonExample: React.FC = () => (\n <IonContent>\n {/*-- Fixed Floating Action Button that does not scroll with the content --*/}\n <IonFab slot=\"fixed\">\n <IonFabButton>Button</IonFabButton>\n </IonFab>\n\n {/*-- Default Floating Action Button that scrolls with the content.--*/}\n <IonFabButton>Default</IonFabButton>\n\n {/*-- Mini --*/}\n <IonFabButton size=\"small\">Mini</IonFabButton>\n\n {/*-- Colors --*/}\n <IonFabButton color=\"primary\">Primary</IonFabButton>\n <IonFabButton color=\"secondary\">Secondary</IonFabButton>\n <IonFabButton color=\"danger\">Danger</IonFabButton>\n <IonFabButton color=\"light\">Light</IonFabButton>\n <IonFabButton color=\"dark\">Dark</IonFabButton>\n </IonContent>\n);\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'fab-button-example',\n styleUrl: 'fab-button-example.css'\n})\nexport class FabButtonExample {\n render() {\n return [\n <ion-content>\n\n {/* Fixed Floating Action Button that does not scroll with the content */}\n <ion-fab slot=\"fixed\">\n <ion-fab-button>Button</ion-fab-button>\n </ion-fab>\n\n {/* Default Floating Action Button that scrolls with the content */}\n <ion-fab-button>Default</ion-fab-button>\n\n {/* Mini */}\n <ion-fab-button size=\"small\">Mini</ion-fab-button>\n\n {/* Colors */}\n <ion-fab-button color=\"primary\">Primary</ion-fab-button>\n <ion-fab-button color=\"secondary\">Secondary</ion-fab-button>\n <ion-fab-button color=\"danger\">Danger</ion-fab-button>\n <ion-fab-button color=\"light\">Light</ion-fab-button>\n <ion-fab-button color=\"dark\">Dark</ion-fab-button>\n\n </ion-content>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-content>\n\n <!-- Fixed Floating Action Button that does not scroll with the content -->\n <ion-fab slot=\"fixed\">\n <ion-fab-button>Button</ion-fab-button>\n </ion-fab>\n\n <!-- Default Floating Action Button that scrolls with the content.-->\n <ion-fab-button>Default</ion-fab-button>\n\n <!-- Mini -->\n <ion-fab-button size=\"small\">Mini</ion-fab-button>\n\n <!-- Colors -->\n <ion-fab-button color=\"primary\">Primary</ion-fab-button>\n <ion-fab-button color=\"secondary\">Secondary</ion-fab-button>\n <ion-fab-button color=\"danger\">Danger</ion-fab-button>\n <ion-fab-button color=\"light\">Light</ion-fab-button>\n <ion-fab-button color=\"dark\">Dark</ion-fab-button>\n\n </ion-content>\n</template>\n\n<script>\nimport { IonContent, IonFab, IonFabButton } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonContent, IonFab, IonFabButton }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "activated",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "activated",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the fab button will be show a close icon.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "closeIcon",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "close-icon",
|
||
"reflectToAttr": false,
|
||
"docs": "The icon name to use for the close icon. This will appear when the fab button\nis pressed. Only applies if it is the main button inside of a fab containing a\nfab list.",
|
||
"docsTags": [],
|
||
"default": "'close'",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot interact with the fab button.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "download",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "download",
|
||
"reflectToAttr": false,
|
||
"docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "href",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "href",
|
||
"reflectToAttr": false,
|
||
"docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "rel",
|
||
"reflectToAttr": false,
|
||
"docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "routerAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "routerDirection",
|
||
"type": "\"back\" | \"forward\" | \"root\"",
|
||
"mutable": false,
|
||
"attr": "router-direction",
|
||
"reflectToAttr": false,
|
||
"docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
|
||
"docsTags": [],
|
||
"default": "'forward'",
|
||
"values": [
|
||
{
|
||
"value": "back",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "forward",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "root",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "show",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "show",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the fab button will show when in a fab-list.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "size",
|
||
"type": "\"small\" | undefined",
|
||
"mutable": false,
|
||
"attr": "size",
|
||
"reflectToAttr": false,
|
||
"docs": "The size of the button. Set this to `small` in order to have a mini fab button.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "small",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "target",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "target",
|
||
"reflectToAttr": false,
|
||
"docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "translucent",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "translucent",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the fab button will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "type",
|
||
"type": "\"button\" | \"reset\" | \"submit\"",
|
||
"mutable": false,
|
||
"attr": "type",
|
||
"reflectToAttr": false,
|
||
"docs": "The type of the button.",
|
||
"docsTags": [],
|
||
"default": "'button'",
|
||
"values": [
|
||
{
|
||
"value": "button",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "reset",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "submit",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [
|
||
{
|
||
"event": "ionBlur",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the button loses focus.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionFocus",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the button has focus.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the button"
|
||
},
|
||
{
|
||
"name": "--background-activated",
|
||
"annotation": "prop",
|
||
"docs": "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple."
|
||
},
|
||
{
|
||
"name": "--background-activated-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the button background when pressed"
|
||
},
|
||
{
|
||
"name": "--background-focused",
|
||
"annotation": "prop",
|
||
"docs": "Background of the button when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--background-focused-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the button background when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--background-hover",
|
||
"annotation": "prop",
|
||
"docs": "Background of the button on hover"
|
||
},
|
||
{
|
||
"name": "--background-hover-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the button background on hover"
|
||
},
|
||
{
|
||
"name": "--border-color",
|
||
"annotation": "prop",
|
||
"docs": "Border color of the button"
|
||
},
|
||
{
|
||
"name": "--border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Border radius of the button"
|
||
},
|
||
{
|
||
"name": "--border-style",
|
||
"annotation": "prop",
|
||
"docs": "Border style of the button"
|
||
},
|
||
{
|
||
"name": "--border-width",
|
||
"annotation": "prop",
|
||
"docs": "Border width of the button"
|
||
},
|
||
{
|
||
"name": "--box-shadow",
|
||
"annotation": "prop",
|
||
"docs": "Box shadow of the button"
|
||
},
|
||
{
|
||
"name": "--close-icon-font-size",
|
||
"annotation": "prop",
|
||
"docs": "Font size of the close icon"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Text color of the button"
|
||
},
|
||
{
|
||
"name": "--color-activated",
|
||
"annotation": "prop",
|
||
"docs": "Text color of the button when pressed"
|
||
},
|
||
{
|
||
"name": "--color-focused",
|
||
"annotation": "prop",
|
||
"docs": "Text color of the button when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--color-hover",
|
||
"annotation": "prop",
|
||
"docs": "Text color of the button on hover"
|
||
},
|
||
{
|
||
"name": "--padding-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom padding of the button"
|
||
},
|
||
{
|
||
"name": "--padding-end",
|
||
"annotation": "prop",
|
||
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button"
|
||
},
|
||
{
|
||
"name": "--padding-start",
|
||
"annotation": "prop",
|
||
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button"
|
||
},
|
||
{
|
||
"name": "--padding-top",
|
||
"annotation": "prop",
|
||
"docs": "Top padding of the button"
|
||
},
|
||
{
|
||
"name": "--ripple-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the button ripple effect"
|
||
},
|
||
{
|
||
"name": "--transition",
|
||
"annotation": "prop",
|
||
"docs": "Transition of the button"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [
|
||
{
|
||
"name": "close-icon",
|
||
"docs": "The close icon that is displayed when a fab list opens (uses ion-icon)."
|
||
},
|
||
{
|
||
"name": "native",
|
||
"docs": "The native HTML button or anchor element that wraps all child elements."
|
||
}
|
||
],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-icon",
|
||
"ion-ripple-effect"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-fab-button": [
|
||
"ion-icon",
|
||
"ion-ripple-effect"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/fab-list/fab-list.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-fab-list",
|
||
"readme": "# ion-fab-list\n\nThe `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'\n",
|
||
"docs": "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'",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"angular": "```html\n<ion-fab vertical=\"center\" horizontal=\"center\">\n <ion-fab-button>Share</ion-fab-button>\n <ion-fab-list side=\"top\">\n <ion-fab-button>\n <ion-icon name=\"logo-facebook\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-twitter\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-youtube\"></ion-icon>\n </ion-fab-button>\n </ion-fab-list>\n\n <ion-fab-list side=\"end\">\n <ion-fab-button>\n <ion-icon name=\"logo-pwa\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-npm\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-ionic\"></ion-icon>\n </ion-fab-button>\n </ion-fab-list>\n\n <ion-fab-list side=\"bottom\">\n <ion-fab-button>\n <ion-icon name=\"logo-github\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-javascript\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-angular\"></ion-icon>\n </ion-fab-button>\n </ion-fab-list>\n\n <ion-fab-list side=\"start\">\n <ion-fab-button>\n <ion-icon name=\"logo-vimeo\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-chrome\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-react\"></ion-icon>\n </ion-fab-button>\n </ion-fab-list>\n</ion-fab>\n```\n",
|
||
"javascript": "```html\n<ion-fab vertical=\"center\" horizontal=\"center\">\n <ion-fab-button>Share</ion-fab-button>\n <ion-fab-list side=\"top\">\n <ion-fab-button>\n <ion-icon name=\"logo-facebook\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-twitter\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-youtube\"></ion-icon>\n </ion-fab-button>\n </ion-fab-list>\n\n <ion-fab-list side=\"end\">\n <ion-fab-button>\n <ion-icon name=\"logo-pwa\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-npm\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-ionic\"></ion-icon>\n </ion-fab-button>\n </ion-fab-list>\n\n <ion-fab-list side=\"bottom\">\n <ion-fab-button>\n <ion-icon name=\"logo-github\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-javascript\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-angular\"></ion-icon>\n </ion-fab-button>\n </ion-fab-list>\n\n <ion-fab-list side=\"start\">\n <ion-fab-button>\n <ion-icon name=\"logo-vimeo\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-chrome\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-react\"></ion-icon>\n </ion-fab-button>\n </ion-fab-list>\n</ion-fab>\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonFab, IonFabButton, IonFabList, IonContent, IonIcon } from '@ionic/react';\nimport { logoFacebook, logoTwitter, logoYoutube, logoPwa, logoNpm, logoIonic, logoGithub, logoJavascript, logoAngular, logoVimeo, logoChrome, logoReact } from 'ionicons/icons';\n\nexport const FabListExample: React.FC = () => (\n <IonContent>\n <IonFab vertical=\"center\" horizontal=\"center\">\n <IonFabButton>Share</IonFabButton>\n <IonFabList side=\"top\">\n <IonFabButton>\n <IonIcon icon={logoFacebook} />\n </IonFabButton>\n <IonFabButton>\n <IonIcon icon={logoTwitter} />\n </IonFabButton>\n <IonFabButton>\n <IonIcon icon={logoYoutube} />\n </IonFabButton>\n </IonFabList>\n\n <IonFabList side=\"end\">\n <IonFabButton>\n <IonIcon icon={logoPwa} />\n </IonFabButton>\n <IonFabButton>\n <IonIcon icon={logoNpm} />\n </IonFabButton>\n <IonFabButton>\n <IonIcon icon={logoIonic} />\n </IonFabButton>\n </IonFabList>\n\n <IonFabList side=\"bottom\">\n <IonFabButton>\n <IonIcon icon={logoGithub} />\n </IonFabButton>\n <IonFabButton>\n <IonIcon icon={logoJavascript} />\n </IonFabButton>\n <IonFabButton>\n <IonIcon icon={logoAngular} />\n </IonFabButton>\n </IonFabList>\n\n <IonFabList side=\"start\">\n <IonFabButton>\n <IonIcon icon={logoVimeo} />\n </IonFabButton>\n <IonFabButton>\n <IonIcon icon={logoChrome} />\n </IonFabButton>\n <IonFabButton>\n <IonIcon icon={logoReact} />\n </IonFabButton>\n </IonFabList>\n </IonFab>\n </IonContent>\n);\n\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'fab-list-example',\n styleUrl: 'fab-list-example.css'\n})\nexport class FabListExample {\n render() {\n return [\n <ion-fab vertical=\"center\" horizontal=\"center\">\n <ion-fab-button>Share</ion-fab-button>\n <ion-fab-list side=\"top\">\n <ion-fab-button>\n <ion-icon name=\"logo-facebook\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-twitter\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-youtube\"></ion-icon>\n </ion-fab-button>\n </ion-fab-list>\n\n <ion-fab-list side=\"end\">\n <ion-fab-button>\n <ion-icon name=\"logo-pwa\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-npm\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-ionic\"></ion-icon>\n </ion-fab-button>\n </ion-fab-list>\n\n <ion-fab-list side=\"bottom\">\n <ion-fab-button>\n <ion-icon name=\"logo-github\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-javascript\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-angular\"></ion-icon>\n </ion-fab-button>\n </ion-fab-list>\n\n <ion-fab-list side=\"start\">\n <ion-fab-button>\n <ion-icon name=\"logo-vimeo\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-chrome\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button>\n <ion-icon name=\"logo-react\"></ion-icon>\n </ion-fab-button>\n </ion-fab-list>\n </ion-fab>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-fab vertical=\"bottom\" horizontal=\"end\">\n <ion-fab-button>Share</ion-fab-button>\n\n <ion-fab-list side=\"top\">\n <ion-fab-button>Facebook</ion-fab-button>\n <ion-fab-button>Twitter</ion-fab-button>\n <ion-fab-button>Youtube</ion-fab-button>\n </ion-fab-list>\n\n <ion-fab-list side=\"start\">\n <ion-fab-button>Vimeo</ion-fab-button>\n </ion-fab-list>\n\n </ion-fab>\n</template>\n\n<script>\nimport { IonFab, IonFabButton, IonFabList } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonFab, IonFabButton, IonFabList }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "activated",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "activated",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the fab list will show all fab buttons in the list.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "side",
|
||
"type": "\"bottom\" | \"end\" | \"start\" | \"top\"",
|
||
"mutable": false,
|
||
"attr": "side",
|
||
"reflectToAttr": false,
|
||
"docs": "The side the fab list will show on relative to the main fab button.",
|
||
"docsTags": [],
|
||
"default": "'bottom'",
|
||
"values": [
|
||
{
|
||
"value": "bottom",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "end",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "start",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "top",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/footer/footer.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-footer",
|
||
"readme": "# ion-footer\n\nFooter 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.\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<ion-content></ion-content>\n\n<!-- Footer without a border -->\n<ion-footer class=\"ion-no-border\">\n <ion-toolbar>\n <ion-title>Footer - No Border</ion-title>\n </ion-toolbar>\n</ion-footer>\n\n<ion-footer>\n <ion-toolbar>\n <ion-title>Footer</ion-title>\n </ion-toolbar>\n</ion-footer>\n```\n",
|
||
"javascript": "```html\n<ion-content></ion-content>\n\n<!-- Footer without a border -->\n<ion-footer class=\"ion-no-border\">\n <ion-toolbar>\n <ion-title>Footer - No Border</ion-title>\n </ion-toolbar>\n</ion-footer>\n\n<ion-footer>\n <ion-toolbar>\n <ion-title>Footer</ion-title>\n </ion-toolbar>\n</ion-footer>\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react';\n\nexport const FooterExample: React.FC = () => (\n <>\n <IonContent />\n \n {/*-- Footer without a border --*/}\n <IonFooter className=\"ion-no-border\">\n <IonToolbar>\n <IonTitle>Footer - No Border</IonTitle>\n </IonToolbar>\n </IonFooter>\n\n <IonFooter>\n <IonToolbar>\n <IonTitle>Footer</IonTitle>\n </IonToolbar>\n </IonFooter>\n </>\n);\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'footer-example',\n styleUrl: 'footer-example.css'\n})\nexport class FooterExample {\n render() {\n return [\n <ion-content></ion-content>,\n\n // Footer without a border\n <ion-footer class=\"ion-no-border\">\n <ion-toolbar>\n <ion-title>Footer - No Border</ion-title>\n </ion-toolbar>\n </ion-footer>,\n\n <ion-footer>\n <ion-toolbar>\n <ion-title>Footer</ion-title>\n </ion-toolbar>\n </ion-footer>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <ion-content></ion-content>\n \n <!-- Footer without a border -->\n <ion-footer class=\"ion-no-border\">\n <ion-toolbar>\n <ion-title>Footer - No Border</ion-title>\n </ion-toolbar>\n </ion-footer>\n \n <ion-footer>\n <ion-toolbar>\n <ion-title>Footer</ion-title>\n </ion-toolbar>\n </ion-footer>\n</template>\n\n<script>\nimport { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonContent, IonFooter, IonTitle, IonToolbar }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "translucent",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "translucent",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the footer will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the footer, the `fullscreen`\nattribute needs to be set on the content.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/grid/grid.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-grid",
|
||
"readme": "# ion-grid\n\n\nThe 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.\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"angular": "```html\n<ion-grid>\n <ion-row>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"6\">\n ion-col [size=\"6\"]\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"3\">\n ion-col [size=\"3\"]\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col size=\"3\">\n ion-col [size=\"3\"]\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"3\">\n ion-col [size=\"3\"]\n </ion-col>\n <ion-col size=\"3\" offset=\"3\">\n ion-col [size=\"3\"] [offset=\"3\"]\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n <br>#\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n <br>#\n <br>#\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col class=\"ion-align-self-start\">\n ion-col [start]\n </ion-col>\n <ion-col class=\"ion-align-self-center\">\n ion-col [center]\n </ion-col>\n <ion-col class=\"ion-align-self-end\">\n ion-col [end]\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n <br>#\n </ion-col>\n </ion-row>\n\n <ion-row class=\"ion-align-items-start\">\n <ion-col>\n [start] ion-col\n </ion-col>\n <ion-col>\n [start] ion-col\n </ion-col>\n <ion-col class=\"ion-align-self-end\">\n [start] ion-col [end]\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n <br>#\n </ion-col>\n </ion-row>\n\n <ion-row class=\"ion-align-items-center\">\n <ion-col>\n [center] ion-col\n </ion-col>\n <ion-col>\n [center] ion-col\n </ion-col>\n <ion-col>\n [center] ion-col\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n <br>#\n </ion-col>\n </ion-row>\n\n <ion-row class=\"ion-align-items-end\">\n <ion-col>\n [end] ion-col\n </ion-col>\n <ion-col class=\"ion-align-self-start\">\n [end] ion-col [start]\n </ion-col>\n <ion-col>\n [end] ion-col\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n <br>#\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"12\" size-sm>\n ion-col [size=\"12\"] [size-sm]\n </ion-col>\n <ion-col size=\"12\" size-sm>\n ion-col [size=\"12\"] [size-sm]\n </ion-col>\n <ion-col size=\"12\" size-sm>\n ion-col [size=\"12\"] [size-sm]\n </ion-col>\n <ion-col size=\"12\" size-sm>\n ion-col [size=\"12\"] [size-sm]\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"12\" size-md>\n ion-col [size=\"12\"] [size-md]\n </ion-col>\n <ion-col size=\"12\" size-md>\n ion-col [size=\"12\"] [size-md]\n </ion-col>\n <ion-col size=\"12\" size-md>\n ion-col [size=\"12\"] [size-md]\n </ion-col>\n <ion-col size=\"12\" size-md>\n ion-col [size=\"12\"] [size-md]\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"6\" size-lg offset=\"3\">\n ion-col [size=\"6\"] [size-lg] [offset=\"3\"]\n </ion-col>\n <ion-col size=\"3\" size-lg>\n ion-col [size=\"3\"] [size-lg]\n </ion-col>\n </ion-row>\n</ion-grid>\n```",
|
||
"javascript": "```html\n<ion-grid>\n <ion-row>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"6\">\n ion-col [size=\"6\"]\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"3\">\n ion-col [size=\"3\"]\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col size=\"3\">\n ion-col [size=\"3\"]\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"3\">\n ion-col [size=\"3\"]\n </ion-col>\n <ion-col size=\"3\" offset=\"3\">\n ion-col [size=\"3\"] [offset=\"3\"]\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n <br>#\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n <br>#\n <br>#\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col class=\"ion-align-self-start\">\n ion-col [start]\n </ion-col>\n <ion-col class=\"ion-align-self-center\">\n ion-col [center]\n </ion-col>\n <ion-col class=\"ion-align-self-end\">\n ion-col [end]\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n <br>#\n </ion-col>\n </ion-row>\n\n <ion-row class=\"ion-align-items-start\">\n <ion-col>\n [start] ion-col\n </ion-col>\n <ion-col>\n [start] ion-col\n </ion-col>\n <ion-col class=\"ion-align-self-end\">\n [start] ion-col [end]\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n <br>#\n </ion-col>\n </ion-row>\n\n <ion-row class=\"ion-align-items-center\">\n <ion-col>\n [center] ion-col\n </ion-col>\n <ion-col>\n [center] ion-col\n </ion-col>\n <ion-col>\n [center] ion-col\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n <br>#\n </ion-col>\n </ion-row>\n\n <ion-row class=\"ion-align-items-end\">\n <ion-col>\n [end] ion-col\n </ion-col>\n <ion-col class=\"ion-align-self-start\">\n [end] ion-col [start]\n </ion-col>\n <ion-col>\n [end] ion-col\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n <br>#\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"12\" size-sm>\n ion-col [size=\"12\"] [size-sm]\n </ion-col>\n <ion-col size=\"12\" size-sm>\n ion-col [size=\"12\"] [size-sm]\n </ion-col>\n <ion-col size=\"12\" size-sm>\n ion-col [size=\"12\"] [size-sm]\n </ion-col>\n <ion-col size=\"12\" size-sm>\n ion-col [size=\"12\"] [size-sm]\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"12\" size-md>\n ion-col [size=\"12\"] [size-md]\n </ion-col>\n <ion-col size=\"12\" size-md>\n ion-col [size=\"12\"] [size-md]\n </ion-col>\n <ion-col size=\"12\" size-md>\n ion-col [size=\"12\"] [size-md]\n </ion-col>\n <ion-col size=\"12\" size-md>\n ion-col [size=\"12\"] [size-md]\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"6\" size-lg offset=\"3\">\n ion-col [size=\"6\"] [size-lg] [offset=\"3\"]\n </ion-col>\n <ion-col size=\"3\" size-lg>\n ion-col [size=\"3\"] [size-lg]\n </ion-col>\n </ion-row>\n</ion-grid>\n```",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonGrid, IonRow, IonCol, IonContent } from '@ionic/react';\n\nexport const GridExample: React.FC = () => (\n <IonContent>\n <IonGrid>\n <IonRow>\n <IonCol>ion-col</IonCol>\n <IonCol>ion-col</IonCol>\n <IonCol>ion-col</IonCol>\n <IonCol>ion-col</IonCol>\n </IonRow>\n\n <IonRow>\n <IonCol size=\"6\">ion-col size=\"6\"</IonCol>\n <IonCol>ion-col</IonCol>\n <IonCol>ion-col</IonCol>\n </IonRow>\n\n <IonRow>\n <IonCol size=\"3\">ion-col size=\"3\"</IonCol>\n <IonCol>ion-col</IonCol>\n <IonCol size=\"3\">ion-col size=\"3\"</IonCol>\n </IonRow>\n\n <IonRow>\n <IonCol size=\"3\">ion-col size=\"3\"</IonCol>\n <IonCol size=\"3\" offset=\"3\">\n ion-col size=\"3\" offset=\"3\"\n </IonCol>\n </IonRow>\n\n <IonRow>\n <IonCol>ion-col</IonCol>\n <IonCol>\n ion-col\n <br />#\n </IonCol>\n <IonCol>\n ion-col\n <br />#\n <br />#\n </IonCol>\n <IonCol>\n ion-col\n <br />#\n <br />#\n <br />#\n </IonCol>\n </IonRow>\n\n <IonRow>\n <IonCol className=\"ion-align-self-start\">ion-col start</IonCol>\n <IonCol className=\"ion-align-self-center\">ion-col center</IonCol>\n <IonCol className=\"ion-align-self-end\">ion-col end</IonCol>\n <IonCol>\n ion-col\n <br />#\n <br />#\n </IonCol>\n </IonRow>\n\n <IonRow className=\"ion-align-items-start\">\n <IonCol>start ion-col</IonCol>\n <IonCol>start ion-col</IonCol>\n <IonCol className=\"ion-align-self-end\">start ion-col end</IonCol>\n <IonCol>\n ion-col\n <br />#\n <br />#\n </IonCol>\n </IonRow>\n\n <IonRow className=\"ion-align-items-center\">\n <IonCol>center ion-col</IonCol>\n <IonCol>center ion-col</IonCol>\n <IonCol>center ion-col</IonCol>\n <IonCol>\n ion-col\n <br />#\n <br />#\n </IonCol>\n </IonRow>\n\n <IonRow className=\"ion-align-items-end\">\n <IonCol>end ion-col</IonCol>\n <IonCol className=\"ion-align-self-start\">end ion-col start</IonCol>\n <IonCol>end ion-col</IonCol>\n <IonCol>\n ion-col\n <br />#\n <br />#\n </IonCol>\n </IonRow>\n\n <IonRow>\n <IonCol size=\"12\" size-sm>\n ion-col size=\"12\" size-sm\n </IonCol>\n <IonCol size=\"12\" size-sm>\n ion-col size=\"12\" size-sm\n </IonCol>\n <IonCol size=\"12\" size-sm>\n ion-col size=\"12\" size-sm\n </IonCol>\n <IonCol size=\"12\" size-sm>\n ion-col size=\"12\" size-sm\n </IonCol>\n </IonRow>\n\n <IonRow>\n <IonCol size=\"12\" size-md>\n ion-col size=\"12\" size-md\n </IonCol>\n <IonCol size=\"12\" size-md>\n ion-col size=\"12\" size-md\n </IonCol>\n <IonCol size=\"12\" size-md>\n ion-col size=\"12\" size-md\n </IonCol>\n <IonCol size=\"12\" size-md>\n ion-col size=\"12\" size-md\n </IonCol>\n </IonRow>\n\n <IonRow>\n <IonCol size=\"6\" size-lg offset=\"3\">\n ion-col size=\"6\" size-lg offset=\"3\"\n </IonCol>\n <IonCol size=\"3\" size-lg>\n ion-col size=\"3\" size-lg\n </IonCol>\n </IonRow>\n </IonGrid>\n </IonContent>\n);\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'grid-example',\n styleUrl: 'grid-example.css'\n})\nexport class GridExample {\n render() {\n return [\n <ion-grid>\n <ion-row>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"6\">\n ion-col [size=\"6\"]\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"3\">\n ion-col [size=\"3\"]\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col size=\"3\">\n ion-col [size=\"3\"]\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"3\">\n ion-col [size=\"3\"]\n </ion-col>\n <ion-col size=\"3\" offset=\"3\">\n ion-col [size=\"3\"] [offset=\"3\"]\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col>\n ion-col\n <br/>#\n </ion-col>\n <ion-col>\n ion-col\n <br/>#\n <br/>#\n </ion-col>\n <ion-col>\n ion-col\n <br/>#\n <br/>#\n <br/>#\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col class=\"ion-align-self-start\">\n ion-col [start]\n </ion-col>\n <ion-col class=\"ion-align-self-center\">\n ion-col [center]\n </ion-col>\n <ion-col class=\"ion-align-self-end\">\n ion-col [end]\n </ion-col>\n <ion-col>\n ion-col\n <br/>#\n <br/>#\n </ion-col>\n </ion-row>\n\n <ion-row class=\"ion-align-items-start\">\n <ion-col>\n [start] ion-col\n </ion-col>\n <ion-col>\n [start] ion-col\n </ion-col>\n <ion-col class=\"ion-align-self-end\">\n [start] ion-col [end]\n </ion-col>\n <ion-col>\n ion-col\n <br/>#\n <br/>#\n </ion-col>\n </ion-row>\n\n <ion-row class=\"ion-align-items-center\">\n <ion-col>\n [center] ion-col\n </ion-col>\n <ion-col>\n [center] ion-col\n </ion-col>\n <ion-col>\n [center] ion-col\n </ion-col>\n <ion-col>\n ion-col\n <br/>#\n <br/>#\n </ion-col>\n </ion-row>\n\n <ion-row class=\"ion-align-items-end\">\n <ion-col>\n [end] ion-col\n </ion-col>\n <ion-col class=\"ion-align-self-start\">\n [end] ion-col [start]\n </ion-col>\n <ion-col>\n [end] ion-col\n </ion-col>\n <ion-col>\n ion-col\n <br/>#\n <br/>#\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"12\" sizeSm=\"\">\n ion-col [size=\"12\"] [sizeSm]\n </ion-col>\n <ion-col size=\"12\" sizeSm=\"\">\n ion-col [size=\"12\"] [sizeSm]\n </ion-col>\n <ion-col size=\"12\" sizeSm=\"\">\n ion-col [size=\"12\"] [sizeSm]\n </ion-col>\n <ion-col size=\"12\" sizeSm=\"\">\n ion-col [size=\"12\"] [sizeSm]\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"12\" sizeMd=\"\">\n ion-col [size=\"12\"] [sizeMd]\n </ion-col>\n <ion-col size=\"12\" sizeMd=\"\">\n ion-col [size=\"12\"] [sizeMd]\n </ion-col>\n <ion-col size=\"12\" sizeMd=\"\">\n ion-col [size=\"12\"] [sizeMd]\n </ion-col>\n <ion-col size=\"12\" sizeMd=\"\">\n ion-col [size=\"12\"] [sizeMd]\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"6\" sizeLg=\"\" offset=\"3\">\n ion-col [size=\"6\"] [sizeLg] [offset=\"3\"]\n </ion-col>\n <ion-col size=\"3\" sizeLg=\"\">\n ion-col [size=\"3\"] [sizeLg]\n </ion-col>\n </ion-row>\n </ion-grid>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <ion-grid>\n <ion-row>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"6\">\n ion-col [size=\"6\"]\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"3\">\n ion-col [size=\"3\"]\n </ion-col>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col size=\"3\">\n ion-col [size=\"3\"]\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"3\">\n ion-col [size=\"3\"]\n </ion-col>\n <ion-col size=\"3\" offset=\"3\">\n ion-col [size=\"3\"] [offset=\"3\"]\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>\n ion-col\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n <br>#\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n <br>#\n <br>#\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col class=\"ion-align-self-start\">\n ion-col [start]\n </ion-col>\n <ion-col class=\"ion-align-self-center\">\n ion-col [center]\n </ion-col>\n <ion-col class=\"ion-align-self-end\">\n ion-col [end]\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n <br>#\n </ion-col>\n </ion-row>\n\n <ion-row class=\"ion-align-items-start\">\n <ion-col>\n [start] ion-col\n </ion-col>\n <ion-col>\n [start] ion-col\n </ion-col>\n <ion-col class=\"ion-align-self-end\">\n [start] ion-col [end]\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n <br>#\n </ion-col>\n </ion-row>\n\n <ion-row class=\"ion-align-items-center\">\n <ion-col>\n [center] ion-col\n </ion-col>\n <ion-col>\n [center] ion-col\n </ion-col>\n <ion-col>\n [center] ion-col\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n <br>#\n </ion-col>\n </ion-row>\n\n <ion-row class=\"ion-align-items-end\">\n <ion-col>\n [end] ion-col\n </ion-col>\n <ion-col class=\"ion-align-self-start\">\n [end] ion-col [start]\n </ion-col>\n <ion-col>\n [end] ion-col\n </ion-col>\n <ion-col>\n ion-col\n <br>#\n <br>#\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"12\" size-sm>\n ion-col [size=\"12\"] [size-sm]\n </ion-col>\n <ion-col size=\"12\" size-sm>\n ion-col [size=\"12\"] [size-sm]\n </ion-col>\n <ion-col size=\"12\" size-sm>\n ion-col [size=\"12\"] [size-sm]\n </ion-col>\n <ion-col size=\"12\" size-sm>\n ion-col [size=\"12\"] [size-sm]\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"12\" size-md>\n ion-col [size=\"12\"] [size-md]\n </ion-col>\n <ion-col size=\"12\" size-md>\n ion-col [size=\"12\"] [size-md]\n </ion-col>\n <ion-col size=\"12\" size-md>\n ion-col [size=\"12\"] [size-md]\n </ion-col>\n <ion-col size=\"12\" size-md>\n ion-col [size=\"12\"] [size-md]\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"6\" size-lg offset=\"3\">\n ion-col [size=\"6\"] [size-lg] [offset=\"3\"]\n </ion-col>\n <ion-col size=\"3\" size-lg>\n ion-col [size=\"3\"] [size-lg]\n </ion-col>\n </ion-row>\n </ion-grid>\n</template>\n\n<script>\nimport { IonCol, IonGrid, IonRow } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonCol, IonGrid, IonRow }\n});\n</script>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "fixed",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "fixed",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the grid will have a fixed width based on the screen size.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--ion-grid-padding",
|
||
"annotation": "prop",
|
||
"docs": "Padding for the Grid"
|
||
},
|
||
{
|
||
"name": "--ion-grid-padding-lg",
|
||
"annotation": "prop",
|
||
"docs": "Padding for the Grid on lg screens"
|
||
},
|
||
{
|
||
"name": "--ion-grid-padding-md",
|
||
"annotation": "prop",
|
||
"docs": "Padding for the Grid on md screens"
|
||
},
|
||
{
|
||
"name": "--ion-grid-padding-sm",
|
||
"annotation": "prop",
|
||
"docs": "Padding for the Grid on sm screens"
|
||
},
|
||
{
|
||
"name": "--ion-grid-padding-xl",
|
||
"annotation": "prop",
|
||
"docs": "Padding for the Grid on xl screens"
|
||
},
|
||
{
|
||
"name": "--ion-grid-padding-xs",
|
||
"annotation": "prop",
|
||
"docs": "Padding for the Grid on xs screens"
|
||
},
|
||
{
|
||
"name": "--ion-grid-width",
|
||
"annotation": "prop",
|
||
"docs": "Width of the fixed Grid"
|
||
},
|
||
{
|
||
"name": "--ion-grid-width-lg",
|
||
"annotation": "prop",
|
||
"docs": "Width of the fixed Grid on lg screens"
|
||
},
|
||
{
|
||
"name": "--ion-grid-width-md",
|
||
"annotation": "prop",
|
||
"docs": "Width of the fixed Grid on md screens"
|
||
},
|
||
{
|
||
"name": "--ion-grid-width-sm",
|
||
"annotation": "prop",
|
||
"docs": "Width of the fixed Grid on sm screens"
|
||
},
|
||
{
|
||
"name": "--ion-grid-width-xl",
|
||
"annotation": "prop",
|
||
"docs": "Width of the fixed Grid on xl screens"
|
||
},
|
||
{
|
||
"name": "--ion-grid-width-xs",
|
||
"annotation": "prop",
|
||
"docs": "Width of the fixed Grid on xs screens"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/header/header.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-header",
|
||
"readme": "# ion-header\n\nHeader 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\n\n\n",
|
||
"docs": "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",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n <ion-title>My Navigation Bar</ion-title>\n </ion-toolbar>\n\n <ion-toolbar>\n <ion-title>Subheader</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<!-- Header without a border -->\n<ion-header class=\"ion-no-border\">\n <ion-toolbar>\n <ion-title>Header - No Border</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content>\n <ion-header collapse=\"condense\">\n <ion-toolbar>\n <ion-title size=\"large\">My Navigation Bar</ion-title>\n </ion-toolbar>\n </ion-header>\n</ion-content>\n```\n",
|
||
"javascript": "```html\n<ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n <ion-title>My Navigation Bar</ion-title>\n </ion-toolbar>\n\n <ion-toolbar>\n <ion-title>Subheader</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<!-- Header without a border -->\n<ion-header class=\"ion-no-border\">\n <ion-toolbar>\n <ion-title>Header - No Border</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content>\n <ion-header collapse=\"condense\">\n <ion-toolbar>\n <ion-title size=\"large\">My Navigation Bar</ion-title>\n </ion-toolbar>\n </ion-header>\n</ion-content>\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonHeader, IonContent, IonToolbar, IonButtons, IonBackButton, IonTitle } from '@ionic/react';\n\nexport const HeaderExample: React.FC = () => (\n <>\n <IonHeader>\n <IonToolbar>\n <IonButtons slot=\"start\">\n <IonBackButton defaultHref=\"/\" />\n </IonButtons>\n <IonTitle>My Navigation Bar</IonTitle>\n </IonToolbar>\n \n <IonToolbar>\n <IonTitle>Subheader</IonTitle>\n </IonToolbar>\n </IonHeader>\n \n {/*-- Header without a border --*/}\n <IonHeader className=\"ion-no-border\">\n <IonToolbar>\n <IonTitle>Header - No Border</IonTitle>\n </IonToolbar>\n </IonHeader>\n \n <IonContent>\n <IonHeader collapse=\"condense\">\n <IonToolbar>\n <IonTitle size=\"large\">My Navigation Bar</IonTitle>\n </IonToolbar>\n </IonHeader>\n </IonContent>\n </>\n);\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'header-example',\n styleUrl: 'header-example.css'\n})\nexport class HeaderExample {\n render() {\n return [\n <ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n <ion-title>My Navigation Bar</ion-title>\n </ion-toolbar>\n\n <ion-toolbar>\n <ion-title>Subheader</ion-title>\n </ion-toolbar>\n </ion-header>,\n\n // Header without a border\n <ion-header class=\"ion-no-border\">\n <ion-toolbar>\n <ion-title>Header - No Border</ion-title>\n </ion-toolbar>\n </ion-header>,\n\n <ion-content>\n <ion-header collapse=\"condense\">\n <ion-toolbar>\n <ion-title size=\"large\">My Navigation Bar</ion-title>\n </ion-toolbar>\n </ion-header>\n </ion-content>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n <ion-title>My Navigation Bar</ion-title>\n </ion-toolbar>\n \n <ion-toolbar>\n <ion-title>Subheader</ion-title>\n </ion-toolbar>\n </ion-header>\n \n <!-- Header without a border -->\n <ion-header class=\"ion-no-border\">\n <ion-toolbar>\n <ion-title>Header - No Border</ion-title>\n </ion-toolbar>\n </ion-header>\n \n <ion-content>\n <ion-header collapse=\"condense\">\n <ion-toolbar>\n <ion-title size=\"large\">My Navigation Bar</ion-title>\n </ion-toolbar>\n </ion-header>\n </ion-content>\n</template>\n\n<script>\nimport { \n IonBackButton, \n IonButtons, \n IonContent, \n IonHeader, \n IonTitle, \n IonToolbar\n} from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { \n IonBackButton, \n IonButtons, \n IonContent, \n IonHeader, \n IonTitle, \n IonToolbar\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "collapse",
|
||
"type": "\"condense\" | undefined",
|
||
"mutable": false,
|
||
"attr": "collapse",
|
||
"reflectToAttr": false,
|
||
"docs": "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)",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "condense",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "translucent",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "translucent",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the header, the `fullscreen`\nattribute needs to be set on the content.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/img/img.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-img",
|
||
"readme": "# ion-img\n\nImg 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.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "image - The inner `img` element.",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<ion-list>\n <ion-item *ngFor=\"let item of items\">\n <ion-thumbnail slot=\"start\">\n <ion-img [src]=\"item.src\"></ion-img>\n </ion-thumbnail>\n <ion-label>{{item.text}}</ion-label>\n </ion-item>\n</ion-list>\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonList, IonItem, IonThumbnail, IonImg, IonLabel, IonContent } from '@ionic/react';\n\ntype Item = {\n src: string;\n text: string;\n};\nconst items: Item[] = [{ src: 'http://placekitten.com/g/200/300', text: 'a picture of a cat' }];\n\nexport const ImgExample: React.FC = () => (\n <IonContent>\n <IonList>\n {items.map((image, i) => (\n <IonItem key={i}>\n <IonThumbnail slot=\"start\">\n <IonImg src={image.src} />\n </IonThumbnail>\n <IonLabel>{image.text}</IonLabel>\n </IonItem>\n ))}\n </IonList>\n </IonContent>\n);\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'img-example',\n styleUrl: 'img-example.css'\n})\nexport class ImgExample {\n private items = [{\n 'text': 'Item 1',\n 'src': '/path/to/external/file.png'\n }, {\n 'text': 'Item 2',\n 'src': '/path/to/external/file.png'\n }, {\n 'text': 'Item 3',\n 'src': '/path/to/external/file.png'\n }];\n\n render() {\n return [\n <ion-list>\n {this.items.map(item =>\n <ion-item>\n <ion-thumbnail slot=\"start\">\n <ion-img src={item.src}></ion-img>\n </ion-thumbnail>\n <ion-label>{item.text}</ion-label>\n </ion-item>\n )}\n </ion-list>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-list>\n <ion-item v-for=\"item in items\" :key=\"item.src\">\n <ion-thumbnail slot=\"start\">\n <ion-img :src=\"item.src\"></ion-img>\n </ion-thumbnail>\n <ion-label>{{item.text}}</ion-label>\n </ion-item>\n </ion-list>\n</template>\n\n<script>\nimport { IonImg, IonItem, IonLabel, IonList, IonThumbnail } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonImg, IonItem, IonLabel, IonList, IonThumbnail },\n setup() {\n const items = [{\n 'text': 'Item 1',\n 'src': '/path/to/external/file.png'\n }, {\n 'text': 'Item 2',\n 'src': '/path/to/external/file.png'\n }, {\n 'text': 'Item 3',\n 'src': '/path/to/external/file.png'\n }];\n return { items }\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "alt",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "alt",
|
||
"reflectToAttr": false,
|
||
"docs": "This attribute defines the alternative text describing the image.\nUsers will see this text displayed if the image URL is wrong,\nthe image is not in one of the supported formats, or if the image is not yet downloaded.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "src",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "src",
|
||
"reflectToAttr": false,
|
||
"docs": "The image URL. This attribute is mandatory for the `<img>` element.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [
|
||
{
|
||
"event": "ionError",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the img fails to load",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionImgDidLoad",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the image has finished loading",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionImgWillLoad",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the img src has been set",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [
|
||
{
|
||
"name": "image",
|
||
"docs": "The inner `img` element."
|
||
}
|
||
],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/infinite-scroll/infinite-scroll.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-infinite-scroll",
|
||
"readme": "# ion-infinite-scroll\n\nThe 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.\n\n## Infinite Scroll Content\n\nThe `ion-infinite-scroll` component has the infinite scroll logic. It requires a child component in order to display content. Ionic uses its `ion-infinite-scroll-content` component by default. This component displays the infinite scroll and changes the look depending on the infinite scroll's state. It displays a spinner that looks best based on the platform the user is on. However, the default spinner can be changed and text can be added by setting properties on the `ion-infinite-scroll-content` component.\n\n## Custom Content\n\nSeparating the `ion-infinite-scroll` and `ion-infinite-scroll-content` components allows developers to create their own content components, if desired. This content can contain anything, from an SVG element to elements with unique CSS animations.\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"angular": "```html\n<ion-content>\n <ion-button (click)=\"toggleInfiniteScroll()\" expand=\"block\">\n Toggle Infinite Scroll\n </ion-button>\n\n <ion-list></ion-list>\n\n <ion-infinite-scroll threshold=\"100px\" (ionInfinite)=\"loadData($event)\">\n <ion-infinite-scroll-content\n loadingSpinner=\"bubbles\"\n loadingText=\"Loading more data...\">\n </ion-infinite-scroll-content>\n </ion-infinite-scroll>\n</ion-content>\n```\n\n```typescript\nimport { Component, ViewChild } from '@angular/core';\nimport { IonInfiniteScroll } from '@ionic/angular';\n\n@Component({\n selector: 'infinite-scroll-example',\n templateUrl: 'infinite-scroll-example.html',\n styleUrls: ['./infinite-scroll-example.css']\n})\nexport class InfiniteScrollExample {\n @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;\n\n constructor() {}\n\n loadData(event) {\n setTimeout(() => {\n console.log('Done');\n event.target.complete();\n\n // App logic to determine if all data is loaded\n // and disable the infinite scroll\n if (data.length == 1000) {\n event.target.disabled = true;\n }\n }, 500);\n }\n\n toggleInfiniteScroll() {\n this.infiniteScroll.disabled = !this.infiniteScroll.disabled;\n }\n}\n```\n",
|
||
"javascript": "```html\n<ion-content>\n <ion-button onClick=\"toggleInfiniteScroll()\" expand=\"block\">\n Toggle Infinite Scroll\n </ion-button>\n\n <ion-list></ion-list>\n\n <ion-infinite-scroll threshold=\"100px\" id=\"infinite-scroll\">\n <ion-infinite-scroll-content\n loading-spinner=\"bubbles\"\n loading-text=\"Loading more data...\">\n </ion-infinite-scroll-content>\n </ion-infinite-scroll>\n</ion-content>\n```\n\n```javascript\nconst infiniteScroll = document.getElementById('infinite-scroll');\n\ninfiniteScroll.addEventListener('ionInfinite', function(event) {\n setTimeout(function() {\n console.log('Done');\n event.target.complete();\n\n // App logic to determine if all data is loaded\n // and disable the infinite scroll\n if (data.length == 1000) {\n event.target.disabled = true;\n }\n }, 500);\n});\n\nfunction toggleInfiniteScroll() {\n infiniteScroll.disabled = !infiniteScroll.disabled;\n}\n```\n",
|
||
"stencil": "```tsx\nimport { Component, State, h } from '@stencil/core';\n\n@Component({\n tag: 'infinite-scroll-example',\n styleUrl: 'infinite-scroll-example.css'\n})\nexport class InfiniteScrollExample {\n private infiniteScroll: HTMLIonInfiniteScrollElement;\n\n @State() data = [];\n\n componentWillLoad() {\n this.pushData();\n }\n\n pushData() {\n const max = this.data.length + 20;\n const min = max - 20;\n\n for (var i = min; i < max; i++) {\n this.data.push('Item ' + i);\n }\n\n // Stencil does not re-render when pushing to an array\n // so create a new copy of the array\n // https://stenciljs.com/docs/reactive-data#handling-arrays-and-objects\n this.data = [\n ...this.data\n ];\n }\n\n loadData(ev) {\n setTimeout(() => {\n this.pushData();\n console.log('Loaded data');\n ev.target.complete();\n\n // App logic to determine if all data is loaded\n // and disable the infinite scroll\n if (this.data.length == 1000) {\n ev.target.disabled = true;\n }\n }, 500);\n }\n\n toggleInfiniteScroll() {\n this.infiniteScroll.disabled = !this.infiniteScroll.disabled;\n }\n\n render() {\n return [\n <ion-content>\n <ion-button onClick={() => this.toggleInfiniteScroll()} expand=\"block\">\n Toggle Infinite Scroll\n </ion-button>\n\n <ion-list>\n {this.data.map(item =>\n <ion-item>\n <ion-label>{item}</ion-label>\n </ion-item>\n )}\n </ion-list>\n\n <ion-infinite-scroll\n ref={el => this.infiniteScroll = el}\n onIonInfinite={(ev) => this.loadData(ev)}>\n <ion-infinite-scroll-content\n loadingSpinner=\"bubbles\"\n loadingText=\"Loading more data...\">\n </ion-infinite-scroll-content>\n </ion-infinite-scroll>\n </ion-content>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-page>\n <ion-content class=\"ion-padding\">\n <ion-button @click=\"toggleInfiniteScroll\" expand=\"block\">\n Toggle Infinite Scroll\n </ion-button>\n \n <ion-list>\n <ion-item v-for=\"item in items\" :key=\"item\">\n <ion-label>{{ item }}</ion-label>\n </ion-item>\n </ion-list>\n \n <ion-infinite-scroll\n @ionInfinite=\"loadData($event)\" \n threshold=\"100px\" \n id=\"infinite-scroll\"\n :disabled=\"isDisabled\"\n >\n <ion-infinite-scroll-content\n loading-spinner=\"bubbles\"\n loading-text=\"Loading more data...\">\n </ion-infinite-scroll-content>\n </ion-infinite-scroll>\n </ion-content>\n </ion-page>\n</template>\n\n<script lang=\"ts\">\nimport { \n IonButton,\n IonContent, \n IonInfiniteScroll, \n IonInfiniteScrollContent,\n IonItem,\n IonLabel,\n IonList,\n IonPage\n } from '@ionic/vue';\nimport { defineComponent, ref } from 'vue';\n \nexport default defineComponent({\n components: {\n IonButton,\n IonContent, \n IonInfiniteScroll, \n IonInfiniteScrollContent,\n IonItem,\n IonLabel,\n IonList,\n IonPage\n },\n setup() {\n const isDisabled = ref(false);\n const toggleInfiniteScroll = () => {\n isDisabled.value = !isDisabled.value;\n }\n const items = ref([]);\n const pushData = () => {\n const max = items.value.length + 20;\n const min = max - 20;\n for (let i = min; i < max; i++) {\n items.value.push(i);\n }\n }\n \n const loadData = (ev: CustomEvent) => {\n setTimeout(() => {\n pushData();\n console.log('Loaded data');\n ev.target.complete();\n \n // App logic to determine if all data is loaded\n // and disable the infinite scroll\n if (items.value.length == 1000) {\n ev.target.disabled = true;\n }\n }, 500);\n }\n \n pushData();\n \n return {\n isDisabled,\n toggleInfiniteScroll,\n loadData,\n items\n }\n }\n});\n\n</script>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the infinite scroll will be hidden and scroll event listeners\nwill be removed.\n\nSet this to true to disable the infinite scroll from actively\ntrying to receive new data while scrolling. This is useful\nwhen it is known that there is no more data that can be added, and\nthe infinite scroll is no longer needed.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "position",
|
||
"type": "\"bottom\" | \"top\"",
|
||
"mutable": false,
|
||
"attr": "position",
|
||
"reflectToAttr": false,
|
||
"docs": "The position of the infinite scroll element.\nThe value can be either `top` or `bottom`.",
|
||
"docsTags": [],
|
||
"default": "'bottom'",
|
||
"values": [
|
||
{
|
||
"value": "bottom",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "top",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "threshold",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "threshold",
|
||
"reflectToAttr": false,
|
||
"docs": "The threshold distance from the bottom\nof the content to call the `infinite` output event when scrolled.\nThe threshold value can be either a percent, or\nin pixels. For example, use the value of `10%` for the `infinite`\noutput event to get called when the user has scrolled 10%\nfrom the bottom of the page. Use the value `100px` when the\nscroll is within 100 pixels from the bottom of the page.",
|
||
"docsTags": [],
|
||
"default": "'15%'",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "complete",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "complete() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Call `complete()` within the `ionInfinite` output event handler when\nyour async operation has completed. For example, the `loading`\nstate is while the app is performing an asynchronous operation,\nsuch as receiving more data from an AJAX request to add more items\nto a data list. Once the data has been received and UI updated, you\nthen call this method to signify that the loading has completed.\nThis method will change the infinite scroll's state from `loading`\nto `enabled`.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionInfinite",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the scroll reaches\nthe threshold distance. From within your infinite handler,\nyou must call the infinite scroll's `complete()` method when\nyour async operation has completed.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/infinite-scroll-content/infinite-scroll-content.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-infinite-scroll-content",
|
||
"readme": "# ion-infinite-scroll-content\n\nThe `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.\n\n## React\n\nThe `ion-infinite-scroll-content` component is not supported in React.\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"angular": "```html\n<ion-content>\n <ion-infinite-scroll>\n <ion-infinite-scroll-content\n loadingSpinner=\"bubbles\"\n loadingText=\"Loading more data…\">\n </ion-infinite-scroll-content>\n </ion-infinite-scroll>\n</ion-content>\n```\n",
|
||
"javascript": "```html\n<ion-content>\n <ion-infinite-scroll>\n <ion-infinite-scroll-content\n loading-spinner=\"bubbles\"\n loading-text=\"Loading more data…\">\n </ion-infinite-scroll-content>\n </ion-infinite-scroll>\n</ion-content>\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'infinite-scroll-content-example',\n styleUrl: 'infinite-scroll-content-example.css'\n})\nexport class InfiniteScrollContentExample {\n render() {\n return [\n <ion-content>\n <ion-infinite-scroll>\n <ion-infinite-scroll-content\n loadingSpinner=\"bubbles\"\n loadingText=\"Loading more data...\">\n </ion-infinite-scroll-content>\n </ion-infinite-scroll>\n </ion-content>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-page>\n <ion-content>\n <ion-infinite-scroll>\n <ion-infinite-scroll-content\n loading-spinner=\"bubbles\"\n loading-text=\"Loading more data…\">\n </ion-infinite-scroll-content>\n </ion-infinite-scroll>\n </ion-content>\n </ion-page>\n</template>\n\n<script lang=\"ts\">\nimport {\n IonContent,\n IonInfiniteScroll,\n IonInfiniteScrollContent,\n IonPage\n } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: {\n IonContent,\n IonInfiniteScroll,\n IonInfiniteScrollContent,\n IonPage\n }\n});\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "loadingSpinner",
|
||
"type": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-small\" | null | undefined",
|
||
"mutable": true,
|
||
"attr": "loading-spinner",
|
||
"reflectToAttr": false,
|
||
"docs": "An animated SVG spinner that shows while loading.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "bubbles",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "circles",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "circular",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "crescent",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "dots",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "lines",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "lines-small",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "loadingText",
|
||
"type": "IonicSafeString | string | undefined",
|
||
"mutable": false,
|
||
"attr": "loading-text",
|
||
"reflectToAttr": false,
|
||
"docs": "Optional text to display while loading.\n`loadingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`<Ionic>`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "IonicSafeString"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-spinner"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-infinite-scroll-content": [
|
||
"ion-spinner"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/input/input.tsx",
|
||
"encapsulation": "scoped",
|
||
"tag": "ion-input",
|
||
"readme": "# ion-input\n\nThe 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.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<!-- Default Input -->\n<ion-input></ion-input>\n\n<!-- Input with value -->\n<ion-input value=\"custom\"></ion-input>\n\n<!-- Input with placeholder -->\n<ion-input placeholder=\"Enter Input\"></ion-input>\n\n<!-- Input with clear button when there is a value -->\n<ion-input clearInput value=\"clear me\"></ion-input>\n\n<!-- Number type input -->\n<ion-input type=\"number\" value=\"333\"></ion-input>\n\n<!-- Disabled input -->\n<ion-input value=\"Disabled\" disabled></ion-input>\n\n<!-- Readonly input -->\n<ion-input value=\"Readonly\" readonly></ion-input>\n\n<!-- Inputs with labels -->\n<ion-item>\n <ion-label>Default Label</ion-label>\n <ion-input></ion-input>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"floating\">Floating Label</ion-label>\n <ion-input></ion-input>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"fixed\">Fixed Label</ion-label>\n <ion-input></ion-input>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"stacked\">Stacked Label</ion-label>\n <ion-input></ion-input>\n</ion-item>\n```",
|
||
"javascript": "```html\n<!-- Default Input -->\n<ion-input></ion-input>\n\n<!-- Input with value -->\n<ion-input value=\"custom\"></ion-input>\n\n<!-- Input with placeholder -->\n<ion-input placeholder=\"Enter Input\"></ion-input>\n\n<!-- Input with clear button when there is a value -->\n<ion-input clear-input value=\"clear me\"></ion-input>\n\n<!-- Number type input -->\n<ion-input type=\"number\" value=\"333\"></ion-input>\n\n<!-- Disabled input -->\n<ion-input value=\"Disabled\" disabled></ion-input>\n\n<!-- Readonly input -->\n<ion-input value=\"Readonly\" readonly></ion-input>\n\n<!-- Inputs with labels -->\n<ion-item>\n <ion-label>Default Label</ion-label>\n <ion-input></ion-input>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"floating\">Floating Label</ion-label>\n <ion-input></ion-input>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"fixed\">Fixed Label</ion-label>\n <ion-input></ion-input>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"stacked\">Stacked Label</ion-label>\n <ion-input></ion-input>\n</ion-item>\n```",
|
||
"react": "```tsx\nimport React, { useState } from 'react';\nimport { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonInput, IonItem, IonLabel, IonList, IonItemDivider } from '@ionic/react';\n\nexport const InputExamples: React.FC = () => {\n\n const [text, setText] = useState<string>();\n const [number, setNumber] = useState<number>();\n\n return (\n <IonPage>\n <IonHeader>\n <IonToolbar>\n <IonTitle>IonInput Examples</IonTitle>\n </IonToolbar>\n </IonHeader>\n <IonContent>\n <IonList>\n <IonItemDivider>Default Input with Placeholder</IonItemDivider>\n <IonItem>\n <IonInput value={text} placeholder=\"Enter Input\" onIonChange={e => setText(e.detail.value!)}></IonInput>\n </IonItem>\n\n <IonItemDivider>Input with clear button when there is a value</IonItemDivider>\n <IonItem>\n <IonInput value={text} placeholder=\"Enter Input\" onIonChange={e => setText(e.detail.value!)} clearInput></IonInput>\n </IonItem>\n\n <IonItemDivider>Number type input</IonItemDivider>\n <IonItem>\n <IonInput type=\"number\" value={number} placeholder=\"Enter Number\" onIonChange={e => setNumber(parseInt(e.detail.value!, 10))}></IonInput>\n </IonItem>\n\n <IonItemDivider>Disabled input</IonItemDivider>\n <IonItem>\n <IonInput value={text} disabled></IonInput>\n </IonItem>\n\n <IonItemDivider>Readonly input</IonItemDivider>\n <IonItem>\n <IonInput value={text} readonly></IonInput>\n </IonItem>\n\n <IonItemDivider>Inputs with labels</IonItemDivider>\n\n <IonItem>\n <IonLabel>Default Label</IonLabel>\n <IonInput></IonInput>\n </IonItem>\n\n <IonItem>\n <IonLabel position=\"floating\">Floating Label</IonLabel>\n <IonInput value={text}></IonInput>\n </IonItem>\n\n <IonItem>\n <IonLabel position=\"fixed\">Fixed Label</IonLabel>\n <IonInput value={text}></IonInput>\n </IonItem>\n\n <IonItem>\n <IonLabel position=\"stacked\">Stacked Label</IonLabel>\n <IonInput value={text}> </IonInput>\n </IonItem>\n </IonList>\n </IonContent>\n </IonPage>\n );\n};\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'input-example',\n styleUrl: 'input-example.css'\n})\nexport class InputExample {\n render() {\n return [\n // Default Input\n <ion-input></ion-input>,\n\n // Input with value\n <ion-input value=\"custom\"></ion-input>,\n\n // Input with placeholder\n <ion-input placeholder=\"Enter Input\"></ion-input>,\n\n // Input with clear button when there is a value\n <ion-input clearInput value=\"clear me\"></ion-input>,\n\n // Number type input\n <ion-input type=\"number\" value=\"333\"></ion-input>,\n\n // Disabled input\n <ion-input value=\"Disabled\" disabled></ion-input>,\n\n // Readonly input\n <ion-input value=\"Readonly\" readonly></ion-input>,\n\n // Inputs with labels\n <ion-item>\n <ion-label>Default Label</ion-label>\n <ion-input></ion-input>\n </ion-item>,\n\n <ion-item>\n <ion-label position=\"floating\">Floating Label</ion-label>\n <ion-input></ion-input>\n </ion-item>,\n\n <ion-item>\n <ion-label position=\"fixed\">Fixed Label</ion-label>\n <ion-input></ion-input>\n </ion-item>,\n\n <ion-item>\n <ion-label position=\"stacked\">Stacked Label</ion-label>\n <ion-input></ion-input>\n </ion-item>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <!-- Default Input -->\n <ion-input></ion-input>\n\n <!-- Input with value -->\n <ion-input value=\"custom\"></ion-input>\n\n <!-- Input with placeholder -->\n <ion-input placeholder=\"Enter Input\"></ion-input>\n\n <!-- Input with clear button when there is a value -->\n <ion-input clear-input value=\"clear me\"></ion-input>\n\n <!-- Number type input -->\n <ion-input type=\"number\" value=\"333\"></ion-input>\n\n <!-- Disabled input -->\n <ion-input value=\"Disabled\" disabled></ion-input>\n\n <!-- Readonly input -->\n <ion-input value=\"Readonly\" readonly></ion-input>\n\n <!-- Inputs with labels -->\n <ion-item>\n <ion-label>Default Label</ion-label>\n <ion-input></ion-input>\n </ion-item>\n\n <ion-item>\n <ion-label position=\"floating\">Floating Label</ion-label>\n <ion-input></ion-input>\n </ion-item>\n\n <ion-item>\n <ion-label position=\"fixed\">Fixed Label</ion-label>\n <ion-input></ion-input>\n </ion-item>\n\n <ion-item>\n <ion-label position=\"stacked\">Stacked Label</ion-label>\n <ion-input></ion-input>\n </ion-item>\n</template>\n\n<script>\nimport { IonLabel, IonInput, IonItem } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonLabel, IonInput, IonItem }\n});\n</script>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "accept",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "accept",
|
||
"reflectToAttr": false,
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "autocapitalize",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "autocapitalize",
|
||
"reflectToAttr": false,
|
||
"docs": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.",
|
||
"docsTags": [],
|
||
"default": "'off'",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "autocomplete",
|
||
"type": "\"on\" | \"off\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"",
|
||
"mutable": false,
|
||
"attr": "autocomplete",
|
||
"reflectToAttr": false,
|
||
"docs": "Indicates whether the value of the control can be automatically completed by the browser.",
|
||
"docsTags": [],
|
||
"default": "'off'",
|
||
"values": [
|
||
{
|
||
"value": "on",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "off",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "name",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "honorific-prefix",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "given-name",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "additional-name",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "family-name",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "honorific-suffix",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "nickname",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "email",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "username",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "new-password",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "current-password",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "one-time-code",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "organization-title",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "organization",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "street-address",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "address-line1",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "address-line2",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "address-line3",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "address-level4",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "address-level3",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "address-level2",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "address-level1",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "country",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "country-name",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "postal-code",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "cc-name",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "cc-given-name",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "cc-additional-name",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "cc-family-name",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "cc-number",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "cc-exp",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "cc-exp-month",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "cc-exp-year",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "cc-csc",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "cc-type",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "transaction-currency",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "transaction-amount",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "language",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "bday",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "bday-day",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "bday-month",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "bday-year",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "sex",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "tel",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "tel-country-code",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "tel-national",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "tel-area-code",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "tel-local",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "tel-extension",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "impp",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "url",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "photo",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "autocorrect",
|
||
"type": "\"off\" | \"on\"",
|
||
"mutable": false,
|
||
"attr": "autocorrect",
|
||
"reflectToAttr": false,
|
||
"docs": "Whether auto correction should be enabled when the user is entering/editing the text value.",
|
||
"docsTags": [],
|
||
"default": "'off'",
|
||
"values": [
|
||
{
|
||
"value": "off",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "on",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "autofocus",
|
||
"reflectToAttr": false,
|
||
"docs": "This Boolean attribute lets you specify that a form control should have input focus when the page loads.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "clearInput",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "clear-input",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "clearOnEdit",
|
||
"type": "boolean | undefined",
|
||
"mutable": false,
|
||
"attr": "clear-on-edit",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "debounce",
|
||
"type": "number",
|
||
"mutable": false,
|
||
"attr": "debounce",
|
||
"reflectToAttr": false,
|
||
"docs": "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`.",
|
||
"docsTags": [],
|
||
"default": "0",
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot interact with the input.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "enterkeyhint",
|
||
"type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
|
||
"mutable": false,
|
||
"attr": "enterkeyhint",
|
||
"reflectToAttr": false,
|
||
"docs": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "done",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "enter",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "go",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "next",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "previous",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "search",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "send",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "inputmode",
|
||
"type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
|
||
"mutable": false,
|
||
"attr": "inputmode",
|
||
"reflectToAttr": false,
|
||
"docs": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "decimal",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "email",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "none",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "numeric",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "search",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "tel",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "text",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "url",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "max",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "max",
|
||
"reflectToAttr": false,
|
||
"docs": "The maximum value, which must not be less than its minimum (min attribute) value.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "maxlength",
|
||
"type": "number | undefined",
|
||
"mutable": false,
|
||
"attr": "maxlength",
|
||
"reflectToAttr": false,
|
||
"docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "min",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "min",
|
||
"reflectToAttr": false,
|
||
"docs": "The minimum value, which must not be greater than its maximum (max attribute) value.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "minlength",
|
||
"type": "number | undefined",
|
||
"mutable": false,
|
||
"attr": "minlength",
|
||
"reflectToAttr": false,
|
||
"docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "multiple",
|
||
"type": "boolean | undefined",
|
||
"mutable": false,
|
||
"attr": "multiple",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "name",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "name",
|
||
"reflectToAttr": false,
|
||
"docs": "The name of the control, which is submitted with the form data.",
|
||
"docsTags": [],
|
||
"default": "this.inputId",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "pattern",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "pattern",
|
||
"reflectToAttr": false,
|
||
"docs": "A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "placeholder",
|
||
"type": "null | string | undefined",
|
||
"mutable": false,
|
||
"attr": "placeholder",
|
||
"reflectToAttr": false,
|
||
"docs": "Instructional text that shows before the input has a value.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "readonly",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "readonly",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot modify the value.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "required",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "required",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user must fill in a value before submitting a form.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "size",
|
||
"type": "number | undefined",
|
||
"mutable": false,
|
||
"attr": "size",
|
||
"reflectToAttr": false,
|
||
"docs": "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "spellcheck",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "spellcheck",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the element will have its spelling and grammar checked.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "step",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "step",
|
||
"reflectToAttr": false,
|
||
"docs": "Works with the min and max attributes to limit the increments at which a value can be set.\nPossible values are: `\"any\"` or a positive floating point number.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "type",
|
||
"type": "\"date\" | \"datetime-local\" | \"email\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
|
||
"mutable": false,
|
||
"attr": "type",
|
||
"reflectToAttr": false,
|
||
"docs": "The type of control to display. The default type is text.",
|
||
"docsTags": [],
|
||
"default": "'text'",
|
||
"values": [
|
||
{
|
||
"value": "date",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "datetime-local",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "email",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "month",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "number",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "password",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "search",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "tel",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "text",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "time",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "url",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "week",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "null | number | string | undefined",
|
||
"mutable": true,
|
||
"attr": "value",
|
||
"reflectToAttr": false,
|
||
"docs": "The value of the input.",
|
||
"docsTags": [],
|
||
"default": "''",
|
||
"values": [
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "number"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "getInputElement",
|
||
"returns": {
|
||
"type": "Promise<HTMLInputElement>",
|
||
"docs": ""
|
||
},
|
||
"signature": "getInputElement() => Promise<HTMLInputElement>",
|
||
"parameters": [],
|
||
"docs": "Returns the native `<input>` element used under the hood.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "setFocus",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "setFocus() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Sets focus on the native `input` in `ion-input`. Use this method instead of the global\n`input.focus()`.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionBlur",
|
||
"detail": "FocusEvent",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the input loses focus.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionChange",
|
||
"detail": "InputChangeEventDetail",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the value has changed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionFocus",
|
||
"detail": "FocusEvent",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the input has focus.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionInput",
|
||
"detail": "KeyboardEvent",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when a keyboard input occurred.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the input"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the input text"
|
||
},
|
||
{
|
||
"name": "--padding-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom padding of the input"
|
||
},
|
||
{
|
||
"name": "--padding-end",
|
||
"annotation": "prop",
|
||
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input"
|
||
},
|
||
{
|
||
"name": "--padding-start",
|
||
"annotation": "prop",
|
||
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input"
|
||
},
|
||
{
|
||
"name": "--padding-top",
|
||
"annotation": "prop",
|
||
"docs": "Top padding of the input"
|
||
},
|
||
{
|
||
"name": "--placeholder-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the input placeholder text"
|
||
},
|
||
{
|
||
"name": "--placeholder-font-style",
|
||
"annotation": "prop",
|
||
"docs": "Font style of the input placeholder text"
|
||
},
|
||
{
|
||
"name": "--placeholder-font-weight",
|
||
"annotation": "prop",
|
||
"docs": "Font weight of the input placeholder text"
|
||
},
|
||
{
|
||
"name": "--placeholder-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the input placeholder text"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/item/item.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-item",
|
||
"readme": "# ion-item\n\nItems 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.\n\n## Clickable Items\n\nAn item is considered \"clickable\" if it has an `href` or `button` property set. Clickable items have a few visual differences that indicate they can be interacted with. For example, a clickable item receives the ripple effect upon activation in `md` mode, has a highlight when activated in `ios` mode, and has a [detail arrow](#detail-arrows) by default in `ios` mode.\n\n## Detail Arrows\n\nBy default [clickable items](#clickable-items) will display a right arrow icon on `ios` mode. To hide the right arrow icon on clickable elements, set the `detail` property to `false`. To show the right arrow icon on an item that doesn't display it naturally, set the `detail` property to `true`.\n\n<!--\n\nTODO add this functionality back as a css variable\n\nThis feature is not enabled by default on clickable items for the `md` mode, but it can be enabled by setting the following CSS variable:\n\n```css\n--item-detail-push-show: true;\n```\n\nSee the [theming documentation](/docs/theming/css-variables) for more information.\n\n-->\n\n\n## Item Placement\n\nItem uses named [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) in order to position content. This logic makes it possible to write a complex item with simple, understandable markup without having to worry about styling and positioning the elements.\n\nThe below chart details the item slots and where it will place the element inside of the item:\n\n| Slot | Description |\n|---------|-----------------------------------------------------------------------------|\n| `start` | Placed to the left of all other content in LTR, and to the `right` in RTL. |\n| `end` | Placed to the right of all other content in LTR, and to the `left` in RTL. |\n| none | Placed inside of the input wrapper. |\n\n\n### Text Alignment\n\nItems left align text and add an ellipsis when the text is wider than the item. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for classes that can be added to `<ion-item>` to transform the text.\n\n\n## Input Highlight\n\n### Highlight Height\n\nItems containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, `md` items have a highlight with a height set to `2px` and `ios` has no highlight (technically the height is set to `0`). The height can be changed using the `--highlight-height` CSS property. To turn off the highlight, set this variable to `0`. For more information on setting CSS properties, see the [theming documentation](/docs/theming/css-variables).\n\n### Highlight Color\n\nThe highlight color changes based on the item state, but all of the states use Ionic colors by default. When focused, the input highlight will use the `primary` color. If the input is valid it will use the `success` color, and invalid inputs will use the `danger` color. See the [CSS Custom Properties](#css-custom-properties) section below for the highlight color variables.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
},
|
||
{
|
||
"text": "- Content is placed between the named slots if provided without a slot.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "start - Content is placed to the left of the item text in LTR, and to the right in RTL.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "end - Content is placed to the right of the item text in LTR, and to the left in RTL.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "native - The native HTML button, anchor or div element that wraps all child elements.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "detail-icon - The chevron icon for the item. Only applies when `detail=\"true\"`.",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<!-- Default Item -->\n<ion-item>\n <ion-label>\n Item\n </ion-label>\n</ion-item>\n\n<!-- Item as a Button -->\n<ion-item button (click)=\"buttonClick()\">\n <ion-label>\n Button Item\n </ion-label>\n</ion-item>\n\n<!-- Item as an Anchor -->\n<ion-item href=\"https://www.ionicframework.com\">\n <ion-label>\n Anchor Item\n </ion-label>\n</ion-item>\n\n<ion-item color=\"secondary\">\n <ion-label>\n Secondary Color Item\n </ion-label>\n</ion-item>\n```\n\n### Detail Arrows\n\n```html\n<ion-item detail>\n <ion-label>\n Standard Item with Detail Arrow\n </ion-label>\n</ion-item>\n\n<ion-item button (click)=\"buttonClick()\" detail>\n <ion-label>\n Button Item with Detail Arrow\n </ion-label>\n</ion-item>\n\n<ion-item detail=\"false\" href=\"https://www.ionicframework.com\">\n <ion-label>\n Anchor Item with no Detail Arrow\n </ion-label>\n</ion-item>\n```\n\n### List Items\n\n```html\n<ion-list>\n <ion-item>\n <ion-label>\n Item\n </ion-label>\n </ion-item>\n\n <ion-item lines=\"none\">\n <ion-label>\n No Lines Item\n </ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label class=\"ion-text-wrap\">\n Multiline text that should wrap when it is too long\n to fit on one line in the item.\n </ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label class=\"ion-text-wrap\">\n <ion-text color=\"primary\">\n <h3>H3 Primary Title</h3>\n </ion-text>\n <p>Paragraph line 1</p>\n <ion-text color=\"secondary\">\n <p>Paragraph line 2 secondary</p>\n </ion-text>\n </ion-label>\n </ion-item>\n\n <ion-item lines=\"full\">\n <ion-label>\n Item with Full Lines\n </ion-label>\n </ion-item>\n\n</ion-list>\n```\n\n### Item Lines\n\n```html\n<!-- Item Inset Lines -->\n<ion-item lines=\"inset\">\n <ion-label>Item Lines Inset</ion-label>\n</ion-item>\n\n<!-- Item Full Lines -->\n<ion-item lines=\"full\">\n <ion-label>Item Lines Full</ion-label>\n</ion-item>\n\n<!-- Item None Lines -->\n<ion-item lines=\"none\">\n <ion-label>Item Lines None</ion-label>\n</ion-item>\n\n<!-- List Full Lines -->\n<ion-list lines=\"full\">\n <ion-item>\n <ion-label>Full Lines Item 1</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label>Full Lines Item 2</ion-label>\n </ion-item>\n</ion-list>\n\n<!-- List Inset Lines -->\n<ion-list lines=\"inset\">\n <ion-item>\n <ion-label>Inset Lines Item 1</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label>Inset Lines Item 2</ion-label>\n </ion-item>\n</ion-list>\n\n<!-- List No Lines -->\n<ion-list lines=\"none\">\n <ion-item>\n <ion-label>No lines Item 1</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label>No lines Item 2</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label>No lines Item 3</ion-label>\n </ion-item>\n</ion-list>\n```\n\n\n### Media Items\n\n```html\n<ion-item button (click)=\"testClick()\">\n <ion-avatar slot=\"start\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==\">\n </ion-avatar>\n <ion-label>\n Avatar Start, Button Item\n </ion-label>\n</ion-item>\n\n<ion-item href=\"#\">\n <ion-label>\n Thumbnail End, Anchor Item\n </ion-label>\n <ion-thumbnail slot=\"end\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==\">\n </ion-thumbnail>\n</ion-item>\n\n<ion-item>\n <ion-thumbnail slot=\"start\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==\">\n </ion-thumbnail>\n <ion-label>\n <h2>H2 Title Text</h2>\n <p>Button on right</p>\n </ion-label>\n <ion-button fill=\"outline\" slot=\"end\">View</ion-button>\n</ion-item>\n\n<ion-item button (click)=\"testClick()\">\n <ion-thumbnail slot=\"start\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==\">\n </ion-thumbnail>\n <ion-label>\n <h3>H3 Title Text</h3>\n <p>Icon on right</p>\n </ion-label>\n <ion-icon name=\"close-circle\" slot=\"end\"></ion-icon>\n</ion-item>\n```\n\n### Buttons in Items\n\n```html\n<ion-item>\n <ion-button slot=\"start\">\n Start\n </ion-button>\n <ion-label>Button Start/End</ion-label>\n <ion-button slot=\"end\">\n End\n </ion-button>\n</ion-item>\n\n<ion-item>\n <ion-button slot=\"start\">\n Start Icon\n <ion-icon name=\"home\" slot=\"end\"></ion-icon>\n </ion-button>\n <ion-label>Buttons with Icons</ion-label>\n <ion-button slot=\"end\">\n <ion-icon name=\"star\" slot=\"end\"></ion-icon>\n End Icon\n </ion-button>\n</ion-item>\n\n<ion-item>\n <ion-button slot=\"start\">\n <ion-icon slot=\"icon-only\" name=\"navigate\"></ion-icon>\n </ion-button>\n <ion-label>Icon only Buttons</ion-label>\n <ion-button slot=\"end\">\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-button>\n</ion-item>\n```\n\n### Icons in Items\n\n```html\n<ion-item>\n <ion-label>\n Icon End\n </ion-label>\n <ion-icon name=\"information-circle\" slot=\"end\"></ion-icon>\n</ion-item>\n\n<ion-item>\n <ion-label>\n Large Icon End\n </ion-label>\n <ion-icon name=\"information-circle\" size=\"large\" slot=\"end\"></ion-icon>\n</ion-item>\n\n<ion-item>\n <ion-label>\n Small Icon End\n </ion-label>\n <ion-icon name=\"information-circle\" size=\"small\" slot=\"end\"></ion-icon>\n</ion-item>\n\n<ion-item>\n <ion-icon name=\"star\" slot=\"start\"></ion-icon>\n <ion-label>\n Icon Start\n </ion-label>\n</ion-item>\n\n<ion-item>\n <ion-label>\n Two Icons End\n </ion-label>\n <ion-icon name=\"checkmark-circle\" slot=\"end\"></ion-icon>\n <ion-icon name=\"shuffle\" slot=\"end\"></ion-icon>\n</ion-item>\n```\n\n### Item Inputs\n\n```html\n<ion-item>\n <ion-label position=\"floating\">Datetime</ion-label>\n <ion-datetime></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"floating\">Select</ion-label>\n <ion-select>\n <ion-select-option value=\"\">No Game Console</ion-select-option>\n <ion-select-option value=\"nes\">NES</ion-select-option>\n <ion-select-option value=\"n64\" selected>Nintendo64</ion-select-option>\n <ion-select-option value=\"ps\">PlayStation</ion-select-option>\n <ion-select-option value=\"genesis\">Sega Genesis</ion-select-option>\n <ion-select-option value=\"saturn\">Sega Saturn</ion-select-option>\n <ion-select-option value=\"snes\">SNES</ion-select-option>\n </ion-select>\n</ion-item>\n\n<ion-item>\n <ion-label>Toggle</ion-label>\n <ion-toggle slot=\"end\"></ion-toggle>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"floating\">Floating Input</ion-label>\n <ion-input></ion-input>\n</ion-item>\n\n<ion-item>\n <ion-label>Input (placeholder)</ion-label>\n <ion-input placeholder=\"Placeholder\"></ion-input>\n</ion-item>\n\n<ion-item>\n <ion-label>Checkbox</ion-label>\n <ion-checkbox slot=\"start\"></ion-checkbox>\n</ion-item>\n\n<ion-item>\n <ion-label>Range</ion-label>\n <ion-range></ion-range>\n</ion-item>\n```\n",
|
||
"javascript": "```html\n<!-- Default Item -->\n<ion-item>\n <ion-label>\n Item\n </ion-label>\n</ion-item>\n\n<!-- Item as a Button -->\n<ion-item button onclick=\"buttonClick()\">\n <ion-label>\n Button Item\n </ion-label>\n</ion-item>\n\n<!-- Item as an Anchor -->\n<ion-item href=\"https://www.ionicframework.com\">\n <ion-label>\n Anchor Item\n </ion-label>\n</ion-item>\n\n<ion-item color=\"secondary\">\n <ion-label>\n Secondary Color Item\n </ion-label>\n</ion-item>\n```\n\n### Detail Arrows\n\n```html\n<ion-item detail>\n <ion-label>\n Standard Item with Detail Arrow\n </ion-label>\n</ion-item>\n\n<ion-item button onclick=\"buttonClick()\" detail>\n <ion-label>\n Button Item with Detail Arrow\n </ion-label>\n</ion-item>\n\n<ion-item detail=\"false\" href=\"https://www.ionicframework.com\">\n <ion-label>\n Anchor Item with no Detail Arrow\n </ion-label>\n</ion-item>\n```\n\n### List Items\n\n```html\n<ion-list>\n <ion-item>\n <ion-label>\n Item\n </ion-label>\n </ion-item>\n\n <ion-item lines=\"none\">\n <ion-label>\n No Lines Item\n </ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label class=\"ion-text-wrap\">\n Multiline text that should wrap when it is too long\n to fit on one line in the item.\n </ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label class=\"ion-text-wrap\">\n <ion-text color=\"primary\">\n <h3>H3 Primary Title</h3>\n </ion-text>\n <p>Paragraph line 1</p>\n <ion-text color=\"secondary\">\n <p>Paragraph line 2 secondary</p>\n </ion-text>\n </ion-label>\n </ion-item>\n\n <ion-item lines=\"full\">\n <ion-label>\n Item with Full Lines\n </ion-label>\n </ion-item>\n\n</ion-list>\n```\n\n### Item Lines\n\n```html\n<!-- Item Inset Lines -->\n<ion-item lines=\"inset\">\n <ion-label>Item Lines Inset</ion-label>\n</ion-item>\n\n<!-- Item Full Lines -->\n<ion-item lines=\"full\">\n <ion-label>Item Lines Full</ion-label>\n</ion-item>\n\n<!-- Item None Lines -->\n<ion-item lines=\"none\">\n <ion-label>Item Lines None</ion-label>\n</ion-item>\n\n<!-- List Full Lines -->\n<ion-list lines=\"full\">\n <ion-item>\n <ion-label>Full Lines Item 1</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label>Full Lines Item 2</ion-label>\n </ion-item>\n</ion-list>\n\n<!-- List Inset Lines -->\n<ion-list lines=\"inset\">\n <ion-item>\n <ion-label>Inset Lines Item 1</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label>Inset Lines Item 2</ion-label>\n </ion-item>\n</ion-list>\n\n<!-- List No Lines -->\n<ion-list lines=\"none\">\n <ion-item>\n <ion-label>No lines Item 1</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label>No lines Item 2</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label>No lines Item 3</ion-label>\n </ion-item>\n</ion-list>\n```\n\n\n### Media Items\n\n```html\n<ion-item button onclick=\"testClick()\">\n <ion-avatar slot=\"start\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==\">\n </ion-avatar>\n <ion-label>\n Avatar Start, Button Item\n </ion-label>\n</ion-item>\n\n<ion-item href=\"#\">\n <ion-label>\n Thumbnail End, Anchor Item\n </ion-label>\n <ion-thumbnail slot=\"end\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==\">\n </ion-thumbnail>\n</ion-item>\n\n<ion-item>\n <ion-thumbnail slot=\"start\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==\">\n </ion-thumbnail>\n <ion-label>\n <h2>H2 Title Text</h2>\n <p>Button on right</p>\n </ion-label>\n <ion-button fill=\"outline\" slot=\"end\">View</ion-button>\n</ion-item>\n\n<ion-item button onclick=\"testClick()\">\n <ion-thumbnail slot=\"start\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==\">\n </ion-thumbnail>\n <ion-label>\n <h3>H3 Title Text</h3>\n <p>Icon on right</p>\n </ion-label>\n <ion-icon name=\"close-circle\" slot=\"end\"></ion-icon>\n</ion-item>\n```\n\n### Buttons in Items\n\n```html\n<ion-item>\n <ion-button slot=\"start\">\n Start\n </ion-button>\n <ion-label>Button Start/End</ion-label>\n <ion-button slot=\"end\">\n End\n </ion-button>\n</ion-item>\n\n<ion-item>\n <ion-button slot=\"start\">\n Start Icon\n <ion-icon name=\"home\" slot=\"end\"></ion-icon>\n </ion-button>\n <ion-label>Buttons with Icons</ion-label>\n <ion-button slot=\"end\">\n <ion-icon name=\"star\" slot=\"end\"></ion-icon>\n End Icon\n </ion-button>\n</ion-item>\n\n<ion-item>\n <ion-button slot=\"start\">\n <ion-icon slot=\"icon-only\" name=\"navigate\"></ion-icon>\n </ion-button>\n <ion-label>Icon only Buttons</ion-label>\n <ion-button slot=\"end\">\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-button>\n</ion-item>\n```\n\n### Icons in Items\n\n```html\n<ion-item>\n <ion-label>\n Icon End\n </ion-label>\n <ion-icon name=\"information-circle\" slot=\"end\"></ion-icon>\n</ion-item>\n\n<ion-item>\n <ion-label>\n Large Icon End\n </ion-label>\n <ion-icon name=\"information-circle\" size=\"large\" slot=\"end\"></ion-icon>\n</ion-item>\n\n<ion-item>\n <ion-label>\n Small Icon End\n </ion-label>\n <ion-icon name=\"information-circle\" size=\"small\" slot=\"end\"></ion-icon>\n</ion-item>\n\n<ion-item>\n <ion-icon name=\"star\" slot=\"start\"></ion-icon>\n <ion-label>\n Icon Start\n </ion-label>\n</ion-item>\n\n<ion-item>\n <ion-label>\n Two Icons End\n </ion-label>\n <ion-icon name=\"checkmark-circle\" slot=\"end\"></ion-icon>\n <ion-icon name=\"shuffle\" slot=\"end\"></ion-icon>\n</ion-item>\n```\n\n### Item Inputs\n\n```html\n<ion-item>\n <ion-label position=\"floating\">Datetime</ion-label>\n <ion-datetime></ion-datetime>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"floating\">Select</ion-label>\n <ion-select>\n <ion-select-option value=\"\">No Game Console</ion-select-option>\n <ion-select-option value=\"nes\">NES</ion-select-option>\n <ion-select-option value=\"n64\" selected>Nintendo64</ion-select-option>\n <ion-select-option value=\"ps\">PlayStation</ion-select-option>\n <ion-select-option value=\"genesis\">Sega Genesis</ion-select-option>\n <ion-select-option value=\"saturn\">Sega Saturn</ion-select-option>\n <ion-select-option value=\"snes\">SNES</ion-select-option>\n </ion-select>\n</ion-item>\n\n<ion-item>\n <ion-label>Toggle</ion-label>\n <ion-toggle slot=\"end\"></ion-toggle>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"floating\">Floating Input</ion-label>\n <ion-input></ion-input>\n</ion-item>\n\n<ion-item>\n <ion-label>Input (placeholder)</ion-label>\n <ion-input placeholder=\"Placeholder\"></ion-input>\n</ion-item>\n\n<ion-item>\n <ion-label>Checkbox</ion-label>\n <ion-checkbox slot=\"start\"></ion-checkbox>\n</ion-item>\n\n<ion-item>\n <ion-label>Range</ion-label>\n <ion-range></ion-range>\n</ion-item>\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonItem, IonLabel, IonList, IonText, IonAvatar, IonThumbnail, IonButton, IonIcon, IonDatetime, IonSelect, IonSelectOption, IonToggle, IonInput, IonCheckbox, IonRange } from '@ionic/react';\nimport { closeCircle, home, star, navigate, informationCircle, checkmarkCircle, shuffle } from 'ionicons/icons';\n\nexport const ItemExamples: React.FC = () => {\n return (\n <IonPage>\n <IonHeader>\n <IonToolbar>\n <IonTitle>ItemExamples</IonTitle>\n </IonToolbar>\n </IonHeader>\n <IonContent>\n {/*-- Default Item --*/}\n <IonItem>\n <IonLabel>\n Item\n </IonLabel>\n </IonItem>\n\n {/*-- Item as a Button --*/}\n <IonItem button onClick={() => { }}>\n <IonLabel>\n Button Item\n </IonLabel>\n </IonItem>\n\n {/*-- Item as an Anchor --*/}\n <IonItem href=\"https://www.ionicframework.com\">\n <IonLabel>\n Anchor Item\n </IonLabel>\n </IonItem>\n\n <IonItem color=\"secondary\">\n <IonLabel>\n Secondary Color Item\n </IonLabel>\n </IonItem>\n\n {/*-- Detail Arrows --*/}\n <IonItem detail>\n <IonLabel>\n Standard Item with Detail Arrow\n </IonLabel>\n </IonItem>\n\n <IonItem button onClick={() => { }} detail>\n <IonLabel>\n Button Item with Detail Arrow\n </IonLabel>\n </IonItem>\n\n <IonItem detail={false} href=\"https://www.ionicframework.com\">\n <IonLabel>\n Anchor Item with no Detail Arrow\n </IonLabel>\n </IonItem>\n\n <IonList>\n <IonItem>\n <IonLabel>\n Item\n </IonLabel>\n </IonItem>\n\n <IonItem lines=\"none\">\n <IonLabel>\n No Lines Item\n </IonLabel>\n </IonItem>\n\n <IonItem>\n <IonLabel className=\"ion-text-wrap\">\n Multiline text that should wrap when it is too long\n to fit on one line in the item.\n </IonLabel>\n </IonItem>\n\n <IonItem>\n <IonLabel className=\"ion-text-wrap\">\n <IonText color=\"primary\">\n <h3>H3 Primary Title</h3>\n </IonText>\n <p>Paragraph line 1</p>\n <IonText color=\"secondary\">\n <p>Paragraph line 2 secondary</p>\n </IonText>\n </IonLabel>\n </IonItem>\n\n <IonItem lines=\"full\">\n <IonLabel>\n Item with Full Lines\n </IonLabel>\n </IonItem>\n </IonList>\n\n {/*-- Item Inset Lines --*/}\n <IonItem lines=\"inset\">\n <IonLabel>Item Lines Inset</IonLabel>\n </IonItem>\n\n {/*-- Item Full Lines --*/}\n <IonItem lines=\"full\">\n <IonLabel>Item Lines Full</IonLabel>\n </IonItem>\n\n {/*-- Item None Lines --*/}\n <IonItem lines=\"none\">\n <IonLabel>Item Lines None</IonLabel>\n </IonItem>\n\n {/*-- List Full Lines --*/}\n <IonList lines=\"full\">\n <IonItem>\n <IonLabel>Full Lines Item 1</IonLabel>\n </IonItem>\n\n <IonItem>\n <IonLabel>Full Lines Item 2</IonLabel>\n </IonItem>\n </IonList>\n\n {/*-- List Inset Lines --*/}\n <IonList lines=\"inset\">\n <IonItem>\n <IonLabel>Inset Lines Item 1</IonLabel>\n </IonItem>\n\n <IonItem>\n <IonLabel>Inset Lines Item 2</IonLabel>\n </IonItem>\n </IonList>\n\n {/*-- List No Lines --*/}\n <IonList lines=\"none\">\n <IonItem>\n <IonLabel>No lines Item 1</IonLabel>\n </IonItem>\n\n <IonItem>\n <IonLabel>No lines Item 2</IonLabel>\n </IonItem>\n\n <IonItem>\n <IonLabel>No lines Item 3</IonLabel>\n </IonItem>\n </IonList>\n\n <IonItem button onClick={() => { }}>\n <IonAvatar slot=\"start\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==\" />\n </IonAvatar>\n <IonLabel>\n Avatar Start, Button Item\n </IonLabel>\n </IonItem>\n\n <IonItem href=\"#\">\n <IonLabel>\n Thumbnail End, Anchor Item\n </IonLabel>\n <IonThumbnail slot=\"end\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==\" />\n </IonThumbnail>\n </IonItem>\n\n <IonItem>\n <IonThumbnail slot=\"start\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==\" />\n </IonThumbnail>\n <IonLabel>\n <h2>H2 Title Text</h2>\n <p>Button on right</p>\n </IonLabel>\n <IonButton fill=\"outline\" slot=\"end\">View</IonButton>\n </IonItem>\n\n <IonItem button onClick={() => { }}>\n <IonThumbnail slot=\"start\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==\" />\n </IonThumbnail>\n <IonLabel>\n <h3>H3 Title Text</h3>\n <p>Icon on right</p>\n </IonLabel>\n <IonIcon icon={closeCircle} slot=\"end\" />\n </IonItem>\n\n {/*-- Buttons in Items --*/}\n <IonItem>\n <IonButton slot=\"start\">\n Start\n </IonButton>\n <IonLabel>Button Start/End</IonLabel>\n <IonButton slot=\"end\">\n End\n </IonButton>\n </IonItem>\n\n <IonItem>\n <IonButton slot=\"start\">\n Start Icon\n <IonIcon icon={home} slot=\"end\" />>\n </IonButton>\n <IonLabel>Buttons with Icons</IonLabel>\n <IonButton slot=\"end\">\n <IonIcon icon={star} slot=\"end\" />\n End Icon\n </IonButton>\n </IonItem>\n\n <IonItem>\n <IonButton slot=\"start\">\n <IonIcon slot=\"icon-only\" icon={navigate} />\n </IonButton>\n <IonLabel>Icon only Buttons</IonLabel>\n <IonButton slot=\"end\">\n <IonIcon slot=\"icon-only\" icon={star} />\n </IonButton>\n </IonItem>\n\n <IonItem>\n <IonLabel>\n Icon End\n </IonLabel>\n <IonIcon icon={informationCircle} slot=\"end\" />\n </IonItem>\n\n <IonItem>\n <IonLabel>\n Large Icon End\n </IonLabel>\n <IonIcon icon={informationCircle} size=\"large\" slot=\"end\" />\n </IonItem>\n\n <IonItem>\n <IonLabel>\n Small Icon End\n </IonLabel>\n <IonIcon icon={informationCircle} size=\"small\" slot=\"end\" />\n </IonItem>\n\n <IonItem>\n <IonIcon icon={star} slot=\"start\" />\n <IonLabel>\n Icon Start\n </IonLabel>\n </IonItem>\n\n <IonItem>\n <IonLabel>\n Two Icons End\n </IonLabel>\n <IonIcon icon={checkmarkCircle} slot=\"end\" />\n <IonIcon icon={shuffle} slot=\"end\" />\n </IonItem>\n\n <IonItem>\n <IonLabel position=\"floating\">Datetime</IonLabel>\n <IonDatetime></IonDatetime>\n </IonItem>\n\n <IonItem>\n <IonLabel position=\"floating\">Select</IonLabel>\n <IonSelect>\n <IonSelectOption value=\"\">No Game Console</IonSelectOption>\n <IonSelectOption value=\"nes\">NES</IonSelectOption>\n <IonSelectOption value=\"n64\">Nintendo64</IonSelectOption>\n <IonSelectOption value=\"ps\">PlayStation</IonSelectOption>\n <IonSelectOption value=\"genesis\">Sega Genesis</IonSelectOption>\n <IonSelectOption value=\"saturn\">Sega Saturn</IonSelectOption>\n <IonSelectOption value=\"snes\">SNES</IonSelectOption>\n </IonSelect>\n </IonItem>\n\n <IonItem>\n <IonLabel>Toggle</IonLabel>\n <IonToggle slot=\"end\"></IonToggle>\n </IonItem>\n\n <IonItem>\n <IonLabel position=\"floating\">Floating Input</IonLabel>\n <IonInput></IonInput>\n </IonItem>\n\n <IonItem>\n <IonLabel>Input (placeholder)</IonLabel>\n <IonInput placeholder=\"Placeholder\"></IonInput>\n </IonItem>\n\n <IonItem>\n <IonLabel>Checkbox</IonLabel>\n <IonCheckbox slot=\"start\" />\n </IonItem>\n\n <IonItem>\n <IonLabel>Range</IonLabel>\n <IonRange></IonRange>\n </IonItem>\n </IonContent>\n </IonPage>\n );\n};\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'item-example',\n styleUrl: 'item-example.css'\n})\nexport class ItemExample {\n buttonClick() {\n console.log('Clicked button');\n }\n\n render() {\n return [\n // Default Item\n <ion-item>\n <ion-label>\n Item\n </ion-label>\n </ion-item>,\n\n // Item as a Button\n <ion-item button onClick={() => this.buttonClick()}>\n <ion-label>\n Button Item\n </ion-label>\n </ion-item>,\n\n // Item as an Anchor\n <ion-item href=\"https://www.ionicframework.com\">\n <ion-label>\n Anchor Item\n </ion-label>\n </ion-item>,\n\n <ion-item color=\"secondary\">\n <ion-label>\n Secondary Color Item\n </ion-label>\n </ion-item>\n ];\n }\n}\n```\n\n### Detail Arrows\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'item-example',\n styleUrl: 'item-example.css'\n})\nexport class ItemExample {\n buttonClick() {\n console.log('Clicked button');\n }\n\n render() {\n return [\n <ion-item detail>\n <ion-label>\n Standard Item with Detail Arrow\n </ion-label>\n </ion-item>,\n\n <ion-item button onClick={() => this.buttonClick()} detail>\n <ion-label>\n Button Item with Detail Arrow\n </ion-label>\n </ion-item>,\n\n <ion-item detail={false} href=\"https://www.ionicframework.com\">\n <ion-label>\n Anchor Item with no Detail Arrow\n </ion-label>\n </ion-item>\n ];\n }\n}\n```\n\n### List Items\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'item-example',\n styleUrl: 'item-example.css'\n})\nexport class ItemExample {\n render() {\n return [\n <ion-list>\n <ion-item>\n <ion-label>\n Item\n </ion-label>\n </ion-item>,\n\n <ion-item lines=\"none\">\n <ion-label>\n No Lines Item\n </ion-label>\n </ion-item>,\n\n <ion-item>\n <ion-label class=\"ion-text-wrap\">\n Multiline text that should wrap when it is too long\n to fit on one line in the item.\n </ion-label>\n </ion-item>,\n\n <ion-item>\n <ion-label class=\"ion-text-wrap\">\n <ion-text color=\"primary\">\n <h3>H3 Primary Title</h3>\n </ion-text>\n <p>Paragraph line 1</p>\n <ion-text color=\"secondary\">\n <p>Paragraph line 2 secondary</p>\n </ion-text>\n </ion-label>\n </ion-item>,\n\n <ion-item lines=\"full\">\n <ion-label>\n Item with Full Lines\n </ion-label>\n </ion-item>\n </ion-list>\n ];\n }\n}\n```\n\n### Item Lines\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'item-example',\n styleUrl: 'item-example.css'\n})\nexport class ItemExample {\n render() {\n return [\n // Item Inset Lines\n <ion-item lines=\"inset\">\n <ion-label>Item Lines Inset</ion-label>\n </ion-item>,\n\n // Item Full Lines\n <ion-item lines=\"full\">\n <ion-label>Item Lines Full</ion-label>\n </ion-item>,\n\n // Item None Lines\n <ion-item lines=\"none\">\n <ion-label>Item Lines None</ion-label>\n </ion-item>,\n\n // List Full Lines\n <ion-list lines=\"full\">\n <ion-item>\n <ion-label>Full Lines Item 1</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label>Full Lines Item 2</ion-label>\n </ion-item>\n </ion-list>,\n\n // List Inset Lines\n <ion-list lines=\"inset\">\n <ion-item>\n <ion-label>Inset Lines Item 1</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label>Inset Lines Item 2</ion-label>\n </ion-item>\n </ion-list>,\n\n // List No Lines\n <ion-list lines=\"none\">\n <ion-item>\n <ion-label>No lines Item 1</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label>No lines Item 2</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label>No lines Item 3</ion-label>\n </ion-item>\n </ion-list>\n ];\n }\n}\n```\n\n### Media Items\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'item-example',\n styleUrl: 'item-example.css'\n})\nexport class ItemExample {\n testClick() {\n console.log('Test click');\n }\n\n render() {\n return [\n <ion-item button onClick={() => this.testClick()}>\n <ion-avatar slot=\"start\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==\"/>\n </ion-avatar>\n <ion-label>\n Avatar Start, Button Item\n </ion-label>\n </ion-item>,\n\n <ion-item href=\"#\">\n <ion-label>\n Thumbnail End, Anchor Item\n </ion-label>\n <ion-thumbnail slot=\"end\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==\"/>\n </ion-thumbnail>\n </ion-item>,\n\n <ion-item>\n <ion-thumbnail slot=\"start\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==\"/>\n </ion-thumbnail>\n <ion-label>\n <h2>H2 Title Text</h2>\n <p>Button on right</p>\n </ion-label>\n <ion-button fill=\"outline\" slot=\"end\">View</ion-button>\n </ion-item>,\n\n <ion-item button onClick={() => this.testClick()}>\n <ion-thumbnail slot=\"start\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==\"/>\n </ion-thumbnail>\n <ion-label>\n <h3>H3 Title Text</h3>\n <p>Icon on right</p>\n </ion-label>\n <ion-icon name=\"close-circle\" slot=\"end\"></ion-icon>\n </ion-item>\n ];\n }\n}\n```\n\n### Buttons in Items\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'item-example',\n styleUrl: 'item-example.css'\n})\nexport class ItemExample {\n render() {\n return [\n <ion-item>\n <ion-button slot=\"start\">\n Start\n </ion-button>\n <ion-label>Button Start/End</ion-label>\n <ion-button slot=\"end\">\n End\n </ion-button>\n </ion-item>,\n\n <ion-item>\n <ion-button slot=\"start\">\n Start Icon\n <ion-icon name=\"home\" slot=\"end\"></ion-icon>\n </ion-button>\n <ion-label>Buttons with Icons</ion-label>\n <ion-button slot=\"end\">\n <ion-icon name=\"star\" slot=\"end\"></ion-icon>\n End Icon\n </ion-button>\n </ion-item>,\n\n <ion-item>\n <ion-button slot=\"start\">\n <ion-icon slot=\"icon-only\" name=\"navigate\"></ion-icon>\n </ion-button>\n <ion-label>Icon only Buttons</ion-label>\n <ion-button slot=\"end\">\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-button>\n </ion-item>\n ];\n }\n}\n```\n\n### Icons in Items\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'item-example',\n styleUrl: 'item-example.css'\n})\nexport class ItemExample {\n render() {\n return [\n <ion-item>\n <ion-label>\n Icon End\n </ion-label>\n <ion-icon name=\"information-circle\" slot=\"end\"></ion-icon>\n </ion-item>,\n\n <ion-item>\n <ion-label>\n Large Icon End\n </ion-label>\n <ion-icon name=\"information-circle\" size=\"large\" slot=\"end\"></ion-icon>\n </ion-item>,\n\n <ion-item>\n <ion-label>\n Small Icon End\n </ion-label>\n <ion-icon name=\"information-circle\" size=\"small\" slot=\"end\"></ion-icon>\n </ion-item>,\n\n <ion-item>\n <ion-icon name=\"star\" slot=\"start\"></ion-icon>\n <ion-label>\n Icon Start\n </ion-label>\n </ion-item>,\n\n <ion-item>\n <ion-label>\n Two Icons End\n </ion-label>\n <ion-icon name=\"checkmark-circle\" slot=\"end\"></ion-icon>\n <ion-icon name=\"shuffle\" slot=\"end\"></ion-icon>\n </ion-item>\n ];\n }\n}\n```\n\n### Item Inputs\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'item-example',\n styleUrl: 'item-example.css'\n})\nexport class ItemExample {\n render() {\n return [\n <ion-item>\n <ion-label position=\"floating\">Datetime</ion-label>\n <ion-datetime></ion-datetime>\n </ion-item>,\n\n <ion-item>\n <ion-label position=\"floating\">Select</ion-label>\n <ion-select>\n <ion-select-option value=\"\">No Game Console</ion-select-option>\n <ion-select-option value=\"nes\">NES</ion-select-option>\n <ion-select-option value=\"n64\" selected>Nintendo64</ion-select-option>\n <ion-select-option value=\"ps\">PlayStation</ion-select-option>\n <ion-select-option value=\"genesis\">Sega Genesis</ion-select-option>\n <ion-select-option value=\"saturn\">Sega Saturn</ion-select-option>\n <ion-select-option value=\"snes\">SNES</ion-select-option>\n </ion-select>\n </ion-item>,\n\n <ion-item>\n <ion-label>Toggle</ion-label>\n <ion-toggle slot=\"end\"></ion-toggle>\n </ion-item>,\n\n <ion-item>\n <ion-label position=\"floating\">Floating Input</ion-label>\n <ion-input></ion-input>\n </ion-item>,\n\n <ion-item>\n <ion-label>Input (placeholder)</ion-label>\n <ion-input placeholder=\"Placeholder\"></ion-input>\n </ion-item>,\n\n <ion-item>\n <ion-label>Checkbox</ion-label>\n <ion-checkbox slot=\"start\"></ion-checkbox>\n </ion-item>,\n\n <ion-item>\n <ion-label>Range</ion-label>\n <ion-range></ion-range>\n </ion-item>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <!-- Default Item -->\n <ion-item>\n <ion-label>\n Item\n </ion-label>\n </ion-item>\n\n <!-- Item as a Button -->\n <ion-item button @click=\"buttonClick()\">\n <ion-label>\n Button Item\n </ion-label>\n </ion-item>\n\n <!-- Item as an Anchor -->\n <ion-item href=\"https://www.ionicframework.com\">\n <ion-label>\n Anchor Item\n </ion-label>\n </ion-item>\n\n <ion-item color=\"secondary\">\n <ion-label>\n Secondary Color Item\n </ion-label>\n </ion-item>\n</template>\n```\n\n### Detail Arrows\n\n```html\n<template>\n <ion-item detail>\n <ion-label>\n Standard Item with Detail Arrow\n </ion-label>\n </ion-item>\n\n <ion-item button @click=\"buttonClick()\" detail>\n <ion-label>\n Button Item with Detail Arrow\n </ion-label>\n </ion-item>\n\n <ion-item detail=\"false\" href=\"https://www.ionicframework.com\">\n <ion-label>\n Anchor Item with no Detail Arrow\n </ion-label>\n </ion-item>\n</template>\n```\n\n### List Items\n\n```html\n<template>\n <ion-list>\n <ion-item>\n <ion-label>\n Item\n </ion-label>\n </ion-item>\n\n <ion-item lines=\"none\">\n <ion-label>\n No Lines Item\n </ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label class=\"ion-text-wrap\">\n Multiline text that should wrap when it is too long\n to fit on one line in the item.\n </ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label class=\"ion-text-wrap\">\n <ion-text color=\"primary\">\n <h3>H3 Primary Title</h3>\n </ion-text>\n <p>Paragraph line 1</p>\n <ion-text color=\"secondary\">\n <p>Paragraph line 2 secondary</p>\n </ion-text>\n </ion-label>\n </ion-item>\n\n <ion-item lines=\"full\">\n <ion-label>\n Item with Full Lines\n </ion-label>\n </ion-item>\n\n </ion-list>\n</template>\n```\n\n### Item Lines\n\n```html\n<template>\n <!-- Item Inset Lines -->\n <ion-item lines=\"inset\">\n <ion-label>Item Lines Inset</ion-label>\n </ion-item>\n\n <!-- Item Full Lines -->\n <ion-item lines=\"full\">\n <ion-label>Item Lines Full</ion-label>\n </ion-item>\n\n <!-- Item None Lines -->\n <ion-item lines=\"none\">\n <ion-label>Item Lines None</ion-label>\n </ion-item>\n\n <!-- List Full Lines -->\n <ion-list lines=\"full\">\n <ion-item>\n <ion-label>Full Lines Item 1</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label>Full Lines Item 2</ion-label>\n </ion-item>\n </ion-list>\n\n <!-- List Inset Lines -->\n <ion-list lines=\"inset\">\n <ion-item>\n <ion-label>Inset Lines Item 1</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label>Inset Lines Item 2</ion-label>\n </ion-item>\n </ion-list>\n\n <!-- List No Lines -->\n <ion-list lines=\"none\">\n <ion-item>\n <ion-label>No lines Item 1</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label>No lines Item 2</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label>No lines Item 3</ion-label>\n </ion-item>\n </ion-list>\n</template>\n```\n\n\n### Media Items\n\n```html\n<template>\n <ion-item button @click=\"testClick()\">\n <ion-avatar slot=\"start\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==\">\n </ion-avatar>\n <ion-label>\n Avatar Start, Button Item\n </ion-label>\n </ion-item>\n\n <ion-item href=\"#\">\n <ion-label>\n Thumbnail End, Anchor Item\n </ion-label>\n <ion-thumbnail slot=\"end\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==\">\n </ion-thumbnail>\n </ion-item>\n\n <ion-item>\n <ion-thumbnail slot=\"start\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==\">\n </ion-thumbnail>\n <ion-label>\n <h2>H2 Title Text</h2>\n <p>Button on right</p>\n </ion-label>\n <ion-button fill=\"outline\" slot=\"end\">View</ion-button>\n </ion-item>\n\n <ion-item button @click=\"testClick()\">\n <ion-thumbnail slot=\"start\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==\">\n </ion-thumbnail>\n <ion-label>\n <h3>H3 Title Text</h3>\n <p>Icon on right</p>\n </ion-label>\n <ion-icon :icon=\"closeCircle\" slot=\"end\"></ion-icon>\n </ion-item>\n</template>\n```\n\n### Buttons in Items\n\n```html\n<template>\n <ion-item>\n <ion-button slot=\"start\">\n Start\n </ion-button>\n <ion-label>Button Start/End</ion-label>\n <ion-button slot=\"end\">\n End\n </ion-button>\n </ion-item>\n\n <ion-item>\n <ion-button slot=\"start\">\n Start Icon\n <ion-icon :icon=\"home\" slot=\"end\"></ion-icon>\n </ion-button>\n <ion-label>Buttons with Icons</ion-label>\n <ion-button slot=\"end\">\n <ion-icon :icon=\"star\" slot=\"end\"></ion-icon>\n End Icon\n </ion-button>\n </ion-item>\n\n <ion-item>\n <ion-button slot=\"start\">\n <ion-icon slot=\"icon-only\" :icon=\"navigate\"></ion-icon>\n </ion-button>\n <ion-label>Icon only Buttons</ion-label>\n <ion-button slot=\"end\">\n <ion-icon slot=\"icon-only\" :icon=\"star\"></ion-icon>\n </ion-button>\n </ion-item>\n</template>\n```\n\n### Icons in Items\n\n```html\n<template>\n <ion-item>\n <ion-label>\n Icon End\n </ion-label>\n <ion-icon :icon=\"informationCircle\" slot=\"end\"></ion-icon>\n </ion-item>\n\n <ion-item>\n <ion-label>\n Large Icon End\n </ion-label>\n <ion-icon :icon=\"informationCircle\" size=\"large\" slot=\"end\"></ion-icon>\n </ion-item>\n\n <ion-item>\n <ion-label>\n Small Icon End\n </ion-label>\n <ion-icon :icon=\"informationCircle\" size=\"small\" slot=\"end\"></ion-icon>\n </ion-item>\n\n <ion-item>\n <ion-icon :icon=\"star\" slot=\"start\"></ion-icon>\n <ion-label>\n Icon Start\n </ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label>\n Two Icons End\n </ion-label>\n <ion-icon :icon=\"checkmarkCircle\" slot=\"end\"></ion-icon>\n <ion-icon :icon=\"shuffle\" slot=\"end\"></ion-icon>\n </ion-item>\n</template>\n```\n\n### Item Inputs\n\n```html\n<template>\n <ion-item>\n <ion-label position=\"floating\">Datetime</ion-label>\n <ion-datetime></ion-datetime>\n </ion-item>\n\n <ion-item>\n <ion-label position=\"floating\">Select</ion-label>\n <ion-select>\n <ion-select-option value=\"\">No Game Console</ion-select-option>\n <ion-select-option value=\"nes\">NES</ion-select-option>\n <ion-select-option value=\"n64\" selected>Nintendo64</ion-select-option>\n <ion-select-option value=\"ps\">PlayStation</ion-select-option>\n <ion-select-option value=\"genesis\">Sega Genesis</ion-select-option>\n <ion-select-option value=\"saturn\">Sega Saturn</ion-select-option>\n <ion-select-option value=\"snes\">SNES</ion-select-option>\n </ion-select>\n </ion-item>\n\n <ion-item>\n <ion-label>Toggle</ion-label>\n <ion-toggle slot=\"end\"></ion-toggle>\n </ion-item>\n\n <ion-item>\n <ion-label position=\"floating\">Floating Input</ion-label>\n <ion-input></ion-input>\n </ion-item>\n\n <ion-item>\n <ion-label>Input (placeholder)</ion-label>\n <ion-input placeholder=\"Placeholder\"></ion-input>\n </ion-item>\n\n <ion-item>\n <ion-label>Checkbox</ion-label>\n <ion-checkbox slot=\"start\"></ion-checkbox>\n </ion-item>\n\n <ion-item>\n <ion-label>Range</ion-label>\n <ion-range></ion-range>\n </ion-item>\n</template>\n\n<script>\nimport { \n IonAvatar,\n IonButton,\n IonCheckbox, \n IonDatetime,\n IonIcon,\n IonInput, \n IonItem, \n IonLabel, \n IonRange,\n IonSelect, \n IonSelectOption, \n IonText,\n IonThumbnail,\n IonToggle\n} from '@ionic/vue';\nimport { \n checkmarkCircle, \n closeCircle, \n home, \n informationCircle, \n navigate, \n shuffle, \n star\n} from 'ionicons/icons';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { \n IonAvatar,\n IonButton,\n IonCheckbox, \n IonDatetime,\n IonIcon,\n IonInput, \n IonItem, \n IonLabel, \n IonRange,\n IonSelect, \n IonSelectOption, \n IonText,\n IonThumbnail,\n IonToggle\n },\n setup() {\n return {\n checkmarkCircle, \n closeCircle, \n home, \n informationCircle, \n navigate, \n shuffle, \n star\n }\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "button",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "button",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, a button tag will be rendered and the item will be tappable.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "detail",
|
||
"type": "boolean | undefined",
|
||
"mutable": false,
|
||
"attr": "detail",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode`\nis `ios` and an `href` or `button` property is present.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "detailIcon",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "detail-icon",
|
||
"reflectToAttr": false,
|
||
"docs": "The icon to use when `detail` is set to `true`.",
|
||
"docsTags": [],
|
||
"default": "'chevron-forward'",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot interact with the item.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "download",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "download",
|
||
"reflectToAttr": false,
|
||
"docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "href",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "href",
|
||
"reflectToAttr": false,
|
||
"docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "lines",
|
||
"type": "\"full\" | \"inset\" | \"none\" | undefined",
|
||
"mutable": false,
|
||
"attr": "lines",
|
||
"reflectToAttr": false,
|
||
"docs": "How the bottom border should be displayed on the item.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "full",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "inset",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "none",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "rel",
|
||
"reflectToAttr": false,
|
||
"docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "routerAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "routerDirection",
|
||
"type": "\"back\" | \"forward\" | \"root\"",
|
||
"mutable": false,
|
||
"attr": "router-direction",
|
||
"reflectToAttr": false,
|
||
"docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
|
||
"docsTags": [],
|
||
"default": "'forward'",
|
||
"values": [
|
||
{
|
||
"value": "back",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "forward",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "root",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "target",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "target",
|
||
"reflectToAttr": false,
|
||
"docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "type",
|
||
"type": "\"button\" | \"reset\" | \"submit\"",
|
||
"mutable": false,
|
||
"attr": "type",
|
||
"reflectToAttr": false,
|
||
"docs": "The type of the button. Only used when an `onclick` or `button` property is present.",
|
||
"docsTags": [],
|
||
"default": "'button'",
|
||
"values": [
|
||
{
|
||
"value": "button",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "reset",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "submit",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [
|
||
{
|
||
"event": "ionColor",
|
||
"capture": false,
|
||
"passive": false
|
||
},
|
||
{
|
||
"event": "ionStyle",
|
||
"capture": false,
|
||
"passive": false
|
||
}
|
||
],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the item"
|
||
},
|
||
{
|
||
"name": "--background-activated",
|
||
"annotation": "prop",
|
||
"docs": "Background of the item when pressed. Note: setting this will interfere with the Material Design ripple."
|
||
},
|
||
{
|
||
"name": "--background-activated-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the item background when pressed"
|
||
},
|
||
{
|
||
"name": "--background-focused",
|
||
"annotation": "prop",
|
||
"docs": "Background of the item when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--background-focused-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the item background when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--background-hover",
|
||
"annotation": "prop",
|
||
"docs": "Background of the item on hover"
|
||
},
|
||
{
|
||
"name": "--background-hover-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the background of the item on hover"
|
||
},
|
||
{
|
||
"name": "--border-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the item border"
|
||
},
|
||
{
|
||
"name": "--border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Radius of the item border"
|
||
},
|
||
{
|
||
"name": "--border-style",
|
||
"annotation": "prop",
|
||
"docs": "Style of the item border"
|
||
},
|
||
{
|
||
"name": "--border-width",
|
||
"annotation": "prop",
|
||
"docs": "Width of the item border"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the item"
|
||
},
|
||
{
|
||
"name": "--color-activated",
|
||
"annotation": "prop",
|
||
"docs": "Color of the item when pressed"
|
||
},
|
||
{
|
||
"name": "--color-focused",
|
||
"annotation": "prop",
|
||
"docs": "Color of the item when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--color-hover",
|
||
"annotation": "prop",
|
||
"docs": "Color of the item on hover"
|
||
},
|
||
{
|
||
"name": "--detail-icon-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the item detail icon"
|
||
},
|
||
{
|
||
"name": "--detail-icon-font-size",
|
||
"annotation": "prop",
|
||
"docs": "Font size of the item detail icon"
|
||
},
|
||
{
|
||
"name": "--detail-icon-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the item detail icon"
|
||
},
|
||
{
|
||
"name": "--highlight-color-focused",
|
||
"annotation": "prop",
|
||
"docs": "The color of the highlight on the item when focused"
|
||
},
|
||
{
|
||
"name": "--highlight-color-invalid",
|
||
"annotation": "prop",
|
||
"docs": "The color of the highlight on the item when invalid"
|
||
},
|
||
{
|
||
"name": "--highlight-color-valid",
|
||
"annotation": "prop",
|
||
"docs": "The color of the highlight on the item when valid"
|
||
},
|
||
{
|
||
"name": "--highlight-height",
|
||
"annotation": "prop",
|
||
"docs": "The height of the highlight on the item"
|
||
},
|
||
{
|
||
"name": "--inner-border-width",
|
||
"annotation": "prop",
|
||
"docs": "Width of the item inner border"
|
||
},
|
||
{
|
||
"name": "--inner-box-shadow",
|
||
"annotation": "prop",
|
||
"docs": "Box shadow of the item inner"
|
||
},
|
||
{
|
||
"name": "--inner-padding-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom padding of the item inner"
|
||
},
|
||
{
|
||
"name": "--inner-padding-end",
|
||
"annotation": "prop",
|
||
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner"
|
||
},
|
||
{
|
||
"name": "--inner-padding-start",
|
||
"annotation": "prop",
|
||
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner"
|
||
},
|
||
{
|
||
"name": "--inner-padding-top",
|
||
"annotation": "prop",
|
||
"docs": "Top padding of the item inner"
|
||
},
|
||
{
|
||
"name": "--min-height",
|
||
"annotation": "prop",
|
||
"docs": "Minimum height of the item"
|
||
},
|
||
{
|
||
"name": "--padding-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom padding of the item"
|
||
},
|
||
{
|
||
"name": "--padding-end",
|
||
"annotation": "prop",
|
||
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item"
|
||
},
|
||
{
|
||
"name": "--padding-start",
|
||
"annotation": "prop",
|
||
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item"
|
||
},
|
||
{
|
||
"name": "--padding-top",
|
||
"annotation": "prop",
|
||
"docs": "Top padding of the item"
|
||
},
|
||
{
|
||
"name": "--ripple-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the item ripple effect"
|
||
},
|
||
{
|
||
"name": "--transition",
|
||
"annotation": "prop",
|
||
"docs": "Transition of the item"
|
||
}
|
||
],
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"docs": "Content is placed between the named slots if provided without a slot."
|
||
},
|
||
{
|
||
"name": "end",
|
||
"docs": "Content is placed to the right of the item text in LTR, and to the left in RTL."
|
||
},
|
||
{
|
||
"name": "start",
|
||
"docs": "Content is placed to the left of the item text in LTR, and to the right in RTL."
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "detail-icon",
|
||
"docs": "The chevron icon for the item. Only applies when `detail=\"true\"`."
|
||
},
|
||
{
|
||
"name": "native",
|
||
"docs": "The native HTML button, anchor or div element that wraps all child elements."
|
||
}
|
||
],
|
||
"dependents": [
|
||
"ion-select-popover"
|
||
],
|
||
"dependencies": [
|
||
"ion-icon",
|
||
"ion-ripple-effect"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-item": [
|
||
"ion-icon",
|
||
"ion-ripple-effect"
|
||
],
|
||
"ion-select-popover": [
|
||
"ion-item"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/item-divider/item-divider.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-item-divider",
|
||
"readme": "# ion-item-divider\n\nItem 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.\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
},
|
||
{
|
||
"text": "- Content is placed between the named slots if provided without a slot.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "start - Content is placed to the left of the divider text in LTR, and to the right in RTL.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "end - Content is placed to the right of the divider text in LTR, and to the left in RTL.",
|
||
"name": "slot"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<ion-item-divider>\n <ion-label>\n Basic Item Divider\n </ion-label>\n</ion-item-divider>\n\n<ion-item-divider color=\"secondary\">\n <ion-label>\n Secondary Item Divider\n </ion-label>\n</ion-item-divider>\n\n<!-- Item Dividers in a List -->\n<ion-list>\n <ion-item-divider>\n <ion-label>\n Section A\n </ion-label>\n </ion-item-divider>\n\n <ion-item><ion-label>A1</ion-label></ion-item>\n <ion-item><ion-label>A2</ion-label></ion-item>\n <ion-item><ion-label>A3</ion-label></ion-item>\n <ion-item><ion-label>A4</ion-label></ion-item>\n <ion-item><ion-label>A5</ion-label></ion-item>\n\n <ion-item-divider>\n <ion-label>\n Section B\n </ion-label>\n </ion-item-divider>\n\n <ion-item><ion-label>B1</ion-label></ion-item>\n <ion-item><ion-label>B2</ion-label></ion-item>\n <ion-item><ion-label>B3</ion-label></ion-item>\n <ion-item><ion-label>B4</ion-label></ion-item>\n <ion-item><ion-label>B5</ion-label></ion-item>\n</ion-list>\n```\n",
|
||
"javascript": "```html\n<ion-item-divider>\n <ion-label>\n Basic Item Divider\n </ion-label>\n</ion-item-divider>\n\n<ion-item-divider color=\"secondary\">\n <ion-label>\n Secondary Item Divider\n </ion-label>\n</ion-item-divider>\n\n<!-- Item Dividers in a List -->\n<ion-list>\n <ion-item-divider>\n <ion-label>\n Section A\n </ion-label>\n </ion-item-divider>\n\n <ion-item><ion-label>A1</ion-label></ion-item>\n <ion-item><ion-label>A2</ion-label></ion-item>\n <ion-item><ion-label>A3</ion-label></ion-item>\n <ion-item><ion-label>A4</ion-label></ion-item>\n <ion-item><ion-label>A5</ion-label></ion-item>\n\n <ion-item-divider>\n <ion-label>\n Section B\n </ion-label>\n </ion-item-divider>\n\n <ion-item><ion-label>B1</ion-label></ion-item>\n <ion-item><ion-label>B2</ion-label></ion-item>\n <ion-item><ion-label>B3</ion-label></ion-item>\n <ion-item><ion-label>B4</ion-label></ion-item>\n <ion-item><ion-label>B5</ion-label></ion-item>\n</ion-list>\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonItemDivider, IonLabel, IonList, IonItem, IonContent } from '@ionic/react';\n\nexport const ItemDividerExample: React.FC = () => (\n <IonContent>\n <IonItemDivider>\n <IonLabel>\n Basic Item Divider\n </IonLabel>\n </IonItemDivider>\n\n <IonItemDivider color=\"secondary\">\n <IonLabel>\n Secondary Item Divider\n </IonLabel>\n </IonItemDivider>\n\n {/*-- Item Dividers in a List --*/}\n <IonList>\n <IonItemDivider>\n <IonLabel>\n Section A\n </IonLabel>\n </IonItemDivider>\n\n <IonItem><IonLabel>A1</IonLabel></IonItem>\n <IonItem><IonLabel>A2</IonLabel></IonItem>\n <IonItem><IonLabel>A3</IonLabel></IonItem>\n <IonItem><IonLabel>A4</IonLabel></IonItem>\n <IonItem><IonLabel>A5</IonLabel></IonItem>\n\n <IonItemDivider>\n <IonLabel>\n Section B\n </IonLabel>\n </IonItemDivider>\n\n <IonItem><IonLabel>B1</IonLabel></IonItem>\n <IonItem><IonLabel>B2</IonLabel></IonItem>\n <IonItem><IonLabel>B3</IonLabel></IonItem>\n <IonItem><IonLabel>B4</IonLabel></IonItem>\n <IonItem><IonLabel>B5</IonLabel></IonItem>\n </IonList>\n </IonContent>\n);\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'item-divider-example',\n styleUrl: 'item-divider-example.css'\n})\nexport class ItemDividerExample {\n render() {\n return [\n <ion-item-divider>\n <ion-label>\n Basic Item Divider\n </ion-label>\n </ion-item-divider>,\n\n <ion-item-divider color=\"secondary\">\n <ion-label>\n Secondary Item Divider\n </ion-label>\n </ion-item-divider>,\n\n // Item Dividers in a List\n <ion-list>\n <ion-item-divider>\n <ion-label>\n Section A\n </ion-label>\n </ion-item-divider>\n\n <ion-item><ion-label>A1</ion-label></ion-item>\n <ion-item><ion-label>A2</ion-label></ion-item>\n <ion-item><ion-label>A3</ion-label></ion-item>\n <ion-item><ion-label>A4</ion-label></ion-item>\n <ion-item><ion-label>A5</ion-label></ion-item>\n\n <ion-item-divider>\n <ion-label>\n Section B\n </ion-label>\n </ion-item-divider>\n\n <ion-item><ion-label>B1</ion-label></ion-item>\n <ion-item><ion-label>B2</ion-label></ion-item>\n <ion-item><ion-label>B3</ion-label></ion-item>\n <ion-item><ion-label>B4</ion-label></ion-item>\n <ion-item><ion-label>B5</ion-label></ion-item>\n </ion-list>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-item-divider>\n <ion-label>\n Basic Item Divider\n </ion-label>\n </ion-item-divider>\n\n <ion-item-divider color=\"secondary\">\n <ion-label>\n Secondary Item Divider\n </ion-label>\n </ion-item-divider>\n\n <!-- Item Dividers in a List -->\n <ion-list>\n <ion-item-divider>\n <ion-label>\n Section A\n </ion-label>\n </ion-item-divider>\n\n <ion-item><ion-label>A1</ion-label></ion-item>\n <ion-item><ion-label>A2</ion-label></ion-item>\n <ion-item><ion-label>A3</ion-label></ion-item>\n <ion-item><ion-label>A4</ion-label></ion-item>\n <ion-item><ion-label>A5</ion-label></ion-item>\n\n <ion-item-divider>\n <ion-label>\n Section B\n </ion-label>\n </ion-item-divider>\n\n <ion-item><ion-label>B1</ion-label></ion-item>\n <ion-item><ion-label>B2</ion-label></ion-item>\n <ion-item><ion-label>B3</ion-label></ion-item>\n <ion-item><ion-label>B4</ion-label></ion-item>\n <ion-item><ion-label>B5</ion-label></ion-item>\n </ion-list>\n</template>\n\n<script>\nimport { IonItem, IonItemDivider, IonLabel } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonItem, IonItemDivider, IonLabel }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "sticky",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "sticky",
|
||
"reflectToAttr": false,
|
||
"docs": "When it's set to `true`, the item-divider will stay visible when it reaches the top\nof the viewport until the next `ion-item-divider` replaces it.\n\nThis feature relies in `position:sticky`:\nhttps://caniuse.com/#feat=css-sticky",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the item divider"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the item divider"
|
||
},
|
||
{
|
||
"name": "--inner-padding-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom inner padding of the item divider"
|
||
},
|
||
{
|
||
"name": "--inner-padding-end",
|
||
"annotation": "prop",
|
||
"docs": "End inner padding of the item divider"
|
||
},
|
||
{
|
||
"name": "--inner-padding-start",
|
||
"annotation": "prop",
|
||
"docs": "Start inner padding of the item divider"
|
||
},
|
||
{
|
||
"name": "--inner-padding-top",
|
||
"annotation": "prop",
|
||
"docs": "Top inner padding of the item divider"
|
||
},
|
||
{
|
||
"name": "--padding-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom padding of the item divider"
|
||
},
|
||
{
|
||
"name": "--padding-end",
|
||
"annotation": "prop",
|
||
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider"
|
||
},
|
||
{
|
||
"name": "--padding-start",
|
||
"annotation": "prop",
|
||
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider"
|
||
},
|
||
{
|
||
"name": "--padding-top",
|
||
"annotation": "prop",
|
||
"docs": "Top padding of the item divider"
|
||
}
|
||
],
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"docs": "Content is placed between the named slots if provided without a slot."
|
||
},
|
||
{
|
||
"name": "end",
|
||
"docs": "Content is placed to the right of the divider text in LTR, and to the left in RTL."
|
||
},
|
||
{
|
||
"name": "start",
|
||
"docs": "Content is placed to the left of the divider text in LTR, and to the right in RTL."
|
||
}
|
||
],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/item-group/item-group.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-item-group",
|
||
"readme": "# ion-item-group\n\nItem 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.\n\n\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"angular": "```html\n<ion-item-group>\n <ion-item-divider>\n <ion-label>A</ion-label>\n </ion-item-divider>\n\n <ion-item>\n <ion-label>Angola</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Argentina</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Armenia</ion-label>\n </ion-item>\n</ion-item-group>\n\n<ion-item-group>\n <ion-item-divider>\n <ion-label>B</ion-label>\n </ion-item-divider>\n\n <ion-item>\n <ion-label>Bangladesh</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Belarus</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Belgium</ion-label>\n </ion-item>\n</ion-item-group>\n\n\n<!-- They can also be used to group sliding items -->\n<ion-item-group>\n <ion-item-divider>\n <ion-label>\n Fruits\n </ion-label>\n </ion-item-divider>\n\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n <h3>Grapes</h3>\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option>\n Favorite\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n <h3>Apples</h3>\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option>\n Favorite\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n</ion-item-group>\n\n<ion-item-group>\n <ion-item-divider>\n <ion-label>\n Vegetables\n </ion-label>\n </ion-item-divider>\n\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n <h3>Carrots</h3>\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option>\n Favorite\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n <h3>Celery</h3>\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option>\n Favorite\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n</ion-item-group>\n```\n",
|
||
"javascript": "```html\n<ion-item-group>\n <ion-item-divider>\n <ion-label>A</ion-label>\n </ion-item-divider>\n\n <ion-item>\n <ion-label>Angola</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Argentina</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Armenia</ion-label>\n </ion-item>\n</ion-item-group>\n\n<ion-item-group>\n <ion-item-divider>\n <ion-label>B</ion-label>\n </ion-item-divider>\n\n <ion-item>\n <ion-label>Bangladesh</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Belarus</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Belgium</ion-label>\n </ion-item>\n</ion-item-group>\n\n\n<!-- They can also be used to group sliding items -->\n<ion-item-group>\n <ion-item-divider>\n <ion-label>\n Fruits\n </ion-label>\n </ion-item-divider>\n\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n <h3>Grapes</h3>\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option>\n Favorite\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n <h3>Apples</h3>\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option>\n Favorite\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n</ion-item-group>\n\n<ion-item-group>\n <ion-item-divider>\n <ion-label>\n Vegetables\n </ion-label>\n </ion-item-divider>\n\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n <h3>Carrots</h3>\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option>\n Favorite\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n <h3>Celery</h3>\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option>\n Favorite\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n</ion-item-group>\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\n\nimport { IonItemGroup, IonItemDivider, IonLabel, IonItem, IonItemSliding, IonItemOptions, IonItemOption } from '@ionic/react';\n\nconst Example: React.FC<{}> = () => (\n <>\n <IonItemGroup>\n <IonItemDivider>\n <IonLabel>A</IonLabel>\n </IonItemDivider>\n\n <IonItem>\n <IonLabel>Angola</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>Argentina</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>Armenia</IonLabel>\n </IonItem>\n </IonItemGroup>\n\n <IonItemGroup>\n <IonItemDivider>\n <IonLabel>B</IonLabel>\n </IonItemDivider>\n\n <IonItem>\n <IonLabel>Bangladesh</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>Belarus</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>Belgium</IonLabel>\n </IonItem>\n </IonItemGroup>\n\n\n {/*-- They can also be used to group sliding items --*/}\n <IonItemGroup>\n <IonItemDivider>\n <IonLabel>\n Fruits\n </IonLabel>\n </IonItemDivider>\n\n <IonItemSliding>\n <IonItem>\n <IonLabel>\n <h3>Grapes</h3>\n </IonLabel>\n </IonItem>\n <IonItemOptions>\n <IonItemOption>\n Favorite\n </IonItemOption>\n </IonItemOptions>\n </IonItemSliding>\n\n <IonItemSliding>\n <IonItem>\n <IonLabel>\n <h3>Apples</h3>\n </IonLabel>\n </IonItem>\n <IonItemOptions>\n <IonItemOption>\n Favorite\n </IonItemOption>\n </IonItemOptions>\n </IonItemSliding>\n </IonItemGroup>\n\n <IonItemGroup>\n <IonItemDivider>\n <IonLabel>\n Vegetables\n </IonLabel>\n </IonItemDivider>\n\n <IonItemSliding>\n <IonItem>\n <IonLabel>\n <h3>Carrots</h3>\n </IonLabel>\n </IonItem>\n <IonItemOptions>\n <IonItemOption>\n Favorite\n </IonItemOption>\n </IonItemOptions>\n </IonItemSliding>\n\n <IonItemSliding>\n <IonItem>\n <IonLabel>\n <h3>Celery</h3>\n </IonLabel>\n </IonItem>\n <IonItemOptions>\n <IonItemOption>\n Favorite\n </IonItemOption>\n </IonItemOptions>\n </IonItemSliding>\n </IonItemGroup>\n </>\n);\n\nexport default Example;\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'item-group-example',\n styleUrl: 'item-group-example.css'\n})\nexport class ItemGroupExample {\n render() {\n return [\n <ion-item-group>\n <ion-item-divider>\n <ion-label>A</ion-label>\n </ion-item-divider>\n\n <ion-item>\n <ion-label>Angola</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Argentina</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Armenia</ion-label>\n </ion-item>\n </ion-item-group>\n\n <ion-item-group>\n <ion-item-divider>\n <ion-label>B</ion-label>\n </ion-item-divider>\n\n <ion-item>\n <ion-label>Bangladesh</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Belarus</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Belgium</ion-label>\n </ion-item>\n </ion-item-group>\n\n\n // They can also be used to group sliding items\n <ion-item-group>\n <ion-item-divider>\n <ion-label>\n Fruits\n </ion-label>\n </ion-item-divider>\n\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n <h3>Grapes</h3>\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option>\n Favorite\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n <h3>Apples</h3>\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option>\n Favorite\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n </ion-item-group>\n\n <ion-item-group>\n <ion-item-divider>\n <ion-label>\n Vegetables\n </ion-label>\n </ion-item-divider>\n\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n <h3>Carrots</h3>\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option>\n Favorite\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n <h3>Celery</h3>\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option>\n Favorite\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n </ion-item-group>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-item-group>\n <ion-item-divider>\n <ion-label>A</ion-label>\n </ion-item-divider>\n\n <ion-item>\n <ion-label>Angola</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Argentina</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Armenia</ion-label>\n </ion-item>\n </ion-item-group>\n\n <ion-item-group>\n <ion-item-divider>\n <ion-label>B</ion-label>\n </ion-item-divider>\n\n <ion-item>\n <ion-label>Bangladesh</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Belarus</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Belgium</ion-label>\n </ion-item>\n </ion-item-group>\n\n\n <!-- They can also be used to group sliding items -->\n <ion-item-group>\n <ion-item-divider>\n <ion-label>\n Fruits\n </ion-label>\n </ion-item-divider>\n\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n <h3>Grapes</h3>\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option>\n Favorite\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n <h3>Apples</h3>\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option>\n Favorite\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n </ion-item-group>\n\n <ion-item-group>\n <ion-item-divider>\n <ion-label>\n Vegetables\n </ion-label>\n </ion-item-divider>\n\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n <h3>Carrots</h3>\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option>\n Favorite\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n <h3>Celery</h3>\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option>\n Favorite\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n </ion-item-group>\n</template>\n<script>\nimport { \n IonItem, \n IonItemDivider,\n IonItemGroup, \n IonItemOption, \n IonItemOptions, \n IonItemSliding, \n IonLabel\n} from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { \n IonItem,\n IonItemDivider, \n IonItemGroup, \n IonItemOption, \n IonItemOptions, \n IonItemSliding, \n IonLabel\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/item-option/item-option.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-item-option",
|
||
"readme": "# ion-item-option\n\nThe 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.\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
},
|
||
{
|
||
"text": "- Content is placed between the named slots if provided without a slot.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "start - Content is placed to the left of the option text in LTR, and to the right in RTL.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "top - Content is placed above the option text.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "icon-only - Should be used on an icon in an option that has no text.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "bottom - Content is placed below the option text.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "end - Content is placed to the right of the option text in LTR, and to the left in RTL.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "native - The native HTML button or anchor element that wraps all child elements.",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot interact with the item option.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "download",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "download",
|
||
"reflectToAttr": false,
|
||
"docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "expandable",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "expandable",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the option will expand to take up the available width and cover any other options.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "href",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "href",
|
||
"reflectToAttr": false,
|
||
"docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "rel",
|
||
"reflectToAttr": false,
|
||
"docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "target",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "target",
|
||
"reflectToAttr": false,
|
||
"docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "type",
|
||
"type": "\"button\" | \"reset\" | \"submit\"",
|
||
"mutable": false,
|
||
"attr": "type",
|
||
"reflectToAttr": false,
|
||
"docs": "The type of the button.",
|
||
"docsTags": [],
|
||
"default": "'button'",
|
||
"values": [
|
||
{
|
||
"value": "button",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "reset",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "submit",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the item option"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the item option"
|
||
}
|
||
],
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"docs": "Content is placed between the named slots if provided without a slot."
|
||
},
|
||
{
|
||
"name": "bottom",
|
||
"docs": "Content is placed below the option text."
|
||
},
|
||
{
|
||
"name": "end",
|
||
"docs": "Content is placed to the right of the option text in LTR, and to the left in RTL."
|
||
},
|
||
{
|
||
"name": "icon-only",
|
||
"docs": "Should be used on an icon in an option that has no text."
|
||
},
|
||
{
|
||
"name": "start",
|
||
"docs": "Content is placed to the left of the option text in LTR, and to the right in RTL."
|
||
},
|
||
{
|
||
"name": "top",
|
||
"docs": "Content is placed above the option text."
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "native",
|
||
"docs": "The native HTML button or anchor element that wraps all child elements."
|
||
}
|
||
],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-ripple-effect"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-item-option": [
|
||
"ion-ripple-effect"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/item-options/item-options.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-item-options",
|
||
"readme": "# ion-item-options\n\nThe 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.\n\n\n## Side Description\n\n| Side | Position | Swipe Direction |\n|---------|-----------------------------------------------------------------|-------------------------------------------------------------------|\n| `start` | To the `left` of the content in LTR, and to the `right` in RTL. | From `left` to `right` in LTR, and from `right` to `left` in RTL. |\n| `end` | To the `right` of the content in LTR, and to the `left` in RTL. | From `right` to `left` in LTR, and from `left` to `right` in RTL. |\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {},
|
||
"props": [
|
||
{
|
||
"name": "side",
|
||
"type": "\"end\" | \"start\"",
|
||
"mutable": false,
|
||
"attr": "side",
|
||
"reflectToAttr": false,
|
||
"docs": "The side the option button should be on. Possible values: `\"start\"` and `\"end\"`. If you have multiple `ion-item-options`, a side must be provided for each.",
|
||
"docsTags": [],
|
||
"default": "'end'",
|
||
"values": [
|
||
{
|
||
"value": "end",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "start",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [
|
||
{
|
||
"event": "ionSwipe",
|
||
"detail": "any",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the item has been fully swiped.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/item-sliding/item-sliding.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-item-sliding",
|
||
"readme": "# ion-item-sliding\n\nA 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.\n\n\n## Swipe Direction\n\nBy default, the buttons are placed on the `\"end\"` side. This means that options are revealed when the sliding item is swiped from end to start, i.e. from right to left in LTR, but from left to right in RTL. To place them on the opposite side, so that they are revealed when swiping in the opposite direction, set the `side` attribute to `\"start\"` on the [`ion-item-options`](../item-options) element. Up to two `ion-item-options` can be used at the same time in order to reveal two different sets of options depending on the swiping direction.\n\n\n## Options Layout\n\nBy default if an icon is placed with text in the [item option](../item-option), it will display the icon on top of the text, but the icon slot can be changed to any of the following to position it in the option.\n\n| Slot | Description |\n| ----------- | ------------------------------------------------------------------------ |\n| `start` | In LTR, start is the left side of the button, and in RTL it is the right |\n| `top` | The icon is above the text |\n| `icon-only` | The icon is the only content of the button |\n| `bottom` | The icon is below the text |\n| `end` | In LTR, end is the right side of the button, and in RTL it is the left |\n\n\n## Expandable Options\n\nOptions can be expanded to take up the full width of the item if you swipe past a certain point. This can be combined with the `ionSwipe` event to call methods on the class.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"angular": "```html\n<ion-list>\n <!-- Sliding item with text options on both sides -->\n <ion-item-sliding>\n <ion-item-options side=\"start\">\n <ion-item-option (click)=\"favorite(item)\">Favorite</ion-item-option>\n <ion-item-option color=\"danger\" (click)=\"share(item)\">Share</ion-item-option>\n </ion-item-options>\n\n <ion-item>\n <ion-label>Item Options</ion-label>\n </ion-item>\n\n <ion-item-options side=\"end\">\n <ion-item-option (click)=\"unread(item)\">Unread</ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <!-- Sliding item with expandable options on both sides -->\n <ion-item-sliding>\n <ion-item-options side=\"start\">\n <ion-item-option color=\"danger\" expandable>\n Delete\n </ion-item-option>\n </ion-item-options>\n\n <ion-item>\n <ion-label>Expandable Options</ion-label>\n </ion-item>\n\n <ion-item-options side=\"end\">\n <ion-item-option color=\"tertiary\" expandable>\n Archive\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <!-- Multi-line sliding item with icon options on both sides -->\n <ion-item-sliding id=\"item100\">\n <ion-item href=\"#\">\n <ion-label>\n <h2>HubStruck Notifications</h2>\n <p>A new message in your network</p>\n <p>Oceanic Next has joined your network</p>\n </ion-label>\n <ion-note slot=\"end\">\n 10:45 AM\n </ion-note>\n </ion-item>\n\n <ion-item-options side=\"start\">\n <ion-item-option>\n <ion-icon slot=\"icon-only\" name=\"heart\"></ion-icon>\n </ion-item-option>\n </ion-item-options>\n\n <ion-item-options side=\"end\">\n <ion-item-option color=\"danger\">\n <ion-icon slot=\"icon-only\" name=\"trash\"></ion-icon>\n </ion-item-option>\n <ion-item-option>\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <!-- Sliding item with icon start options on end side -->\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n Sliding Item, Icons Start\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option color=\"primary\">\n <ion-icon slot=\"start\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n More\n </ion-item-option>\n <ion-item-option color=\"secondary\">\n <ion-icon slot=\"start\" name=\"archive\"></ion-icon>\n Archive\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <!-- Sliding item with icon end options on end side -->\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n Sliding Item, Icons End\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option color=\"primary\">\n <ion-icon slot=\"end\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n More\n </ion-item-option>\n <ion-item-option color=\"secondary\">\n <ion-icon slot=\"end\" name=\"archive\"></ion-icon>\n Archive\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <!-- Sliding item with icon top options on end side -->\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n Sliding Item, Icons Top\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option color=\"primary\">\n <ion-icon slot=\"top\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n More\n </ion-item-option>\n <ion-item-option color=\"secondary\">\n <ion-icon slot=\"top\" name=\"archive\"></ion-icon>\n Archive\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <!-- Sliding item with icon bottom options on end side -->\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n Sliding Item, Icons Bottom\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option color=\"primary\">\n <ion-icon slot=\"bottom\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n More\n </ion-item-option>\n <ion-item-option color=\"secondary\">\n <ion-icon slot=\"bottom\" name=\"archive\"></ion-icon>\n Archive\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n</ion-list>\n```\n",
|
||
"javascript": "```html\n<ion-list>\n <!-- Sliding item with text options on both sides -->\n <ion-item-sliding>\n <ion-item-options side=\"start\">\n <ion-item-option onClick=\"favorite(item)\">Favorite</ion-item-option>\n <ion-item-option color=\"danger\" onClick=\"share(item)\">Share</ion-item-option>\n </ion-item-options>\n\n <ion-item>\n <ion-label>Item Options</ion-label>\n </ion-item>\n\n <ion-item-options side=\"end\">\n <ion-item-option onClick=\"unread(item)\">Unread</ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <!-- Sliding item with expandable options on both sides -->\n <ion-item-sliding>\n <ion-item-options side=\"start\">\n <ion-item-option color=\"danger\" expandable>\n Delete\n </ion-item-option>\n </ion-item-options>\n\n <ion-item>\n <ion-label>Expandable Options</ion-label>\n </ion-item>\n\n <ion-item-options side=\"end\">\n <ion-item-option color=\"tertiary\" expandable>\n Archive\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <!-- Multi-line sliding item with icon options on both sides -->\n <ion-item-sliding id=\"item100\">\n <ion-item href=\"#\">\n <ion-label>\n <h2>HubStruck Notifications</h2>\n <p>A new message in your network</p>\n <p>Oceanic Next has joined your network</p>\n </ion-label>\n <ion-note slot=\"end\">\n 10:45 AM\n </ion-note>\n </ion-item>\n\n <ion-item-options side=\"start\">\n <ion-item-option>\n <ion-icon slot=\"icon-only\" name=\"heart\"></ion-icon>\n </ion-item-option>\n </ion-item-options>\n\n <ion-item-options side=\"end\">\n <ion-item-option color=\"danger\">\n <ion-icon slot=\"icon-only\" name=\"trash\"></ion-icon>\n </ion-item-option>\n <ion-item-option>\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <!-- Sliding item with icon start options on end side -->\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n Sliding Item, Icons Start\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option color=\"primary\">\n <ion-icon slot=\"start\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n More\n </ion-item-option>\n <ion-item-option color=\"secondary\">\n <ion-icon slot=\"start\" name=\"archive\"></ion-icon>\n Archive\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <!-- Sliding item with icon end options on end side -->\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n Sliding Item, Icons End\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option color=\"primary\">\n <ion-icon slot=\"end\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n More\n </ion-item-option>\n <ion-item-option color=\"secondary\">\n <ion-icon slot=\"end\" name=\"archive\"></ion-icon>\n Archive\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <!-- Sliding item with icon top options on end side -->\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n Sliding Item, Icons Top\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option color=\"primary\">\n <ion-icon slot=\"top\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n More\n </ion-item-option>\n <ion-item-option color=\"secondary\">\n <ion-icon slot=\"top\" name=\"archive\"></ion-icon>\n Archive\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <!-- Sliding item with icon bottom options on end side -->\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n Sliding Item, Icons Bottom\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option color=\"primary\">\n <ion-icon slot=\"bottom\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n More\n </ion-item-option>\n <ion-item-option color=\"secondary\">\n <ion-icon slot=\"bottom\" name=\"archive\"></ion-icon>\n Archive\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n</ion-list>\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonList, IonItemSliding, IonItem, IonLabel, IonItemOptions, IonItemOption, IonIcon, IonNote } from '@ionic/react';\n\nimport { heart, trash, star, archive, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons';\n\nexport const ItemSlidingExample: React.FC = () => (\n<IonList>\n {/* Sliding item with text options on both sides */}\n <IonItemSliding>\n <IonItemOptions side=\"start\">\n <IonItemOption onClick={() => console.log('favorite clicked')}>Favorite</IonItemOption>\n <IonItemOption color=\"danger\" onClick={() => console.log('share clicked')}>Share</IonItemOption>\n </IonItemOptions>\n\n <IonItem>\n <IonLabel>Item Options</IonLabel>\n </IonItem>\n\n <IonItemOptions side=\"end\">\n <IonItemOption onClick={() => console.log('unread clicked')}>Unread</IonItemOption>\n </IonItemOptions>\n </IonItemSliding>\n\n {/* Sliding item with expandable options on both sides */}\n <IonItemSliding>\n <IonItemOptions side=\"start\">\n <IonItemOption color=\"danger\" expandable>\n Delete\n </IonItemOption>\n </IonItemOptions>\n\n <IonItem>\n <IonLabel>Expandable Options</IonLabel>\n </IonItem>\n\n <IonItemOptions side=\"end\">\n <IonItemOption color=\"tertiary\" expandable>\n Archive\n </IonItemOption>\n </IonItemOptions>\n </IonItemSliding>\n\n {/* Multi-line sliding item with icon options on both sides */}\n <IonItemSliding id=\"item100\">\n <IonItem href=\"#\">\n <IonLabel>\n <h2>HubStruck Notifications</h2>\n <p>A new message in your network</p>\n <p>Oceanic Next has joined your network</p>\n </IonLabel>\n <IonNote slot=\"end\">\n 10:45 AM\n </IonNote>\n </IonItem>\n\n <IonItemOptions side=\"start\">\n <IonItemOption>\n <IonIcon slot=\"icon-only\" icon={heart} />\n </IonItemOption>\n </IonItemOptions>\n\n <IonItemOptions side=\"end\">\n <IonItemOption color=\"danger\">\n <IonIcon slot=\"icon-only\" icon={trash} />\n </IonItemOption>\n <IonItemOption>\n <IonIcon slot=\"icon-only\" icon={star} />\n </IonItemOption>\n </IonItemOptions>\n </IonItemSliding>\n\n {/* Sliding item with icon start options on end side */}\n <IonItemSliding>\n <IonItem>\n <IonLabel>\n Sliding Item, Icons Start\n </IonLabel>\n </IonItem>\n <IonItemOptions>\n <IonItemOption color=\"primary\">\n <IonIcon slot=\"start\" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>\n More\n </IonItemOption>\n <IonItemOption color=\"secondary\">\n <IonIcon slot=\"start\" icon={archive} />\n Archive\n </IonItemOption>\n </IonItemOptions>\n </IonItemSliding>\n\n {/* Sliding item with icon end options on end side */}\n <IonItemSliding>\n <IonItem>\n <IonLabel>\n Sliding Item, Icons End\n </IonLabel>\n </IonItem>\n <IonItemOptions>\n <IonItemOption color=\"primary\">\n <IonIcon slot=\"end\" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>\n More\n </IonItemOption>\n <IonItemOption color=\"secondary\">\n <IonIcon slot=\"end\" icon={archive} />\n Archive\n </IonItemOption>\n </IonItemOptions>\n </IonItemSliding>\n\n {/* Sliding item with icon top options on end side */}\n <IonItemSliding>\n <IonItem>\n <IonLabel>\n Sliding Item, Icons Top\n </IonLabel>\n </IonItem>\n <IonItemOptions>\n <IonItemOption color=\"primary\">\n <IonIcon slot=\"top\" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>\n More\n </IonItemOption>\n <IonItemOption color=\"secondary\">\n <IonIcon slot=\"top\" icon={archive} />\n Archive\n </IonItemOption>\n </IonItemOptions>\n </IonItemSliding>\n\n {/* Sliding item with icon bottom options on end side */}\n <IonItemSliding>\n <IonItem>\n <IonLabel>\n Sliding Item, Icons Bottom\n </IonLabel>\n </IonItem>\n <IonItemOptions>\n <IonItemOption color=\"primary\">\n <IonIcon slot=\"bottom\" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>\n More\n </IonItemOption>\n <IonItemOption color=\"secondary\">\n <IonIcon slot=\"bottom\" icon={archive} />\n Archive\n </IonItemOption>\n </IonItemOptions>\n </IonItemSliding>\n</IonList>\n);\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'item-sliding-example',\n styleUrl: 'item-sliding-example.css'\n})\nexport class ItemSlidingExample {\n favorite(ev: any) {\n console.log('Favorite clicked', ev);\n }\n\n share(ev: any) {\n console.log('Favorite clicked', ev);\n }\n\n unread(ev: any) {\n console.log('Favorite clicked', ev);\n }\n\n render() {\n return [\n <ion-list>\n {/* Sliding item with text options on both sides */}\n <ion-item-sliding>\n <ion-item-options side=\"start\">\n <ion-item-option onClick={(ev) => this.favorite(ev)}>Favorite</ion-item-option>\n <ion-item-option color=\"danger\" onClick={(ev) => this.share(ev)}>Share</ion-item-option>\n </ion-item-options>\n\n <ion-item>\n <ion-label>Item Options</ion-label>\n </ion-item>\n\n <ion-item-options side=\"end\">\n <ion-item-option onClick={(ev) => this.unread(ev)}>Unread</ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n {/* Sliding item with expandable options on both sides */}\n <ion-item-sliding>\n <ion-item-options side=\"start\">\n <ion-item-option color=\"danger\" expandable>\n Delete\n </ion-item-option>\n </ion-item-options>\n\n <ion-item>\n <ion-label>Expandable Options</ion-label>\n </ion-item>\n\n <ion-item-options side=\"end\">\n <ion-item-option color=\"tertiary\" expandable>\n Archive\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n {/* Multi-line sliding item with icon options on both sides */}\n <ion-item-sliding id=\"item100\">\n <ion-item href=\"#\">\n <ion-label>\n <h2>HubStruck Notifications</h2>\n <p>A new message in your network</p>\n <p>Oceanic Next has joined your network</p>\n </ion-label>\n <ion-note slot=\"end\">\n 10:45 AM\n </ion-note>\n </ion-item>\n\n <ion-item-options side=\"start\">\n <ion-item-option>\n <ion-icon slot=\"icon-only\" name=\"heart\"></ion-icon>\n </ion-item-option>\n </ion-item-options>\n\n <ion-item-options side=\"end\">\n <ion-item-option color=\"danger\">\n <ion-icon slot=\"icon-only\" name=\"trash\"></ion-icon>\n </ion-item-option>\n <ion-item-option>\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n {/* Sliding item with icon start options on end side */}\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n Sliding Item, Icons Start\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option color=\"primary\">\n <ion-icon slot=\"start\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n More\n </ion-item-option>\n <ion-item-option color=\"secondary\">\n <ion-icon slot=\"start\" name=\"archive\"></ion-icon>\n Archive\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n {/* Sliding item with icon end options on end side */}\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n Sliding Item, Icons End\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option color=\"primary\">\n <ion-icon slot=\"end\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n More\n </ion-item-option>\n <ion-item-option color=\"secondary\">\n <ion-icon slot=\"end\" name=\"archive\"></ion-icon>\n Archive\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n {/* Sliding item with icon top options on end side */}\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n Sliding Item, Icons Top\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option color=\"primary\">\n <ion-icon slot=\"top\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n More\n </ion-item-option>\n <ion-item-option color=\"secondary\">\n <ion-icon slot=\"top\" name=\"archive\"></ion-icon>\n Archive\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n {/* Sliding item with icon bottom options on end side */}\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n Sliding Item, Icons Bottom\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option color=\"primary\">\n <ion-icon slot=\"bottom\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n More\n </ion-item-option>\n <ion-item-option color=\"secondary\">\n <ion-icon slot=\"bottom\" name=\"archive\"></ion-icon>\n Archive\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n </ion-list>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-list>\n <!-- Sliding item with text options on both sides -->\n <ion-item-sliding>\n <ion-item-options side=\"start\">\n <ion-item-option @click=\"favorite(item)\">Favorite</ion-item-option>\n <ion-item-option color=\"danger\" @click=\"share(item)\">Share</ion-item-option>\n </ion-item-options>\n\n <ion-item>\n <ion-label>Item Options</ion-label>\n </ion-item>\n\n <ion-item-options side=\"end\">\n <ion-item-option @click=\"unread(item)\">Unread</ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <!-- Sliding item with expandable options on both sides -->\n <ion-item-sliding>\n <ion-item-options side=\"start\">\n <ion-item-option color=\"danger\" expandable>\n Delete\n </ion-item-option>\n </ion-item-options>\n\n <ion-item>\n <ion-label>Expandable Options</ion-label>\n </ion-item>\n\n <ion-item-options side=\"end\">\n <ion-item-option color=\"tertiary\" expandable>\n Archive\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <!-- Multi-line sliding item with icon options on both sides -->\n <ion-item-sliding id=\"item100\">\n <ion-item href=\"#\">\n <ion-label>\n <h2>HubStruck Notifications</h2>\n <p>A new message in your network</p>\n <p>Oceanic Next has joined your network</p>\n </ion-label>\n <ion-note slot=\"end\">\n 10:45 AM\n </ion-note>\n </ion-item>\n\n <ion-item-options side=\"start\">\n <ion-item-option>\n <ion-icon slot=\"icon-only\" :icon=\"heart\"></ion-icon>\n </ion-item-option>\n </ion-item-options>\n\n <ion-item-options side=\"end\">\n <ion-item-option color=\"danger\">\n <ion-icon slot=\"icon-only\" :icon=\"trash\"></ion-icon>\n </ion-item-option>\n <ion-item-option>\n <ion-icon slot=\"icon-only\" :icon=\"star\"></ion-icon>\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <!-- Sliding item with icon start options on end side -->\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n Sliding Item, Icons Start\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option color=\"primary\">\n <ion-icon slot=\"start\" :ios=\"ellipsisHorizontal\" :md=\"ellipsisVertical\"></ion-icon>\n More\n </ion-item-option>\n <ion-item-option color=\"secondary\">\n <ion-icon slot=\"start\" :icon=\"archive\"></ion-icon>\n Archive\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <!-- Sliding item with icon end options on end side -->\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n Sliding Item, Icons End\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option color=\"primary\">\n <ion-icon slot=\"end\" :ios=\"ellipsisHorizontal\" :md=\"ellipsisVertical\"></ion-icon>\n More\n </ion-item-option>\n <ion-item-option color=\"secondary\">\n <ion-icon slot=\"end\" :icon=\"archive\"></ion-icon>\n Archive\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <!-- Sliding item with icon top options on end side -->\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n Sliding Item, Icons Top\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option color=\"primary\">\n <ion-icon slot=\"top\" :ios=\"ellipsis-horizontal\" :md=\"ellipsis-vertical\"></ion-icon>\n More\n </ion-item-option>\n <ion-item-option color=\"secondary\">\n <ion-icon slot=\"top\" :icon=\"archive\"></ion-icon>\n Archive\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <!-- Sliding item with icon bottom options on end side -->\n <ion-item-sliding>\n <ion-item>\n <ion-label>\n Sliding Item, Icons Bottom\n </ion-label>\n </ion-item>\n <ion-item-options>\n <ion-item-option color=\"primary\">\n <ion-icon slot=\"bottom\" :ios=\"ellipsisHorizontal\" :md=\"ellipsisVertical\"></ion-icon>\n More\n </ion-item-option>\n <ion-item-option color=\"secondary\">\n <ion-icon slot=\"bottom\" :icon=\"archive\"></ion-icon>\n Archive\n </ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n </ion-list>\n</template>\n\n<script>\nimport { \n IonIcon, \n IonItem, \n IonItemOption, \n IonItemOptions, \n IonItemSliding, \n IonLabel, \n IonList\n} from '@ionic/vue';\nimport { \n archive, \n ellipsisHorizontal, \n ellipsisVertical,\n heart, \n star, \n trash\n} from 'ionicons/icons';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { \n IonIcon, \n IonItem, \n IonItemOption, \n IonItemOptions, \n IonItemSliding, \n IonLabel, \n IonList\n },\n setup() {\n return {\n archive, \n ellipsisHorizontal, \n ellipsisVertical,\n heart, \n star, \n trash\n }\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot interact with the sliding item.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "close",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "close() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Close the sliding item. Items can also be closed from the [List](../list).",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "closeOpened",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "closeOpened() => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Close all of the sliding items in the list. Items can also be closed from the [List](../list).",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "getOpenAmount",
|
||
"returns": {
|
||
"type": "Promise<number>",
|
||
"docs": ""
|
||
},
|
||
"signature": "getOpenAmount() => Promise<number>",
|
||
"parameters": [],
|
||
"docs": "Get the amount the item is open in pixels.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "getSlidingRatio",
|
||
"returns": {
|
||
"type": "Promise<number>",
|
||
"docs": ""
|
||
},
|
||
"signature": "getSlidingRatio() => Promise<number>",
|
||
"parameters": [],
|
||
"docs": "Get the ratio of the open amount of the item compared to the width of the options.\nIf the number returned is positive, then the options on the right side are open.\nIf the number returned is negative, then the options on the left side are open.\nIf the absolute value of the number is greater than 1, the item is open more than\nthe width of the options.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "open",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "open(side: Side | undefined) => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Open the sliding item.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item."
|
||
}
|
||
]
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionDrag",
|
||
"detail": "any",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the sliding position changes.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/label/label.tsx",
|
||
"encapsulation": "scoped",
|
||
"tag": "ion-label",
|
||
"readme": "# ion-label\n\nLabel 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.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<!-- Default Label -->\n<ion-label>Label</ion-label>\n\n<!-- Label Colors -->\n<ion-label color=\"primary\">Primary Label</ion-label>\n<ion-label color=\"secondary\">Secondary Label</ion-label>\n<ion-label color=\"danger\">Danger Label</ion-label>\n<ion-label color=\"light\">Light Label</ion-label>\n<ion-label color=\"dark\">Dark Label</ion-label>\n\n<!-- Item Labels -->\n<ion-item>\n <ion-label>Default Item</ion-label>\n</ion-item>\n\n<ion-item>\n <ion-label class=\"ion-text-wrap\">\n Multi-line text that should wrap when it is too long\n to fit on one line in the item.\n </ion-label>\n</ion-item>\n\n<!-- Input Labels -->\n<ion-item>\n <ion-label>Default Input</ion-label>\n <ion-input></ion-input>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"fixed\">Fixed</ion-label>\n <ion-input></ion-input>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"floating\">Floating</ion-label>\n <ion-input></ion-input>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"stacked\">Stacked</ion-label>\n <ion-input></ion-input>\n</ion-item>\n\n<ion-item>\n <ion-label>Toggle</ion-label>\n <ion-toggle slot=\"end\" checked></ion-toggle>\n</ion-item>\n\n<ion-item>\n <ion-checkbox slot=\"start\" checked></ion-checkbox>\n <ion-label>Checkbox</ion-label>\n</ion-item>\n```\n",
|
||
"javascript": "```html\n<!-- Default Label -->\n<ion-label>Label</ion-label>\n\n<!-- Label Colors -->\n<ion-label color=\"primary\">Primary Label</ion-label>\n<ion-label color=\"secondary\">Secondary Label</ion-label>\n<ion-label color=\"danger\">Danger Label</ion-label>\n<ion-label color=\"light\">Light Label</ion-label>\n<ion-label color=\"dark\">Dark Label</ion-label>\n\n<!-- Item Labels -->\n<ion-item>\n <ion-label>Default Item</ion-label>\n</ion-item>\n\n<ion-item>\n <ion-label class=\"ion-text-wrap\">\n Multi-line text that should wrap when it is too long\n to fit on one line in the item.\n </ion-label>\n</ion-item>\n\n<!-- Input Labels -->\n<ion-item>\n <ion-label>Default Input</ion-label>\n <ion-input></ion-input>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"fixed\">Fixed</ion-label>\n <ion-input></ion-input>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"floating\">Floating</ion-label>\n <ion-input></ion-input>\n</ion-item>\n\n<ion-item>\n <ion-label position=\"stacked\">Stacked</ion-label>\n <ion-input></ion-input>\n</ion-item>\n\n<ion-item>\n <ion-label>Toggle</ion-label>\n <ion-toggle slot=\"end\" checked></ion-toggle>\n</ion-item>\n\n<ion-item>\n <ion-checkbox slot=\"start\" checked></ion-checkbox>\n <ion-label>Checkbox</ion-label>\n</ion-item>\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox, IonContent } from '@ionic/react';\n\nexport const LabelExample: React.FC = () => (\n <IonContent>\n {/*-- Default Label --*/}\n <IonLabel>Label</IonLabel><br />\n\n {/*-- Label Colors --*/}\n <IonLabel color=\"primary\">Primary Label</IonLabel><br />\n <IonLabel color=\"secondary\">Secondary Label</IonLabel><br />\n <IonLabel color=\"danger\">Danger Label</IonLabel><br />\n <IonLabel color=\"light\">Light Label</IonLabel><br />\n <IonLabel color=\"dark\">Dark Label</IonLabel><br />\n\n {/*-- Item Labels --*/}\n <IonItem>\n <IonLabel>Default Item</IonLabel>\n </IonItem>\n\n <IonItem>\n <IonLabel className=\"ion-text-wrap\">\n Multi-line text that should wrap when it is too long\n to fit on one line in the item.\n </IonLabel>\n </IonItem>\n\n {/*-- Input Labels --*/}\n <IonItem>\n <IonLabel>Default Input</IonLabel>\n <IonInput></IonInput>\n </IonItem>\n\n <IonItem>\n <IonLabel position=\"fixed\">Fixed</IonLabel>\n <IonInput></IonInput>\n </IonItem>\n\n <IonItem>\n <IonLabel position=\"floating\">Floating</IonLabel>\n <IonInput></IonInput>\n </IonItem>\n\n <IonItem>\n <IonLabel position=\"stacked\">Stacked</IonLabel>\n <IonInput></IonInput>\n </IonItem>\n\n <IonItem>\n <IonLabel>Toggle</IonLabel>\n <IonToggle slot=\"end\" checked></IonToggle>\n </IonItem>\n\n <IonItem>\n <IonCheckbox slot=\"start\" checked />\n <IonLabel>Checkbox</IonLabel>\n </IonItem>\n </IonContent>\n);\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'label-example',\n styleUrl: 'label-example.css'\n})\nexport class LabelExample {\n render() {\n return [\n // Default Label\n <ion-label>Label</ion-label>,\n\n // Label Colors\n <ion-label color=\"primary\">Primary Label</ion-label>,\n <ion-label color=\"secondary\">Secondary Label</ion-label>,\n <ion-label color=\"danger\">Danger Label</ion-label>,\n <ion-label color=\"light\">Light Label</ion-label>,\n <ion-label color=\"dark\">Dark Label</ion-label>,\n\n // Item Labels\n <ion-item>\n <ion-label>Default Item</ion-label>\n </ion-item>,\n\n <ion-item>\n <ion-label class=\"ion-text-wrap\">\n Multi-line text that should wrap when it is too long\n to fit on one line in the item.\n </ion-label>\n </ion-item>,\n\n // Input Labels\n <ion-item>\n <ion-label>Default Input</ion-label>\n <ion-input></ion-input>\n </ion-item>,\n\n <ion-item>\n <ion-label position=\"fixed\">Fixed</ion-label>\n <ion-input></ion-input>\n </ion-item>,\n\n <ion-item>\n <ion-label position=\"floating\">Floating</ion-label>\n <ion-input></ion-input>\n </ion-item>,\n\n <ion-item>\n <ion-label position=\"stacked\">Stacked</ion-label>\n <ion-input></ion-input>\n </ion-item>,\n\n <ion-item>\n <ion-label>Toggle</ion-label>\n <ion-toggle slot=\"end\" checked={true}></ion-toggle>\n </ion-item>,\n\n <ion-item>\n <ion-checkbox slot=\"start\" checked={true}></ion-checkbox>\n <ion-label>Checkbox</ion-label>\n </ion-item>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <!-- Default Label -->\n <ion-label>Label</ion-label>\n\n <!-- Label Colors -->\n <ion-label color=\"primary\">Primary Label</ion-label>\n <ion-label color=\"secondary\">Secondary Label</ion-label>\n <ion-label color=\"danger\">Danger Label</ion-label>\n <ion-label color=\"light\">Light Label</ion-label>\n <ion-label color=\"dark\">Dark Label</ion-label>\n\n <!-- Item Labels -->\n <ion-item>\n <ion-label>Default Item</ion-label>\n </ion-item>\n\n <ion-item>\n <ion-label class=\"ion-text-wrap\">\n Multi-line text that should wrap when it is too long\n to fit on one line in the item.\n </ion-label>\n </ion-item>\n\n <!-- Input Labels -->\n <ion-item>\n <ion-label>Default Input</ion-label>\n <ion-input></ion-input>\n </ion-item>\n\n <ion-item>\n <ion-label position=\"fixed\">Fixed</ion-label>\n <ion-input></ion-input>\n </ion-item>\n\n <ion-item>\n <ion-label position=\"floating\">Floating</ion-label>\n <ion-input></ion-input>\n </ion-item>\n\n <ion-item>\n <ion-label position=\"stacked\">Stacked</ion-label>\n <ion-input></ion-input>\n </ion-item>\n\n <ion-item>\n <ion-label>Toggle</ion-label>\n <ion-toggle slot=\"end\" checked></ion-toggle>\n </ion-item>\n\n <ion-item>\n <ion-checkbox slot=\"start\" checked></ion-checkbox>\n <ion-label>Checkbox</ion-label>\n </ion-item>\n</template>\n\n<script>\nimport { \n IonCheckbox, \n IonInput, \n IonItem, \n IonLabel,\n IonToggle\n} from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { \n IonCheckbox, \n IonInput, \n IonItem, \n IonLabel,\n IonToggle\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "position",
|
||
"type": "\"fixed\" | \"floating\" | \"stacked\" | undefined",
|
||
"mutable": false,
|
||
"attr": "position",
|
||
"reflectToAttr": false,
|
||
"docs": "The position determines where and how the label behaves inside an item.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "fixed",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "floating",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "stacked",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the label"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [
|
||
"ion-select-popover"
|
||
],
|
||
"dependencies": [],
|
||
"dependencyGraph": {
|
||
"ion-select-popover": [
|
||
"ion-label"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/list/list.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-list",
|
||
"readme": "# ion-list\n\nLists 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.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<!-- List of Text Items -->\n<ion-list>\n <ion-item>\n <ion-label>Pokémon Yellow</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Mega Man X</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>The Legend of Zelda</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Pac-Man</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Super Mario World</ion-label>\n </ion-item>\n</ion-list>\n\n<!-- List of Input Items -->\n<ion-list>\n <ion-item>\n <ion-label>Input</ion-label>\n <ion-input></ion-input>\n </ion-item>\n <ion-item>\n <ion-label>Toggle</ion-label>\n <ion-toggle slot=\"end\"></ion-toggle>\n </ion-item>\n <ion-item>\n <ion-label>Radio</ion-label>\n <ion-radio slot=\"end\"></ion-radio>\n </ion-item>\n <ion-item>\n <ion-label>Checkbox</ion-label>\n <ion-checkbox slot=\"start\"></ion-checkbox>\n </ion-item>\n</ion-list>\n\n<!-- List of Sliding Items -->\n<ion-list>\n <ion-item-sliding>\n <ion-item>\n <ion-label>Item</ion-label>\n </ion-item>\n <ion-item-options side=\"end\">\n <ion-item-option (click)=\"unread(item)\">Unread</ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <ion-item-sliding>\n <ion-item>\n <ion-label>Item</ion-label>\n </ion-item>\n <ion-item-options side=\"end\">\n <ion-item-option (click)=\"unread(item)\">Unread</ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n</ion-list>\n```",
|
||
"javascript": "```html\n<!-- List of Text Items -->\n<ion-list>\n <ion-item>\n <ion-label>Pokémon Yellow</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Mega Man X</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>The Legend of Zelda</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Pac-Man</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Super Mario World</ion-label>\n </ion-item>\n</ion-list>\n\n<!-- List of Input Items -->\n<ion-list>\n <ion-item>\n <ion-label>Input</ion-label>\n <ion-input></ion-input>\n </ion-item>\n <ion-item>\n <ion-label>Toggle</ion-label>\n <ion-toggle slot=\"end\"></ion-toggle>\n </ion-item>\n <ion-item>\n <ion-label>Radio</ion-label>\n <ion-radio slot=\"end\"></ion-radio>\n </ion-item>\n <ion-item>\n <ion-label>Checkbox</ion-label>\n <ion-checkbox slot=\"start\"></ion-checkbox>\n </ion-item>\n</ion-list>\n\n<!-- List of Sliding Items -->\n<ion-list>\n <ion-item-sliding>\n <ion-item>\n <ion-label>Item</ion-label>\n </ion-item>\n <ion-item-options side=\"end\">\n <ion-item-option onClick=\"unread(item)\">Unread</ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <ion-item-sliding>\n <ion-item>\n <ion-label>Item</ion-label>\n </ion-item>\n <ion-item-options side=\"end\">\n <ion-item-option onClick=\"unread(item)\">Unread</ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n</ion-list>\n```",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonList, IonItem, IonLabel, IonInput, IonToggle, IonRadio, IonCheckbox, IonItemSliding, IonItemOption, IonItemOptions, IonContent } from '@ionic/react';\n\nexport const ListExample: React.FC = () => (\n <IonContent>\n {/*-- List of Text Items --*/}\n <IonList>\n <IonItem>\n <IonLabel>Pokémon Yellow</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>Mega Man X</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>The Legend of Zelda</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>Pac-Man</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>Super Mario World</IonLabel>\n </IonItem>\n </IonList>\n\n {/*-- List of Input Items --*/}\n <IonList>\n <IonItem>\n <IonLabel>Input</IonLabel>\n <IonInput></IonInput>\n </IonItem>\n <IonItem>\n <IonLabel>Toggle</IonLabel>\n <IonToggle slot=\"end\"></IonToggle>\n </IonItem>\n <IonItem>\n <IonLabel>Radio</IonLabel>\n <IonRadio slot=\"end\"></IonRadio>\n </IonItem>\n <IonItem>\n <IonLabel>Checkbox</IonLabel>\n <IonCheckbox slot=\"start\" />\n </IonItem>\n </IonList>\n\n {/*-- List of Sliding Items --*/}\n <IonList>\n <IonItemSliding>\n <IonItem>\n <IonLabel>Item</IonLabel>\n </IonItem>\n <IonItemOptions side=\"end\">\n <IonItemOption onClick={() => {}}>Unread</IonItemOption>\n </IonItemOptions>\n </IonItemSliding>\n\n <IonItemSliding>\n <IonItem>\n <IonLabel>Item</IonLabel>\n </IonItem>\n <IonItemOptions side=\"end\">\n <IonItemOption onClick={() => {}}>Unread</IonItemOption>\n </IonItemOptions>\n </IonItemSliding>\n </IonList>\n </IonContent>\n);\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'list-example',\n styleUrl: 'list-example.css'\n})\nexport class ListExample {\n unread(ev: Event) {\n console.log('Item is unread', ev);\n }\n\n render() {\n return [\n // List of Text Items\n <ion-list>\n <ion-item>\n <ion-label>Pokémon Yellow</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Mega Man X</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>The Legend of Zelda</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Pac-Man</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Super Mario World</ion-label>\n </ion-item>\n </ion-list>,\n\n // List of Input Items\n <ion-list>\n <ion-item>\n <ion-label>Input</ion-label>\n <ion-input></ion-input>\n </ion-item>\n <ion-item>\n <ion-label>Toggle</ion-label>\n <ion-toggle slot=\"end\"></ion-toggle>\n </ion-item>\n <ion-item>\n <ion-label>Radio</ion-label>\n <ion-radio slot=\"end\"></ion-radio>\n </ion-item>\n <ion-item>\n <ion-label>Checkbox</ion-label>\n <ion-checkbox slot=\"start\"></ion-checkbox>\n </ion-item>\n </ion-list>,\n\n // List of Sliding Items\n <ion-list>\n <ion-item-sliding>\n <ion-item>\n <ion-label>Item</ion-label>\n </ion-item>\n <ion-item-options side=\"end\">\n <ion-item-option onClick={(ev) => this.unread(ev)}>Unread</ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <ion-item-sliding>\n <ion-item>\n <ion-label>Item</ion-label>\n </ion-item>\n <ion-item-options side=\"end\">\n <ion-item-option onClick={(ev) => this.unread(ev)}>Unread</ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n </ion-list>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <!-- List of Text Items -->\n <ion-list>\n <ion-item>\n <ion-label>Pokémon Yellow</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Mega Man X</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>The Legend of Zelda</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Pac-Man</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Super Mario World</ion-label>\n </ion-item>\n </ion-list>\n\n <!-- List of Input Items -->\n <ion-list>\n <ion-item>\n <ion-label>Input</ion-label>\n <ion-input></ion-input>\n </ion-item>\n <ion-item>\n <ion-label>Toggle</ion-label>\n <ion-toggle slot=\"end\"></ion-toggle>\n </ion-item>\n <ion-item>\n <ion-label>Radio</ion-label>\n <ion-radio slot=\"end\"></ion-radio>\n </ion-item>\n <ion-item>\n <ion-label>Checkbox</ion-label>\n <ion-checkbox slot=\"start\"></ion-checkbox>\n </ion-item>\n </ion-list>\n\n <!-- List of Sliding Items -->\n <ion-list>\n <ion-item-sliding>\n <ion-item>\n <ion-label>Item</ion-label>\n </ion-item>\n <ion-item-options side=\"end\">\n <ion-item-option @click=\"unread(item)\">Unread</ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n\n <ion-item-sliding>\n <ion-item>\n <ion-label>Item</ion-label>\n </ion-item>\n <ion-item-options side=\"end\">\n <ion-item-option @click=\"unread(item)\">Unread</ion-item-option>\n </ion-item-options>\n </ion-item-sliding>\n </ion-list>\n</template>\n\n<script>\nimport { \n IonCheckbox, \n IonInput, \n IonItem, \n IonItemOption, \n IonItemOptions, \n IonItemSliding, \n IonList, \n IonLabel, \n IonRadio, \n IonToggle \n} from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { \n IonCheckbox, \n IonInput, \n IonItem, \n IonItemOption, \n IonItemOptions, \n IonItemSliding, \n IonList, \n IonLabel, \n IonRadio, \n IonToggle \n }\n});\n</script>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "inset",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "inset",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the list will have margin around it and rounded corners.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "lines",
|
||
"type": "\"full\" | \"inset\" | \"none\" | undefined",
|
||
"mutable": false,
|
||
"attr": "lines",
|
||
"reflectToAttr": false,
|
||
"docs": "How the bottom border should be displayed on all items.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "full",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "inset",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "none",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "closeSlidingItems",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "closeSlidingItems() => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "If `ion-item-sliding` are used inside the list, this method closes\nany open sliding item.\n\nReturns `true` if an actual `ion-item-sliding` is closed.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [
|
||
"ion-select-popover"
|
||
],
|
||
"dependencies": [],
|
||
"dependencyGraph": {
|
||
"ion-select-popover": [
|
||
"ion-list"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/list-header/list-header.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-list-header",
|
||
"readme": "# ion-list-header\n\nListHeader a header component for a list.\nUnlike ItemDivider, ListHeaders are styled to be stand-out from the rest of the list items.\n\n",
|
||
"docs": "ListHeader a header component for a list.\nUnlike ItemDivider, ListHeaders are styled to be stand-out from the rest of the list items.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<!-- Default List Header -->\n<ion-list-header>\n <ion-label>List Header</ion-label>\n</ion-list-header>\n\n<!-- List Header with Button -->\n<ion-list-header>\n <ion-label>New This Week</ion-label>\n <ion-button>See All</ion-button>\n</ion-list-header>\n\n<!-- List Header with Outline Button -->\n<ion-list-header>\n <ion-label>New This Week</ion-label>\n <ion-button fill=\"outline\">See All</ion-button>\n</ion-list-header>\n\n<!-- List Header Full Lines -->\n<ion-list-header lines=\"full\">\n <ion-label>New This Week</ion-label>\n <ion-button>See All</ion-button>\n</ion-list-header>\n\n<!-- List Header Inset Lines -->\n<ion-list-header lines=\"inset\">\n <ion-label>New This Week</ion-label>\n <ion-button>See All</ion-button>\n</ion-list-header>\n\n<!-- List Headers in Lists -->\n<ion-list>\n <ion-list-header lines=\"inset\">\n <ion-label>Recent</ion-label>\n <ion-button>Clear</ion-button>\n </ion-list-header>\n <ion-item lines=\"none\">\n <ion-label color=\"primary\">\n <h1>I got you babe</h1>\n </ion-label>\n </ion-item>\n</ion-list>\n\n<ion-list>\n <ion-list-header lines=\"inset\">\n <ion-label>Trending</ion-label>\n </ion-list-header>\n <ion-item>\n <ion-label color=\"primary\">\n <h1>harry styles</h1>\n </ion-label>\n </ion-item>\n <ion-item>\n <ion-label color=\"primary\">\n <h1>christmas</h1>\n </ion-label>\n </ion-item>\n <ion-item lines=\"none\">\n <ion-label color=\"primary\">\n <h1>falling</h1>\n </ion-label>\n </ion-item>\n</ion-list>\n```\n",
|
||
"javascript": "```html\n<!-- Default List Header -->\n<ion-list-header>\n <ion-label>List Header</ion-label>\n</ion-list-header>\n\n<!-- List Header with Button -->\n<ion-list-header>\n <ion-label>New This Week</ion-label>\n <ion-button>See All</ion-button>\n</ion-list-header>\n\n<!-- List Header with Outline Button -->\n<ion-list-header>\n <ion-label>New This Week</ion-label>\n <ion-button fill=\"outline\">See All</ion-button>\n</ion-list-header>\n\n<!-- List Header Full Lines -->\n<ion-list-header lines=\"full\">\n <ion-label>New This Week</ion-label>\n <ion-button>See All</ion-button>\n</ion-list-header>\n\n<!-- List Header Inset Lines -->\n<ion-list-header lines=\"inset\">\n <ion-label>New This Week</ion-label>\n <ion-button>See All</ion-button>\n</ion-list-header>\n\n<!-- List Headers in Lists -->\n<ion-list>\n <ion-list-header lines=\"inset\">\n <ion-label>Recent</ion-label>\n <ion-button>Clear</ion-button>\n </ion-list-header>\n <ion-item lines=\"none\">\n <ion-label color=\"primary\">\n <h1>I got you babe</h1>\n </ion-label>\n </ion-item>\n</ion-list>\n\n<ion-list>\n <ion-list-header lines=\"inset\">\n <ion-label>Trending</ion-label>\n </ion-list-header>\n <ion-item>\n <ion-label color=\"primary\">\n <h1>harry styles</h1>\n </ion-label>\n </ion-item>\n <ion-item>\n <ion-label color=\"primary\">\n <h1>christmas</h1>\n </ion-label>\n </ion-item>\n <ion-item lines=\"none\">\n <ion-label color=\"primary\">\n <h1>falling</h1>\n </ion-label>\n </ion-item>\n</ion-list>\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonButton, IonContent, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';\n\nexport const ListHeaderExample: React.FC = () => (\n <IonContent>\n {/*-- Default List Header --*/}\n <IonListHeader>\n <IonLabel>List Header</IonLabel>\n </IonListHeader>\n\n {/*-- List Header with Button --*/}\n <IonListHeader>\n <IonLabel>New This Week</IonLabel>\n <IonButton>See All</IonButton>\n </IonListHeader>\n\n {/*-- List Header with Outline Button --*/}\n <IonListHeader>\n <IonLabel>New This Week</IonLabel>\n <IonButton fill=\"outline\">See All</IonButton>\n </IonListHeader>\n\n {/*-- List Header Full Lines --*/}\n <IonListHeader lines=\"full\">\n <IonLabel>New This Week</IonLabel>\n <IonButton>See All</IonButton>\n </IonListHeader>\n\n {/*-- List Header Inset Lines --*/}\n <IonListHeader lines=\"inset\">\n <IonLabel>New This Week</IonLabel>\n <IonButton>See All</IonButton>\n </IonListHeader>\n\n {/*-- List Headers in Lists --*/}\n <IonList>\n <IonListHeader lines=\"inset\">\n <IonLabel>Recent</IonLabel>\n <IonButton>Clear</IonButton>\n </IonListHeader>\n <IonItem lines=\"none\">\n <IonLabel color=\"primary\">\n <h1>I got you babe</h1>\n </IonLabel>\n </IonItem>\n </IonList>\n\n <IonList>\n <IonListHeader lines=\"inset\">\n <IonLabel>Trending</IonLabel>\n </IonListHeader>\n <IonItem>\n <IonLabel color=\"primary\">\n <h1>harry styles</h1>\n </IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel color=\"primary\">\n <h1>christmas</h1>\n </IonLabel>\n </IonItem>\n <IonItem lines=\"none\">\n <IonLabel color=\"primary\">\n <h1>falling</h1>\n </IonLabel>\n </IonItem>\n </IonList>\n </IonContent>\n);\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'list-header-example',\n styleUrl: 'list-header-example.css'\n})\nexport class ListHeaderExample {\n render() {\n return [\n // Default List Header\n <ion-list-header>\n <ion-label>List Header</ion-label>\n </ion-list-header>,\n\n // List Header with Button\n <ion-list-header>\n <ion-label>New This Week</ion-label>\n <ion-button>See All</ion-button>\n </ion-list-header>,\n\n // List Header with Outline Button\n <ion-list-header>\n <ion-label>New This Week</ion-label>\n <ion-button fill=\"outline\">See All</ion-button>\n </ion-list-header>,\n\n // List Header Full Lines\n <ion-list-header lines=\"full\">\n <ion-label>New This Week</ion-label>\n <ion-button>See All</ion-button>\n </ion-list-header>,\n\n // List Header Inset Lines\n <ion-list-header lines=\"inset\">\n <ion-label>New This Week</ion-label>\n <ion-button>See All</ion-button>\n </ion-list-header>,\n\n // List Headers in Lists\n <ion-list>\n <ion-list-header lines=\"inset\">\n <ion-label>Recent</ion-label>\n <ion-button>Clear</ion-button>\n </ion-list-header>\n <ion-item lines=\"none\">\n <ion-label color=\"primary\">\n <h1>I got you babe</h1>\n </ion-label>\n </ion-item>\n </ion-list>,\n\n <ion-list>\n <ion-list-header lines=\"inset\">\n <ion-label>Trending</ion-label>\n </ion-list-header>\n <ion-item>\n <ion-label color=\"primary\">\n <h1>harry styles</h1>\n </ion-label>\n </ion-item>\n <ion-item>\n <ion-label color=\"primary\">\n <h1>christmas</h1>\n </ion-label>\n </ion-item>\n <ion-item lines=\"none\">\n <ion-label color=\"primary\">\n <h1>falling</h1>\n </ion-label>\n </ion-item>\n </ion-list>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <!-- Default List Header -->\n <ion-list-header>\n <ion-label>List Header</ion-label>\n </ion-list-header>\n\n <!-- List Header with Button -->\n <ion-list-header>\n <ion-label>New This Week</ion-label>\n <ion-button>See All</ion-button>\n </ion-list-header>\n\n <!-- List Header with Outline Button -->\n <ion-list-header>\n <ion-label>New This Week</ion-label>\n <ion-button fill=\"outline\">See All</ion-button>\n </ion-list-header>\n\n <!-- List Header Full Lines -->\n <ion-list-header lines=\"full\">\n <ion-label>New This Week</ion-label>\n <ion-button>See All</ion-button>\n </ion-list-header>\n\n <!-- List Header Inset Lines -->\n <ion-list-header lines=\"inset\">\n <ion-label>New This Week</ion-label>\n <ion-button>See All</ion-button>\n </ion-list-header>\n\n <!-- List Headers in Lists -->\n <ion-list>\n <ion-list-header lines=\"inset\">\n <ion-label>Recent</ion-label>\n <ion-button>Clear</ion-button>\n </ion-list-header>\n <ion-item lines=\"none\">\n <ion-label color=\"primary\">\n <h1>I got you babe</h1>\n </ion-label>\n </ion-item>\n </ion-list>\n\n <ion-list>\n <ion-list-header lines=\"inset\">\n <ion-label>Trending</ion-label>\n </ion-list-header>\n <ion-item>\n <ion-label color=\"primary\">\n <h1>harry styles</h1>\n </ion-label>\n </ion-item>\n <ion-item>\n <ion-label color=\"primary\">\n <h1>christmas</h1>\n </ion-label>\n </ion-item>\n <ion-item lines=\"none\">\n <ion-label color=\"primary\">\n <h1>falling</h1>\n </ion-label>\n </ion-item>\n </ion-list>\n</template>\n\n<script>\nimport { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonItem, IonLabel, IonList, IonListHeader }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "lines",
|
||
"type": "\"full\" | \"inset\" | \"none\" | undefined",
|
||
"mutable": false,
|
||
"attr": "lines",
|
||
"reflectToAttr": false,
|
||
"docs": "How the bottom border should be displayed on the list header.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "full",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "inset",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "none",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the list header"
|
||
},
|
||
{
|
||
"name": "--border-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the list header border"
|
||
},
|
||
{
|
||
"name": "--border-style",
|
||
"annotation": "prop",
|
||
"docs": "Style of the list header border"
|
||
},
|
||
{
|
||
"name": "--border-width",
|
||
"annotation": "prop",
|
||
"docs": "Width of the list header border"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the list header text"
|
||
},
|
||
{
|
||
"name": "--inner-border-width",
|
||
"annotation": "prop",
|
||
"docs": "Width of the inner list header border"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [
|
||
"ion-select-popover"
|
||
],
|
||
"dependencies": [],
|
||
"dependencyGraph": {
|
||
"ion-select-popover": [
|
||
"ion-list-header"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/loading/loading.tsx",
|
||
"encapsulation": "scoped",
|
||
"tag": "ion-loading",
|
||
"readme": "# ion-loading\n\nAn 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.\n\n## Dismissing\n\nThe loading indicator can be dismissed automatically after a specific amount of time by passing the number of milliseconds to display it in the `duration` of the loading options. To dismiss the loading indicator after creation, call the `dismiss()` method on the loading instance. The `onDidDismiss` function can be called to perform an action after the loading indicator is dismissed.\n\n## Customization\n\nLoading uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector.\n\nWe recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. View the [Usage](#usage) section for an example of how to pass a class using `cssClass`.\n\n```css\n/* DOES NOT WORK - not specific enough */\nion-loading {\n color: green;\n}\n\n/* Works - pass \"my-custom-class\" in cssClass to increase specificity */\n.my-custom-class {\n color: green;\n}\n```\n\nAny of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Loading without needing to target individual elements:\n\n```css\n.my-custom-class {\n --background: #222;\n --spinner-color: #fff;\n\n color: #fff;\n}\n```\n\n> If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information.\n\n## Interfaces\n\n### LoadingOptions\n\n```typescript\ninterface LoadingOptions {\n spinner?: SpinnerTypes | null;\n message?: string | IonicSafeString;\n cssClass?: string | string[];\n showBackdrop?: boolean;\n duration?: number;\n translucent?: boolean;\n animated?: boolean;\n backdropDismiss?: boolean;\n mode?: Mode;\n keyboardClose?: boolean;\n id?: string;\n htmlAttributes?: LoadingAttributes;\n\n enterAnimation?: AnimationBuilder;\n leaveAnimation?: AnimationBuilder;\n}\n```\n\n### LoadingAttributes\n\n```typescript\ninterface LoadingAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}\n```\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```typescript\nimport { Component } from '@angular/core';\nimport { LoadingController } from '@ionic/angular';\n\n@Component({\n selector: 'loading-example',\n templateUrl: 'loading-example.html',\n styleUrls: ['./loading-example.css']\n})\nexport class LoadingExample {\n constructor(public loadingController: LoadingController) {}\n\n async presentLoading() {\n const loading = await this.loadingController.create({\n cssClass: 'my-custom-class',\n message: 'Please wait...',\n duration: 2000\n });\n await loading.present();\n\n const { role, data } = await loading.onDidDismiss();\n console.log('Loading dismissed!');\n }\n\n async presentLoadingWithOptions() {\n const loading = await this.loadingController.create({\n spinner: null,\n duration: 5000,\n message: 'Click the backdrop to dismiss early...',\n translucent: true,\n cssClass: 'custom-class custom-loading',\n backdropDismiss: true\n });\n await loading.present();\n\n const { role, data } = await loading.onDidDismiss();\n console.log('Loading dismissed with role:', role);\n }\n}\n```\n\n\n### Style Placement\n\nIn Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Loading can be presented from within a page, the `ion-loading` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config).\n",
|
||
"javascript": "```javascript\nasync function presentLoading() {\n const loading = document.createElement('ion-loading');\n\n loading.cssClass = 'my-custom-class';\n loading.message = 'Please wait...';\n loading.duration = 2000;\n\n document.body.appendChild(loading);\n await loading.present();\n\n const { role, data } = await loading.onDidDismiss();\n console.log('Loading dismissed!');\n}\n\nasync function presentLoadingWithOptions() {\n const loading = document.createElement('ion-loading');\n\n loading.spinner = null;\n loading.duration = 5000;\n loading.message = 'Click the backdrop to dismiss early...';\n loading.translucent = true;\n loading.cssClass = 'custom-class custom-loading';\n loading.backdropDismiss = true;\n\n document.body.appendChild(loading);\n await loading.present();\n\n const { role, data } = await loading.onDidDismiss();\n console.log('Loading dismissed with role:', role);\n}\n```\n",
|
||
"react": "```tsx\n/* Using with useIonLoading Hook */\n\nimport React from 'react';\nimport { IonButton, IonContent, IonPage, useIonLoading } from '@ionic/react';\n\ninterface LoadingProps {}\n\nconst LoadingExample: React.FC<LoadingProps> = () => {\n const [present, dismiss] = useIonLoading();\n /**\n * The recommended way of dismissing is to use the `dismiss` property\n * on `IonLoading`, but the `dismiss` method returned from `useIonLoading`\n * can be used for more complex scenarios.\n */\n return (\n <IonPage>\n <IonContent>\n <IonButton\n expand=\"block\"\n onClick={() => {\n present({\n message: 'Loading...',\n duration: 3000\n })\n }}\n >\n Show Loading\n </IonButton>\n <IonButton\n expand=\"block\"\n onClick={() => present('Loading', 2000, 'dots')}\n >\n Show Loading using params\n </IonButton>\n </IonContent>\n </IonPage>\n );\n};\n```\n\n```tsx\n/* Using with IonLoading Component */\n\nimport React, { useState } from 'react';\nimport { IonLoading, IonButton, IonContent } from '@ionic/react';\n\nexport const LoadingExample: React.FC = () => {\n const [showLoading, setShowLoading] = useState(true);\n\n setTimeout(() => {\n setShowLoading(false);\n }, 2000);\n\n return (\n <IonContent>\n <IonButton onClick={() => setShowLoading(true)}>Show Loading</IonButton>\n <IonLoading\n cssClass='my-custom-class'\n isOpen={showLoading}\n onDidDismiss={() => setShowLoading(false)}\n message={'Please wait...'}\n duration={5000}\n />\n </IonContent>\n );\n};\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\nimport { loadingController } from '@ionic/core';\n\n@Component({\n tag: 'loading-example',\n styleUrl: 'loading-example.css'\n})\nexport class LoadingExample {\n async presentLoading() {\n const loading = await loadingController.create({\n cssClass: 'my-custom-class',\n message: 'Please wait...',\n duration: 2000\n });\n await loading.present();\n\n const { role, data } = await loading.onDidDismiss();\n console.log('Loading dismissed!', role, data);\n }\n\n async presentLoadingWithOptions() {\n const loading = await loadingController.create({\n spinner: null,\n duration: 5000,\n message: 'Click the backdrop to dismiss early...',\n translucent: true,\n cssClass: 'custom-class custom-loading',\n backdropDismiss: true\n });\n await loading.present();\n\n const { role, data } = await loading.onDidDismiss();\n console.log('Loading dismissed with role:', role, data);\n }\n\n render() {\n return [\n <ion-content>\n <ion-button onClick={() => this.presentLoading()}>Present Loading</ion-button>\n <ion-button onClick={() => this.presentLoadingWithOptions()}>Present Loading: Options</ion-button>\n </ion-content>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-button @click=\"presentLoading\">Show Loading</ion-button>\n <br />\n <ion-button @click=\"presentLoadingWithOptions\">Show Loading</ion-button>\n</template>\n\n<script>\n\n<script>\nimport { IonButton, loadingController } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n props: {\n timeout: { type: Number, default: 1000 },\n },\n methods: {\n async presentLoading() {\n const loading = await loadingController\n .create({\n cssClass: 'my-custom-class',\n message: 'Please wait...',\n duration: this.timeout,\n });\n \n await loading.present();\n \n setTimeout(function() {\n loading.dismiss()\n }, this.timeout);\n },\n async presentLoadingWithOptions() {\n const loading = await loadingController\n .create({\n spinner: null,\n duration: this.timeout,\n message: 'Click the backdrop to dismiss early...',\n translucent: true,\n cssClass: 'custom-class custom-loading',\n backdropDismiss: true\n });\n \n await loading.present();\n \n setTimeout(function() {\n loading.dismiss()\n }, this.timeout);\n },\n },\n components: { IonButton }\n});\n</script>\n```\n\nDevelopers can also use this component directly in their template:\n\n```html\n<template>\n <ion-button @click=\"setOpen(true)\">Show Loading</ion-button>\n <ion-loading\n :is-open=\"isOpenRef\"\n cssClass=\"my-custom-class\"\n message=\"Please wait...\"\n :duration=\"timeout\"\n @didDismiss=\"setOpen(false)\"\n >\n </ion-loading>\n</template>\n\n<script>\nimport { IonLoading, IonButton } from '@ionic/vue';\nimport { defineComponent, ref } from 'vue';\n\nexport default defineComponent({\n props: {\n timeout: { type: Number, default: 1000 },\n },\n components: { IonLoading, IonButton },\n setup() {\n const isOpenRef = ref(false);\n const setOpen = (state: boolean) => isOpenRef.value = state;\n \n return { isOpenRef, setOpen }\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "animated",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "animated",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the loading indicator will animate.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "backdropDismiss",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "backdrop-dismiss",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the loading indicator will be dismissed when the backdrop is clicked.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "cssClass",
|
||
"type": "string | string[] | undefined",
|
||
"mutable": false,
|
||
"attr": "css-class",
|
||
"reflectToAttr": false,
|
||
"docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "string[]"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "duration",
|
||
"type": "number",
|
||
"mutable": false,
|
||
"attr": "duration",
|
||
"reflectToAttr": false,
|
||
"docs": "Number of milliseconds to wait before dismissing the loading indicator.",
|
||
"docsTags": [],
|
||
"default": "0",
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "enterAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Animation to use when the loading indicator is presented.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "htmlAttributes",
|
||
"type": "LoadingAttributes | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Additional attributes to pass to the loader.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "LoadingAttributes"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "keyboardClose",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "keyboard-close",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "leaveAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Animation to use when the loading indicator is dismissed.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "message",
|
||
"type": "IonicSafeString | string | undefined",
|
||
"mutable": false,
|
||
"attr": "message",
|
||
"reflectToAttr": false,
|
||
"docs": "Optional text content to display in the loading indicator.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "IonicSafeString"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "showBackdrop",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "show-backdrop",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, a backdrop will be displayed behind the loading indicator.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "spinner",
|
||
"type": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-small\" | null | undefined",
|
||
"mutable": true,
|
||
"attr": "spinner",
|
||
"reflectToAttr": false,
|
||
"docs": "The name of the spinner to display.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "bubbles",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "circles",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "circular",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "crescent",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "dots",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "lines",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "lines-small",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "translucent",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "translucent",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the loading indicator will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "dismiss",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Dismiss the loading overlay after it has been presented.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "data Any data to emit in the dismiss events."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "role The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "onDidDismiss",
|
||
"returns": {
|
||
"type": "Promise<OverlayEventDetail<T>>",
|
||
"docs": ""
|
||
},
|
||
"signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
|
||
"parameters": [],
|
||
"docs": "Returns a promise that resolves when the loading did dismiss.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "onWillDismiss",
|
||
"returns": {
|
||
"type": "Promise<OverlayEventDetail<T>>",
|
||
"docs": ""
|
||
},
|
||
"signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
|
||
"parameters": [],
|
||
"docs": "Returns a promise that resolves when the loading will dismiss.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "present",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "present() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Present the loading overlay after it has been created.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionLoadingDidDismiss",
|
||
"detail": "OverlayEventDetail<any>",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted after the loading has dismissed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionLoadingDidPresent",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted after the loading has presented.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionLoadingWillDismiss",
|
||
"detail": "OverlayEventDetail<any>",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted before the loading has dismissed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionLoadingWillPresent",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted before the loading has presented.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--backdrop-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the backdrop"
|
||
},
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the loading dialog"
|
||
},
|
||
{
|
||
"name": "--height",
|
||
"annotation": "prop",
|
||
"docs": "Height of the loading dialog"
|
||
},
|
||
{
|
||
"name": "--max-height",
|
||
"annotation": "prop",
|
||
"docs": "Maximum height of the loading dialog"
|
||
},
|
||
{
|
||
"name": "--max-width",
|
||
"annotation": "prop",
|
||
"docs": "Maximum width of the loading dialog"
|
||
},
|
||
{
|
||
"name": "--min-height",
|
||
"annotation": "prop",
|
||
"docs": "Minimum height of the loading dialog"
|
||
},
|
||
{
|
||
"name": "--min-width",
|
||
"annotation": "prop",
|
||
"docs": "Minimum width of the loading dialog"
|
||
},
|
||
{
|
||
"name": "--spinner-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the loading spinner"
|
||
},
|
||
{
|
||
"name": "--width",
|
||
"annotation": "prop",
|
||
"docs": "Width of the loading dialog"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-backdrop",
|
||
"ion-spinner"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-loading": [
|
||
"ion-backdrop",
|
||
"ion-spinner"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/menu/menu.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-menu",
|
||
"readme": "# ion-menu\n\nThe 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.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "container - The container for the menu content.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "backdrop - The backdrop that appears over the main content when the menu is open.",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<ion-menu side=\"start\" menuId=\"first\" contentId=\"main\">\n <ion-header>\n <ion-toolbar color=\"primary\">\n <ion-title>Start Menu</ion-title>\n </ion-toolbar>\n </ion-header>\n <ion-content>\n <ion-list>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n </ion-list>\n </ion-content>\n</ion-menu>\n\n<ion-menu side=\"start\" menuId=\"custom\" contentId=\"main\" class=\"my-custom-menu\">\n <ion-header>\n <ion-toolbar color=\"tertiary\">\n <ion-title>Custom Menu</ion-title>\n </ion-toolbar>\n </ion-header>\n <ion-content>\n <ion-list>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n </ion-list>\n </ion-content>\n</ion-menu>\n\n<ion-menu side=\"end\" type=\"push\" contentId=\"main\">\n <ion-header>\n <ion-toolbar color=\"danger\">\n <ion-title>End Menu</ion-title>\n </ion-toolbar>\n </ion-header>\n <ion-content>\n <ion-list>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n </ion-list>\n </ion-content>\n</ion-menu>\n\n<ion-router-outlet id=\"main\"></ion-router-outlet>\n```\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MenuController } from '@ionic/angular';\n\n@Component({\n selector: 'menu-example',\n templateUrl: 'menu-example.html',\n styleUrls: ['./menu-example.css'],\n})\nexport class MenuExample {\n\nconstructor(private menu: MenuController) { }\n\n openFirst() {\n this.menu.enable(true, 'first');\n this.menu.open('first');\n }\n\n openEnd() {\n this.menu.open('end');\n }\n\n openCustom() {\n this.menu.enable(true, 'custom');\n this.menu.open('custom');\n }\n}\n```\n\n```css\n.my-custom-menu {\n --width: 500px;\n}\n```",
|
||
"javascript": "```html\n<ion-app>\n <ion-menu side=\"start\" menu-id=\"first\" content-id=\"main\">\n <ion-header>\n <ion-toolbar color=\"primary\">\n <ion-title>Start Menu</ion-title>\n </ion-toolbar>\n </ion-header>\n <ion-content>\n <ion-list>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n </ion-list>\n </ion-content>\n </ion-menu>\n\n <ion-menu side=\"start\" menu-id=\"custom\" class=\"my-custom-menu\" content-id=\"main\">\n <ion-header>\n <ion-toolbar color=\"tertiary\">\n <ion-title>Custom Menu</ion-title>\n </ion-toolbar>\n </ion-header>\n <ion-content>\n <ion-list>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n </ion-list>\n </ion-content>\n </ion-menu>\n\n <ion-menu side=\"end\" type=\"push\" content-id=\"main\">\n <ion-header>\n <ion-toolbar color=\"danger\">\n <ion-title>End Menu</ion-title>\n </ion-toolbar>\n </ion-header>\n <ion-content>\n <ion-list>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n </ion-list>\n </ion-content>\n </ion-menu>\n\n <div class=\"ion-page\" id=\"main\">\n <ion-header>\n <ion-toolbar>\n <ion-title>Menu - Basic</ion-title>\n </ion-toolbar>\n </ion-header>\n <ion-content class=\"ion-padding\">\n <ion-button expand=\"block\" onclick=\"openFirst()\">Open Start Menu</ion-button>\n <ion-button expand=\"block\" onclick=\"openEnd()\">Open End Menu</ion-button>\n <ion-button expand=\"block\" onclick=\"openCustom()\">Open Custom Menu</ion-button>\n </ion-content>\n </div>\n\n</ion-app>\n```\n\n```javascript\n<script type=\"module\">\n import { menuController } from '@ionic/core';\n window.menuController = menuController;\n</script>\n \n<script>\n function openFirst() {\n menuController.enable(true, 'first');\n menuController.open('first');\n }\n \n function openEnd() {\n menuController.open('end');\n }\n \n function openCustom() {\n menuController.enable(true, 'custom');\n menuController.open('custom');\n }\n</script>\n```\n\n```css\n.my-custom-menu {\n --width: 500px;\n}\n```",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonRouterOutlet } from '@ionic/react';\n\nexport const MenuExample: React.FC = () => (\n <>\n <IonMenu side=\"start\" menuId=\"first\">\n <IonHeader>\n <IonToolbar color=\"primary\">\n <IonTitle>Start Menu</IonTitle>\n </IonToolbar>\n </IonHeader>\n <IonContent>\n <IonList>\n <IonItem>Menu Item</IonItem>\n <IonItem>Menu Item</IonItem>\n <IonItem>Menu Item</IonItem>\n <IonItem>Menu Item</IonItem>\n <IonItem>Menu Item</IonItem>\n </IonList>\n </IonContent>\n </IonMenu>\n\n <IonMenu side=\"start\" menuId=\"custom\" className=\"my-custom-menu\">\n <IonHeader>\n <IonToolbar color=\"tertiary\">\n <IonTitle>Custom Menu</IonTitle>\n </IonToolbar>\n </IonHeader>\n <IonContent>\n <IonList>\n <IonItem>Menu Item</IonItem>\n <IonItem>Menu Item</IonItem>\n <IonItem>Menu Item</IonItem>\n <IonItem>Menu Item</IonItem>\n <IonItem>Menu Item</IonItem>\n </IonList>\n </IonContent>\n </IonMenu>\n\n <IonMenu side=\"end\" type=\"push\">\n <IonHeader>\n <IonToolbar color=\"danger\">\n <IonTitle>End Menu</IonTitle>\n </IonToolbar>\n </IonHeader>\n <IonContent>\n <IonList>\n <IonItem>Menu Item</IonItem>\n <IonItem>Menu Item</IonItem>\n <IonItem>Menu Item</IonItem>\n <IonItem>Menu Item</IonItem>\n <IonItem>Menu Item</IonItem>\n </IonList>\n </IonContent>\n </IonMenu>\n <IonRouterOutlet></IonRouterOutlet>\n </>\n);\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\nimport { menuController } from '@ionic/core';\n\n@Component({\n tag: 'menu-example',\n styleUrl: 'menu-example.css'\n})\nexport class MenuExample {\n openFirst() {\n menuController.enable(true, 'first');\n menuController.open('first');\n }\n\n openEnd() {\n menuController.open('end');\n }\n\n openCustom() {\n menuController.enable(true, 'custom');\n menuController.open('custom');\n }\n\n render() {\n return [\n <ion-menu side=\"start\" menuId=\"first\" contentId=\"main\">\n <ion-header>\n <ion-toolbar color=\"primary\">\n <ion-title>Start Menu</ion-title>\n </ion-toolbar>\n </ion-header>\n <ion-content>\n <ion-list>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n </ion-list>\n </ion-content>\n </ion-menu>,\n\n <ion-menu side=\"start\" menuId=\"custom\" contentId=\"main\" class=\"my-custom-menu\">\n <ion-header>\n <ion-toolbar color=\"tertiary\">\n <ion-title>Custom Menu</ion-title>\n </ion-toolbar>\n </ion-header>\n <ion-content>\n <ion-list>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n </ion-list>\n </ion-content>\n </ion-menu>,\n\n <ion-menu side=\"end\" type=\"push\" contentId=\"main\">\n <ion-header>\n <ion-toolbar color=\"danger\">\n <ion-title>End Menu</ion-title>\n </ion-toolbar>\n </ion-header>\n <ion-content>\n <ion-list>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n </ion-list>\n </ion-content>\n </ion-menu>,\n\n // A router outlet can be placed here instead\n <ion-content id=\"main\">\n <ion-button expand=\"block\" onClick={() => this.openFirst()}>Open Start Menu</ion-button>\n <ion-button expand=\"block\" onClick={() => this.openEnd()}>Open End Menu</ion-button>\n <ion-button expand=\"block\" onClick={() => this.openCustom()}>Open Custom Menu</ion-button>\n </ion-content>\n ];\n }\n}\n```\n\n```css\n.my-custom-menu {\n --width: 500px;\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-menu side=\"start\" menu-id=\"first\" content-id=\"main\">\n <ion-header>\n <ion-toolbar color=\"primary\">\n <ion-title>Start Menu</ion-title>\n </ion-toolbar>\n </ion-header>\n <ion-content>\n <ion-list>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n </ion-list>\n </ion-content>\n </ion-menu>\n\n <ion-menu side=\"start\" menu-id=\"custom\" class=\"my-custom-menu\" content-id=\"main\">\n <ion-header>\n <ion-toolbar color=\"tertiary\">\n <ion-title>Custom Menu</ion-title>\n </ion-toolbar>\n </ion-header>\n <ion-content>\n <ion-list>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n </ion-list>\n </ion-content>\n </ion-menu>\n\n <ion-menu side=\"end\" type=\"push\" content-id=\"main\">\n <ion-header>\n <ion-toolbar color=\"danger\">\n <ion-title>End Menu</ion-title>\n </ion-toolbar>\n </ion-header>\n <ion-content>\n <ion-list>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n <ion-item>Menu Item</ion-item>\n </ion-list>\n </ion-content>\n </ion-menu>\n\n <ion-router-outlet id=\"main\"></ion-router-outlet>\n</template>\n<style>\n.my-custom-menu {\n --width: 500px;\n}\n</style>\n\n<script>\nimport { \n IonContent, \n IonHeader, \n IonItem, \n IonList, \n IonMenu, \n IonRouterOutlet,\n IonTitle, \n IonToolbar,\n menuController\n} from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: {\n IonContent, \n IonHeader, \n IonItem, \n IonList, \n IonMenu, \n IonRouterOutlet,\n IonTitle, \n IonToolbar\n },\n methods: {\n openFirst() {\n menuController.enable(true, 'first');\n menuController.open('first');\n },\n openEnd() {\n menuController.open('end');\n },\n openCustom() {\n menuController.enable(true, 'custom');\n menuController.open('custom');\n }\n }\n});\n</script>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "contentId",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "content-id",
|
||
"reflectToAttr": true,
|
||
"docs": "The `id` of the main content. When using\na router this is typically `ion-router-outlet`.\nWhen not using a router, this is typically\nyour main view's `ion-content`. This is not the\nid of the `ion-content` inside of your `ion-menu`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": true,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the menu is disabled.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "maxEdgeStart",
|
||
"type": "number",
|
||
"mutable": false,
|
||
"attr": "max-edge-start",
|
||
"reflectToAttr": false,
|
||
"docs": "The edge threshold for dragging the menu open.\nIf a drag/swipe happens over this value, the menu is not triggered.",
|
||
"docsTags": [],
|
||
"default": "50",
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "menuId",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "menu-id",
|
||
"reflectToAttr": true,
|
||
"docs": "An id for the menu.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "side",
|
||
"type": "\"end\" | \"start\"",
|
||
"mutable": false,
|
||
"attr": "side",
|
||
"reflectToAttr": true,
|
||
"docs": "Which side of the view the menu should be placed.",
|
||
"docsTags": [],
|
||
"default": "'start'",
|
||
"values": [
|
||
{
|
||
"value": "end",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "start",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "swipeGesture",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "swipe-gesture",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, swiping the menu is enabled.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "type",
|
||
"type": "string | undefined",
|
||
"mutable": true,
|
||
"attr": "type",
|
||
"reflectToAttr": false,
|
||
"docs": "The display type of the menu.\nAvailable options: `\"overlay\"`, `\"reveal\"`, `\"push\"`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "close",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "close(animated?: boolean) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Closes the menu. If the menu is already closed or it can't be closed,\nit returns `false`.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "isActive",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "isActive() => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Returns `true` is the menu is active.\n\nA menu is active when it can be opened or closed, meaning it's enabled\nand it's not part of a `ion-split-pane`.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "isOpen",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "isOpen() => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Returns `true` is the menu is open.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "open",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "open(animated?: boolean) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Opens the menu. If the menu is already open or it can't be opened,\nit returns `false`.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "setOpen",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "setOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Opens or closes the button.\nIf the operation can't be completed successfully, it returns `false`.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "toggle",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "toggle(animated?: boolean) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.\nIf the operation can't be completed successfully, it returns `false`.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionDidClose",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the menu is closed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionDidOpen",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the menu is open.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionWillClose",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the menu is about to be closed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionWillOpen",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the menu is about to be opened.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [
|
||
{
|
||
"event": "ionSplitPaneVisible",
|
||
"target": "body",
|
||
"capture": false,
|
||
"passive": false
|
||
},
|
||
{
|
||
"event": "click",
|
||
"capture": true,
|
||
"passive": false
|
||
},
|
||
{
|
||
"event": "keydown",
|
||
"capture": false,
|
||
"passive": false
|
||
}
|
||
],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the menu"
|
||
},
|
||
{
|
||
"name": "--height",
|
||
"annotation": "prop",
|
||
"docs": "Height of the menu"
|
||
},
|
||
{
|
||
"name": "--max-height",
|
||
"annotation": "prop",
|
||
"docs": "Maximum height of the menu"
|
||
},
|
||
{
|
||
"name": "--max-width",
|
||
"annotation": "prop",
|
||
"docs": "Maximum width of the menu"
|
||
},
|
||
{
|
||
"name": "--min-height",
|
||
"annotation": "prop",
|
||
"docs": "Minimum height of the menu"
|
||
},
|
||
{
|
||
"name": "--min-width",
|
||
"annotation": "prop",
|
||
"docs": "Minimum width of the menu"
|
||
},
|
||
{
|
||
"name": "--width",
|
||
"annotation": "prop",
|
||
"docs": "Width of the menu"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [
|
||
{
|
||
"name": "backdrop",
|
||
"docs": "The backdrop that appears over the main content when the menu is open."
|
||
},
|
||
{
|
||
"name": "container",
|
||
"docs": "The container for the menu content."
|
||
}
|
||
],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-backdrop"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-menu": [
|
||
"ion-backdrop"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/menu-button/menu-button.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-menu-button",
|
||
"readme": "# ion-menu-button\n\nMenu Button is component that automatically creates the icon and functionality to open a menu on a page.\n\n",
|
||
"docs": "Menu Button is component that automatically creates the icon and functionality to open a menu on a page.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
},
|
||
{
|
||
"text": "native - The native HTML button element that wraps all child elements.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "icon - The menu button icon (uses ion-icon).",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {},
|
||
"props": [
|
||
{
|
||
"name": "autoHide",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "auto-hide",
|
||
"reflectToAttr": false,
|
||
"docs": "Automatically hides the menu button when the corresponding menu is not active",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot interact with the menu button.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "menu",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "menu",
|
||
"reflectToAttr": false,
|
||
"docs": "Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "type",
|
||
"type": "\"button\" | \"reset\" | \"submit\"",
|
||
"mutable": false,
|
||
"attr": "type",
|
||
"reflectToAttr": false,
|
||
"docs": "The type of the button.",
|
||
"docsTags": [],
|
||
"default": "'button'",
|
||
"values": [
|
||
{
|
||
"value": "button",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "reset",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "submit",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [
|
||
{
|
||
"event": "ionMenuChange",
|
||
"target": "body",
|
||
"capture": false,
|
||
"passive": false
|
||
},
|
||
{
|
||
"event": "ionSplitPaneVisible",
|
||
"target": "body",
|
||
"capture": false,
|
||
"passive": false
|
||
}
|
||
],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the menu button"
|
||
},
|
||
{
|
||
"name": "--background-focused",
|
||
"annotation": "prop",
|
||
"docs": "Background of the menu button when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--background-focused-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the menu button background when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--background-hover",
|
||
"annotation": "prop",
|
||
"docs": "Background of the menu button on hover"
|
||
},
|
||
{
|
||
"name": "--background-hover-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the background on hover"
|
||
},
|
||
{
|
||
"name": "--border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Border radius of the menu button"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the menu button"
|
||
},
|
||
{
|
||
"name": "--color-focused",
|
||
"annotation": "prop",
|
||
"docs": "Color of the menu button when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--color-hover",
|
||
"annotation": "prop",
|
||
"docs": "Color of the menu button on hover"
|
||
},
|
||
{
|
||
"name": "--padding-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom padding of the button"
|
||
},
|
||
{
|
||
"name": "--padding-end",
|
||
"annotation": "prop",
|
||
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button"
|
||
},
|
||
{
|
||
"name": "--padding-start",
|
||
"annotation": "prop",
|
||
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button"
|
||
},
|
||
{
|
||
"name": "--padding-top",
|
||
"annotation": "prop",
|
||
"docs": "Top padding of the button"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [
|
||
{
|
||
"name": "icon",
|
||
"docs": "The menu button icon (uses ion-icon)."
|
||
},
|
||
{
|
||
"name": "native",
|
||
"docs": "The native HTML button element that wraps all child elements."
|
||
}
|
||
],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-icon",
|
||
"ion-ripple-effect"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-menu-button": [
|
||
"ion-icon",
|
||
"ion-ripple-effect"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/menu-toggle/menu-toggle.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-menu-toggle",
|
||
"readme": "# ion-menu-toggle\n\nThe 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`.\n",
|
||
"docs": "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`.",
|
||
"docsTags": [],
|
||
"usage": {},
|
||
"props": [
|
||
{
|
||
"name": "autoHide",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "auto-hide",
|
||
"reflectToAttr": false,
|
||
"docs": "Automatically hides the content when the corresponding menu is not active.\n\nBy default, it's `true`. Change it to `false` in order to\nkeep `ion-menu-toggle` always visible regardless the state of the menu.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "menu",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "menu",
|
||
"reflectToAttr": false,
|
||
"docs": "Optional property that maps to a Menu's `menuId` prop.\nCan also be `start` or `end` for the menu side.\nThis is used to find the correct menu to toggle.\n\nIf this property is not used, `ion-menu-toggle` will toggle the\nfirst menu that is active.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [
|
||
{
|
||
"event": "ionMenuChange",
|
||
"target": "body",
|
||
"capture": false,
|
||
"passive": false
|
||
},
|
||
{
|
||
"event": "ionSplitPaneVisible",
|
||
"target": "body",
|
||
"capture": false,
|
||
"passive": false
|
||
}
|
||
],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/modal/modal.tsx",
|
||
"encapsulation": "scoped",
|
||
"tag": "ion-modal",
|
||
"readme": "# ion-modal\n\nA 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.\n\n## Dismissing\n\nThe modal can be dismissed after creation by calling the `dismiss()` method on the modal controller. The `onDidDismiss` function can be called to perform an action after the modal is dismissed.\n\n## Customization\n\nModal uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector.\n\nWe recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. View the [Usage](#usage) section for an example of how to pass a class using `cssClass`.\n\n```css\n/* DOES NOT WORK - not specific enough */\n.modal-wrapper {\n background: #222;\n}\n\n/* Works - pass \"my-custom-class\" in cssClass to increase specificity */\n.my-custom-class .modal-wrapper {\n background: #222;\n}\n```\n\nAny of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Modal without needing to target individual elements:\n\n```css\n.my-custom-class {\n --background: #222;\n}\n```\n\n> If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information.\n\n> `ion-modal` works under the assumption that stacked modals are the same size. As a result, each subsequent modal will have no box shadow and a backdrop opacity of `0`. This is to avoid the effect of shadows and backdrops getting darker with each added modal. This can be changed by setting the `--box-shadow` and `--backdrop-opacity` CSS variables:\n``` \nion-modal.stack-modal {\n --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);\n --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);\n}\n```\n\n## Interfaces\n\n### ModalOptions\n\n```typescript\ninterface ModalOptions<T extends ComponentRef = ComponentRef> {\n component: T;\n componentProps?: ComponentProps<T>;\n presentingElement?: HTMLElement;\n showBackdrop?: boolean;\n backdropDismiss?: boolean;\n cssClass?: string | string[];\n animated?: boolean;\n swipeToClose?: boolean;\n\n mode?: Mode;\n keyboardClose?: boolean;\n id?: string;\n htmlAttributes?: ModalAttributes;\n\n enterAnimation?: AnimationBuilder;\n leaveAnimation?: AnimationBuilder;\n}\n```\n\n### ModalAttributes\n\n```typescript\ninterface ModalAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}\n```\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```typescript\nimport { Component } from '@angular/core';\nimport { ModalController } from '@ionic/angular';\nimport { ModalPage } from '../modal/modal.page';\n\n@Component({\n selector: 'modal-example',\n templateUrl: 'modal-example.html',\n styleUrls: ['./modal-example.css']\n})\nexport class ModalExample {\n constructor(public modalController: ModalController) {\n\n }\n\n async presentModal() {\n const modal = await this.modalController.create({\n component: ModalPage,\n cssClass: 'my-custom-class'\n });\n return await modal.present();\n }\n}\n```\n\n```typescript\nimport { Component, Input } from '@angular/core';\n\n@Component({\n selector: 'modal-page',\n})\nexport class ModalPage {\n\n constructor() {}\n\n}\n```\n\n> If you need a wrapper element inside of your modal component, we recommend using a `<div class=\"ion-page\">` so that the component dimensions are still computed properly.\n\n### Passing Data\n\nDuring creation of a modal, data can be passed in through the `componentProps`.\nThe previous example can be written to include data:\n\n```typescript\nasync presentModal() {\n const modal = await this.modalController.create({\n component: ModalPage,\n cssClass: 'my-custom-class',\n componentProps: {\n 'firstName': 'Douglas',\n 'lastName': 'Adams',\n 'middleInitial': 'N'\n }\n });\n return await modal.present();\n}\n```\n\nTo get the data passed into the `componentProps`, set it as an `@Input`:\n\n```typescript\nexport class ModalPage {\n\n // Data passed in by componentProps\n @Input() firstName: string;\n @Input() lastName: string;\n @Input() middleInitial: string;\n\n}\n```\n\n### Dismissing a Modal\n\nA modal can be dismissed by calling the dismiss method on the modal controller and optionally passing any data from the modal.\n\n```javascript\nexport class ModalPage {\n ...\n\n dismiss() {\n // using the injected ModalController this page\n // can \"dismiss\" itself and optionally pass back data\n this.modalController.dismiss({\n 'dismissed': true\n });\n }\n}\n```\n\nAfter being dismissed, the data can be read in through the `onWillDismiss` or `onDidDismiss` attached to the modal after creation:\n\n```javascript\nconst { data } = await modal.onWillDismiss();\nconsole.log(data);\n```\n\n\n#### Lazy Loading\n\nWhen lazy loading a modal, it's important to note that the modal will not be loaded when it is opened, but rather when the module that imports the modal's module is loaded.\n\nFor example, say there exists a `CalendarComponent` and an `EventModal`. The modal is presented by clicking a button in the `CalendarComponent`. In Angular, the `EventModalModule` would need to be included in the `CalendarComponentModule` since the modal is created in the `CalendarComponent`:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { IonicModule } from '@ionic/angular';\n\nimport { CalendarComponent } from './calendar.component';\nimport { EventModalModule } from '../modals/event/event.module';\n\n@NgModule({\n declarations: [\n CalendarComponent\n ],\n imports: [\n IonicModule,\n CommonModule,\n EventModalModule\n ],\n exports: [\n CalendarComponent\n ]\n})\n\nexport class CalendarComponentModule {}\n```\n\n### Swipeable Modals\n\nModals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.\n\n> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect.\n\nIf you are creating an application that uses `ion-tabs`, it is recommended that you get the parent `ion-router-outlet` using `this.routerOutlet.parentOutlet.nativeEl`, otherwise the tabbar will not scale down when the modal opens.\n\n```javascript\nimport { IonRouterOutlet } from '@ionic/angular';\n\nconstructor(private routerOutlet: IonRouterOutlet) {}\n\nasync presentModal() {\n const modal = await this.modalController.create({\n component: ModalPage,\n cssClass: 'my-custom-class',\n swipeToClose: true,\n presentingElement: this.routerOutlet.nativeEl\n });\n return await modal.present();\n}\n```\n\nIn most scenarios, using the `ion-router-outlet` element as the `presentingElement` is fine. In cases where you are presenting a card-style modal from within another modal, you should pass in the top-most `ion-modal` element as the `presentingElement`.\n\n```javascript\nimport { ModalController } from '@ionic/angular';\n\nconstructor(private modalController: ModalController) {}\n\nasync presentModal() {\n const modal = await this.modalController.create({\n component: ModalPage,\n cssClass: 'my-custom-class',\n swipeToClose: true,\n presentingElement: await this.modalController.getTop() // Get the top-most ion-modal\n });\n return await modal.present();\n}\n```\n\n\n### Style Placement\n\nIn Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Modal can be presented from within a page, the `ion-modal` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config).\n",
|
||
"javascript": "\n```javascript\ncustomElements.define('modal-page', class extends HTMLElement {\n connectedCallback() {\n this.innerHTML = `\n<ion-header>\n <ion-toolbar>\n <ion-title>Modal Header</ion-title>\n <ion-buttons slot=\"primary\">\n <ion-button onClick=\"dismissModal()\">\n <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n </ion-button>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n<ion-content class=\"ion-padding\">\n Modal Content\n</ion-content>`;\n }\n});\n\nfunction presentModal() {\n // create the modal with the `modal-page` component\n const modalElement = document.createElement('ion-modal');\n modalElement.component = 'modal-page';\n modalElement.cssClass = 'my-custom-class';\n\n // present the modal\n document.body.appendChild(modalElement);\n return modalElement.present();\n}\n```\n\n> If you need a wrapper element inside of your modal component, we recommend using a `<div class=\"ion-page\">` so that the component dimensions are still computed properly.\n\n### Passing Data\n\nDuring creation of a modal, data can be passed in through the `componentProps`. The previous example can be written to include data:\n\n```javascript\nconst modalElement = document.createElement('ion-modal');\nmodalElement.component = 'modal-page';\nmodalElement.cssClass = 'my-custom-class';\nmodalElement.componentProps = {\n 'firstName': 'Douglas',\n 'lastName': 'Adams',\n 'middleInitial': 'N'\n};\n```\n\nTo get the data passed into the `componentProps`, query for the modal in the `modal-page`:\n\n```js\ncustomElements.define('modal-page', class extends HTMLElement {\n connectedCallback() {\n const modalElement = document.querySelector('ion-modal');\n console.log(modalElement.componentProps.firstName);\n\n ...\n }\n}\n```\n\n\n### Dismissing a Modal\n\nA modal can be dismissed by calling the dismiss method and optionally passing any data from the modal.\n\n```javascript\nasync function dismissModal() {\n await modal.dismiss({\n 'dismissed': true\n });\n}\n```\n\nAfter being dismissed, the data can be read in through the `onWillDismiss` or `onDidDismiss` attached to the modal after creation:\n\n```javascript\nconst { data } = await modalElement.onWillDismiss();\nconsole.log(data);\n```\n\n\n### Swipeable Modals\n\nModals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.\n\n> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect.\n\n```javascript\nconst modalElement = document.createElement('ion-modal');\nmodalElement.component = 'modal-page';\nmodalElement.cssClass = 'my-custom-class';\nmodalElement.swipeToClose = true;\nmodalElement.presentingElement = document.querySelector('ion-nav');\n```\n\nIn most scenarios, using the `ion-nav` element as the `presentingElement` is fine. In cases where you are presenting a card-style modal from within a modal, you should pass in the top-most `ion-modal` element as the `presentingElement`.\n\n```javascript\nconst modalElement = document.createElement('ion-modal');\nmodalElement.component = 'modal-page';\nmodalElement.cssClass = 'my-custom-class';\nmodalElement.swipeToClose = true;\nmodalElement.presentingElement = await modalController.getTop(); // Get the top-most ion-modal\n```\n",
|
||
"react": "```tsx\n/* Using with useIonModal Hook */ \n\nimport React, { useState } from 'react';\nimport { IonButton, IonContent, IonPage, useIonModal } from '@ionic/react';\n\nconst Body: React.FC<{\n count: number;\n onDismiss: () => void;\n onIncrement: () => void;\n}> = ({ count, onDismiss, onIncrement }) => (\n <div>\n count: {count}\n <IonButton expand=\"block\" onClick={() => onIncrement()}>\n Increment Count\n </IonButton>\n <IonButton expand=\"block\" onClick={() => onDismiss()}>\n Close\n </IonButton>\n </div>\n);\n\nconst ModalExample: React.FC = () => {\n const [count, setCount] = useState(0);\n\n const handleIncrement = () => {\n setCount(count + 1);\n };\n\n const handleDismiss = () => {\n dismiss();\n };\n\n /**\n * First parameter is the component to show, second is the props to pass\n */\n const [present, dismiss] = useIonModal(Body, {\n count,\n onDismiss: handleDismiss,\n onIncrement: handleIncrement,\n });\n\n return (\n <IonPage>\n <IonContent fullscreen>\n <IonButton\n expand=\"block\"\n onClick={() => {\n present({\n cssClass: 'my-class',\n });\n }}\n >\n Show Modal\n </IonButton>\n <div>Count: {count}</div>\n </IonContent>\n </IonPage>\n );\n};\n```\n\n```tsx\n/* Using with IonModal Component */\n\nimport React, { useState } from 'react';\nimport { IonModal, IonButton, IonContent } from '@ionic/react';\n\nexport const ModalExample: React.FC = () => {\n const [showModal, setShowModal] = useState(false);\n\n return (\n <IonContent>\n <IonModal isOpen={showModal} cssClass='my-custom-class'>\n <p>This is modal content</p>\n <IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>\n </IonModal>\n <IonButton onClick={() => setShowModal(true)}>Show Modal</IonButton>\n </IonContent>\n );\n};\n```\n\n### Swipeable Modals\n\nModals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.\n\n> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect.\n\n```tsx\nconst App: React.FC = () => {\n const routerRef = useRef<HTMLIonRouterOutletElement | null>(null);\n \n return (\n <IonApp>\n <IonReactRouter>\n <IonRouterOutlet ref={routerRef}>\n <Route path=\"/home\" render={() => <Home router={routerRef.current} />} exact={true} />\n </IonRouterOutlet>\n </IonReactRouter>\n </IonApp>\n )\n};\n\n...\n\ninterface HomePageProps {\n router: HTMLIonRouterOutletElement | null;\n}\n\nconst Home: React.FC<HomePageProps> = ({ router }) => {\n const [showModal, setShowModal] = useState(false);\n \n return (\n ...\n \n <IonModal\n isOpen={showModal}\n cssClass='my-custom-class'\n swipeToClose={true}\n presentingElement={router || undefined}\n onDidDismiss={() => setShowModal(false)}>\n <p>This is modal content</p>\n </IonModal>\n \n ...\n );\n};\n\n```\n\nIn most scenarios, setting a ref on `IonRouterOutlet` and passing that ref's `current` value to `presentingElement` is fine. In cases where you are presenting a card-style modal from within another modal, you should pass in the top-most `ion-modal` ref as the `presentingElement`.\n\n```tsx\n<IonModal\n ref={firstModalRef}\n isOpen={showModal}\n cssClass='my-custom-class'\n swipeToClose={true}\n presentingElement={router || undefined}\n onDidDismiss={() => setShowModal(false)}>\n <p>This is modal content</p>\n <IonButton onClick={() => setShow2ndModal(true)}>Show 2nd Modal</IonButton>\n <IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>\n</IonModal>\n<IonModal\n isOpen={show2ndModal}\n cssClass='my-custom-class'\n presentingElement={firstModalRef.current}\n swipeToClose={true}\n onDidDismiss={() => setShow2ndModal(false)}>\n <p>This is more modal content</p>\n <IonButton onClick={() => setShow2ndModal(false)}>Close Modal</IonButton>\n</IonModal>\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\nimport { modalController } from '@ionic/core';\n\n@Component({\n tag: 'modal-example',\n styleUrl: 'modal-example.css'\n})\nexport class ModalExample {\n async presentModal() {\n const modal = await modalController.create({\n component: 'page-modal',\n cssClass: 'my-custom-class'\n });\n await modal.present();\n }\n}\n```\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'page-modal',\n styleUrl: 'page-modal.css',\n})\nexport class PageModal {\n render() {\n return [\n <ion-list>\n <ion-item>\n <ion-label>Documentation</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Feedback</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Settings</ion-label>\n </ion-item>\n </ion-list>\n ];\n }\n}\n```\n\n> If you need a wrapper element inside of your modal component, we recommend using a `<div class=\"ion-page\">` so that the component dimensions are still computed properly.\n\n### Passing Data\n\nDuring creation of a modal, data can be passed in through the `componentProps`.\nThe previous example can be written to include data:\n\n```tsx\nasync presentModal() {\n const modal = await modalController.create({\n component: 'page-modal',\n cssClass: 'my-custom-class',\n componentProps: {\n 'firstName': 'Douglas',\n 'lastName': 'Adams',\n 'middleInitial': 'N'\n }\n });\n await modal.present();\n}\n```\n\nTo get the data passed into the `componentProps`, set each one as a `@Prop`:\n\n```tsx\nimport { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'page-modal',\n styleUrl: 'page-modal.css',\n})\nexport class PageModal {\n // Data passed in by componentProps\n @Prop() firstName: string;\n @Prop() lastName: string;\n @Prop() middleInitial: string;\n}\n```\n\n### Dismissing a Modal\n\nA modal can be dismissed by calling the dismiss method on the modal controller and optionally passing any data from the modal.\n\n```tsx\nexport class ModalPage {\n ...\n\n dismiss(data?: any) {\n // dismiss the closest modal and optionally pass back data\n (this.el.closest('ion-modal') as any).dismiss({\n 'dismissed': true\n });\n }\n}\n```\n\nAfter being dismissed, the data can be read in through the `onWillDismiss` or `onDidDismiss` attached to the modal after creation:\n\n```tsx\nconst { data } = await modal.onWillDismiss();\nconsole.log(data);\n```\n\n### Swipeable Modals\n\nModals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.\n\n> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect.\n\n```tsx\nimport { Component, Element, h } from '@stencil/core';\n\nimport { modalController } from '@ionic/core';\n\n@Component({\n tag: 'modal-example',\n styleUrl: 'modal-example.css'\n})\nexport class ModalExample {\n @Element() el: any;\n\n async presentModal() {\n const modal = await modalController.create({\n component: 'page-modal',\n cssClass: 'my-custom-class',\n swipeToClose: true,\n presentingElement: this.el.closest('ion-router-outlet'),\n });\n await modal.present();\n }\n\n}\n```\n\nIn most scenarios, using the `ion-router-outlet` element as the `presentingElement` is fine. In cases where you are presenting a card-style modal from within another modal, you should pass in the top-most `ion-modal` element as the `presentingElement`.\n\n```tsx\nasync presentModal() {\n const modal = await modalController.create({\n component: 'page-modal',\n cssClass: 'my-custom-class',\n swipeToClose: true,\n presentingElement: await modalController.getTop() // Get the top-most ion-modal\n });\n await modal.present();\n}\n```\n",
|
||
"vue": "```html\n<template>\n <ion-header>\n <ion-toolbar>\n <ion-title>{{ title }}</ion-title>\n </ion-toolbar>\n </ion-header>\n <ion-content class=\"ion-padding\">\n {{ content }}\n </ion-content>\n</template>\n\n<script>\nimport { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n name: 'Modal',\n props: {\n title: { type: String, default: 'Super Modal' },\n },\n data() {\n return {\n content: 'Content',\n }\n },\n components: { IonContent, IonHeader, IonTitle, IonToolbar }\n});\n</script>\n```\n\n```html\n<template>\n <ion-page>\n <ion-content class=\"ion-padding\">\n <ion-button @click=\"openModal\">Open Modal</ion-button>\n </ion-content>\n </ion-page>\n</template>\n\n<script>\nimport { IonButton, IonContent, IonPage, modalController } from '@ionic/vue';\nimport Modal from './modal.vue'\n\nexport default {\n components: { IonButton, IonContent, IonPage },\n methods: {\n async openModal() {\n const modal = await modalController\n .create({\n component: Modal,\n cssClass: 'my-custom-class',\n componentProps: {\n title: 'New Title'\n },\n })\n return modal.present();\n },\n },\n}\n</script>\n```\n\nDevelopers can also use this component directly in their template:\n\n```html\n<template>\n <ion-button @click=\"setOpen(true)\">Show Modal</ion-button>\n <ion-modal\n :is-open=\"isOpenRef\"\n css-class=\"my-custom-class\"\n @didDismiss=\"setOpen(false)\"\n >\n <Modal :data=\"data\"></Modal>\n </ion-modal>\n</template>\n\n<script>\nimport { IonModal, IonButton } from '@ionic/vue';\nimport { defineComponent, ref } from 'vue';\nimport Modal from './modal.vue'\n\nexport default defineComponent({\n components: { IonModal, IonButton, Modal },\n setup() {\n const isOpenRef = ref(false);\n const setOpen = (state: boolean) => isOpenRef.value = state;\n const data = { content: 'New Content' };\n return { isOpenRef, setOpen, data }\n }\n});\n</script>\n```\n\n> If you need a wrapper element inside of your modal component, we recommend using an `<ion-page>` so that the component dimensions are still computed properly.\n\n### Swipeable Modals\n\nModals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.\n\n> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect.\n\n```html\n<template>\n <ion-page>\n <ion-content>\n <ion-button @click=\"setOpen(true)\">Show Modal</ion-button>\n <ion-modal\n :is-open=\"isOpenRef\"\n css-class=\"my-custom-class\"\n :swipe-to-close=\"true\"\n :presenting-element=\"$parent.$refs.ionRouterOutlet\"\n @didDismiss=\"setOpen(false)\"\n >\n <Modal :data=\"data\"></Modal>\n </ion-modal>\n </ion-content>\n </ion-page>\n</template>\n\n<script lang=\"ts\">\nimport { IonModal, IonButton, IonContent, IonPage } from '@ionic/vue';\nimport { defineComponent, ref } from 'vue';\nimport Modal from './modal.vue'\n\nexport default defineComponent({\n components: { IonModal, IonButton, Modal, IonContent, IonPage },\n setup() {\n const isOpenRef = ref(false);\n const setOpen = (state: boolean) => isOpenRef.value = state;\n const data = { content: 'New Content' };\n return { isOpenRef, setOpen, data }\n }\n});\n</script>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "animated",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "animated",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the modal will animate.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "backdropDismiss",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "backdrop-dismiss",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the modal will be dismissed when the backdrop is clicked.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "component",
|
||
"type": "Function | HTMLElement | null | string",
|
||
"mutable": false,
|
||
"attr": "component",
|
||
"reflectToAttr": false,
|
||
"docs": "The component to display inside of the modal.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "Function"
|
||
},
|
||
{
|
||
"type": "HTMLElement"
|
||
},
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": true
|
||
},
|
||
{
|
||
"name": "componentProps",
|
||
"type": "undefined | { [key: string]: any; }",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "The data to pass to the modal component.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "undefined"
|
||
},
|
||
{
|
||
"type": "{ [key: string]: any; }"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "cssClass",
|
||
"type": "string | string[] | undefined",
|
||
"mutable": false,
|
||
"attr": "css-class",
|
||
"reflectToAttr": false,
|
||
"docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "string[]"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "enterAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Animation to use when the modal is presented.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "htmlAttributes",
|
||
"type": "ModalAttributes | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Additional attributes to pass to the modal.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "ModalAttributes"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "keyboardClose",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "keyboard-close",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "leaveAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Animation to use when the modal is dismissed.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "presentingElement",
|
||
"type": "HTMLElement | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "The element that presented the modal. This is used for card presentation effects\nand for stacking multiple modals on top of each other. Only applies in iOS mode.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "HTMLElement"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "showBackdrop",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "show-backdrop",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, a backdrop will be displayed behind the modal.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "swipeToClose",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "swipe-to-close",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the modal can be swiped to dismiss. Only applies in iOS mode.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "dismiss",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Dismiss the modal overlay after it has been presented.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "data Any data to emit in the dismiss events."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "onDidDismiss",
|
||
"returns": {
|
||
"type": "Promise<OverlayEventDetail<T>>",
|
||
"docs": ""
|
||
},
|
||
"signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
|
||
"parameters": [],
|
||
"docs": "Returns a promise that resolves when the modal did dismiss.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "onWillDismiss",
|
||
"returns": {
|
||
"type": "Promise<OverlayEventDetail<T>>",
|
||
"docs": ""
|
||
},
|
||
"signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
|
||
"parameters": [],
|
||
"docs": "Returns a promise that resolves when the modal will dismiss.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "present",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "present() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Present the modal overlay after it has been created.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionModalDidDismiss",
|
||
"detail": "OverlayEventDetail<any>",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted after the modal has dismissed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionModalDidPresent",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted after the modal has presented.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionModalWillDismiss",
|
||
"detail": "OverlayEventDetail<any>",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted before the modal has dismissed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionModalWillPresent",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted before the modal has presented.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--backdrop-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the backdrop"
|
||
},
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the modal content"
|
||
},
|
||
{
|
||
"name": "--border-color",
|
||
"annotation": "prop",
|
||
"docs": "Border color of the modal content"
|
||
},
|
||
{
|
||
"name": "--border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Border radius of the modal content"
|
||
},
|
||
{
|
||
"name": "--border-style",
|
||
"annotation": "prop",
|
||
"docs": "Border style of the modal content"
|
||
},
|
||
{
|
||
"name": "--border-width",
|
||
"annotation": "prop",
|
||
"docs": "Border width of the modal content"
|
||
},
|
||
{
|
||
"name": "--height",
|
||
"annotation": "prop",
|
||
"docs": "Height of the modal"
|
||
},
|
||
{
|
||
"name": "--max-height",
|
||
"annotation": "prop",
|
||
"docs": "Maximum height of the modal"
|
||
},
|
||
{
|
||
"name": "--max-width",
|
||
"annotation": "prop",
|
||
"docs": "Maximum width of the modal"
|
||
},
|
||
{
|
||
"name": "--min-height",
|
||
"annotation": "prop",
|
||
"docs": "Minimum height of the modal"
|
||
},
|
||
{
|
||
"name": "--min-width",
|
||
"annotation": "prop",
|
||
"docs": "Minimum width of the modal"
|
||
},
|
||
{
|
||
"name": "--width",
|
||
"annotation": "prop",
|
||
"docs": "Width of the modal"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-backdrop"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-modal": [
|
||
"ion-backdrop"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/nav/nav.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-nav",
|
||
"readme": "# ion-nav\n\nNav is a standalone component for loading arbitrary components and pushing new components on to the stack.\n\nUnlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.\n\n",
|
||
"docs": "Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.\n\nUnlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.",
|
||
"docsTags": [],
|
||
"usage": {},
|
||
"props": [
|
||
{
|
||
"name": "animated",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "animated",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the nav should animate the transition of components.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "animation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "By default `ion-nav` animates transition between pages based in the mode (ios or material design).\nHowever, this property allows to create custom transition using `AnimateBuilder` functions.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "root",
|
||
"type": "Function | HTMLElement | ViewController | null | string | undefined",
|
||
"mutable": false,
|
||
"attr": "root",
|
||
"reflectToAttr": false,
|
||
"docs": "Root NavComponent to load",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "Function"
|
||
},
|
||
{
|
||
"type": "HTMLElement"
|
||
},
|
||
{
|
||
"type": "ViewController"
|
||
},
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "rootParams",
|
||
"type": "undefined | { [key: string]: any; }",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Any parameters for the root component",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "undefined"
|
||
},
|
||
{
|
||
"type": "{ [key: string]: any; }"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "swipeGesture",
|
||
"type": "boolean | undefined",
|
||
"mutable": true,
|
||
"attr": "swipe-gesture",
|
||
"reflectToAttr": false,
|
||
"docs": "If the nav component should allow for swipe-to-go-back.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "canGoBack",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "canGoBack(view?: ViewController | undefined) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Returns `true` if the current view can go back.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "view The view to check."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "getActive",
|
||
"returns": {
|
||
"type": "Promise<ViewController | undefined>",
|
||
"docs": ""
|
||
},
|
||
"signature": "getActive() => Promise<ViewController | undefined>",
|
||
"parameters": [],
|
||
"docs": "Get the active view.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "getByIndex",
|
||
"returns": {
|
||
"type": "Promise<ViewController | undefined>",
|
||
"docs": ""
|
||
},
|
||
"signature": "getByIndex(index: number) => Promise<ViewController | undefined>",
|
||
"parameters": [],
|
||
"docs": "Get the view at the specified index.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "index The index of the view."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "getPrevious",
|
||
"returns": {
|
||
"type": "Promise<ViewController | undefined>",
|
||
"docs": ""
|
||
},
|
||
"signature": "getPrevious(view?: ViewController | undefined) => Promise<ViewController | undefined>",
|
||
"parameters": [],
|
||
"docs": "Get the previous view.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "view The view to get."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "insert",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Inserts a component into the navigation stack at the specified index.\nThis is useful to add a component at any point in the navigation stack.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "insertIndex The index to insert the component at in the stack."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "component The component to insert into the navigation stack."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "componentProps Any properties of the component."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "opts The navigation options."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "done The transition complete function."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "insertPages",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Inserts an array of components into the navigation stack at the specified index.\nThe last component in the array will become instantiated as a view, and animate\nin to become the active view.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "insertIndex The index to insert the components at in the stack."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "insertComponents The components to insert into the navigation stack."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "opts The navigation options."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "done The transition complete function."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "pop",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "pop(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Pop a component off of the navigation stack. Navigates back from the current\ncomponent.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "opts The navigation options."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "done The transition complete function."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "popTo",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Pop to a specific index in the navigation stack.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "indexOrViewCtrl The index or view controller to pop to."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "opts The navigation options."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "done The transition complete function."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "popToRoot",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "popToRoot(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Navigate back to the root of the stack, no matter how far back that is.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "opts The navigation options."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "done The transition complete function."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "push",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Push a new component onto the current navigation stack. Pass any additional\ninformation along as an object. This additional information is accessible\nthrough NavParams.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "component The component to push onto the navigation stack."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "componentProps Any properties of the component."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "opts The navigation options."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "done The transition complete function."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "removeIndex",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Removes a component from the navigation stack at the specified index.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "startIndex The number to begin removal at."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "removeCount The number of components to remove."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "opts The navigation options."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "done The transition complete function."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "setPages",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Set the views of the current navigation stack and navigate to the last view.\nBy default animations are disabled, but they can be enabled by passing options\nto the navigation controller. Navigation parameters can also be passed to the\nindividual pages in the array.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "views The list of views to set as the navigation stack."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "opts The navigation options."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "done The transition complete function."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "setRoot",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Set the root for the current navigation stack to a component.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "component The component to set as the root of the navigation stack."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "componentProps Any properties of the component."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "opts The navigation options."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "done The transition complete function."
|
||
}
|
||
]
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionNavDidChange",
|
||
"detail": "void",
|
||
"bubbles": false,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Event fired when the nav has changed components",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionNavWillChange",
|
||
"detail": "void",
|
||
"bubbles": false,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Event fired when the nav will change components",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/nav-link/nav-link.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-nav-link",
|
||
"readme": "# ion-nav-link\n\nA navigation link is used to navigate to a specified component. The component can be navigated to by going `forward`, `back` or as a `root` component.\n\nIt is the element form of calling the `push()`, `pop()`, and `setRoot()` methods on the navigation controller.\n\n",
|
||
"docs": "A navigation link is used to navigate to a specified component. The component can be navigated to by going `forward`, `back` or as a `root` component.\n\nIt is the element form of calling the `push()`, `pop()`, and `setRoot()` methods on the navigation controller.",
|
||
"docsTags": [],
|
||
"usage": {},
|
||
"props": [
|
||
{
|
||
"name": "component",
|
||
"type": "Function | HTMLElement | ViewController | null | string | undefined",
|
||
"mutable": false,
|
||
"attr": "component",
|
||
"reflectToAttr": false,
|
||
"docs": "Component to navigate to. Only used if the `routerDirection` is `\"forward\"` or `\"root\"`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "Function"
|
||
},
|
||
{
|
||
"type": "HTMLElement"
|
||
},
|
||
{
|
||
"type": "ViewController"
|
||
},
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "componentProps",
|
||
"type": "undefined | { [key: string]: any; }",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Data you want to pass to the component as props. Only used if the `\"routerDirection\"` is `\"forward\"` or `\"root\"`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "undefined"
|
||
},
|
||
{
|
||
"type": "{ [key: string]: any; }"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "routerAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "The transition animation when navigating to another page.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "routerDirection",
|
||
"type": "\"back\" | \"forward\" | \"root\"",
|
||
"mutable": false,
|
||
"attr": "router-direction",
|
||
"reflectToAttr": false,
|
||
"docs": "The transition direction when navigating to another page.",
|
||
"docsTags": [],
|
||
"default": "'forward'",
|
||
"values": [
|
||
{
|
||
"value": "back",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "forward",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "root",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/note/note.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-note",
|
||
"readme": "# ion-note\n\nNotes are text elements generally used as subtitles that provide more information. Notes are styled to appear grey by default. Notes can be used in an item as metadata text.\n\n",
|
||
"docs": "Notes are text elements generally used as subtitles that provide more information. Notes are styled to appear grey by default. Notes can be used in an item as metadata text.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<!-- Default Note -->\n<ion-note>Default Note</ion-note>\n\n<!-- Note Colors -->\n<ion-note color=\"primary\">Primary Note</ion-note>\n<ion-note color=\"secondary\">Secondary Note</ion-note>\n<ion-note color=\"danger\">Danger Note</ion-note>\n<ion-note color=\"light\">Light Note</ion-note>\n<ion-note color=\"dark\">Dark Note</ion-note>\n\n<!-- Notes in a List -->\n<ion-list>\n <ion-item>\n <ion-label>Note (End)</ion-label>\n <ion-note slot=\"end\">On</ion-note>\n </ion-item>\n\n <ion-item>\n <ion-note slot=\"start\">Off</ion-note>\n <ion-label>Note (Start)</ion-label>\n </ion-item>\n</ion-list>\n```\n",
|
||
"javascript": "```html\n<!-- Default Note -->\n<ion-note>Default Note</ion-note>\n\n<!-- Note Colors -->\n<ion-note color=\"primary\">Primary Note</ion-note>\n<ion-note color=\"secondary\">Secondary Note</ion-note>\n<ion-note color=\"danger\">Danger Note</ion-note>\n<ion-note color=\"light\">Light Note</ion-note>\n<ion-note color=\"dark\">Dark Note</ion-note>\n\n<!-- Notes in a List -->\n<ion-list>\n <ion-item>\n <ion-label>Note (End)</ion-label>\n <ion-note slot=\"end\">On</ion-note>\n </ion-item>\n\n <ion-item>\n <ion-note slot=\"start\">Off</ion-note>\n <ion-label>Note (Start)</ion-label>\n </ion-item>\n</ion-list>\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonNote, IonList, IonItem, IonLabel, IonContent } from '@ionic/react';\n\nexport const NoteExample: React.FC = () => (\n <IonContent>\n {/*-- Default Note --*/}\n <IonNote>Default Note</IonNote><br />\n\n {/*-- Note Colors --*/}\n <IonNote color=\"primary\">Primary Note</IonNote><br />\n <IonNote color=\"secondary\">Secondary Note</IonNote><br />\n <IonNote color=\"danger\">Danger Note</IonNote><br />\n <IonNote color=\"light\">Light Note</IonNote><br />\n <IonNote color=\"dark\">Dark Note</IonNote><br />\n\n {/*-- Notes in a List --*/}\n <IonList>\n <IonItem>\n <IonLabel>Note (End)</IonLabel>\n <IonNote slot=\"end\">On</IonNote>\n </IonItem>\n\n <IonItem>\n <IonNote slot=\"start\">Off</IonNote>\n <IonLabel>Note (Start)</IonLabel>\n </IonItem>\n </IonList>\n </IonContent>\n);\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'note-example',\n styleUrl: 'note-example.css'\n})\nexport class NoteExample {\n render() {\n return [\n // Default Note\n <ion-note>Default Note</ion-note>,\n\n // Note Colors\n <ion-note color=\"primary\">Primary Note</ion-note>,\n <ion-note color=\"secondary\">Secondary Note</ion-note>,\n <ion-note color=\"danger\">Danger Note</ion-note>,\n <ion-note color=\"light\">Light Note</ion-note>,\n <ion-note color=\"dark\">Dark Note</ion-note>,\n\n // Notes in a List\n <ion-list>\n <ion-item>\n <ion-label>Note (End)</ion-label>\n <ion-note slot=\"end\">On</ion-note>\n </ion-item>\n\n <ion-item>\n <ion-note slot=\"start\">Off</ion-note>\n <ion-label>Note (Start)</ion-label>\n </ion-item>\n </ion-list>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <!-- Default Note -->\n <ion-note>Default Note</ion-note>\n\n <!-- Note Colors -->\n <ion-note color=\"primary\">Primary Note</ion-note>\n <ion-note color=\"secondary\">Secondary Note</ion-note>\n <ion-note color=\"danger\">Danger Note</ion-note>\n <ion-note color=\"light\">Light Note</ion-note>\n <ion-note color=\"dark\">Dark Note</ion-note>\n\n <!-- Notes in a List -->\n <ion-list>\n <ion-item>\n <ion-label>Note (End)</ion-label>\n <ion-note slot=\"end\">On</ion-note>\n </ion-item>\n\n <ion-item>\n <ion-note slot=\"start\">Off</ion-note>\n <ion-label>Note (Start)</ion-label>\n </ion-item>\n </ion-list>\n</template>\n\n<script>\nimport { IonItem, IonLabel, IonList, IonNote } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonItem, IonLabel, IonList, IonNote }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the note"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/picker/picker.tsx",
|
||
"encapsulation": "scoped",
|
||
"tag": "ion-picker",
|
||
"readme": "# ion-picker\n\nA Picker is a dialog that displays a row of buttons and columns underneath. It appears on top of the app's content, and at the bottom of the viewport.\n\n## Interfaces\n\n### PickerButton\n\n```typescript\ninterface PickerButton {\n text?: string;\n role?: string;\n cssClass?: string | string[];\n handler?: (value: any) => boolean | void;\n}\n```\n\n### PickerColumn\n\n```typescript\ninterface PickerColumn {\n name: string;\n align?: string;\n selectedIndex?: number;\n prevSelected?: number;\n prefix?: string;\n suffix?: string;\n options: PickerColumnOption[];\n cssClass?: string | string[];\n columnWidth?: string;\n prefixWidth?: string;\n suffixWidth?: string;\n optionsWidth?: string;\n refresh?: () => void;\n}\n```\n\n### PickerColumnOption\n\n```typescript\ninterface PickerColumnOption {\n text?: string;\n value?: any;\n disabled?: boolean;\n duration?: number;\n transform?: string;\n selected?: boolean;\n}\n```\n\n### PickerOptions\n\n```typescript\ninterface PickerOptions {\n columns: PickerColumn[];\n buttons?: PickerButton[];\n cssClass?: string | string[];\n showBackdrop?: boolean;\n backdropDismiss?: boolean;\n animated?: boolean;\n\n mode?: Mode;\n keyboardClose?: boolean;\n id?: string;\n htmlAttributes?: PickerAttributes;\n\n enterAnimation?: AnimationBuilder;\n leaveAnimation?: AnimationBuilder;\n}\n```\n\n### PickerAttributes\n\n```typescript\ninterface PickerAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}\n```\n",
|
||
"docs": "A Picker is a dialog that displays a row of buttons and columns underneath. It appears on top of the app's content, and at the bottom of the viewport.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"react": "```tsx\n/* Using with useIonPicker Hook */\n\nimport React, { useState } from 'react';\nimport { IonButton, IonContent, IonPage, useIonPicker } from '@ionic/react';\n\nconst PickerExample: React.FC = () => {\n const [present] = useIonPicker();\n const [value, setValue] = useState('');\n return (\n <IonPage>\n <IonContent>\n <IonButton\n expand=\"block\"\n onClick={() =>\n present({\n buttons: [\n {\n text: 'Confirm',\n handler: (selected) => {\n setValue(selected.animal.value)\n },\n },\n ],\n columns: [\n {\n name: 'animal',\n options: [\n { text: 'Dog', value: 'dog' },\n { text: 'Cat', value: 'cat' },\n { text: 'Bird', value: 'bird' },\n ],\n },\n ],\n })\n }\n >\n Show Picker\n </IonButton>\n <IonButton\n expand=\"block\"\n onClick={() =>\n present(\n [\n {\n name: 'animal',\n options: [\n { text: 'Dog', value: 'dog' },\n { text: 'Cat', value: 'cat' },\n { text: 'Bird', value: 'bird' },\n ],\n },\n {\n name: 'vehicle',\n options: [\n { text: 'Car', value: 'car' },\n { text: 'Truck', value: 'truck' },\n { text: 'Bike', value: 'bike' },\n ],\n },\n ],\n [\n {\n text: 'Confirm',\n handler: (selected) => {\n setValue(`${selected.animal.value}, ${selected.vehicle.value}`)\n },\n },\n ]\n )\n }\n >\n Show Picker using params\n </IonButton>\n {value && (\n <div>Selected Value: {value}</div>\n )}\n </IonContent>\n </IonPage>\n );\n};\n```",
|
||
"vue": "```vue\n<template>\n <div>\n <ion-button @click=\"openPicker\">SHOW PICKER</ion-button>\n <p v-if=\"picked.animal\">picked: {{ picked.animal.text }}</p>\n </div>\n</template>\n\n<script>\nimport { IonButton, pickerController } from \"@ionic/vue\";\nexport default {\n components: {\n IonButton,\n },\n data() {\n return {\n pickingOptions: {\n name: \"animal\",\n options: [\n { text: \"Dog\", value: \"dog\" },\n { text: \"Cat\", value: \"cat\" },\n { text: \"Bird\", value: \"bird\" },\n ],\n },\n picked: {\n animal: \"\",\n },\n };\n },\n methods: {\n async openPicker() {\n const picker = await pickerController.create({\n columns: [this.pickingOptions],\n buttons: [\n {\n text: \"Cancel\",\n role: \"cancel\",\n },\n {\n text: \"Confirm\",\n handler: (value) => {\n this.picked = value;\n console.log(`Got Value ${value}`);\n },\n },\n ],\n });\n await picker.present();\n },\n },\n};\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "animated",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "animated",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the picker will animate.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "backdropDismiss",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "backdrop-dismiss",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the picker will be dismissed when the backdrop is clicked.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "buttons",
|
||
"type": "PickerButton[]",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Array of buttons to be displayed at the top of the picker.",
|
||
"docsTags": [],
|
||
"default": "[]",
|
||
"values": [
|
||
{
|
||
"type": "PickerButton[]"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "columns",
|
||
"type": "PickerColumn[]",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Array of columns to be displayed in the picker.",
|
||
"docsTags": [],
|
||
"default": "[]",
|
||
"values": [
|
||
{
|
||
"type": "PickerColumn[]"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "cssClass",
|
||
"type": "string | string[] | undefined",
|
||
"mutable": false,
|
||
"attr": "css-class",
|
||
"reflectToAttr": false,
|
||
"docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "string[]"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "duration",
|
||
"type": "number",
|
||
"mutable": false,
|
||
"attr": "duration",
|
||
"reflectToAttr": false,
|
||
"docs": "Number of milliseconds to wait before dismissing the picker.",
|
||
"docsTags": [],
|
||
"default": "0",
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "enterAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Animation to use when the picker is presented.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "htmlAttributes",
|
||
"type": "PickerAttributes | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Additional attributes to pass to the picker.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "PickerAttributes"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "keyboardClose",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "keyboard-close",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "leaveAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Animation to use when the picker is dismissed.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "showBackdrop",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "show-backdrop",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, a backdrop will be displayed behind the picker.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "dismiss",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Dismiss the picker overlay after it has been presented.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "data Any data to emit in the dismiss events."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "role The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "getColumn",
|
||
"returns": {
|
||
"type": "Promise<PickerColumn | undefined>",
|
||
"docs": ""
|
||
},
|
||
"signature": "getColumn(name: string) => Promise<PickerColumn | undefined>",
|
||
"parameters": [],
|
||
"docs": "Get the column that matches the specified name.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "name The name of the column."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "onDidDismiss",
|
||
"returns": {
|
||
"type": "Promise<OverlayEventDetail<T>>",
|
||
"docs": ""
|
||
},
|
||
"signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
|
||
"parameters": [],
|
||
"docs": "Returns a promise that resolves when the picker did dismiss.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "onWillDismiss",
|
||
"returns": {
|
||
"type": "Promise<OverlayEventDetail<T>>",
|
||
"docs": ""
|
||
},
|
||
"signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
|
||
"parameters": [],
|
||
"docs": "Returns a promise that resolves when the picker will dismiss.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "present",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "present() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Present the picker overlay after it has been created.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionPickerDidDismiss",
|
||
"detail": "OverlayEventDetail<any>",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted after the picker has dismissed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionPickerDidPresent",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted after the picker has presented.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionPickerWillDismiss",
|
||
"detail": "OverlayEventDetail<any>",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted before the picker has dismissed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionPickerWillPresent",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted before the picker has presented.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--backdrop-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the backdrop"
|
||
},
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the picker"
|
||
},
|
||
{
|
||
"name": "--background-rgb",
|
||
"annotation": "prop",
|
||
"docs": "Background of the picker in rgb format"
|
||
},
|
||
{
|
||
"name": "--border-color",
|
||
"annotation": "prop",
|
||
"docs": "Border color of the picker"
|
||
},
|
||
{
|
||
"name": "--border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Border radius of the picker"
|
||
},
|
||
{
|
||
"name": "--border-style",
|
||
"annotation": "prop",
|
||
"docs": "Border style of the picker"
|
||
},
|
||
{
|
||
"name": "--border-width",
|
||
"annotation": "prop",
|
||
"docs": "Border width of the picker"
|
||
},
|
||
{
|
||
"name": "--height",
|
||
"annotation": "prop",
|
||
"docs": "Height of the picker"
|
||
},
|
||
{
|
||
"name": "--max-height",
|
||
"annotation": "prop",
|
||
"docs": "Maximum height of the picker"
|
||
},
|
||
{
|
||
"name": "--max-width",
|
||
"annotation": "prop",
|
||
"docs": "Maximum width of the picker"
|
||
},
|
||
{
|
||
"name": "--min-height",
|
||
"annotation": "prop",
|
||
"docs": "Minimum height of the picker"
|
||
},
|
||
{
|
||
"name": "--min-width",
|
||
"annotation": "prop",
|
||
"docs": "Minimum width of the picker"
|
||
},
|
||
{
|
||
"name": "--width",
|
||
"annotation": "prop",
|
||
"docs": "Width of the picker"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-backdrop",
|
||
"ion-picker-column"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-picker": [
|
||
"ion-backdrop",
|
||
"ion-picker-column"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/popover/popover.tsx",
|
||
"encapsulation": "scoped",
|
||
"tag": "ion-popover",
|
||
"readme": "# ion-popover\n\nA 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.\n\n## Presenting\n\nTo present a popover, call the `present` method on a popover instance. In order to position the popover relative to the element clicked, a click event needs to be passed into the options of the the `present` method. If the event is not passed, the popover will be positioned in the center of the viewport.\n\n## Customization\n\nPopover uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector.\n\nWe recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. View the [Usage](#usage) section for an example of how to pass a class using `cssClass`.\n\n```css\n/* DOES NOT WORK - not specific enough */\n.popover-content {\n background: #222;\n}\n\n/* Works - pass \"my-custom-class\" in cssClass to increase specificity */\n.my-custom-class .popover-content {\n background: #222;\n}\n```\n\nAny of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Popover without needing to target individual elements:\n\n```css\n.my-custom-class {\n --background: #222;\n}\n```\n\n> If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information.\n\n## Interfaces\n\n### PopoverOptions\n\n```typescript\ninterface PopoverOptions {\n component: any;\n componentProps?: { [key: string]: any };\n showBackdrop?: boolean;\n backdropDismiss?: boolean;\n translucent?: boolean;\n cssClass?: string | string[];\n event?: Event;\n animated?: boolean;\n\n mode?: 'ios' | 'md';\n keyboardClose?: boolean;\n id?: string;\n htmlAttributes?: PopoverAttributes;\n\n enterAnimation?: AnimationBuilder;\n leaveAnimation?: AnimationBuilder;\n}\n```\n\n### PopoverAttributes\n\n```typescript\ninterface PopoverAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}\n```\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```typescript\nimport { Component } from '@angular/core';\nimport { PopoverController } from '@ionic/angular';\nimport { PopoverComponent } from '../../component/popover/popover.component';\n\n@Component({\n selector: 'popover-example',\n templateUrl: 'popover-example.html',\n styleUrls: ['./popover-example.css']\n})\nexport class PopoverExample {\n constructor(public popoverController: PopoverController) {}\n\n async presentPopover(ev: any) {\n const popover = await this.popoverController.create({\n component: PopoverComponent,\n cssClass: 'my-custom-class',\n event: ev,\n translucent: true\n });\n await popover.present();\n \n const { role } = await popover.onDidDismiss();\n console.log('onDidDismiss resolved with role', role);\n }\n}\n```\n\n\n### Style Placement\n\nIn Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Popover can be presented from within a page, the `ion-popover` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config).\n",
|
||
"javascript": "```javascript\nclass PopoverExamplePage extends HTMLElement {\n constructor() {\n super();\n }\n\n connectedCallback() {\n this.innerHTML = `\n <ion-content>\n <ion-list>\n <ion-list-header><ion-label>Ionic</ion-label></ion-list-header>\n <ion-item button><ion-label>Item 0</ion-label></ion-item>\n <ion-item button><ion-label>Item 1</ion-label></ion-item>\n <ion-item button><ion-label>Item 2</ion-label></ion-item>\n <ion-item button><ion-label>Item 3</ion-label></ion-item>\n </ion-list>\n </ion-content>\n `;\n }\n}\n\ncustomElements.define('popover-example-page', PopoverExamplePage);\n\nfunction presentPopover(ev) {\n const popover = Object.assign(document.createElement('ion-popover'), {\n component: 'popover-example-page',\n cssClass: 'my-custom-class',\n event: ev,\n translucent: true\n });\n document.body.appendChild(popover);\n\n await popover.present();\n \n const { role } = await popover.onDidDismiss();\n console.log('onDidDismiss resolved with role', role);\n}\n```\n",
|
||
"react": "```tsx\n/* Using with useIonPopover Hook */\n\nimport React from 'react';\nimport {\n IonButton,\n IonContent,\n IonItem,\n IonList,\n IonListHeader,\n IonPage,\n useIonPopover,\n} from '@ionic/react';\n\nconst PopoverList: React.FC<{\n onHide: () => void;\n}> = ({ onHide }) => (\n <IonList>\n <IonListHeader>Ionic</IonListHeader>\n <IonItem button>Learn Ionic</IonItem>\n <IonItem button>Documentation</IonItem>\n <IonItem button>Showcase</IonItem>\n <IonItem button>GitHub Repo</IonItem>\n <IonItem lines=\"none\" detail={false} button onClick={onHide}>\n Close\n </IonItem>\n </IonList>\n);\n\nconst PopoverExample: React.FC = () => {\n const [present, dismiss] = useIonPopover(PopoverList, { onHide: () => dismiss() });\n \n return (\n <IonPage>\n <IonContent>\n <IonButton\n expand=\"block\"\n onClick={(e) =>\n present({\n event: e.nativeEvent,\n })\n }\n >\n Show Popover\n </IonButton>\n </IonContent>\n </IonPage>\n );\n};\n```\n\n```tsx\n/* Using with IonPopover Component */\n\nimport React, { useState } from 'react';\nimport { IonPopover, IonButton } from '@ionic/react';\n\nexport const PopoverExample: React.FC = () => {\n const [popoverState, setShowPopover] = useState({ showPopover: false, event: undefined });\n\n return (\n <>\n <IonPopover\n cssClass='my-custom-class'\n event={popoverState.event}\n isOpen={popoverState.showPopover}\n onDidDismiss={() => setShowPopover({ showPopover: false, event: undefined })}\n >\n <p>This is popover content</p>\n </IonPopover>\n <IonButton onClick={\n (e: any) => {\n e.persist();\n setShowPopover({ showPopover: true, event: e })\n }}\n >\n Show Popover\n </IonButton>\n </>\n );\n};\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\nimport { popoverController } from '@ionic/core';\n\n@Component({\n tag: 'popover-example',\n styleUrl: 'popover-example.css'\n})\nexport class PopoverExample {\n async presentPopover(ev: any) {\n const popover = await popoverController.create({\n component: 'page-popover',\n cssClass: 'my-custom-class',\n event: ev,\n translucent: true\n });\n await popover.present();\n \n const { role } = await popover.onDidDismiss();\n console.log('onDidDismiss resolved with role', role);\n }\n\n render() {\n return [\n <ion-content>\n <ion-button onClick={(ev) => this.presentPopover(ev)}>Present Popover</ion-button>\n </ion-content>\n ];\n }\n}\n```\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'page-popover',\n styleUrl: 'page-popover.css',\n})\nexport class PagePopover {\n render() {\n return [\n <ion-list>\n <ion-item>\n <ion-label>Documentation</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Feedback</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Settings</ion-label>\n </ion-item>\n </ion-list>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-content class=\"ion-padding\">\n Popover Content\n </ion-content>\n</template>\n\n<script>\nimport { IonContent } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n name: 'Popover',\n components: { IonContent }\n});\n</script>\n```\n\n```html\n<template>\n <ion-page>\n <ion-content class=\"ion-padding\">\n <ion-button @click=\"openPopover\">Open Popover</ion-button>\n </ion-content>\n </ion-page>\n</template>\n\n<script>\nimport { IonButton, IonContent, IonPage, popoverController } from '@ionic/vue';\nimport Popver from './popover.vue'\n\nexport default {\n components: { IonButton, IonContent, IonPage },\n methods: {\n async openPopover(ev: Event) {\n const popover = await popoverController\n .create({\n component: Popover,\n cssClass: 'my-custom-class',\n event: ev,\n translucent: true\n })\n await popover.present();\n \n const { role } = await popover.onDidDismiss();\n console.log('onDidDismiss resolved with role', role);\n },\n },\n}\n</script>\n```\n\nDevelopers can also use this component directly in their template:\n\n```html\n<template>\n <ion-button @click=\"setOpen(true, $event)\">Show Popover</ion-button>\n <ion-popover\n :is-open=\"isOpenRef\"\n css-class=\"my-custom-class\"\n :event=\"event\"\n :translucent=\"true\"\n @didDismiss=\"setOpen(false)\"\n >\n <Popover></Popover>\n </ion-popover>\n</template>\n\n<script>\nimport { IonButton, IonPopover } from '@ionic/vue';\nimport { defineComponent, ref } from 'vue';\nimport Popver from './popover.vue'\n\nexport default defineComponent({\n components: { IonButton, IonPopover, Popover },\n setup() {\n const isOpenRef = ref(false);\n const event = ref();\n const setOpen = (state: boolean, ev?: Event) => {\n event.value = ev; \n isOpenRef.value = state;\n }\n return { isOpenRef, setOpen, event }\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "animated",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "animated",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the popover will animate.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "backdropDismiss",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "backdrop-dismiss",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the popover will be dismissed when the backdrop is clicked.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "component",
|
||
"type": "Function | HTMLElement | null | string",
|
||
"mutable": false,
|
||
"attr": "component",
|
||
"reflectToAttr": false,
|
||
"docs": "The component to display inside of the popover.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "Function"
|
||
},
|
||
{
|
||
"type": "HTMLElement"
|
||
},
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": true
|
||
},
|
||
{
|
||
"name": "componentProps",
|
||
"type": "undefined | { [key: string]: any; }",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "The data to pass to the popover component.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "undefined"
|
||
},
|
||
{
|
||
"type": "{ [key: string]: any; }"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "cssClass",
|
||
"type": "string | string[] | undefined",
|
||
"mutable": false,
|
||
"attr": "css-class",
|
||
"reflectToAttr": false,
|
||
"docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "string[]"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "enterAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Animation to use when the popover is presented.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "event",
|
||
"type": "any",
|
||
"mutable": false,
|
||
"attr": "event",
|
||
"reflectToAttr": false,
|
||
"docs": "The event to pass to the popover animation.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "any"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "htmlAttributes",
|
||
"type": "PopoverAttributes | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Additional attributes to pass to the popover.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "PopoverAttributes"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "keyboardClose",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "keyboard-close",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "leaveAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Animation to use when the popover is dismissed.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "showBackdrop",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "show-backdrop",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, a backdrop will be displayed behind the popover.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "translucent",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "translucent",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the popover will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "dismiss",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Dismiss the popover overlay after it has been presented.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "data Any data to emit in the dismiss events."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "onDidDismiss",
|
||
"returns": {
|
||
"type": "Promise<OverlayEventDetail<T>>",
|
||
"docs": ""
|
||
},
|
||
"signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
|
||
"parameters": [],
|
||
"docs": "Returns a promise that resolves when the popover did dismiss.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "onWillDismiss",
|
||
"returns": {
|
||
"type": "Promise<OverlayEventDetail<T>>",
|
||
"docs": ""
|
||
},
|
||
"signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
|
||
"parameters": [],
|
||
"docs": "Returns a promise that resolves when the popover will dismiss.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "present",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "present() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Present the popover overlay after it has been created.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionPopoverDidDismiss",
|
||
"detail": "OverlayEventDetail<any>",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted after the popover has dismissed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionPopoverDidPresent",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted after the popover has presented.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionPopoverWillDismiss",
|
||
"detail": "OverlayEventDetail<any>",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted before the popover has dismissed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionPopoverWillPresent",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted before the popover has presented.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--backdrop-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the backdrop"
|
||
},
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the popover"
|
||
},
|
||
{
|
||
"name": "--box-shadow",
|
||
"annotation": "prop",
|
||
"docs": "Box shadow of the popover"
|
||
},
|
||
{
|
||
"name": "--height",
|
||
"annotation": "prop",
|
||
"docs": "Height of the popover"
|
||
},
|
||
{
|
||
"name": "--max-height",
|
||
"annotation": "prop",
|
||
"docs": "Maximum height of the popover"
|
||
},
|
||
{
|
||
"name": "--max-width",
|
||
"annotation": "prop",
|
||
"docs": "Maximum width of the popover"
|
||
},
|
||
{
|
||
"name": "--min-height",
|
||
"annotation": "prop",
|
||
"docs": "Minimum height of the popover"
|
||
},
|
||
{
|
||
"name": "--min-width",
|
||
"annotation": "prop",
|
||
"docs": "Minimum width of the popover"
|
||
},
|
||
{
|
||
"name": "--width",
|
||
"annotation": "prop",
|
||
"docs": "Width of the popover"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-backdrop"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-popover": [
|
||
"ion-backdrop"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/progress-bar/progress-bar.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-progress-bar",
|
||
"readme": "# ion-progress-bar\n\nProgress bars inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. There are two types of progress bars: `determinate` and `indeterminate`.\n\n## Progress Type\n\n### Determinate\n\nDeterminate is the default type. It should be used when the percentage of an operation is known. The progress is represented by setting the `value` property. This can be used to show the progress increasing from 0 to 100% of the track.\n\nIf the `buffer` property is set, a buffer stream will show with animated circles to indicate activity. The value of the `buffer` property will also be represented by how much visible track there is. If the value of `buffer` is less than the `value` property, there will be no visible track. If `buffer` is equal to `1` then the buffer stream will be hidden.\n\n### Indeterminate\n\nThe indeterminate type should be used when it is unknown how long the process will take. The progress bar is not tied to the `value`, instead it continually slides along the track until the process is complete.\n",
|
||
"docs": "Progress bars inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. There are two types of progress bars: `determinate` and `indeterminate`.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
},
|
||
{
|
||
"text": "progress - The progress bar that shows the current value when `type` is `\"determinate\"` and slides back and forth when `type` is `\"indeterminate\"`.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "stream - The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `\"determinate\"`.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "track - The track bar behind the progress bar. If the `buffer` property is set and `type` is `\"determinate\"` the track will be the\nwidth of the `buffer` value.",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<!-- Default Progressbar -->\n<ion-progress-bar></ion-progress-bar>\n\n<!-- Default Progressbar with 50 percent -->\n<ion-progress-bar value=\"0.5\"></ion-progress-bar>\n\n<!-- Colorize Progressbar -->\n<ion-progress-bar color=\"primary\" value=\"0.5\"></ion-progress-bar>\n<ion-progress-bar color=\"secondary\" value=\"0.5\"></ion-progress-bar>\n\n<!-- Other types -->\n<ion-progress-bar value=\"0.25\" buffer=\"0.5\"></ion-progress-bar>\n<ion-progress-bar type=\"indeterminate\"></ion-progress-bar>\n<ion-progress-bar type=\"indeterminate\" reversed=\"true\"></ion-progress-bar>\n```\n",
|
||
"javascript": "```html\n<!-- Default Progressbar -->\n<ion-progress-bar></ion-progress-bar>\n\n<!-- Default Progressbar with 50 percent -->\n<ion-progress-bar value=\"0.5\"></ion-progress-bar>\n\n<!-- Colorize Progressbar -->\n<ion-progress-bar color=\"primary\" value=\"0.5\"></ion-progress-bar>\n<ion-progress-bar color=\"secondary\" value=\"0.5\"></ion-progress-bar>\n\n<!-- Other types -->\n<ion-progress-bar value=\"0.25\" buffer=\"0.5\"></ion-progress-bar>\n<ion-progress-bar type=\"indeterminate\"></ion-progress-bar>\n<ion-progress-bar type=\"indeterminate\" reversed=\"true\"></ion-progress-bar>\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonProgressBar, IonContent } from '@ionic/react';\n\nexport const ProgressbarExample: React.FC = () => (\n <IonContent>\n {/*-- Default Progressbar --*/}\n <IonProgressBar></IonProgressBar><br />\n\n {/*-- Default Progressbar with 50 percent --*/}\n <IonProgressBar value={0.5}></IonProgressBar><br />\n\n {/*-- Colorize Progressbar --*/}\n <IonProgressBar color=\"primary\" value={0.5}></IonProgressBar><br />\n <IonProgressBar color=\"secondary\" value={0.5}></IonProgressBar><br />\n\n {/*-- Other types --*/}\n <IonProgressBar value={0.25} buffer={0.5}></IonProgressBar><br />\n <IonProgressBar type=\"indeterminate\"></IonProgressBar><br />\n <IonProgressBar type=\"indeterminate\" reversed={true}></IonProgressBar><br />\n </IonContent>\n);\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'progress-bar-example',\n styleUrl: 'progress-bar-example.css'\n})\nexport class ProgressBarExample {\n render() {\n return [\n // Default Progressbar\n <ion-progress-bar></ion-progress-bar>,\n\n // Default Progressbar with 50 percent\n <ion-progress-bar value={0.5}></ion-progress-bar>,\n\n // Colorize Progressbar\n <ion-progress-bar color=\"primary\" value={0.5}></ion-progress-bar>,\n <ion-progress-bar color=\"secondary\" value={0.5}></ion-progress-bar>,\n\n // Other types\n <ion-progress-bar value={0.25} buffer={0.5}></ion-progress-bar>,\n <ion-progress-bar type=\"indeterminate\"></ion-progress-bar>,\n <ion-progress-bar type=\"indeterminate\" reversed={true}></ion-progress-bar>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <!-- Default Progressbar -->\n <ion-progress-bar></ion-progress-bar>\n\n <!-- Default Progressbar with 50 percent -->\n <ion-progress-bar value=\"0.5\"></ion-progress-bar>\n\n <!-- Colorize Progressbar -->\n <ion-progress-bar color=\"primary\" value=\"0.5\"></ion-progress-bar>\n <ion-progress-bar color=\"secondary\" value=\"0.5\"></ion-progress-bar>\n\n <!-- Other types -->\n <ion-progress-bar value=\"0.25\" buffer=\"0.5\"></ion-progress-bar>\n <ion-progress-bar type=\"indeterminate\"></ion-progress-bar>\n <ion-progress-bar type=\"indeterminate\" reversed=\"true\"></ion-progress-bar>\n</template>\n\n<script>\nimport { IonProgressBar } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonProgressBar }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "buffer",
|
||
"type": "number",
|
||
"mutable": false,
|
||
"attr": "buffer",
|
||
"reflectToAttr": false,
|
||
"docs": "If the buffer and value are smaller than 1, the buffer circles will show.\nThe buffer should be between [0, 1].",
|
||
"docsTags": [],
|
||
"default": "1",
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "reversed",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "reversed",
|
||
"reflectToAttr": false,
|
||
"docs": "If true, reverse the progress bar direction.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "type",
|
||
"type": "\"determinate\" | \"indeterminate\"",
|
||
"mutable": false,
|
||
"attr": "type",
|
||
"reflectToAttr": false,
|
||
"docs": "The state of the progress bar, based on if the time the process takes is known or not.\nDefault options are: `\"determinate\"` (no animation), `\"indeterminate\"` (animate from left to right).",
|
||
"docsTags": [],
|
||
"default": "'determinate'",
|
||
"values": [
|
||
{
|
||
"value": "determinate",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "indeterminate",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "number",
|
||
"mutable": false,
|
||
"attr": "value",
|
||
"reflectToAttr": false,
|
||
"docs": "The value determines how much of the active bar should display when the\n`type` is `\"determinate\"`.\nThe value should be between [0, 1].",
|
||
"docsTags": [],
|
||
"default": "0",
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the progress track, or the buffer bar if `buffer` is set"
|
||
},
|
||
{
|
||
"name": "--buffer-background",
|
||
"annotation": "prop",
|
||
"docs": "DEPRECATED, use `--background` instead"
|
||
},
|
||
{
|
||
"name": "--progress-background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the progress bar representing the current value"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [
|
||
{
|
||
"name": "progress",
|
||
"docs": "The progress bar that shows the current value when `type` is `\"determinate\"` and slides back and forth when `type` is `\"indeterminate\"`."
|
||
},
|
||
{
|
||
"name": "stream",
|
||
"docs": "The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `\"determinate\"`."
|
||
},
|
||
{
|
||
"name": "track",
|
||
"docs": "The track bar behind the progress bar. If the `buffer` property is set and `type` is `\"determinate\"` the track will be the\nwidth of the `buffer` value."
|
||
}
|
||
],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/radio/radio.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-radio",
|
||
"readme": "# ion-radio\n\nRadios should be used inside of an [`ion-radio-group`](../radio-group). Pressing on a radio will check it. They can also be checked programmatically by setting the value property of the parent `ion-radio-group` to the value of the radio.\n\nWhen radios are inside of a radio group, only one radio in the group will be checked at any time. Pressing a radio will check it and uncheck the previously selected radio, if there is one. If a radio is not in a group with another radio, then both radios will have the ability to be checked at the same time.\n\n\n\n",
|
||
"docs": "Radios should be used inside of an [`ion-radio-group`](../radio-group). Pressing on a radio will check it. They can also be checked programmatically by setting the value property of the parent `ion-radio-group` to the value of the radio.\n\nWhen radios are inside of a radio group, only one radio in the group will be checked at any time. Pressing a radio will check it and uncheck the previously selected radio, if there is one. If a radio is not in a group with another radio, then both radios will have the ability to be checked at the same time.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
},
|
||
{
|
||
"text": "container - The container for the radio mark.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "mark - The checkmark or dot used to indicate the checked state.",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<ion-list>\n <ion-radio-group value=\"biff\">\n <ion-list-header>\n <ion-label>Name</ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Biff</ion-label>\n <ion-radio slot=\"start\" value=\"biff\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Griff</ion-label>\n <ion-radio slot=\"start\" value=\"griff\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Buford</ion-label>\n <ion-radio slot=\"start\" value=\"buford\"></ion-radio>\n </ion-item>\n </ion-radio-group>\n</ion-list>\n```\n",
|
||
"javascript": "```html\n<ion-list>\n <ion-radio-group value=\"biff\">\n <ion-list-header>\n <ion-label>Name</ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Biff</ion-label>\n <ion-radio slot=\"start\" value=\"biff\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Griff</ion-label>\n <ion-radio slot=\"start\" value=\"griff\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Buford</ion-label>\n <ion-radio slot=\"start\" value=\"buford\"></ion-radio>\n </ion-item>\n </ion-radio-group>\n</ion-list>\n```\n",
|
||
"react": "```tsx\nimport React, { useState } from 'react';\nimport { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, IonItemDivider } from '@ionic/react';\n\nexport const RadioExamples: React.FC = () => {\n const [selected, setSelected] = useState<string>('biff');\n return (\n <IonPage>\n <IonHeader>\n <IonToolbar>\n <IonTitle>Radio Examples</IonTitle>\n </IonToolbar>\n </IonHeader>\n <IonContent>\n <IonList>\n <IonRadioGroup value={selected} onIonChange={e => setSelected(e.detail.value)}>\n <IonListHeader>\n <IonLabel>Name</IonLabel>\n </IonListHeader>\n\n <IonItem>\n <IonLabel>Biff</IonLabel>\n <IonRadio slot=\"start\" value=\"biff\" />\n </IonItem>\n\n <IonItem>\n <IonLabel>Griff</IonLabel>\n <IonRadio slot=\"start\" value=\"griff\" />\n </IonItem>\n\n <IonItem>\n <IonLabel>Buford</IonLabel>\n <IonRadio slot=\"start\" value=\"buford\" />\n </IonItem>\n </IonRadioGroup>\n <IonItemDivider>Your Selection</IonItemDivider>\n <IonItem>{selected ?? '(none selected'}</IonItem>\n </IonList>\n </IonContent>\n </IonPage>\n );\n};\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'radio-example',\n styleUrl: 'radio-example.css'\n})\nexport class RadioExample {\n render() {\n return [\n <ion-list>\n <ion-radio-group value=\"biff\">\n <ion-list-header>\n <ion-label>Name</ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Biff</ion-label>\n <ion-radio slot=\"start\" value=\"biff\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Griff</ion-label>\n <ion-radio slot=\"start\" value=\"griff\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Buford</ion-label>\n <ion-radio slot=\"start\" value=\"buford\"></ion-radio>\n </ion-item>\n </ion-radio-group>\n </ion-list>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <ion-list>\n <ion-radio-group value=\"biff\">\n <ion-list-header>\n <ion-label>Name</ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Biff</ion-label>\n <ion-radio slot=\"start\" value=\"biff\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Griff</ion-label>\n <ion-radio slot=\"start\" value=\"griff\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Buford</ion-label>\n <ion-radio slot=\"start\" value=\"buford\"></ion-radio>\n </ion-item>\n </ion-radio-group>\n </ion-list>\n</template>\n\n<script>\nimport { \n IonItem, \n IonLabel, \n IonList, \n IonListHeader,\n IonRadio, \n IonRadioGroup\n} from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { \n IonItem, \n IonLabel, \n IonList, \n IonListHeader,\n IonRadio, \n IonRadioGroup\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot interact with the radio.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "name",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "name",
|
||
"reflectToAttr": false,
|
||
"docs": "The name of the control, which is submitted with the form data.",
|
||
"docsTags": [],
|
||
"default": "this.inputId",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "any",
|
||
"mutable": false,
|
||
"attr": "value",
|
||
"reflectToAttr": false,
|
||
"docs": "the value of the radio.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "any"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [
|
||
{
|
||
"event": "ionBlur",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the radio button loses focus.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionFocus",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the radio button has focus.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Border radius of the radio"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the radio"
|
||
},
|
||
{
|
||
"name": "--color-checked",
|
||
"annotation": "prop",
|
||
"docs": "Color of the checked radio"
|
||
},
|
||
{
|
||
"name": "--inner-border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Border radius of the inner checked radio"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [
|
||
{
|
||
"name": "container",
|
||
"docs": "The container for the radio mark."
|
||
},
|
||
{
|
||
"name": "mark",
|
||
"docs": "The checkmark or dot used to indicate the checked state."
|
||
}
|
||
],
|
||
"dependents": [
|
||
"ion-select-popover"
|
||
],
|
||
"dependencies": [],
|
||
"dependencyGraph": {
|
||
"ion-select-popover": [
|
||
"ion-radio"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/radio-group/radio-group.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-radio-group",
|
||
"readme": "# ion-radio-group\n\nA radio group is a group of [radio buttons](../radio). It allows\na user to select at most one radio button from a set. Checking one radio\nbutton that belongs to a radio group unchecks any previous checked\nradio button within the same group.\n\n\n\n",
|
||
"docs": "A radio group is a group of [radio buttons](../radio). It allows\na user to select at most one radio button from a set. Checking one radio\nbutton that belongs to a radio group unchecks any previous checked\nradio button within the same group.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"angular": "```html\n<ion-list>\n <ion-radio-group>\n <ion-list-header>\n <ion-label>\n Auto Manufacturers\n </ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Cord</ion-label>\n <ion-radio value=\"cord\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Duesenberg</ion-label>\n <ion-radio value=\"duesenberg\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Hudson</ion-label>\n <ion-radio value=\"hudson\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Packard</ion-label>\n <ion-radio value=\"packard\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Studebaker</ion-label>\n <ion-radio value=\"studebaker\"></ion-radio>\n </ion-item>\n </ion-radio-group>\n</ion-list>\n```\n",
|
||
"javascript": "```html\n<ion-list>\n <ion-radio-group>\n <ion-list-header>\n <ion-label>\n Auto Manufacturers\n </ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Cord</ion-label>\n <ion-radio value=\"cord\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Duesenberg</ion-label>\n <ion-radio value=\"duesenberg\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Hudson</ion-label>\n <ion-radio value=\"hudson\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Packard</ion-label>\n <ion-radio value=\"packard\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Studebaker</ion-label>\n <ion-radio value=\"studebaker\"></ion-radio>\n </ion-item>\n </ion-radio-group>\n</ion-list>\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonList, IonRadioGroup, IonListHeader, IonLabel, IonRadio, IonItem, IonContent } from '@ionic/react';\n\nexport const RadioGroupExample: React.FC = () => (\n <IonContent>\n <IonList>\n <IonRadioGroup>\n <IonListHeader>\n <IonLabel>\n Auto Manufacturers\n </IonLabel>\n </IonListHeader>\n\n <IonItem>\n <IonLabel>Cord</IonLabel>\n <IonRadio value=\"cord\" />\n </IonItem>\n\n <IonItem>\n <IonLabel>Duesenberg</IonLabel>\n <IonRadio value=\"duesenberg\" />\n </IonItem>\n\n <IonItem>\n <IonLabel>Hudson</IonLabel>\n <IonRadio value=\"hudson\" />\n </IonItem>\n\n <IonItem>\n <IonLabel>Packard</IonLabel>\n <IonRadio value=\"packard\" />\n </IonItem>\n\n <IonItem>\n <IonLabel>Studebaker</IonLabel>\n <IonRadio value=\"studebaker\" />\n </IonItem>\n </IonRadioGroup>\n </IonList>\n </IonContent>\n);\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'radio-group-example',\n styleUrl: 'radio-group-example.css'\n})\nexport class RadioGroupExample {\n render() {\n return [\n <ion-list>\n <ion-radio-group>\n <ion-list-header>\n <ion-label>\n Auto Manufacturers\n </ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Cord</ion-label>\n <ion-radio value=\"cord\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Duesenberg</ion-label>\n <ion-radio value=\"duesenberg\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Hudson</ion-label>\n <ion-radio value=\"hudson\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Packard</ion-label>\n <ion-radio value=\"packard\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Studebaker</ion-label>\n <ion-radio value=\"studebaker\"></ion-radio>\n </ion-item>\n </ion-radio-group>\n </ion-list>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <ion-list>\n <ion-radio-group>\n <ion-list-header>\n <ion-label>\n Auto Manufacturers\n </ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Cord</ion-label>\n <ion-radio value=\"cord\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Duesenberg</ion-label>\n <ion-radio value=\"duesenberg\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Hudson</ion-label>\n <ion-radio value=\"hudson\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Packard</ion-label>\n <ion-radio value=\"packard\"></ion-radio>\n </ion-item>\n\n <ion-item>\n <ion-label>Studebaker</ion-label>\n <ion-radio value=\"studebaker\"></ion-radio>\n </ion-item>\n </ion-radio-group>\n </ion-list>\n</template>\n\n<script>\nimport { \n IonItem, \n IonLabel, \n IonList, \n IonListHeader, \n IonRadio, \n IonRadioGroup\n} from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: {\n IonItem, \n IonLabel, \n IonList, \n IonListHeader, \n IonRadio, \n IonRadioGroup\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "allowEmptySelection",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "allow-empty-selection",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the radios can be deselected.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "name",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "name",
|
||
"reflectToAttr": false,
|
||
"docs": "The name of the control, which is submitted with the form data.",
|
||
"docsTags": [],
|
||
"default": "this.inputId",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "any",
|
||
"mutable": true,
|
||
"attr": "value",
|
||
"reflectToAttr": false,
|
||
"docs": "the value of the radio group.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "any"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [
|
||
{
|
||
"event": "ionChange",
|
||
"detail": "RadioGroupChangeEventDetail<any>",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the value has changed.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [
|
||
{
|
||
"event": "keydown",
|
||
"target": "document",
|
||
"capture": false,
|
||
"passive": false
|
||
}
|
||
],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [
|
||
"ion-select-popover"
|
||
],
|
||
"dependencies": [],
|
||
"dependencyGraph": {
|
||
"ion-select-popover": [
|
||
"ion-radio-group"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/range/range.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-range",
|
||
"readme": "# ion-range\n\nThe Range slider lets users select from a range of values by moving\nthe slider knob. It can accept dual knobs, but by default one knob\ncontrols the value of the range.\n\n## Range Labels\n\nLabels can be placed on either side of the range by adding the\n`slot=\"start\"` or `slot=\"end\"` to the element. The element doesn't have to\nbe an `ion-label`, it can be added to any element to place it to the\nleft or right of the range.\n\n",
|
||
"docs": "The Range slider lets users select from a range of values by moving\nthe slider knob. It can accept dual knobs, but by default one knob\ncontrols the value of the range.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
},
|
||
{
|
||
"text": "start - Content is placed to the left of the range slider in LTR, and to the right in RTL.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "end - Content is placed to the right of the range slider in LTR, and to the left in RTL.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "tick - An inactive tick mark.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "tick-active - An active tick mark.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "pin - The counter that appears above a knob.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "knob - The handle that is used to drag the range.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "bar - The inactive part of the bar.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "bar-active - The active part of the bar.",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<ion-list>\n <ion-item>\n <ion-range color=\"danger\" pin=\"true\"></ion-range>\n </ion-item>\n\n <ion-item>\n <ion-range min=\"-200\" max=\"200\" color=\"secondary\">\n <ion-label slot=\"start\">-200</ion-label>\n <ion-label slot=\"end\">200</ion-label>\n </ion-range>\n </ion-item>\n\n <ion-item>\n <ion-range min=\"20\" max=\"80\" step=\"2\">\n <ion-icon size=\"small\" slot=\"start\" name=\"sunny\"></ion-icon>\n <ion-icon slot=\"end\" name=\"sunny\"></ion-icon>\n </ion-range>\n </ion-item>\n\n <ion-item>\n <ion-range min=\"1000\" max=\"2000\" step=\"100\" snaps=\"true\" color=\"secondary\"></ion-range>\n </ion-item>\n\n <ion-item>\n <ion-range min=\"1000\" max=\"2000\" step=\"100\" snaps=\"true\" ticks=\"false\" color=\"secondary\"></ion-range>\n </ion-item>\n\n <ion-item>\n <ion-range dualKnobs=\"true\" min=\"21\" max=\"72\" step=\"3\" snaps=\"true\"></ion-range>\n </ion-item>\n</ion-list>\n```\n",
|
||
"javascript": "```html\n<ion-list>\n <ion-item>\n <ion-range color=\"danger\" pin=\"true\"></ion-range>\n </ion-item>\n\n <ion-item>\n <ion-range min=\"-200\" max=\"200\" color=\"secondary\">\n <ion-label slot=\"start\">-200</ion-label>\n <ion-label slot=\"end\">200</ion-label>\n </ion-range>\n </ion-item>\n\n <ion-item>\n <ion-range min=\"20\" max=\"80\" step=\"2\">\n <ion-icon size=\"small\" slot=\"start\" name=\"sunny\"></ion-icon>\n <ion-icon slot=\"end\" name=\"sunny\"></ion-icon>\n </ion-range>\n </ion-item>\n\n <ion-item>\n <ion-range min=\"1000\" max=\"2000\" step=\"100\" snaps=\"true\" color=\"secondary\"></ion-range>\n </ion-item>\n\n <ion-item>\n <ion-range min=\"1000\" max=\"2000\" step=\"100\" snaps=\"true\" ticks=\"false\" color=\"secondary\"></ion-range>\n </ion-item>\n\n <ion-item>\n <ion-range dual-knobs=\"true\" min=\"21\" max=\"72\" step=\"3\" snaps=\"true\"></ion-range>\n </ion-item>\n</ion-list>\n```\n",
|
||
"react": "```tsx\nimport React, { useState } from 'react';\nimport { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonItem, IonRange, IonLabel, IonIcon, IonItemDivider } from '@ionic/react';\nimport { sunny } from 'ionicons/icons';\nimport { RangeValue } from '@ionic/core';\n\nexport const RangeExamples: React.FC = () => {\n\n const [value, setValue] = useState(0);\n const [rangeValue, setRangeValue] = useState<{\n lower: number;\n upper: number;\n }>({ lower: 0, upper: 0 });\n\n return (\n <IonPage>\n <IonHeader>\n <IonToolbar>\n <IonTitle>IonRange Examples</IonTitle>\n </IonToolbar>\n </IonHeader>\n <IonContent>\n <IonList>\n <IonItemDivider>Default</IonItemDivider>\n <IonItem>\n <IonRange pin={true} value={value} onIonChange={e => setValue(e.detail.value as number)} />\n </IonItem>\n <IonItem>\n <IonLabel>Value: {value}</IonLabel>\n </IonItem>\n\n <IonItemDivider>Min & Max</IonItemDivider>\n <IonItem>\n <IonRange min={-200} max={200} color=\"secondary\">\n <IonLabel slot=\"start\">-200</IonLabel>\n <IonLabel slot=\"end\">200</IonLabel>\n </IonRange>\n </IonItem>\n\n <IonItemDivider>Icons</IonItemDivider>\n <IonItem>\n <IonRange min={20} max={80} step={2}>\n <IonIcon size=\"small\" slot=\"start\" icon={sunny} />\n <IonIcon slot=\"end\" icon={sunny} />\n </IonRange>\n </IonItem>\n\n <IonItemDivider>With Snaps & Ticks</IonItemDivider>\n <IonItem>\n <IonRange min={1000} max={2000} step={100} snaps={true} color=\"secondary\" />\n </IonItem>\n\n <IonItemDivider>With Snaps & No Ticks</IonItemDivider>\n <IonItem>\n <IonRange min={1000} max={2000} step={100} snaps={true} ticks={false} color=\"secondary\" />\n </IonItem>\n\n <IonItemDivider>Dual Knobs</IonItemDivider>\n <IonItem>\n <IonRange dualKnobs={true} min={0} max={60} step={3} snaps={true} onIonChange={e => setRangeValue(e.detail.value as any)} />\n </IonItem>\n <IonItem>\n <IonLabel>Value: lower: {rangeValue.lower} upper: {rangeValue.upper}</IonLabel>\n </IonItem>\n </IonList>\n </IonContent>\n </IonPage>\n );\n};\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'range-example',\n styleUrl: 'range-example.css'\n})\nexport class RangeExample {\n render() {\n return [\n <ion-list>\n <ion-item>\n <ion-range color=\"danger\" pin={true}></ion-range>\n </ion-item>\n\n <ion-item>\n <ion-range min={-200} max={200} color=\"secondary\">\n <ion-label slot=\"start\">-200</ion-label>\n <ion-label slot=\"end\">200</ion-label>\n </ion-range>\n </ion-item>\n\n <ion-item>\n <ion-range min={20} max={80} step={2}>\n <ion-icon size=\"small\" slot=\"start\" name=\"sunny\"></ion-icon>\n <ion-icon slot=\"end\" name=\"sunny\"></ion-icon>\n </ion-range>\n </ion-item>\n\n <ion-item>\n <ion-range min={1000} max={2000} step={100} snaps={true} color=\"secondary\"></ion-range>\n </ion-item>\n\n <ion-item>\n <ion-range min={1000} max={2000} step={100} snaps={true} ticks={false} color=\"secondary\"></ion-range>\n </ion-item>\n\n <ion-item>\n <ion-range dualKnobs={true} min={21} max={72} step={3} snaps={true}></ion-range>\n </ion-item>\n </ion-list>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <ion-list>\n <ion-item>\n <ion-range color=\"danger\" pin=\"true\"></ion-range>\n </ion-item>\n\n <ion-item>\n <ion-range min=\"-200\" max=\"200\" color=\"secondary\">\n <ion-label slot=\"start\">-200</ion-label>\n <ion-label slot=\"end\">200</ion-label>\n </ion-range>\n </ion-item>\n\n <ion-item>\n <ion-range min=\"20\" max=\"80\" step=\"2\">\n <ion-icon size=\"small\" slot=\"start\" name=\"sunny\"></ion-icon>\n <ion-icon slot=\"end\" name=\"sunny\"></ion-icon>\n </ion-range>\n </ion-item>\n\n <ion-item>\n <ion-range min=\"1000\" max=\"2000\" step=\"100\" snaps=\"true\" color=\"secondary\"></ion-range>\n </ion-item>\n\n <ion-item>\n <ion-range min=\"1000\" max=\"2000\" step=\"100\" snaps=\"true\" ticks=\"false\" color=\"secondary\"></ion-range>\n </ion-item>\n\n <ion-item>\n <ion-range ref=\"rangeDualKnobs\" dual-knobs=\"true\" min=\"21\" max=\"72\" step=\"3\" snaps=\"true\"></ion-range>\n </ion-item>\n </ion-list>\n</template>\n\n<script>\nimport { IonItem, IonLabel, IonList, IonRange } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonItem, IonLabel, IonList, IonRange },\n mounted() {\n // Sets initial value for dual-knob ion-range\n this.$refs.rangeDualKnobs.value = { lower: 24, upper: 42 };\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "debounce",
|
||
"type": "number",
|
||
"mutable": false,
|
||
"attr": "debounce",
|
||
"reflectToAttr": false,
|
||
"docs": "How long, in milliseconds, to wait to trigger the\n`ionChange` event after each change in the range value.\nThis also impacts form bindings such as `ngModel` or `v-model`.",
|
||
"docsTags": [],
|
||
"default": "0",
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot interact with the range.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "dualKnobs",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "dual-knobs",
|
||
"reflectToAttr": false,
|
||
"docs": "Show two knobs.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "max",
|
||
"type": "number",
|
||
"mutable": false,
|
||
"attr": "max",
|
||
"reflectToAttr": false,
|
||
"docs": "Maximum integer value of the range.",
|
||
"docsTags": [],
|
||
"default": "100",
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "min",
|
||
"type": "number",
|
||
"mutable": false,
|
||
"attr": "min",
|
||
"reflectToAttr": false,
|
||
"docs": "Minimum integer value of the range.",
|
||
"docsTags": [],
|
||
"default": "0",
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "name",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "name",
|
||
"reflectToAttr": false,
|
||
"docs": "The name of the control, which is submitted with the form data.",
|
||
"docsTags": [],
|
||
"default": "''",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "pin",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "pin",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, a pin with integer value is shown when the knob\nis pressed.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "snaps",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "snaps",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the knob snaps to tick marks evenly spaced based\non the step property value.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "step",
|
||
"type": "number",
|
||
"mutable": false,
|
||
"attr": "step",
|
||
"reflectToAttr": false,
|
||
"docs": "Specifies the value granularity.",
|
||
"docsTags": [],
|
||
"default": "1",
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "ticks",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "ticks",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, tick marks are displayed based on the step value.\nOnly applies when `snaps` is `true`.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "number | { lower: number; upper: number; }",
|
||
"mutable": true,
|
||
"attr": "value",
|
||
"reflectToAttr": false,
|
||
"docs": "the value of the range.",
|
||
"docsTags": [],
|
||
"default": "0",
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
},
|
||
{
|
||
"type": "{ lower: number; upper: number; }"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [
|
||
{
|
||
"event": "ionBlur",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the range loses focus.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionChange",
|
||
"detail": "RangeChangeEventDetail",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the value property has changed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionFocus",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the range has focus.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--bar-background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the range bar"
|
||
},
|
||
{
|
||
"name": "--bar-background-active",
|
||
"annotation": "prop",
|
||
"docs": "Background of the active range bar"
|
||
},
|
||
{
|
||
"name": "--bar-border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Border radius of the range bar"
|
||
},
|
||
{
|
||
"name": "--bar-height",
|
||
"annotation": "prop",
|
||
"docs": "Height of the range bar"
|
||
},
|
||
{
|
||
"name": "--height",
|
||
"annotation": "prop",
|
||
"docs": "Height of the range"
|
||
},
|
||
{
|
||
"name": "--knob-background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the range knob"
|
||
},
|
||
{
|
||
"name": "--knob-border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Border radius of the range knob"
|
||
},
|
||
{
|
||
"name": "--knob-box-shadow",
|
||
"annotation": "prop",
|
||
"docs": "Box shadow of the range knob"
|
||
},
|
||
{
|
||
"name": "--knob-size",
|
||
"annotation": "prop",
|
||
"docs": "Size of the range knob"
|
||
},
|
||
{
|
||
"name": "--pin-background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the range pin"
|
||
},
|
||
{
|
||
"name": "--pin-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the range pin"
|
||
}
|
||
],
|
||
"slots": [
|
||
{
|
||
"name": "end",
|
||
"docs": "Content is placed to the right of the range slider in LTR, and to the left in RTL."
|
||
},
|
||
{
|
||
"name": "start",
|
||
"docs": "Content is placed to the left of the range slider in LTR, and to the right in RTL."
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "bar",
|
||
"docs": "The inactive part of the bar."
|
||
},
|
||
{
|
||
"name": "bar-active",
|
||
"docs": "The active part of the bar."
|
||
},
|
||
{
|
||
"name": "knob",
|
||
"docs": "The handle that is used to drag the range."
|
||
},
|
||
{
|
||
"name": "pin",
|
||
"docs": "The counter that appears above a knob."
|
||
},
|
||
{
|
||
"name": "tick",
|
||
"docs": "An inactive tick mark."
|
||
},
|
||
{
|
||
"name": "tick-active",
|
||
"docs": "An active tick mark."
|
||
}
|
||
],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/refresher/refresher.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-refresher",
|
||
"readme": "# ion-refresher\n\nThe refresher provides pull-to-refresh functionality on a content component.\nThe pull-to-refresh pattern lets a user pull down on a list of data using touch\nin order to retrieve more data.\n\nData should be modified during the refresher's output events. Once the async\noperation has completed and the refreshing should end, call `complete()` on the\nrefresher.\n\n## Native Refreshers\n\nBoth iOS and Android platforms provide refreshers that take advantage of properties exposed by their respective devices that give pull to refresh a fluid, native-like feel.\n\nCertain properties such as `pullMin` and `snapbackDuration` are not compatible because much of the native refreshers are scroll-based. See [Refresher Properties](#properties) for more information.\n\n### iOS Usage\n\nUsing the iOS native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [Spinner Documentation](../spinner#properties) for accepted values. The `pullingIcon` defaults to the `lines` spinner on iOS. The spinner tick marks will be progressively shown as the user pulls down on the page.\n\nThe iOS native `ion-refresher` relies on rubber band scrolling in order to work properly and is only compatible with iOS devices as a result. We provide a fallback refresher for apps running in iOS mode on devices that do not support rubber band scrolling.\n\n### Android Usage\n\nUsing the MD native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [ion-spinner Documentation](../spinner#properties) for accepted values. `pullingIcon` defaults to the `circular` spinner on MD.\n\n",
|
||
"docs": "The refresher provides pull-to-refresh functionality on a content component.\nThe pull-to-refresh pattern lets a user pull down on a list of data using touch\nin order to retrieve more data.\n\nData should be modified during the refresher's output events. Once the async\noperation has completed and the refreshing should end, call `complete()` on the\nrefresher.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"angular": "```html\n<!-- Default Refresher -->\n<ion-content>\n <ion-refresher slot=\"fixed\" (ionRefresh)=\"doRefresh($event)\">\n <ion-refresher-content></ion-refresher-content>\n </ion-refresher>\n</ion-content>\n\n<!-- Custom Refresher Properties -->\n<ion-content>\n <ion-refresher slot=\"fixed\" pullFactor=\"0.5\" pullMin=\"100\" pullMax=\"200\">\n <ion-refresher-content></ion-refresher-content>\n </ion-refresher>\n</ion-content>\n\n<!-- Custom Refresher Content -->\n<ion-content>\n <ion-refresher slot=\"fixed\" (ionRefresh)=\"doRefresh($event)\">\n <ion-refresher-content\n pullingIcon=\"chevron-down-circle-outline\"\n pullingText=\"Pull to refresh\"\n refreshingSpinner=\"circles\"\n refreshingText=\"Refreshing...\">\n </ion-refresher-content>\n </ion-refresher>\n</ion-content>\n```\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'refresher-example',\n templateUrl: 'refresher-example.html',\n styleUrls: ['./refresher-example.css'],\n})\nexport class RefresherExample {\n constructor() {}\n\n doRefresh(event) {\n console.log('Begin async operation');\n\n setTimeout(() => {\n console.log('Async operation has ended');\n event.target.complete();\n }, 2000);\n }\n}\n```",
|
||
"javascript": "```html\n<!-- Default Refresher -->\n<ion-content>\n <ion-refresher slot=\"fixed\">\n <ion-refresher-content></ion-refresher-content>\n </ion-refresher>\n</ion-content>\n\n<!-- Custom Refresher Properties -->\n<ion-content>\n <ion-refresher slot=\"fixed\" pull-factor=\"0.5\" pull-min=\"100\" pull-max=\"200\">\n <ion-refresher-content></ion-refresher-content>\n </ion-refresher>\n</ion-content>\n\n<!-- Custom Refresher Content -->\n<ion-content>\n <ion-refresher slot=\"fixed\">\n <ion-refresher-content\n pulling-icon=\"chevron-down-circle-outline\"\n pulling-text=\"Pull to refresh\"\n refreshing-spinner=\"circles\"\n refreshing-text=\"Refreshing...\">\n </ion-refresher-content>\n </ion-refresher>\n</ion-content>\n```",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonContent, IonRefresher, IonRefresherContent } from '@ionic/react';\nimport { RefresherEventDetail } from '@ionic/core';\nimport { chevronDownCircleOutline } from 'ionicons/icons';\n\nfunction doRefresh(event: CustomEvent<RefresherEventDetail>) {\n console.log('Begin async operation');\n\n setTimeout(() => {\n console.log('Async operation has ended');\n event.detail.complete();\n }, 2000);\n}\n\nexport const RefresherExample: React.FC = () => (\n <IonContent>\n {/*-- Default Refresher --*/}\n <IonContent>\n <IonRefresher slot=\"fixed\" onIonRefresh={doRefresh}>\n <IonRefresherContent></IonRefresherContent>\n </IonRefresher>\n </IonContent>\n\n {/*-- Custom Refresher Properties --*/}\n <IonContent>\n <IonRefresher slot=\"fixed\" onIonRefresh={doRefresh} pullFactor={0.5} pullMin={100} pullMax={200}>\n <IonRefresherContent></IonRefresherContent>\n </IonRefresher>\n </IonContent>\n\n {/*-- Custom Refresher Content --*/}\n <IonContent>\n <IonRefresher slot=\"fixed\" onIonRefresh={doRefresh}>\n <IonRefresherContent\n pullingIcon={chevronDownCircleOutline}\n pullingText=\"Pull to refresh\"\n refreshingSpinner=\"circles\"\n refreshingText=\"Refreshing...\">\n </IonRefresherContent>\n </IonRefresher>\n </IonContent>\n </IonContent>\n);\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'refresher-example',\n styleUrl: 'refresher-example.css'\n})\nexport class RefresherExample {\n doRefresh(ev: any) {\n console.log('Begin async operation');\n\n setTimeout(() => {\n console.log('Async operation has ended');\n ev.target.complete();\n }, 2000);\n }\n\n render() {\n return [\n // Default Refresher\n <ion-content>\n <ion-refresher slot=\"fixed\" onIonRefresh={(ev) => this.doRefresh(ev)}>\n <ion-refresher-content></ion-refresher-content>\n </ion-refresher>\n </ion-content>,\n\n // Custom Refresher Properties\n <ion-content>\n <ion-refresher slot=\"fixed\" pullFactor={0.5} pullMin={100} pullMax={200}>\n <ion-refresher-content></ion-refresher-content>\n </ion-refresher>\n </ion-content>,\n\n // Custom Refresher Content\n <ion-content>\n <ion-refresher slot=\"fixed\" onIonRefresh={(ev) => this.doRefresh(ev)}>\n <ion-refresher-content\n pullingIcon=\"chevron-down-circle-outline\"\n pullingText=\"Pull to refresh\"\n refreshingSpinner=\"circles\"\n refreshingText=\"Refreshing...\">\n </ion-refresher-content>\n </ion-refresher>\n </ion-content>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <!-- Default Refresher -->\n <ion-content>\n <ion-refresher slot=\"fixed\" @ionRefresh=\"doRefresh($event)\">\n <ion-refresher-content></ion-refresher-content>\n </ion-refresher>\n </ion-content>\n\n <!-- Custom Refresher Properties -->\n <ion-content>\n <ion-refresher slot=\"fixed\" pull-factor=\"0.5\" pull-min=\"100\" pull-max=\"200\">\n <ion-refresher-content></ion-refresher-content>\n </ion-refresher>\n </ion-content>\n\n <!-- Custom Refresher Content -->\n <ion-content>\n <ion-refresher slot=\"fixed\" @ionRefresh=\"doRefresh($event)\">\n <ion-refresher-content\n :pulling-icon=\"chevronDownCircleOutline\"\n pulling-text=\"Pull to refresh\"\n refreshing-spinner=\"circles\"\n refreshing-text=\"Refreshing...\">\n </ion-refresher-content>\n </ion-refresher>\n </ion-content>\n</template>\n\n<script lang=\"ts\">\nimport { IonContent, IonRefresher, IonRefresherContent } from '@ionic/vue';\nimport { chevronDownCircleOutline } from 'ionicons/icons'\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonContent, IonRefresher, IonRefresherContent },\n setup() {\n const doRefresh = (event: CustomEvent) => {\n console.log('Begin async operation');\n \n setTimeout(() => {\n console.log('Async operation has ended');\n event.target.complete();\n }, 2000);\n }\n return { chevronDownCircleOutline, doRefresh }\n }\n});\n</script>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "closeDuration",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "close-duration",
|
||
"reflectToAttr": false,
|
||
"docs": "Time it takes to close the refresher.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.",
|
||
"docsTags": [],
|
||
"default": "'280ms'",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the refresher will be hidden.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "pullFactor",
|
||
"type": "number",
|
||
"mutable": false,
|
||
"attr": "pull-factor",
|
||
"reflectToAttr": false,
|
||
"docs": "How much to multiply the pull speed by. To slow the pull animation down,\npass a number less than `1`. To speed up the pull, pass a number greater\nthan `1`. The default value is `1` which is equal to the speed of the cursor.\nIf a negative value is passed in, the factor will be `1` instead.\n\nFor example: If the value passed is `1.2` and the content is dragged by\n`10` pixels, instead of `10` pixels the content will be pulled by `12` pixels\n(an increase of 20 percent). If the value passed is `0.8`, the dragged amount\nwill be `8` pixels, less than the amount the cursor has moved.\n\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.",
|
||
"docsTags": [],
|
||
"default": "1",
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "pullMax",
|
||
"type": "number",
|
||
"mutable": false,
|
||
"attr": "pull-max",
|
||
"reflectToAttr": false,
|
||
"docs": "The maximum distance of the pull until the refresher\nwill automatically go into the `refreshing` state.\nDefaults to the result of `pullMin + 60`.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.",
|
||
"docsTags": [],
|
||
"default": "this.pullMin + 60",
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "pullMin",
|
||
"type": "number",
|
||
"mutable": false,
|
||
"attr": "pull-min",
|
||
"reflectToAttr": false,
|
||
"docs": "The minimum distance the user must pull down until the\nrefresher will go into the `refreshing` state.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.",
|
||
"docsTags": [],
|
||
"default": "60",
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "snapbackDuration",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "snapback-duration",
|
||
"reflectToAttr": false,
|
||
"docs": "Time it takes the refresher to snap back to the `refreshing` state.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.",
|
||
"docsTags": [],
|
||
"default": "'280ms'",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "cancel",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "cancel() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Changes the refresher's state from `refreshing` to `cancelling`.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "complete",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "complete() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Call `complete()` when your async operation has completed.\nFor example, the `refreshing` state is while the app is performing\nan asynchronous operation, such as receiving more data from an\nAJAX request. Once the data has been received, you then call this\nmethod to signify that the refreshing has completed and to close\nthe refresher. This method also changes the refresher's state from\n`refreshing` to `completing`.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "getProgress",
|
||
"returns": {
|
||
"type": "Promise<number>",
|
||
"docs": ""
|
||
},
|
||
"signature": "getProgress() => Promise<number>",
|
||
"parameters": [],
|
||
"docs": "A number representing how far down the user has pulled.\nThe number `0` represents the user hasn't pulled down at all. The\nnumber `1`, and anything greater than `1`, represents that the user\nhas pulled far enough down that when they let go then the refresh will\nhappen. If they let go and the number is less than `1`, then the\nrefresh will not happen, and the content will return to it's original\nposition.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionPull",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted while the user is pulling down the content and exposing the refresher.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionRefresh",
|
||
"detail": "RefresherEventDetail",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the user lets go of the content and has pulled down\nfurther than the `pullMin` or pulls the content down and exceeds the pullMax.\nUpdates the refresher state to `refreshing`. The `complete()` method should be\ncalled when the async operation has completed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionStart",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the user begins to start pulling down.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/refresher-content/refresher-content.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-refresher-content",
|
||
"readme": "# ion-refresher-content\n\nThe refresher content contains the text, icon and spinner to display during a pull-to-refresh. Ionic provides the pulling icon and refreshing spinner based on the platform. However, the default icon, spinner, and text can be customized based on the state of the refresher.\n\n\n",
|
||
"docs": "The refresher content contains the text, icon and spinner to display during a pull-to-refresh. Ionic provides the pulling icon and refreshing spinner based on the platform. However, the default icon, spinner, and text can be customized based on the state of the refresher.",
|
||
"docsTags": [],
|
||
"usage": {},
|
||
"props": [
|
||
{
|
||
"name": "pullingIcon",
|
||
"type": "null | string | undefined",
|
||
"mutable": true,
|
||
"attr": "pulling-icon",
|
||
"reflectToAttr": false,
|
||
"docs": "A static icon or a spinner to display when you begin to pull down.\nA spinner name can be provided to gradually show tick marks\nwhen pulling down on iOS devices.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "pullingText",
|
||
"type": "IonicSafeString | string | undefined",
|
||
"mutable": false,
|
||
"attr": "pulling-text",
|
||
"reflectToAttr": false,
|
||
"docs": "The text you want to display when you begin to pull down.\n`pullingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`<Ionic>`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "IonicSafeString"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "refreshingSpinner",
|
||
"type": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-small\" | null | undefined",
|
||
"mutable": true,
|
||
"attr": "refreshing-spinner",
|
||
"reflectToAttr": false,
|
||
"docs": "An animated SVG spinner that shows when refreshing begins",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "bubbles",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "circles",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "circular",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "crescent",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "dots",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "lines",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "lines-small",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "refreshingText",
|
||
"type": "IonicSafeString | string | undefined",
|
||
"mutable": false,
|
||
"attr": "refreshing-text",
|
||
"reflectToAttr": false,
|
||
"docs": "The text you want to display when performing a refresh.\n`refreshingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`<Ionic>`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "IonicSafeString"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-spinner",
|
||
"ion-icon"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-refresher-content": [
|
||
"ion-spinner",
|
||
"ion-icon"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/reorder/reorder.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-reorder",
|
||
"readme": "# ion-reorder\n\nReorder is a component that allows an item in a group of items to be dragged to change its order within that group. It must be used within an `ion-reorder-group` to provide a visual drag and drop interface.\n\n`ion-reorder` is the anchor used to drag and drop the items inside of the `ion-reorder-group`. See the [Reorder Group](../reorder-group) for more information on how to complete the reorder operation.\n\n",
|
||
"docs": "Reorder is a component that allows an item in a group of items to be dragged to change its order within that group. It must be used within an `ion-reorder-group` to provide a visual drag and drop interface.\n\n`ion-reorder` is the anchor used to drag and drop the items inside of the `ion-reorder-group`. See the [Reorder Group](../reorder-group) for more information on how to complete the reorder operation.",
|
||
"docsTags": [
|
||
{
|
||
"text": "icon - The icon of the reorder handle (uses ion-icon).",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "\n```html\n<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->\n<ion-reorder-group disabled=\"false\">\n <!-- Default reorder icon, end aligned items -->\n <ion-item>\n <ion-label>\n Item 1\n </ion-label>\n <ion-reorder slot=\"end\"></ion-reorder>\n </ion-item>\n\n <ion-item>\n <ion-label>\n Item 2\n </ion-label>\n <ion-reorder slot=\"end\"></ion-reorder>\n </ion-item>\n\n <!-- Default reorder icon, start aligned items -->\n <ion-item>\n <ion-reorder slot=\"start\"></ion-reorder>\n <ion-label>\n Item 3\n </ion-label>\n </ion-item>\n\n <ion-item>\n <ion-reorder slot=\"start\"></ion-reorder>\n <ion-label>\n Item 4\n </ion-label>\n </ion-item>\n\n <!-- Custom reorder icon end items -->\n <ion-item>\n <ion-label>\n Item 5\n </ion-label>\n <ion-reorder slot=\"end\">\n <ion-icon name=\"pizza\"></ion-icon>\n </ion-reorder>\n </ion-item>\n\n <ion-item>\n <ion-label>\n Item 6\n </ion-label>\n <ion-reorder slot=\"end\">\n <ion-icon name=\"pizza\"></ion-icon>\n </ion-reorder>\n </ion-item>\n\n <!-- Items wrapped in a reorder, entire item can be dragged -->\n <ion-reorder>\n <ion-item>\n <ion-label>\n Item 7\n </ion-label>\n </ion-item>\n </ion-reorder>\n\n <ion-reorder>\n <ion-item>\n <ion-label>\n Item 8\n </ion-label>\n </ion-item>\n </ion-reorder>\n</ion-reorder-group>\n```",
|
||
"javascript": "\n```html\n<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->\n<ion-reorder-group disabled=\"false\">\n <!-- Default reorder icon, end aligned items -->\n <ion-item>\n <ion-label>\n Item 1\n </ion-label>\n <ion-reorder slot=\"end\"></ion-reorder>\n </ion-item>\n\n <ion-item>\n <ion-label>\n Item 2\n </ion-label>\n <ion-reorder slot=\"end\"></ion-reorder>\n </ion-item>\n\n <!-- Default reorder icon, start aligned items -->\n <ion-item>\n <ion-reorder slot=\"start\"></ion-reorder>\n <ion-label>\n Item 3\n </ion-label>\n </ion-item>\n\n <ion-item>\n <ion-reorder slot=\"start\"></ion-reorder>\n <ion-label>\n Item 4\n </ion-label>\n </ion-item>\n\n <!-- Custom reorder icon end items -->\n <ion-item>\n <ion-label>\n Item 5\n </ion-label>\n <ion-reorder slot=\"end\">\n <ion-icon name=\"pizza\"></ion-icon>\n </ion-reorder>\n </ion-item>\n\n <ion-item>\n <ion-label>\n Item 6\n </ion-label>\n <ion-reorder slot=\"end\">\n <ion-icon name=\"pizza\"></ion-icon>\n </ion-reorder>\n </ion-item>\n\n <!-- Items wrapped in a reorder, entire item can be dragged -->\n <ion-reorder>\n <ion-item>\n <ion-label>\n Item 7\n </ion-label>\n </ion-item>\n </ion-reorder>\n\n <ion-reorder>\n <ion-item>\n <ion-label>\n Item 8\n </ion-label>\n </ion-item>\n </ion-reorder>\n</ion-reorder-group>\n```",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonIcon, IonItem, IonLabel, IonReorder, IonReorderGroup, IonContent } from '@ionic/react';\nimport { pizza } from 'ionicons/icons';\n\nexport const ReorderExample: React.FC = () => (\n <IonContent>\n {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}\n <IonReorderGroup disabled={false}>\n {/*-- Default reorder icon, end aligned items --*/}\n <IonItem>\n <IonLabel>Item 1</IonLabel>\n <IonReorder slot=\"end\" />\n </IonItem>\n\n <IonItem>\n <IonLabel>Item 2</IonLabel>\n <IonReorder slot=\"end\" />\n </IonItem>\n\n {/*-- Default reorder icon, start aligned items --*/}\n <IonItem>\n <IonReorder slot=\"start\" />\n <IonLabel>Item 3</IonLabel>\n </IonItem>\n\n <IonItem>\n <IonReorder slot=\"start\" />\n <IonLabel>Item 4</IonLabel>\n </IonItem>\n\n {/*-- Custom reorder icon end items --*/}\n <IonItem>\n <IonLabel>Item 5</IonLabel>\n <IonReorder slot=\"end\">\n <IonIcon icon={pizza} />\n </IonReorder>\n </IonItem>\n\n <IonItem>\n <IonLabel>Item 6</IonLabel>\n <IonReorder slot=\"end\">\n <IonIcon icon={pizza} />\n </IonReorder>\n </IonItem>\n\n {/*-- Items wrapped in a reorder, entire item can be dragged --*/}\n <IonReorder>\n <IonItem>\n <IonLabel>Item 7</IonLabel>\n </IonItem>\n </IonReorder>\n\n <IonReorder>\n <IonItem>\n <IonLabel>Item 8</IonLabel>\n </IonItem>\n </IonReorder>\n </IonReorderGroup>\n </IonContent>\n);\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'reorder-example',\n styleUrl: 'reorder-example.css'\n})\nexport class ReorderExample {\n render() {\n return [\n // The reorder gesture is disabled by default, enable it to drag and drop items\n <ion-reorder-group disabled={false}>\n {/* Default reorder icon, end aligned items */}\n <ion-item>\n <ion-label>\n Item 1\n </ion-label>\n <ion-reorder slot=\"end\"></ion-reorder>\n </ion-item>\n\n <ion-item>\n <ion-label>\n Item 2\n </ion-label>\n <ion-reorder slot=\"end\"></ion-reorder>\n </ion-item>\n\n {/* Default reorder icon, start aligned items */}\n <ion-item>\n <ion-reorder slot=\"start\"></ion-reorder>\n <ion-label>\n Item 3\n </ion-label>\n </ion-item>\n\n <ion-item>\n <ion-reorder slot=\"start\"></ion-reorder>\n <ion-label>\n Item 4\n </ion-label>\n </ion-item>\n\n {/* Custom reorder icon end items */}\n <ion-item>\n <ion-label>\n Item 5\n </ion-label>\n <ion-reorder slot=\"end\">\n <ion-icon name=\"pizza\"></ion-icon>\n </ion-reorder>\n </ion-item>\n\n <ion-item>\n <ion-label>\n Item 6\n </ion-label>\n <ion-reorder slot=\"end\">\n <ion-icon name=\"pizza\"></ion-icon>\n </ion-reorder>\n </ion-item>\n\n {/* Items wrapped in a reorder, entire item can be dragged */}\n <ion-reorder>\n <ion-item>\n <ion-label>\n Item 7\n </ion-label>\n </ion-item>\n </ion-reorder>\n\n <ion-reorder>\n <ion-item>\n <ion-label>\n Item 8\n </ion-label>\n </ion-item>\n </ion-reorder>\n </ion-reorder-group>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->\n <ion-reorder-group :disabled=\"false\">\n <!-- Default reorder icon, end aligned items -->\n <ion-item>\n <ion-label>\n Item 1\n </ion-label>\n <ion-reorder slot=\"end\"></ion-reorder>\n </ion-item>\n\n <ion-item>\n <ion-label>\n Item 2\n </ion-label>\n <ion-reorder slot=\"end\"></ion-reorder>\n </ion-item>\n\n <!-- Default reorder icon, start aligned items -->\n <ion-item>\n <ion-reorder slot=\"start\"></ion-reorder>\n <ion-label>\n Item 3\n </ion-label>\n </ion-item>\n\n <ion-item>\n <ion-reorder slot=\"start\"></ion-reorder>\n <ion-label>\n Item 4\n </ion-label>\n </ion-item>\n\n <!-- Custom reorder icon end items -->\n <ion-item>\n <ion-label>\n Item 5\n </ion-label>\n <ion-reorder slot=\"end\">\n <ion-icon name=\"pizza\"></ion-icon>\n </ion-reorder>\n </ion-item>\n\n <ion-item>\n <ion-label>\n Item 6\n </ion-label>\n <ion-reorder slot=\"end\">\n <ion-icon name=\"pizza\"></ion-icon>\n </ion-reorder>\n </ion-item>\n\n <!-- Items wrapped in a reorder, entire item can be dragged -->\n <ion-reorder>\n <ion-item>\n <ion-label>\n Item 7\n </ion-label>\n </ion-item>\n </ion-reorder>\n\n <ion-reorder>\n <ion-item>\n <ion-label>\n Item 8\n </ion-label>\n </ion-item>\n </ion-reorder>\n </ion-reorder-group>\n</template>\n\n<script>\nimport { \n IonIcon, \n IonItem,\n IonLabel, \n IonReorder, \n IonReorderGroup\n} from '@ionic/vue';\nimport { pizza } from 'ionicons/icons';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: {\n IonIcon,\n IonItem, \n IonLabel, \n IonReorder, \n IonReorderGroup\n },\n setup() {\n return { pizza }\n }\n});\n</script>\n```"
|
||
},
|
||
"props": [],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [
|
||
{
|
||
"event": "click",
|
||
"capture": true,
|
||
"passive": false
|
||
}
|
||
],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [
|
||
{
|
||
"name": "icon",
|
||
"docs": "The icon of the reorder handle (uses ion-icon)."
|
||
}
|
||
],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-icon"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-reorder": [
|
||
"ion-icon"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/reorder-group/reorder-group.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-reorder-group",
|
||
"readme": "# ion-reorder-group\n\nThe reorder group is a wrapper component for items using the `ion-reorder` component. See the [Reorder documentation](../reorder/) for further information about the anchor component that is used to drag items within the `ion-reorder-group`.\n\nOnce the user drags an item and drops it in a new position, the `ionItemReorder` event is dispatched. A handler for it should be implemented that calls the `complete()` method.\n\nThe `detail` property of the `ionItemReorder` event includes all of the relevant information about the reorder operation, including the `from` and `to` indexes. In the context of reordering, an item moves `from` an index `to` a new index.\n\n",
|
||
"docs": "The reorder group is a wrapper component for items using the `ion-reorder` component. See the [Reorder documentation](../reorder/) for further information about the anchor component that is used to drag items within the `ion-reorder-group`.\n\nOnce the user drags an item and drops it in a new position, the `ionItemReorder` event is dispatched. A handler for it should be implemented that calls the `complete()` method.\n\nThe `detail` property of the `ionItemReorder` event includes all of the relevant information about the reorder operation, including the `from` and `to` indexes. In the context of reordering, an item moves `from` an index `to` a new index.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"angular": "```html\n<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n <!-- Default reorder icon, end aligned items -->\n <ion-item>\n <ion-label>\n Item 1\n </ion-label>\n <ion-reorder slot=\"end\"></ion-reorder>\n </ion-item>\n\n <ion-item>\n <ion-label>\n Item 2\n </ion-label>\n <ion-reorder slot=\"end\"></ion-reorder>\n </ion-item>\n\n <!-- Default reorder icon, start aligned items -->\n <ion-item>\n <ion-reorder slot=\"start\"></ion-reorder>\n <ion-label>\n Item 3\n </ion-label>\n </ion-item>\n\n <ion-item>\n <ion-reorder slot=\"start\"></ion-reorder>\n <ion-label>\n Item 4\n </ion-label>\n </ion-item>\n\n <!-- Custom reorder icon end items -->\n <ion-item>\n <ion-label>\n Item 5\n </ion-label>\n <ion-reorder slot=\"end\">\n <ion-icon name=\"pizza\"></ion-icon>\n </ion-reorder>\n </ion-item>\n\n <ion-item>\n <ion-label>\n Item 6\n </ion-label>\n <ion-reorder slot=\"end\">\n <ion-icon name=\"pizza\"></ion-icon>\n </ion-reorder>\n </ion-item>\n\n <!-- Items wrapped in a reorder, entire item can be dragged -->\n <ion-reorder>\n <ion-item>\n <ion-label>\n Item 7\n </ion-label>\n </ion-item>\n </ion-reorder>\n\n <ion-reorder>\n <ion-item>\n <ion-label>\n Item 8\n </ion-label>\n </ion-item>\n </ion-reorder>\n</ion-reorder-group>\n```\n\n```javascript\nimport { Component, ViewChild } from '@angular/core';\nimport { IonReorderGroup } from '@ionic/angular';\nimport { ItemReorderEventDetail } from '@ionic/core';\n\n@Component({\n selector: 'reorder-group-example',\n templateUrl: 'reorder-group-example.html',\n styleUrls: ['./reorder-group-example.css']\n})\nexport class ReorderGroupExample {\n @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;\n\n constructor() {}\n\n doReorder(ev: CustomEvent<ItemReorderEventDetail>) {\n // The `from` and `to` properties contain the index of the item\n // when the drag started and ended, respectively\n console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);\n\n // Finish the reorder and position the item in the DOM based on\n // where the gesture ended. This method can also be called directly\n // by the reorder group\n ev.detail.complete();\n }\n\n toggleReorderGroup() {\n this.reorderGroup.disabled = !this.reorderGroup.disabled;\n }\n}\n```\n\n### Updating Data\n\n```javascript\nimport { Component, ViewChild } from '@angular/core';\nimport { IonReorderGroup } from '@ionic/angular';\nimport { ItemReorderEventDetail } from '@ionic/core';\n\n@Component({\n selector: 'reorder-group-example',\n templateUrl: 'reorder-group-example.html',\n styleUrls: ['./reorder-group-example.css']\n})\nexport class ReorderGroupExample {\n items = [1, 2, 3, 4, 5];\n\n @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;\n\n constructor() {}\n\n doReorder(ev: CustomEvent<ItemReorderEventDetail>) {\n // Before complete is called with the items they will remain in the\n // order before the drag\n console.log('Before complete', this.items);\n\n // Finish the reorder and position the item in the DOM based on\n // where the gesture ended. Update the items variable to the\n // new order of items\n this.items = ev.detail.complete(this.items);\n\n // After complete is called the items will be in the new order\n console.log('After complete', this.items);\n }\n}\n```\n",
|
||
"javascript": "```html\n<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->\n<ion-reorder-group disabled=\"false\">\n <!-- Default reorder icon, end aligned items -->\n <ion-item>\n <ion-label>\n Item 1\n </ion-label>\n <ion-reorder slot=\"end\"></ion-reorder>\n </ion-item>\n\n <ion-item>\n <ion-label>\n Item 2\n </ion-label>\n <ion-reorder slot=\"end\"></ion-reorder>\n </ion-item>\n\n <!-- Default reorder icon, start aligned items -->\n <ion-item>\n <ion-reorder slot=\"start\"></ion-reorder>\n <ion-label>\n Item 3\n </ion-label>\n </ion-item>\n\n <ion-item>\n <ion-reorder slot=\"start\"></ion-reorder>\n <ion-label>\n Item 4\n </ion-label>\n </ion-item>\n\n <!-- Custom reorder icon end items -->\n <ion-item>\n <ion-label>\n Item 5\n </ion-label>\n <ion-reorder slot=\"end\">\n <ion-icon name=\"pizza\"></ion-icon>\n </ion-reorder>\n </ion-item>\n\n <ion-item>\n <ion-label>\n Item 6\n </ion-label>\n <ion-reorder slot=\"end\">\n <ion-icon name=\"pizza\"></ion-icon>\n </ion-reorder>\n </ion-item>\n\n <!-- Items wrapped in a reorder, entire item can be dragged -->\n <ion-reorder>\n <ion-item>\n <ion-label>\n Item 7\n </ion-label>\n </ion-item>\n </ion-reorder>\n\n <ion-reorder>\n <ion-item>\n <ion-label>\n Item 8\n </ion-label>\n </ion-item>\n </ion-reorder>\n</ion-reorder-group>\n```\n\n```javascript\nconst reorderGroup = document.querySelector('ion-reorder-group');\n\nreorderGroup.addEventListener('ionItemReorder', ({detail}) => {\n // The `from` and `to` properties contain the index of the item\n // when the drag started and ended, respectively\n console.log('Dragged from index', detail.from, 'to', detail.to);\n\n // Finish the reorder and position the item in the DOM based on\n // where the gesture ended. This method can also be called directly\n // by the reorder group\n detail.complete();\n});\n```\n\n### Updating Data\n\n```javascript\nconst items = [1, 2, 3, 4, 5];\nconst reorderGroup = document.querySelector('ion-reorder-group');\n\nreorderGroup.addEventListener('ionItemReorder', ({detail}) => {\n // Before complete is called with the items they will remain in the\n // order before the drag\n console.log('Before complete', items);\n\n // Finish the reorder and position the item in the DOM based on\n // where the gesture ended. Update the items variable to the\n // new order of items\n items = detail.complete(items);\n\n // After complete is called the items will be in the new order\n console.log('After complete', items);\n});\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonItem, IonLabel, IonReorder, IonReorderGroup, IonIcon, IonContent } from '@ionic/react';\nimport { ItemReorderEventDetail } from '@ionic/core';\nimport { pizza } from 'ionicons/icons';\n\nfunction doReorder(event: CustomEvent<ItemReorderEventDetail>) {\n // The `from` and `to` properties contain the index of the item\n // when the drag started and ended, respectively\n console.log('Dragged from index', event.detail.from, 'to', event.detail.to);\n\n // Finish the reorder and position the item in the DOM based on\n // where the gesture ended. This method can also be called directly\n // by the reorder group\n event.detail.complete();\n}\n\nexport const ReorderGroupExample: React.FC = () => (\n <IonContent>\n {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}\n <IonReorderGroup disabled={false} onIonItemReorder={doReorder}>\n {/*-- Default reorder icon, end aligned items --*/}\n <IonItem>\n <IonLabel>Item 1</IonLabel>\n <IonReorder slot=\"end\" />\n </IonItem>\n\n <IonItem>\n <IonLabel>Item 2</IonLabel>\n <IonReorder slot=\"end\" />\n </IonItem>\n\n {/*-- Default reorder icon, start aligned items --*/}\n <IonItem>\n <IonReorder slot=\"start\" />\n <IonLabel>Item 3</IonLabel>\n </IonItem>\n\n <IonItem>\n <IonReorder slot=\"start\" />\n <IonLabel>Item 4</IonLabel>\n </IonItem>\n\n {/*-- Custom reorder icon end items --*/}\n <IonItem>\n <IonLabel>Item 5</IonLabel>\n <IonReorder slot=\"end\">\n <IonIcon icon={pizza} />\n </IonReorder>\n </IonItem>\n\n <IonItem>\n <IonLabel>Item 6</IonLabel>\n <IonReorder slot=\"end\">\n <IonIcon icon={pizza} />\n </IonReorder>\n </IonItem>\n\n {/*-- Items wrapped in a reorder, entire item can be dragged --*/}\n <IonReorder>\n <IonItem>\n <IonLabel>Item 7</IonLabel>\n </IonItem>\n </IonReorder>\n\n <IonReorder>\n <IonItem>\n <IonLabel>Item 8</IonLabel>\n </IonItem>\n </IonReorder>\n </IonReorderGroup>\n </IonContent>\n);\n```\n\n### Updating Data\n\n```tsx\nconst items = [1, 2, 3, 4, 5];\n\nfunction doReorder(event: CustomEvent) {\n // Before complete is called with the items they will remain in the\n // order before the drag\n console.log('Before complete', this.items);\n\n // Finish the reorder and position the item in the DOM based on\n // where the gesture ended. Update the items variable to the\n // new order of items\n this.items = event.detail.complete(this.items);\n\n // After complete is called the items will be in the new order\n console.log('After complete', this.items);\n}\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'reorder-group-example',\n styleUrl: 'reorder-group-example.css'\n})\nexport class ReorderGroupExample {\n doReorder(ev: any) {\n // The `from` and `to` properties contain the index of the item\n // when the drag started and ended, respectively\n console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);\n\n // Finish the reorder and position the item in the DOM based on\n // where the gesture ended. This method can also be called directly\n // by the reorder group\n ev.detail.complete();\n }\n\n render() {\n return [\n // The reorder gesture is disabled by default, enable it to drag and drop items\n <ion-reorder-group onIonItemReorder={(ev) => this.doReorder(ev)} disabled={false}>\n {/* Default reorder icon, end aligned items */}\n <ion-item>\n <ion-label>\n Item 1\n </ion-label>\n <ion-reorder slot=\"end\"></ion-reorder>\n </ion-item>\n\n <ion-item>\n <ion-label>\n Item 2\n </ion-label>\n <ion-reorder slot=\"end\"></ion-reorder>\n </ion-item>\n\n {/* Default reorder icon, start aligned items */}\n <ion-item>\n <ion-reorder slot=\"start\"></ion-reorder>\n <ion-label>\n Item 3\n </ion-label>\n </ion-item>\n\n <ion-item>\n <ion-reorder slot=\"start\"></ion-reorder>\n <ion-label>\n Item 4\n </ion-label>\n </ion-item>\n\n {/* Custom reorder icon end items */}\n <ion-item>\n <ion-label>\n Item 5\n </ion-label>\n <ion-reorder slot=\"end\">\n <ion-icon name=\"pizza\"></ion-icon>\n </ion-reorder>\n </ion-item>\n\n <ion-item>\n <ion-label>\n Item 6\n </ion-label>\n <ion-reorder slot=\"end\">\n <ion-icon name=\"pizza\"></ion-icon>\n </ion-reorder>\n </ion-item>\n\n {/* Items wrapped in a reorder, entire item can be dragged */}\n <ion-reorder>\n <ion-item>\n <ion-label>\n Item 7\n </ion-label>\n </ion-item>\n </ion-reorder>\n\n <ion-reorder>\n <ion-item>\n <ion-label>\n Item 8\n </ion-label>\n </ion-item>\n </ion-reorder>\n </ion-reorder-group>\n ]\n }\n}\n```\n\n### Updating Data\n\n```tsx\nimport { Component, State, h } from '@stencil/core';\n\n@Component({\n tag: 'reorder-group-example',\n styleUrl: 'reorder-group-example.css'\n})\nexport class ReorderGroupExample {\n @State() items = [1, 2, 3, 4, 5];\n\n doReorder(ev: any) {\n // Before complete is called with the items they will remain in the\n // order before the drag\n console.log('Before complete', this.items);\n\n // Finish the reorder and position the item in the DOM based on\n // where the gesture ended. Update the items variable to the\n // new order of items\n this.items = ev.detail.complete(this.items);\n\n // After complete is called the items will be in the new order\n console.log('After complete', this.items);\n }\n\n render() {\n return [\n // The reorder gesture is disabled by default, enable it to drag and drop items\n <ion-reorder-group onIonItemReorder={(ev) => this.doReorder(ev)} disabled={false}>\n\n {this.items.map(item =>\n <ion-item>\n <ion-label>\n Item { item }\n </ion-label>\n <ion-reorder slot=\"end\"></ion-reorder>\n </ion-item>\n )}\n\n </ion-reorder-group>\n ]\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->\n <ion-reorder-group @ionItemReorder=\"doReorder($event)\" disabled=\"false\">\n <!-- Default reorder icon, end aligned items -->\n <ion-item>\n <ion-label>\n Item 1\n </ion-label>\n <ion-reorder slot=\"end\"></ion-reorder>\n </ion-item>\n\n <ion-item>\n <ion-label>\n Item 2\n </ion-label>\n <ion-reorder slot=\"end\"></ion-reorder>\n </ion-item>\n\n <!-- Default reorder icon, start aligned items -->\n <ion-item>\n <ion-reorder slot=\"start\"></ion-reorder>\n <ion-label>\n Item 3\n </ion-label>\n </ion-item>\n\n <ion-item>\n <ion-reorder slot=\"start\"></ion-reorder>\n <ion-label>\n Item 4\n </ion-label>\n </ion-item>\n\n <!-- Custom reorder icon end items -->\n <ion-item>\n <ion-label>\n Item 5\n </ion-label>\n <ion-reorder slot=\"end\">\n <ion-icon name=\"pizza\"></ion-icon>\n </ion-reorder>\n </ion-item>\n\n <ion-item>\n <ion-label>\n Item 6\n </ion-label>\n <ion-reorder slot=\"end\">\n <ion-icon name=\"pizza\"></ion-icon>\n </ion-reorder>\n </ion-item>\n\n <!-- Items wrapped in a reorder, entire item can be dragged -->\n <ion-reorder>\n <ion-item>\n <ion-label>\n Item 7\n </ion-label>\n </ion-item>\n </ion-reorder>\n\n <ion-reorder>\n <ion-item>\n <ion-label>\n Item 8\n </ion-label>\n </ion-item>\n </ion-reorder>\n </ion-reorder-group>\n</template>\n\n<script>\nimport { \n IonIcon, \n IonItem, \n IonLabel, \n IonReorder, \n IonReorderGroup\n} from '@ionic/vue';\nimport { pizza } from 'ionicons/icons';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { \n IonIcon, \n IonItem, \n IonLabel, \n IonReorder, \n IonReorderGroup\n },\n setup() {\n const doReorder = (event: CustomEvent) => {\n // The `from` and `to` properties contain the index of the item\n // when the drag started and ended, respectively\n console.log('Dragged from index', event.detail.from, 'to', event.detail.to);\n\n // Finish the reorder and position the item in the DOM based on\n // where the gesture ended. This method can also be called directly\n // by the reorder group\n event.detail.complete();\n }\n return { doReorder, pizza }\n }\n});\n</script>\n```\n\n### Updating Data\n\n```html\n<script>\n...\nimport { defineComponent, ref } from 'vue';\n\nexport default defineComponent({\n ...\n setup() {\n const items = ref([1, 2, 3, 4, 5]);\n\n const doReorder = (event: CustomEvent) => {\n // Before complete is called with the items they will remain in the\n // order before the drag\n console.log('Before complete', items.value);\n\n // Finish the reorder and position the item in the DOM based on\n // where the gesture ended. Update the items variable to the\n // new order of items\n items.value = event.detail.complete(items.value);\n\n // After complete is called the items will be in the new order\n console.log('After complete', items.value);\n }\n return { doReorder, items, ... }\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the reorder will be hidden.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "complete",
|
||
"returns": {
|
||
"type": "Promise<any>",
|
||
"docs": ""
|
||
},
|
||
"signature": "complete(listOrReorder?: boolean | any[] | undefined) => Promise<any>",
|
||
"parameters": [],
|
||
"docs": "Completes the reorder operation. Must be called by the `ionItemReorder` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "listOrReorder A list of items to be sorted and returned in the new order or a\nboolean of whether or not the reorder should reposition the item."
|
||
}
|
||
]
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionItemReorder",
|
||
"detail": "ItemReorderEventDetail",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Event that needs to be listened to in order to complete the reorder action.\nOnce the event has been emitted, the `complete()` method then needs\nto be called in order to finalize the reorder action.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/ripple-effect/ripple-effect.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-ripple-effect",
|
||
"readme": "# ion-ripple-effect\n\nThe 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.\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"angular": "```html\n<ion-app>\n <ion-content>\n <div class=\"ion-activatable ripple-parent\">\n A plain div with a bounded ripple effect\n <ion-ripple-effect></ion-ripple-effect>\n </div>\n\n <button class=\"ion-activatable ripple-parent\">\n A button with a bounded ripple effect\n <ion-ripple-effect></ion-ripple-effect>\n </button>\n\n <div class=\"ion-activatable ripple-parent\">\n A plain div with an unbounded ripple effect\n <ion-ripple-effect type=\"unbounded\"></ion-ripple-effect>\n </div>\n\n <button class=\"ion-activatable ripple-parent\">\n A button with an unbounded ripple effect\n <ion-ripple-effect type=\"unbounded\"></ion-ripple-effect>\n </button>\n </ion-content>\n</ion-app>\n```\n\n```css\n.ripple-parent {\n position: relative;\n overflow: hidden;\n}\n```",
|
||
"javascript": "```html\n<ion-app>\n <ion-content>\n <div class=\"ion-activatable ripple-parent\">\n A plain div with a bounded ripple effect\n <ion-ripple-effect></ion-ripple-effect>\n </div>\n\n <button class=\"ion-activatable ripple-parent\">\n A button with a bounded ripple effect\n <ion-ripple-effect></ion-ripple-effect>\n </button>\n\n <div class=\"ion-activatable ripple-parent\">\n A plain div with an unbounded ripple effect\n <ion-ripple-effect type=\"unbounded\"></ion-ripple-effect>\n </div>\n\n <button class=\"ion-activatable ripple-parent\">\n A button with an unbounded ripple effect\n <ion-ripple-effect type=\"unbounded\"></ion-ripple-effect>\n </button>\n </ion-content>\n</ion-app>\n```\n\n```css\n.ripple-parent {\n position: relative;\n overflow: hidden;\n}\n```",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonApp, IonContent, IonRippleEffect } from '@ionic/react';\nimport './RippleEffectExample.css';\n\nexport const RippleExample: React.FC = () => (\n <IonApp>\n <IonContent>\n <div className=\"ion-activatable ripple-parent\">\n A plain div with a bounded ripple effect\n <IonRippleEffect></IonRippleEffect>\n </div>\n\n <button className=\"ion-activatable ripple-parent\">\n A button with a bounded ripple effect\n <IonRippleEffect></IonRippleEffect>\n </button>\n\n <div className=\"ion-activatable ripple-parent\">\n A plain div with an unbounded ripple effect\n <IonRippleEffect type=\"unbounded\"></IonRippleEffect>\n </div>\n\n <button className=\"ion-activatable ripple-parent\">\n A button with an unbounded ripple effect\n <IonRippleEffect type=\"unbounded\"></IonRippleEffect>\n </button>\n </IonContent>\n </IonApp>\n);\n```\n\n```css\n.ripple-parent {\n position: relative;\n overflow: hidden;\n}\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'ripple-effect-example',\n styleUrl: 'ripple-effect-example.css'\n})\nexport class RippleEffectExample {\n render() {\n return [\n <ion-app>\n <ion-content>\n <div class=\"ion-activatable ripple-parent\">\n A plain div with a bounded ripple effect\n <ion-ripple-effect></ion-ripple-effect>\n </div>\n\n <button class=\"ion-activatable ripple-parent\">\n A button with a bounded ripple effect\n <ion-ripple-effect></ion-ripple-effect>\n </button>\n\n <div class=\"ion-activatable ripple-parent\">\n A plain div with an unbounded ripple effect\n <ion-ripple-effect type=\"unbounded\"></ion-ripple-effect>\n </div>\n\n <button class=\"ion-activatable ripple-parent\">\n A button with an unbounded ripple effect\n <ion-ripple-effect type=\"unbounded\"></ion-ripple-effect>\n </button>\n </ion-content>\n </ion-app>\n ];\n }\n}\n```\n\n```css\n.ripple-parent {\n position: relative;\n overflow: hidden;\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-app>\n <ion-content>\n <div class=\"ion-activatable ripple-parent\">\n A plain div with a bounded ripple effect\n <ion-ripple-effect></ion-ripple-effect>\n </div>\n\n <button class=\"ion-activatable ripple-parent\">\n A button with a bounded ripple effect\n <ion-ripple-effect></ion-ripple-effect>\n </button>\n\n <div class=\"ion-activatable ripple-parent\">\n A plain div with an unbounded ripple effect\n <ion-ripple-effect type=\"unbounded\"></ion-ripple-effect>\n </div>\n\n <button class=\"ion-activatable ripple-parent\">\n A button with an unbounded ripple effect\n <ion-ripple-effect type=\"unbounded\"></ion-ripple-effect>\n </button>\n </ion-content>\n </ion-app>\n</template>\n\n<style>\n .ripple-parent {\n position: relative;\n overflow: hidden;\n }\n</style>\n\n<script>\nimport { IonApp, IonContent, IonRippleEffect } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonApp, IonContent, IonRippleEffect }\n});\n</script>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "type",
|
||
"type": "\"bounded\" | \"unbounded\"",
|
||
"mutable": false,
|
||
"attr": "type",
|
||
"reflectToAttr": false,
|
||
"docs": "Sets the type of ripple-effect:\n\n- `bounded`: the ripple effect expands from the user's click position\n- `unbounded`: the ripple effect expands from the center of the button and overflows the container.\n\nNOTE: Surfaces for bounded ripples should have the overflow property set to hidden,\nwhile surfaces for unbounded ripples should have it set to visible.",
|
||
"docsTags": [],
|
||
"default": "'bounded'",
|
||
"values": [
|
||
{
|
||
"value": "bounded",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "unbounded",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "addRipple",
|
||
"returns": {
|
||
"type": "Promise<() => void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "addRipple(x: number, y: number) => Promise<() => void>",
|
||
"parameters": [],
|
||
"docs": "Adds the ripple effect to the parent element.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "x The horizontal coordinate of where the ripple should start."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "y The vertical coordinate of where the ripple should start."
|
||
}
|
||
]
|
||
}
|
||
],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [
|
||
"ion-action-sheet",
|
||
"ion-alert",
|
||
"ion-back-button",
|
||
"ion-button",
|
||
"ion-card",
|
||
"ion-chip",
|
||
"ion-fab-button",
|
||
"ion-item",
|
||
"ion-item-option",
|
||
"ion-menu-button",
|
||
"ion-segment-button",
|
||
"ion-tab-button",
|
||
"ion-toast"
|
||
],
|
||
"dependencies": [],
|
||
"dependencyGraph": {
|
||
"ion-action-sheet": [
|
||
"ion-ripple-effect"
|
||
],
|
||
"ion-alert": [
|
||
"ion-ripple-effect"
|
||
],
|
||
"ion-back-button": [
|
||
"ion-ripple-effect"
|
||
],
|
||
"ion-button": [
|
||
"ion-ripple-effect"
|
||
],
|
||
"ion-card": [
|
||
"ion-ripple-effect"
|
||
],
|
||
"ion-chip": [
|
||
"ion-ripple-effect"
|
||
],
|
||
"ion-fab-button": [
|
||
"ion-ripple-effect"
|
||
],
|
||
"ion-item": [
|
||
"ion-ripple-effect"
|
||
],
|
||
"ion-item-option": [
|
||
"ion-ripple-effect"
|
||
],
|
||
"ion-menu-button": [
|
||
"ion-ripple-effect"
|
||
],
|
||
"ion-segment-button": [
|
||
"ion-ripple-effect"
|
||
],
|
||
"ion-tab-button": [
|
||
"ion-ripple-effect"
|
||
],
|
||
"ion-toast": [
|
||
"ion-ripple-effect"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/route/route.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-route",
|
||
"readme": "# ion-route\n\nThe 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.\n\n## Navigation Hooks\n\nNavigation hooks can be used to perform tasks or act as navigation guards. Hooks are used by providing functions to the `beforeEnter` and `beforeLeave` properties on each `ion-route`. Returning `true` allows navigation to proceed, while returning `false` causes it to be cancelled. Returning an object of type `NavigationHookOptions` allows you to redirect navigation to another page.\n\n## Interfaces\n\n```typescript\ninterface NavigationHookOptions {\n /**\n * A valid path to redirect navigation to.\n */\n redirect: string;\n}\n```\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"javascript": "```html\n<ion-router>\n <ion-route url=\"/home\" component=\"page-home\"></ion-route>\n <ion-route url=\"/dashboard\" component=\"page-dashboard\"></ion-route>\n <ion-route url=\"/new-message\" component=\"page-new-message\"></ion-route>\n <ion-route url=\"/login\" component=\"page-login\"></ion-route>\n</ion-router>\n```\n\n```javascript\nconst dashboardPage = document.querySelector('ion-route[url=\"/dashboard\"]');\ndashboardPage.beforeEnter = isLoggedInGuard;\n\nconst newMessagePage = document.querySelector('ion-route[url=\"/dashboard\"]');\nnewMessagePage.beforeLeave = hasUnsavedDataGuard;\n\nconst isLoggedInGuard = async () => {\n const isLoggedIn = await UserData.isLoggedIn(); // Replace this with actual login validation\n \n if (isLoggedIn) {\n return true;\n } else {\n return { redirect: '/login' }; // If a user is not logged in, they will be redirected to the /login page\n }\n}\n\nconst hasUnsavedDataGuard = async () => {\n const hasUnsavedData = await checkData(); // Replace this with actual validation\n \n if (hasUnsavedData) {\n return await confirmDiscardChanges();\n } else {\n return true;\n }\n}\n\nconst confirmDiscardChanges = async () => {\n const alert = document.createElement('ion-alert');\n alert.header = 'Discard Unsaved Changes?';\n alert.message = 'Are you sure you want to leave? Any unsaved changed will be lost.';\n alert.buttons = [\n {\n text: 'Cancel',\n role: 'Cancel',\n },\n {\n text: 'Discard',\n role: 'destructive',\n }\n ];\n \n document.body.appendChild(alert);\n \n await alert.present();\n \n const { role } = await alert.onDidDismiss();\n \n return (role === 'Cancel') ? false : true;\n}\n```\n",
|
||
"stencil": "```typescript\nimport { Component, h } from '@stencil/core';\nimport { alertController } from '@ionic/core';\n\n@Component({\n tag: 'router-example',\n styleUrl: 'router-example.css'\n})\nexport class RouterExample {\n render() {\n return (\n <ion-router>\n <ion-route url=\"/home\" component=\"page-home\"></ion-route>\n <ion-route url=\"/dashboard\" component=\"page-dashboard\" beforeEnter={isLoggedInGuard}></ion-route>\n <ion-route url=\"/new-message\" component=\"page-new-message\" beforeLeave={hasUnsavedDataGuard}></ion-route>\n <ion-route url=\"/login\" component=\"page-login\"></ion-route>\n </ion-router>\n )\n }\n}\n\nconst isLoggedInGuard = async () => {\n const isLoggedIn = await UserData.isLoggedIn(); // Replace this with actual login validation\n \n if (isLoggedIn) {\n return true;\n } else {\n return { redirect: '/login' }; // If a user is not logged in, they will be redirected to the /login page\n }\n}\n\nconst hasUnsavedDataGuard = async () => {\n const hasUnsavedData = await checkData(); // Replace this with actual validation\n \n if (hasUnsavedData) {\n return await confirmDiscardChanges();\n } else {\n return true;\n }\n}\n\nconst confirmDiscardChanges = async () => {\n const alert = await alertController.create({\n header: 'Discard Unsaved Changes?',\n message: 'Are you sure you want to leave? Any unsaved changed will be lost.',\n buttons: [\n {\n text: 'Cancel',\n role: 'Cancel',\n },\n {\n text: 'Discard',\n role: 'destructive',\n }\n ]\n });\n \n await alert.present();\n \n const { role } = await alert.onDidDismiss();\n \n return (role === 'Cancel') ? false : true;\n}\n```\n",
|
||
"vue": "```html\n<template>\n <ion-router>\n <ion-route url=\"/home\" component=\"page-home\"></ion-route>\n <ion-route url=\"/dashboard\" component=\"page-dashboard\" :beforeEnter=\"isLoggedInGuard\"></ion-route>\n <ion-route url=\"/new-message\" component=\"page-new-message\" :beforeLeave=\"hasUnsavedDataGuard\"></ion-route>\n <ion-route url=\"/login\" component=\"page-login\"></ion-route>\n </ion-router>\n</template>\n\n<script>\n import { alertController } from '@ionic/vue';\n\n const isLoggedInGuard = async () => {\n const isLoggedIn = await UserData.isLoggedIn(); // Replace this with actual login validation\n \n if (isLoggedIn) {\n return true;\n } else {\n return { redirect: '/login' }; // If a user is not logged in, they will be redirected to the /login page\n }\n }\n \n const hasUnsavedDataGuard = async () => {\n const hasUnsavedData = await checkData(); // Replace this with actual validation\n \n if (hasUnsavedData) {\n return await confirmDiscardChanges();\n } else {\n return true;\n }\n }\n \n const confirmDiscardChanges = async () => {\n const alert = await alertController.create({\n header: 'Discard Unsaved Changes?',\n message: 'Are you sure you want to leave? Any unsaved changed will be lost.',\n buttons: [\n {\n text: 'Cancel',\n role: 'Cancel',\n },\n {\n text: 'Discard',\n role: 'destructive',\n }\n ]\n });\n \n await alert.present();\n \n const { role } = await alert.onDidDismiss();\n \n return (role === 'Cancel') ? false : true;\n }\n</script>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "beforeEnter",
|
||
"type": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "A navigation hook that is fired when the route tries to enter.\nReturning `true` allows the navigation to proceed, while returning\n`false` causes it to be cancelled. Returning a `NavigationHookOptions`\nobject causes the router to redirect to the path specified.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "(() => NavigationHookResult"
|
||
},
|
||
{
|
||
"type": "Promise<NavigationHookResult>)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "beforeLeave",
|
||
"type": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "A navigation hook that is fired when the route tries to leave.\nReturning `true` allows the navigation to proceed, while returning\n`false` causes it to be cancelled. Returning a `NavigationHookOptions`\nobject causes the router to redirect to the path specified.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "(() => NavigationHookResult"
|
||
},
|
||
{
|
||
"type": "Promise<NavigationHookResult>)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "component",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "component",
|
||
"reflectToAttr": false,
|
||
"docs": "Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`)\nwhen the route matches.\n\nThe value of this property is not always the tagname of the component to load,\nin `ion-tabs` it actually refers to the name of the `ion-tab` to select.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": true
|
||
},
|
||
{
|
||
"name": "componentProps",
|
||
"type": "undefined | { [key: string]: any; }",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed\nto the defined component when rendered.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "undefined"
|
||
},
|
||
{
|
||
"type": "{ [key: string]: any; }"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "url",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "url",
|
||
"reflectToAttr": false,
|
||
"docs": "Relative path that needs to match in order for this route to apply.\n\nAccepts paths similar to expressjs so that you can define parameters\nin the url /foo/:bar where bar would be available in incoming props.",
|
||
"docsTags": [],
|
||
"default": "''",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [
|
||
{
|
||
"event": "ionRouteDataChanged",
|
||
"detail": "any",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Used internally by `ion-router` to know when this route did change.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/route-redirect/route-redirect.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-route-redirect",
|
||
"readme": "# ion-route-redirect\n\nA 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.\n\n\n## Multiple Route Redirects\n\nAn arbitrary number of redirect routes can be defined inside an `ion-router`, but only one can match.\n\nA route redirect will never call another redirect after its own redirect, since this could lead to infinite loops.\n\nTake the following two redirects:\n\n```html\n<ion-router>\n <ion-route-redirect from=\"/admin\" to=\"/login\"></ion-route-redirect>\n <ion-route-redirect from=\"/login\" to=\"/admin\"></ion-route-redirect>\n</ion-router>\n```\n\nIf the user navigates to `/admin` the router will redirect to `/login` and stop there. It will never evaluate more than one redirect.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"javascript": "```html\n<!-- Redirects when the user navigates to `/admin` but\nwill NOT redirect if the user navigates to `/admin/posts` -->\n<ion-route-redirect from=\"/admin\" to=\"/login\"></ion-route-redirect>\n\n<!-- By adding the wilcard character (*), the redirect will match\nany subpath of admin -->\n<ion-route-redirect from=\"/admin/*\" to=\"/login\"></ion-route-redirect>\n```\n\n### Route Redirects as Guards\n\nRedirection routes can work as guards to prevent users from navigating to certain areas of an application based on a given condition, such as if the user is authenticated or not.\n\nA route redirect can be added and removed dynamically to redirect (or guard) some routes from being accessed. In the following example, all urls `*` will be redirected to the `/login` url if `isLoggedIn` is `false`.\n\n```tsx\nconst isLoggedIn = false;\n\nconst router = document.querySelector('ion-router');\nconst routeRedirect = document.createElement('ion-route-redirect');\nrouteRedirect.setAttribute('from', '*');\nrouteRedirect.setAttribute('to', '/login');\n\nif (!isLoggedIn) {\n router.appendChild(routeRedirect);\n}\n```\n\nAlternatively, the value of `to` can be modified based on a condition. In the following example, the route redirect will check if the user is logged in and redirect to the `/login` url if not.\n\n```html\n<ion-route-redirect id=\"tutorialRedirect\" from=\"*\"></ion-route-redirect>\n```\n\n```javascript\nconst isLoggedIn = false;\nconst routeRedirect = document.querySelector('#tutorialRedirect');\n\nrouteRedirect.setAttribute('to', isLoggedIn ? undefined : '/login');\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "from",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "from",
|
||
"reflectToAttr": false,
|
||
"docs": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"from\" URL.\nIt needs to be an exact match of the navigated URL in order to apply.\n\nThe path specified in this value is always an absolute path, even if the initial `/` slash\nis not specified.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": true
|
||
},
|
||
{
|
||
"name": "to",
|
||
"type": "null | string | undefined",
|
||
"mutable": false,
|
||
"attr": "to",
|
||
"reflectToAttr": false,
|
||
"docs": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"to\" URL.\nWhen the defined `ion-route-redirect` rule matches, the router will redirect to the path\nspecified in this property.\n\nThe value of this property is always an absolute path inside the scope of routes defined in\n`ion-router` it can't be used with another router or to perform a redirection to a different domain.\n\nNote that this is a virtual redirect, it will not cause a real browser refresh, again, it's\na redirect inside the context of ion-router.\n\nWhen this property is not specified or his value is `undefined` the whole redirect route is noop,\neven if the \"from\" value matches.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": true
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [
|
||
{
|
||
"event": "ionRouteRedirectChanged",
|
||
"detail": "any",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Internal event that fires when any value of this rule is added/removed from the DOM,\nor any of his public properties changes.\n\n`ion-router` captures this event in order to update his internal registry of router rules.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/router/router.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-router",
|
||
"readme": "# ion-router\n\nThe 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.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"javascript": "```html\n<ion-router>\n <ion-route component=\"page-tabs\">\n <ion-route url=\"/schedule\" component=\"tab-schedule\">\n <ion-route component=\"page-schedule\"></ion-route>\n <ion-route url=\"/session/:sessionId\" component=\"page-session\"></ion-route>\n </ion-route>\n\n <ion-route url=\"/speakers\" component=\"tab-speaker\">\n <ion-route component=\"page-speaker-list\"></ion-route>\n <ion-route url=\"/session/:sessionId\" component=\"page-session\"></ion-route>\n <ion-route url=\"/:speakerId\" component=\"page-speaker-detail\"></ion-route>\n </ion-route>\n\n <ion-route url=\"/map\" component=\"page-map\"></ion-route>\n <ion-route url=\"/about\" component=\"page-about\"></ion-route>\n </ion-route>\n\n <ion-route url=\"/tutorial\" component=\"page-tutorial\"></ion-route>\n <ion-route url=\"/login\" component=\"page-login\"></ion-route>\n <ion-route url=\"/account\" component=\"page-account\"></ion-route>\n <ion-route url=\"/signup\" component=\"page-signup\"></ion-route>\n <ion-route url=\"/support\" component=\"page-support\"></ion-route>\n</ion-router>\n\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "root",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "root",
|
||
"reflectToAttr": false,
|
||
"docs": "The root path to use when matching URLs. By default, this is set to \"/\", but you can specify\nan alternate prefix for all URL paths.",
|
||
"docsTags": [],
|
||
"default": "'/'",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "useHash",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "use-hash",
|
||
"reflectToAttr": false,
|
||
"docs": "The router can work in two \"modes\":\n- With hash: `/index.html#/path/to/page`\n- Without hash: `/path/to/page`\n\nUsing one or another might depend in the requirements of your app and/or where it's deployed.\n\nUsually \"hash-less\" navigation works better for SEO and it's more user friendly too, but it might\nrequires additional server-side configuration in order to properly work.\n\nOn the other side hash-navigation is much easier to deploy, it even works over the file protocol.\n\nBy default, this property is `true`, change to `false` to allow hash-less URLs.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "back",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "back() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Go back to previous page in the window.history.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "push",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "push(url: string, direction?: RouterDirection, animation?: AnimationBuilder | undefined) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Navigate to the specified URL.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "url The url to navigate to."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "direction The direction of the animation. Defaults to `\"forward\"`."
|
||
}
|
||
]
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionRouteDidChange",
|
||
"detail": "RouterEventDetail",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the route had changed",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionRouteWillChange",
|
||
"detail": "RouterEventDetail",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Event emitted when the route is about to change",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [
|
||
{
|
||
"event": "popstate",
|
||
"target": "window",
|
||
"capture": false,
|
||
"passive": false
|
||
},
|
||
{
|
||
"event": "ionBackButton",
|
||
"target": "document",
|
||
"capture": false,
|
||
"passive": false
|
||
}
|
||
],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/router-link/router-link.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-router-link",
|
||
"readme": "# ion-router-link\n\nThe 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.\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "href",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "href",
|
||
"reflectToAttr": false,
|
||
"docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "rel",
|
||
"reflectToAttr": false,
|
||
"docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "routerAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "routerDirection",
|
||
"type": "\"back\" | \"forward\" | \"root\"",
|
||
"mutable": false,
|
||
"attr": "router-direction",
|
||
"reflectToAttr": false,
|
||
"docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
|
||
"docsTags": [],
|
||
"default": "'forward'",
|
||
"values": [
|
||
{
|
||
"value": "back",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "forward",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "root",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "target",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "target",
|
||
"reflectToAttr": false,
|
||
"docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the router link"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Text color of the router link"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/router-outlet/route-outlet.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-router-outlet",
|
||
"readme": "# ion-router-outlet\n\nRouter 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.\n\n\n## Life Cycle Hooks\n\nRoutes rendered in a Router Outlet have access to specific Ionic events that are wired up to animations\n\n\n| Event Name | Trigger |\n|--------------------|--------------------------------------------------------------------|\n| `ionViewWillEnter` | Fired when the component routing to is about to animate into view. |\n| `ionViewDidEnter` | Fired when the component routing to has finished animating. |\n| `ionViewWillLeave` | Fired when the component routing from is about to animate. |\n| `ionViewDidLeave` | Fired when the component routing to has finished animating. |\n\n\nThese event tie into Ionic's animation system and can be used to coordinate parts of your app when a Components is done with its animation. These events are not a replacement for your framework's own event system, but an addition.\n\nFor handling Router Guards, the older `ionViewCanEnter` and `ionViewCanLeave` have been replaced with their framework specific equivalent. For Angular, there are [Router Guards](https://angular.io/guide/router#milestone-5-route-guards).\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {},
|
||
"props": [
|
||
{
|
||
"name": "animated",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "animated",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the router-outlet should animate the transition of components.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "animation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "By default `ion-nav` animates transition between pages based in the mode (ios or material design).\nHowever, this property allows to create custom transition using `AnimateBuilder` functions.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": true,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"default": "getIonMode(this)",
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/row/row.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-row",
|
||
"readme": "# ion-row\n\nRows 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.\n\n\n## Row Alignment\n\nBy default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](/docs/layout/css-utilities#flex-container-properties) that can be applied to a row to customize this behavior.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {},
|
||
"props": [],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/searchbar/searchbar.tsx",
|
||
"encapsulation": "scoped",
|
||
"tag": "ion-searchbar",
|
||
"readme": "# ion-searchbar\n\nSearchbars 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.\n\n## Keyboard Display\n\n### Android\n\nBy default, tapping the input will cause the keyboard to appear with a magnifying glass icon on the submit button. You can optionally set the `inputmode` property to `\"search\"`, which will change the icon from a magnifying glass to a carriage return.\n\n### iOS\n\nBy default, tapping the input will cause the keyboard to appear with the text \"return\" on a gray submit button. You can optionally set the `inputmode` property to `\"search\"`, which will change the text from \"return\" to \"go\", and change the button color from gray to blue. Alternatively, you can wrap the `ion-searchbar` in a `form` element with an `action` property. This will cause the keyboard to appear with a blue submit button that says \"search\".\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<!-- Default Searchbar -->\n<ion-searchbar></ion-searchbar>\n\n<!-- Searchbar with cancel button always shown -->\n<ion-searchbar showCancelButton=\"always\"></ion-searchbar>\n\n<!-- Searchbar with cancel button never shown -->\n<ion-searchbar showCancelButton=\"never\"></ion-searchbar>\n\n<!-- Searchbar with cancel button shown on focus -->\n<ion-searchbar showCancelButton=\"focus\"></ion-searchbar>\n\n<!-- Searchbar with danger color -->\n<ion-searchbar color=\"danger\"></ion-searchbar>\n\n<!-- Searchbar with value -->\n<ion-searchbar value=\"Ionic\"></ion-searchbar>\n\n<!-- Searchbar with telephone type -->\n<ion-searchbar type=\"tel\"></ion-searchbar>\n\n<!-- Searchbar with numeric inputmode -->\n<ion-searchbar inputmode=\"numeric\"></ion-searchbar>\n\n<!-- Searchbar disabled -->\n<ion-searchbar disabled=\"true\"></ion-searchbar>\n\n<!-- Searchbar with a cancel button and custom cancel button text -->\n<ion-searchbar showCancelButton=\"focus\" cancelButtonText=\"Custom Cancel\"></ion-searchbar>\n\n<!-- Searchbar with a custom debounce -->\n<ion-searchbar debounce=\"500\"></ion-searchbar>\n\n<!-- Animated Searchbar -->\n<ion-searchbar animated></ion-searchbar>\n\n<!-- Searchbar with a placeholder -->\n<ion-searchbar placeholder=\"Filter Schedules\"></ion-searchbar>\n\n<!-- Searchbar in a Toolbar -->\n<ion-toolbar>\n <ion-searchbar></ion-searchbar>\n</ion-toolbar>\n```",
|
||
"javascript": "```html\n<!-- Default Searchbar -->\n<ion-searchbar></ion-searchbar>\n\n<!-- Searchbar with cancel button always shown -->\n<ion-searchbar show-cancel-button=\"always\"></ion-searchbar>\n\n<!-- Searchbar with cancel button never shown -->\n<ion-searchbar show-cancel-button=\"never\"></ion-searchbar>\n\n<!-- Searchbar with cancel button shown on focus -->\n<ion-searchbar show-cancel-button=\"focus\"></ion-searchbar>\n\n<!-- Searchbar with danger color -->\n<ion-searchbar color=\"danger\"></ion-searchbar>\n\n<!-- Searchbar with value -->\n<ion-searchbar value=\"Ionic\"></ion-searchbar>\n\n<!-- Searchbar with telephone type -->\n<ion-searchbar type=\"tel\"></ion-searchbar>\n\n<!-- Searchbar with numeric inputmode -->\n<ion-searchbar inputmode=\"numeric\"></ion-searchbar>\n\n<!-- Searchbar disabled -->\n<ion-searchbar disabled=\"true\"></ion-searchbar>\n\n<!-- Searchbar with a cancel button and custom cancel button text -->\n<ion-searchbar show-cancel-button=\"focus\" cancel-button-text=\"Custom Cancel\"></ion-searchbar>\n\n<!-- Searchbar with a custom debounce -->\n<ion-searchbar debounce=\"500\"></ion-searchbar>\n\n<!-- Animated Searchbar -->\n<ion-searchbar animated></ion-searchbar>\n\n<!-- Searchbar with a placeholder -->\n<ion-searchbar placeholder=\"Filter Schedules\"></ion-searchbar>\n\n<!-- Searchbar in a Toolbar -->\n<ion-toolbar>\n <ion-searchbar></ion-searchbar>\n</ion-toolbar>\n```",
|
||
"react": "```tsx\nimport React, { useState } from 'react';\nimport { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSearchbar, IonFooter } from '@ionic/react';\n\nexport const SearchBarExamples: React.FC = () => {\n const [searchText, setSearchText] = useState('');\n return (\n <IonPage>\n <IonHeader>\n <IonToolbar>\n <IonTitle>IonSearchBar Examples</IonTitle>\n </IonToolbar>\n </IonHeader>\n <IonContent>\n <p>Default Searchbar</p>\n <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)}></IonSearchbar>\n\n <p>Searchbar with cancel button always shown</p>\n <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} showCancelButton=\"always\"></IonSearchbar>\n\n <p>Searchbar with cancel button never shown</p>\n <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} showCancelButton=\"never\"></IonSearchbar>\n\n <p>Searchbar with cancel button shown on focus</p>\n <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} showCancelButton=\"focus\"></IonSearchbar>\n\n <p>Searchbar with danger color</p>\n <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} color=\"danger\"></IonSearchbar>\n\n <p>Searchbar with telephone type</p>\n <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} type=\"tel\"></IonSearchbar>\n\n <p>Searchbar with numeric inputmode</p>\n <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} inputmode=\"numeric\"></IonSearchbar>\n\n <p>Searchbar disabled </p>\n <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} disabled={true}></IonSearchbar>\n\n <p>Searchbar with a cancel button and custom cancel button text</p>\n <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} showCancelButton=\"focus\" cancelButtonText=\"Custom Cancel\"></IonSearchbar>\n\n <p>Searchbar with a custom debounce - Note: debounce only works on onIonChange event</p>\n <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} debounce={1000}></IonSearchbar>\n\n <p>Animated Searchbar</p>\n <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} animated></IonSearchbar>\n\n <p>Searchbar with a placeholder</p>\n <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} placeholder=\"Filter Schedules\"></IonSearchbar>\n\n <p>Searchbar in a Toolbar</p>\n <IonToolbar>\n <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)}></IonSearchbar>\n </IonToolbar>\n\n </IonContent>\n <IonFooter>\n <IonToolbar>\n Search Text: {searchText ?? '(none)'}\n </IonToolbar>\n </IonFooter>\n </IonPage>\n );\n};\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'searchbar-example',\n styleUrl: 'searchbar-example.css'\n})\nexport class SearchbarExample {\n render() {\n return [\n // Default Searchbar\n <ion-searchbar></ion-searchbar>,\n\n // Searchbar with cancel button always shown\n <ion-searchbar showCancelButton=\"always\"></ion-searchbar>,\n\n // Searchbar with cancel button never shown\n <ion-searchbar showCancelButton=\"never\"></ion-searchbar>,\n\n // Searchbar with cancel button shown on focus\n <ion-searchbar showCancelButton=\"focus\"></ion-searchbar>,\n\n // Searchbar with danger color\n <ion-searchbar color=\"danger\"></ion-searchbar>,\n\n // Searchbar with value\n <ion-searchbar value=\"Ionic\"></ion-searchbar>,\n\n // Searchbar with telephone type\n <ion-searchbar type=\"tel\"></ion-searchbar>,\n\n // Searchbar with numeric inputmode\n <ion-searchbar inputmode=\"numeric\"></ion-searchbar>,\n\n // Searchbar disabled\n <ion-searchbar disabled={true}></ion-searchbar>,\n\n // Searchbar with a cancel button and custom cancel button text\n <ion-searchbar showCancelButton=\"focus\" cancelButtonText=\"Custom Cancel\"></ion-searchbar>,\n\n // Searchbar with a custom debounce\n <ion-searchbar debounce={500}></ion-searchbar>,\n\n // Animated Searchbar\n <ion-searchbar animated={true}></ion-searchbar>,\n\n // Searchbar with a placeholder\n <ion-searchbar placeholder=\"Filter Schedules\"></ion-searchbar>,\n\n // Searchbar in a Toolbar\n <ion-toolbar>\n <ion-searchbar></ion-searchbar>\n </ion-toolbar>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <!-- Default Searchbar -->\n <ion-searchbar></ion-searchbar>\n\n <!-- Searchbar with cancel button always shown -->\n <ion-searchbar show-cancel-button=\"always\"></ion-searchbar>\n\n <!-- Searchbar with cancel button never shown -->\n <ion-searchbar show-cancel-button=\"never\"></ion-searchbar>\n\n <!-- Searchbar with cancel button shown on focus -->\n <ion-searchbar show-cancel-button=\"focus\"></ion-searchbar>\n\n <!-- Searchbar with danger color -->\n <ion-searchbar color=\"danger\"></ion-searchbar>\n\n <!-- Searchbar with value -->\n <ion-searchbar value=\"Ionic\"></ion-searchbar>\n\n <!-- Searchbar with telephone type -->\n <ion-searchbar type=\"tel\"></ion-searchbar>\n\n <!-- Searchbar with numeric inputmode -->\n <ion-searchbar inputmode=\"numeric\"></ion-searchbar>\n\n <!-- Searchbar disabled -->\n <ion-searchbar disabled=\"true\"></ion-searchbar>\n\n <!-- Searchbar with a cancel button and custom cancel button text -->\n <ion-searchbar show-cancel-button=\"focus\" cancel-button-text=\"Custom Cancel\"></ion-searchbar>\n\n <!-- Searchbar with a custom debounce -->\n <ion-searchbar debounce=\"500\"></ion-searchbar>\n\n <!-- Animated Searchbar -->\n <ion-searchbar animated></ion-searchbar>\n\n <!-- Searchbar with a placeholder -->\n <ion-searchbar placeholder=\"Filter Schedules\"></ion-searchbar>\n\n <!-- Searchbar in a Toolbar -->\n <ion-toolbar>\n <ion-searchbar></ion-searchbar>\n </ion-toolbar>\n</template>\n\n<script>\nimport { IonSearchbar, IonToolbar } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonSearchbar, IonToolbar }\n});\n</script>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "animated",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "animated",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, enable searchbar animation.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "autocomplete",
|
||
"type": "\"on\" | \"off\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"",
|
||
"mutable": false,
|
||
"attr": "autocomplete",
|
||
"reflectToAttr": false,
|
||
"docs": "Set the input's autocomplete property.",
|
||
"docsTags": [],
|
||
"default": "'off'",
|
||
"values": [
|
||
{
|
||
"value": "on",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "off",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "name",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "honorific-prefix",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "given-name",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "additional-name",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "family-name",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "honorific-suffix",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "nickname",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "email",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "username",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "new-password",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "current-password",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "one-time-code",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "organization-title",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "organization",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "street-address",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "address-line1",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "address-line2",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "address-line3",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "address-level4",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "address-level3",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "address-level2",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "address-level1",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "country",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "country-name",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "postal-code",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "cc-name",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "cc-given-name",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "cc-additional-name",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "cc-family-name",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "cc-number",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "cc-exp",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "cc-exp-month",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "cc-exp-year",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "cc-csc",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "cc-type",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "transaction-currency",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "transaction-amount",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "language",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "bday",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "bday-day",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "bday-month",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "bday-year",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "sex",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "tel",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "tel-country-code",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "tel-national",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "tel-area-code",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "tel-local",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "tel-extension",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "impp",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "url",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "photo",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "autocorrect",
|
||
"type": "\"off\" | \"on\"",
|
||
"mutable": false,
|
||
"attr": "autocorrect",
|
||
"reflectToAttr": false,
|
||
"docs": "Set the input's autocorrect property.",
|
||
"docsTags": [],
|
||
"default": "'off'",
|
||
"values": [
|
||
{
|
||
"value": "off",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "on",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "cancelButtonIcon",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "cancel-button-icon",
|
||
"reflectToAttr": false,
|
||
"docs": "Set the cancel button icon. Only applies to `md` mode.\nDefaults to `\"arrow-back-sharp\"`.",
|
||
"docsTags": [],
|
||
"default": "config.get('backButtonIcon', 'arrow-back-sharp') as string",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "cancelButtonText",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "cancel-button-text",
|
||
"reflectToAttr": false,
|
||
"docs": "Set the the cancel button text. Only applies to `ios` mode.",
|
||
"docsTags": [],
|
||
"default": "'Cancel'",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "clearIcon",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "clear-icon",
|
||
"reflectToAttr": false,
|
||
"docs": "Set the clear icon. Defaults to `\"close-circle\"` for `ios` and `\"close-sharp\"` for `md`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "debounce",
|
||
"type": "number",
|
||
"mutable": false,
|
||
"attr": "debounce",
|
||
"reflectToAttr": false,
|
||
"docs": "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`.",
|
||
"docsTags": [],
|
||
"default": "250",
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot interact with the input.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "enterkeyhint",
|
||
"type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
|
||
"mutable": false,
|
||
"attr": "enterkeyhint",
|
||
"reflectToAttr": false,
|
||
"docs": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "done",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "enter",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "go",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "next",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "previous",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "search",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "send",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "inputmode",
|
||
"type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
|
||
"mutable": false,
|
||
"attr": "inputmode",
|
||
"reflectToAttr": false,
|
||
"docs": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "decimal",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "email",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "none",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "numeric",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "search",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "tel",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "text",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "url",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "placeholder",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "placeholder",
|
||
"reflectToAttr": false,
|
||
"docs": "Set the input's placeholder.\n`placeholder` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`<Ionic>`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
|
||
"docsTags": [],
|
||
"default": "'Search'",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "searchIcon",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "search-icon",
|
||
"reflectToAttr": false,
|
||
"docs": "The icon to use as the search icon. Defaults to `\"search-outline\"` in\n`ios` mode and `\"search-sharp\"` in `md` mode.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "showCancelButton",
|
||
"type": "\"always\" | \"focus\" | \"never\"",
|
||
"mutable": false,
|
||
"attr": "show-cancel-button",
|
||
"reflectToAttr": false,
|
||
"docs": "Sets the behavior for the cancel button. Defaults to `\"never\"`.\nSetting to `\"focus\"` shows the cancel button on focus.\nSetting to `\"never\"` hides the cancel button.\nSetting to `\"always\"` shows the cancel button regardless\nof focus state.",
|
||
"docsTags": [],
|
||
"default": "'never'",
|
||
"values": [
|
||
{
|
||
"value": "always",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "focus",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "never",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "showClearButton",
|
||
"type": "\"always\" | \"focus\" | \"never\"",
|
||
"mutable": false,
|
||
"attr": "show-clear-button",
|
||
"reflectToAttr": false,
|
||
"docs": "Sets the behavior for the clear button. Defaults to `\"focus\"`.\nSetting to `\"focus\"` shows the clear button on focus if the\ninput is not empty.\nSetting to `\"never\"` hides the clear button.\nSetting to `\"always\"` shows the clear button regardless\nof focus state, but only if the input is not empty.",
|
||
"docsTags": [],
|
||
"default": "'focus'",
|
||
"values": [
|
||
{
|
||
"value": "always",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "focus",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "never",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "spellcheck",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "spellcheck",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, enable spellcheck on the input.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "type",
|
||
"type": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
|
||
"mutable": false,
|
||
"attr": "type",
|
||
"reflectToAttr": false,
|
||
"docs": "Set the type of the input.",
|
||
"docsTags": [],
|
||
"default": "'search'",
|
||
"values": [
|
||
{
|
||
"value": "email",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "number",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "password",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "search",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "tel",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "text",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "url",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "null | string | undefined",
|
||
"mutable": true,
|
||
"attr": "value",
|
||
"reflectToAttr": false,
|
||
"docs": "the value of the searchbar.",
|
||
"docsTags": [],
|
||
"default": "''",
|
||
"values": [
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "getInputElement",
|
||
"returns": {
|
||
"type": "Promise<HTMLInputElement>",
|
||
"docs": ""
|
||
},
|
||
"signature": "getInputElement() => Promise<HTMLInputElement>",
|
||
"parameters": [],
|
||
"docs": "Returns the native `<input>` element used under the hood.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "setFocus",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "setFocus() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Sets focus on the specified `ion-searchbar`. Use this method instead of the global\n`input.focus()`.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionBlur",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the input loses focus.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionCancel",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the cancel button is clicked.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionChange",
|
||
"detail": "SearchbarChangeEventDetail",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the value has changed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionClear",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the clear input button is clicked.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionFocus",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the input has focus.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionInput",
|
||
"detail": "KeyboardEvent",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when a keyboard input occurred.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the searchbar input"
|
||
},
|
||
{
|
||
"name": "--border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Border radius of the searchbar input"
|
||
},
|
||
{
|
||
"name": "--box-shadow",
|
||
"annotation": "prop",
|
||
"docs": "Box shadow of the searchbar input"
|
||
},
|
||
{
|
||
"name": "--cancel-button-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the searchbar cancel button"
|
||
},
|
||
{
|
||
"name": "--clear-button-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the searchbar clear button"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the searchbar text"
|
||
},
|
||
{
|
||
"name": "--icon-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the searchbar icon"
|
||
},
|
||
{
|
||
"name": "--placeholder-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the searchbar placeholder"
|
||
},
|
||
{
|
||
"name": "--placeholder-font-style",
|
||
"annotation": "prop",
|
||
"docs": "Font style of the searchbar placeholder"
|
||
},
|
||
{
|
||
"name": "--placeholder-font-weight",
|
||
"annotation": "prop",
|
||
"docs": "Font weight of the searchbar placeholder"
|
||
},
|
||
{
|
||
"name": "--placeholder-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the searchbar placeholder"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-icon"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-searchbar": [
|
||
"ion-icon"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/segment/segment.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-segment",
|
||
"readme": "# ion-segment\n\nSegments 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.\n\n## Scrollable Segments\n\nSegments are not scrollable by default. Each segment button has a fixed width, and the width is determined by dividing the number of segment buttons by the screen width. This ensures that each segment button can be displayed on the screen without having to scroll. As a result, some segment buttons with longer labels may get cut off. To avoid this we recommend either using a shorter label or switching to a scrollable segment by setting the `scrollable` property to `true`. This will cause the segment to scroll horizontally, but will allow each segment button to have a variable width.\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<!-- Default Segment -->\n<ion-segment (ionChange)=\"segmentChanged($event)\">\n <ion-segment-button value=\"friends\">\n <ion-label>Friends</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"enemies\">\n <ion-label>Enemies</ion-label>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Disabled Segment -->\n<ion-segment (ionChange)=\"segmentChanged($event)\" disabled value=\"sunny\">\n <ion-segment-button value=\"sunny\">\n <ion-label>Sunny</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"rainy\">\n <ion-label>Rainy</ion-label>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Segment with anchors -->\n<ion-segment (ionChange)=\"segmentChanged($event)\">\n <ion-segment-button value=\"dogs\">\n <ion-label>Dogs</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"cats\">\n <ion-label>Cats</ion-label>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Scrollable Segment -->\n<ion-segment scrollable value=\"heart\">\n <ion-segment-button value=\"home\">\n <ion-icon name=\"home\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"heart\">\n <ion-icon name=\"heart\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"pin\">\n <ion-icon name=\"pin\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"star\">\n <ion-icon name=\"star\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"call\">\n <ion-icon name=\"call\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"globe\">\n <ion-icon name=\"globe\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"basket\">\n <ion-icon name=\"basket\"></ion-icon>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Segment with secondary color -->\n<ion-segment (ionChange)=\"segmentChanged($event)\" color=\"secondary\">\n <ion-segment-button value=\"standard\">\n <ion-label>Standard</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"hybrid\">\n <ion-label>Hybrid</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"sat\">\n <ion-label>Satellite</ion-label>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Segment in a toolbar -->\n<ion-toolbar>\n <ion-segment (ionChange)=\"segmentChanged($event)\">\n <ion-segment-button value=\"camera\">\n <ion-icon name=\"camera\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"bookmark\">\n <ion-icon name=\"bookmark\"></ion-icon>\n </ion-segment-button>\n </ion-segment>\n</ion-toolbar>\n\n<!-- Segment with default selection -->\n<ion-segment (ionChange)=\"segmentChanged($event)\" value=\"javascript\">\n <ion-segment-button value=\"python\">\n <ion-label>Python</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"javascript\">\n <ion-label>Javascript</ion-label>\n </ion-segment-button>\n</ion-segment>\n```\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'segment-example',\n templateUrl: 'segment-example.html',\n styleUrls: ['./segment-example.css'],\n})\nexport class SegmentExample {\n segmentChanged(ev: any) {\n console.log('Segment changed', ev);\n }\n}\n```\n",
|
||
"javascript": "```html\n<!-- Default Segment -->\n<ion-segment>\n <ion-segment-button value=\"friends\">\n <ion-label>Friends</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"enemies\">\n <ion-label>Enemies</ion-label>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Disabled Segment -->\n<ion-segment disabled value=\"sunny\">\n <ion-segment-button value=\"sunny\">\n <ion-label>Sunny</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"rainy\">\n <ion-label>Rainy</ion-label>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Segment with anchors -->\n<ion-segment>\n <ion-segment-button value=\"dogs\">\n <ion-label>Dogs</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"cats\">\n <ion-label>Cats</ion-label>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Scrollable Segment -->\n<ion-segment scrollable value=\"heart\">\n <ion-segment-button value=\"home\">\n <ion-icon name=\"home\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"heart\">\n <ion-icon name=\"heart\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"pin\">\n <ion-icon name=\"pin\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"star\">\n <ion-icon name=\"star\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"call\">\n <ion-icon name=\"call\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"globe\">\n <ion-icon name=\"globe\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"basket\">\n <ion-icon name=\"basket\"></ion-icon>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Segment with secondary color -->\n<ion-segment color=\"secondary\">\n <ion-segment-button value=\"standard\">\n <ion-label>Standard</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"hybrid\">\n <ion-label>Hybrid</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"sat\">\n <ion-label>Satellite</ion-label>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Segment in a toolbar -->\n<ion-toolbar>\n <ion-segment>\n <ion-segment-button value=\"camera\">\n <ion-icon name=\"camera\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"bookmark\">\n <ion-icon name=\"bookmark\"></ion-icon>\n </ion-segment-button>\n </ion-segment>\n</ion-toolbar>\n\n<!-- Segment with default selection -->\n<ion-segment value=\"javascript\">\n <ion-segment-button value=\"python\">\n <ion-label>Python</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"javascript\">\n <ion-label>Javascript</ion-label>\n </ion-segment-button>\n</ion-segment>\n```\n\n```javascript\n// Listen for ionChange on all segments\nconst segments = document.querySelectorAll('ion-segment')\nfor (let i = 0; i < segments.length; i++) {\n segments[i].addEventListener('ionChange', (ev) => {\n console.log('Segment changed', ev);\n })\n}\n```",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSegment, IonSegmentButton, IonLabel, IonIcon } from '@ionic/react';\nimport { call, home, heart, pin, star, globe, basket, camera, bookmark } from 'ionicons/icons';\n\nexport const SegmentExamples: React.FC = () => {\n return (\n <IonPage>\n <IonHeader>\n <IonToolbar>\n <IonTitle>SegmentExamples</IonTitle>\n </IonToolbar>\n </IonHeader>\n <IonContent>\n {/*-- Default Segment --*/}\n <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>\n <IonSegmentButton value=\"friends\">\n <IonLabel>Friends</IonLabel>\n </IonSegmentButton>\n <IonSegmentButton value=\"enemies\">\n <IonLabel>Enemies</IonLabel>\n </IonSegmentButton>\n </IonSegment>\n\n {/*-- Disabled Segment --*/}\n <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} disabled value=\"sunny\">\n <IonSegmentButton value=\"sunny\">\n <IonLabel>Sunny</IonLabel>\n </IonSegmentButton>\n <IonSegmentButton value=\"rainy\">\n <IonLabel>Rainy</IonLabel>\n </IonSegmentButton>\n </IonSegment>\n\n {/*-- Segment with anchors --*/}\n <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>\n <IonSegmentButton value=\"dogs\">\n <IonLabel>Dogs</IonLabel>\n </IonSegmentButton>\n <IonSegmentButton value=\"cats\">\n <IonLabel>Cats</IonLabel>\n </IonSegmentButton>\n </IonSegment>\n\n {/*-- Scrollable Segment --*/}\n <IonSegment scrollable value=\"heart\">\n <IonSegmentButton value=\"home\">\n <IonIcon icon={home} />\n </IonSegmentButton>\n <IonSegmentButton value=\"heart\">\n <IonIcon icon={heart} />\n </IonSegmentButton>\n <IonSegmentButton value=\"pin\">\n <IonIcon icon={pin} />\n </IonSegmentButton>\n <IonSegmentButton value=\"star\">\n <IonIcon icon={star} />\n </IonSegmentButton>\n <IonSegmentButton value=\"call\">\n <IonIcon icon={call} />\n </IonSegmentButton>\n <IonSegmentButton value=\"globe\">\n <IonIcon icon={globe} />\n </IonSegmentButton>\n <IonSegmentButton value=\"basket\">\n <IonIcon icon={basket} />\n </IonSegmentButton>\n </IonSegment>\n\n {/*-- Segment with secondary color --*/}\n <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} color=\"secondary\">\n <IonSegmentButton value=\"standard\">\n <IonLabel>Standard</IonLabel>\n </IonSegmentButton>\n <IonSegmentButton value=\"hybrid\">\n <IonLabel>Hybrid</IonLabel>\n </IonSegmentButton>\n <IonSegmentButton value=\"sat\">\n <IonLabel>Satellite</IonLabel>\n </IonSegmentButton>\n </IonSegment>\n\n {/*-- Segment in a toolbar --*/}\n <IonToolbar>\n <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>\n <IonSegmentButton value=\"camera\">\n <IonIcon icon={camera} />\n </IonSegmentButton>\n <IonSegmentButton value=\"bookmark\">\n <IonIcon icon={bookmark} />\n </IonSegmentButton>\n </IonSegment>\n </IonToolbar>\n\n {/*-- Segment with default selection --*/}\n <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} value=\"javascript\">\n <IonSegmentButton value=\"python\">\n <IonLabel>Python</IonLabel>\n </IonSegmentButton>\n <IonSegmentButton value=\"javascript\">\n <IonLabel>Javascript</IonLabel>\n </IonSegmentButton>\n </IonSegment>\n </IonContent>\n </IonPage>\n );\n};\n\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'segment-example',\n styleUrl: 'segment-example.css'\n})\nexport class SegmentExample {\n segmentChanged(ev: any) {\n console.log('Segment changed', ev);\n }\n\n render() {\n return [\n // Default Segment\n <ion-segment onIonChange={(ev) => this.segmentChanged(ev)}>\n <ion-segment-button value=\"friends\">\n <ion-label>Friends</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"enemies\">\n <ion-label>Enemies</ion-label>\n </ion-segment-button>\n </ion-segment>,\n\n // Disabled Segment\n <ion-segment onIonChange={(ev) => this.segmentChanged(ev)} disabled={true} value=\"sunny\">\n <ion-segment-button value=\"sunny\">\n <ion-label>Sunny</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"rainy\">\n <ion-label>Rainy</ion-label>\n </ion-segment-button>\n </ion-segment>,\n\n // Segment with anchors\n <ion-segment onIonChange={(ev) => this.segmentChanged(ev)}>\n <ion-segment-button value=\"dogs\">\n <ion-label>Dogs</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"cats\">\n <ion-label>Cats</ion-label>\n </ion-segment-button>\n </ion-segment>,\n\n // Scrollable Segment\n <ion-segment scrollable value=\"heart\">\n <ion-segment-button value=\"home\">\n <ion-icon name=\"home\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"heart\">\n <ion-icon name=\"heart\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"pin\">\n <ion-icon name=\"pin\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"star\">\n <ion-icon name=\"star\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"call\">\n <ion-icon name=\"call\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"globe\">\n <ion-icon name=\"globe\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"basket\">\n <ion-icon name=\"basket\"></ion-icon>\n </ion-segment-button>\n </ion-segment>,\n\n // Segment with secondary color\n <ion-segment onIonChange={(ev) => this.segmentChanged(ev)} color=\"secondary\">\n <ion-segment-button value=\"standard\">\n <ion-label>Standard</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"hybrid\">\n <ion-label>Hybrid</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"sat\">\n <ion-label>Satellite</ion-label>\n </ion-segment-button>\n </ion-segment>,\n\n // Segment in a toolbar\n <ion-toolbar>\n <ion-segment onIonChange={(ev) => this.segmentChanged(ev)}>\n <ion-segment-button value=\"camera\">\n <ion-icon name=\"camera\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"bookmark\">\n <ion-icon name=\"bookmark\"></ion-icon>\n </ion-segment-button>\n </ion-segment>\n </ion-toolbar>,\n\n // Segment with default selection\n <ion-segment onIonChange={(ev) => this.segmentChanged(ev)} value=\"javascript\">\n <ion-segment-button value=\"python\">\n <ion-label>Python</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"javascript\">\n <ion-label>Javascript</ion-label>\n </ion-segment-button>\n </ion-segment>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <!-- Default Segment -->\n <ion-segment @ionChange=\"segmentChanged($event)\">\n <ion-segment-button value=\"friends\">\n <ion-label>Friends</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"enemies\">\n <ion-label>Enemies</ion-label>\n </ion-segment-button>\n </ion-segment>\n\n <!-- Disabled Segment -->\n <ion-segment @ionChange=\"segmentChanged($event)\" disabled value=\"sunny\">\n <ion-segment-button value=\"sunny\">\n <ion-label>Sunny</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"rainy\">\n <ion-label>Rainy</ion-label>\n </ion-segment-button>\n </ion-segment>\n\n <!-- Segment with anchors -->\n <ion-segment @ionChange=\"segmentChanged($event)\">\n <ion-segment-button value=\"dogs\">\n <ion-label>Dogs</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"cats\">\n <ion-label>Cats</ion-label>\n </ion-segment-button>\n </ion-segment>\n\n <!-- Scrollable Segment -->\n <ion-segment scrollable value=\"heart\">\n <ion-segment-button value=\"home\">\n <ion-icon name=\"home\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"heart\">\n <ion-icon name=\"heart\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"pin\">\n <ion-icon name=\"pin\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"star\">\n <ion-icon name=\"star\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"call\">\n <ion-icon name=\"call\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"globe\">\n <ion-icon name=\"globe\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"basket\">\n <ion-icon name=\"basket\"></ion-icon>\n </ion-segment-button>\n </ion-segment>\n\n <!-- Segment with secondary color -->\n <ion-segment @ionChange=\"segmentChanged($event)\" color=\"secondary\">\n <ion-segment-button value=\"standard\">\n <ion-label>Standard</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"hybrid\">\n <ion-label>Hybrid</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"sat\">\n <ion-label>Satellite</ion-label>\n </ion-segment-button>\n </ion-segment>\n\n <!-- Segment in a toolbar -->\n <ion-toolbar>\n <ion-segment @ionChange=\"segmentChanged($event)\">\n <ion-segment-button value=\"camera\">\n <ion-icon name=\"camera\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"bookmark\">\n <ion-icon name=\"bookmark\"></ion-icon>\n </ion-segment-button>\n </ion-segment>\n </ion-toolbar>\n\n <!-- Segment with default selection -->\n <ion-segment @ionChange=\"segmentChanged($event)\" value=\"javascript\">\n <ion-segment-button value=\"python\">\n <ion-label>Python</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"javascript\">\n <ion-label>Javascript</ion-label>\n </ion-segment-button>\n </ion-segment>\n</template>\n\n<script lang=\"ts\">\nimport { IonSegment, IonSegmentButton, IonToolbar } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonSegment, IonSegmentButton, IonToolbar },\n methods: {\n segmentChanged(ev: CustomEvent) {\n console.log('Segment changed', ev);\n }\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot interact with the segment.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "scrollable",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "scrollable",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the segment buttons will overflow and the user can swipe to see them.\nIn addition, this will disable the gesture to drag the indicator between the buttons\nin order to swipe to see hidden buttons.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "swipeGesture",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "swipe-gesture",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, users will be able to swipe between segment buttons to activate them.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "null | string | undefined",
|
||
"mutable": true,
|
||
"attr": "value",
|
||
"reflectToAttr": false,
|
||
"docs": "the value of the segment.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [
|
||
{
|
||
"event": "ionChange",
|
||
"detail": "SegmentChangeEventDetail",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the value property has changed and any\ndragging pointer has been released from `ion-segment`.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the segment button"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/segment-button/segment-button.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-segment-button",
|
||
"readme": "# ion-segment-button\n\nSegment 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.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
},
|
||
{
|
||
"text": "native - The native HTML button element that wraps all child elements.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "indicator - The indicator displayed on the checked segment button.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "indicator-background - The background element for the indicator displayed on the checked segment button.",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<!-- Segment buttons with text and click listener -->\n<ion-segment (ionChange)=\"segmentChanged($event)\">\n <ion-segment-button>\n <ion-label>Friends</ion-label>\n </ion-segment-button>\n <ion-segment-button>\n <ion-label>Enemies</ion-label>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Segment buttons with the first checked and the last disabled -->\n<ion-segment value=\"paid\">\n <ion-segment-button value=\"paid\">\n <ion-label>Paid</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"free\">\n <ion-label>Free</ion-label>\n </ion-segment-button>\n <ion-segment-button disabled value=\"top\">\n <ion-label>Top</ion-label>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Segment buttons with values and icons -->\n<ion-segment>\n <ion-segment-button value=\"camera\">\n <ion-icon name=\"camera\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"bookmark\">\n <ion-icon name=\"bookmark\"></ion-icon>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Segment with a value that checks the last button -->\n<ion-segment value=\"shared\">\n <ion-segment-button value=\"bookmarks\">\n <ion-label>Bookmarks</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"reading\">\n <ion-label>Reading List</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"shared\">\n <ion-label>Shared Links</ion-label>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Label only -->\n<ion-segment value=\"1\">\n <ion-segment-button value=\"1\">\n <ion-label>Item One</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"2\">\n <ion-label>Item Two</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"3\">\n <ion-label>Item Three</ion-label>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Icon only -->\n<ion-segment value=\"heart\">\n <ion-segment-button value=\"call\">\n <ion-icon name=\"call\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"heart\">\n <ion-icon name=\"heart\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"pin\">\n <ion-icon name=\"pin\"></ion-icon>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Icon top -->\n<ion-segment value=\"2\">\n <ion-segment-button value=\"1\">\n <ion-label>Item One</ion-label>\n <ion-icon name=\"call\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"2\">\n <ion-label>Item Two</ion-label>\n <ion-icon name=\"heart\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"3\">\n <ion-label>Item Three</ion-label>\n <ion-icon name=\"pin\"></ion-icon>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Icon bottom -->\n<ion-segment value=\"1\">\n <ion-segment-button value=\"1\" layout=\"icon-bottom\">\n <ion-icon name=\"call\"></ion-icon>\n <ion-label>Item One</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"2\" layout=\"icon-bottom\">\n <ion-icon name=\"heart\"></ion-icon>\n <ion-label>Item Two</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"3\" layout=\"icon-bottom\">\n <ion-icon name=\"pin\"></ion-icon>\n <ion-label>Item Three</ion-label>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Icon start -->\n<ion-segment value=\"1\">\n <ion-segment-button value=\"1\" layout=\"icon-start\">\n <ion-label>Item One</ion-label>\n <ion-icon name=\"call\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"2\" layout=\"icon-start\">\n <ion-label>Item Two</ion-label>\n <ion-icon name=\"heart\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"3\" layout=\"icon-start\">\n <ion-label>Item Three</ion-label>\n <ion-icon name=\"pin\"></ion-icon>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Icon end -->\n<ion-segment value=\"1\">\n <ion-segment-button value=\"1\" layout=\"icon-end\">\n <ion-icon name=\"call\"></ion-icon>\n <ion-label>Item One</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"2\" disabled layout=\"icon-end\">\n <ion-icon name=\"heart\"></ion-icon>\n <ion-label>Item Two</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"3\" layout=\"icon-end\">\n <ion-icon name=\"pin\"></ion-icon>\n <ion-label>Item Three</ion-label>\n </ion-segment-button>\n</ion-segment>\n```\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'segment-button-example',\n templateUrl: 'segment-button-example.html',\n styleUrls: ['./segment-button-example.css'],\n})\nexport class SegmentButtonExample {\n segmentChanged(ev: any) {\n console.log('Segment changed', ev);\n }\n}\n```",
|
||
"javascript": "```html\n<!-- Segment buttons with text -->\n<ion-segment>\n <ion-segment-button>\n <ion-label>Friends</ion-label>\n </ion-segment-button>\n <ion-segment-button>\n <ion-label>Enemies</ion-label>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Segment buttons with the first checked and the last disabled -->\n<ion-segment value=\"paid\">\n <ion-segment-button value=\"paid\">\n <ion-label>Paid</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"free\">\n <ion-label>Free</ion-label>\n </ion-segment-button>\n <ion-segment-button disabled value=\"top\">\n <ion-label>Top</ion-label>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Segment buttons with values and icons -->\n<ion-segment>\n <ion-segment-button value=\"camera\">\n <ion-icon name=\"camera\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"bookmark\">\n <ion-icon name=\"bookmark\"></ion-icon>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Segment with a value that checks the last button -->\n<ion-segment value=\"shared\">\n <ion-segment-button value=\"bookmarks\">\n <ion-label>Bookmarks</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"reading\">\n <ion-label>Reading List</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"shared\">\n <ion-label>Shared Links</ion-label>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Label only -->\n<ion-segment value=\"1\">\n <ion-segment-button value=\"1\">\n <ion-label>Item One</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"2\">\n <ion-label>Item Two</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"3\">\n <ion-label>Item Three</ion-label>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Icon only -->\n<ion-segment value=\"heart\">\n <ion-segment-button value=\"call\">\n <ion-icon name=\"call\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"heart\">\n <ion-icon name=\"heart\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"pin\">\n <ion-icon name=\"pin\"></ion-icon>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Icon top -->\n<ion-segment value=\"2\">\n <ion-segment-button value=\"1\">\n <ion-label>Item One</ion-label>\n <ion-icon name=\"call\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"2\">\n <ion-label>Item Two</ion-label>\n <ion-icon name=\"heart\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"3\">\n <ion-label>Item Three</ion-label>\n <ion-icon name=\"pin\"></ion-icon>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Icon bottom -->\n<ion-segment value=\"1\">\n <ion-segment-button value=\"1\" layout=\"icon-bottom\">\n <ion-icon name=\"call\"></ion-icon>\n <ion-label>Item One</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"2\" layout=\"icon-bottom\">\n <ion-icon name=\"heart\"></ion-icon>\n <ion-label>Item Two</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"3\" layout=\"icon-bottom\">\n <ion-icon name=\"pin\"></ion-icon>\n <ion-label>Item Three</ion-label>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Icon start -->\n<ion-segment value=\"1\">\n <ion-segment-button value=\"1\" layout=\"icon-start\">\n <ion-label>Item One</ion-label>\n <ion-icon name=\"call\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"2\" layout=\"icon-start\">\n <ion-label>Item Two</ion-label>\n <ion-icon name=\"heart\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"3\" layout=\"icon-start\">\n <ion-label>Item Three</ion-label>\n <ion-icon name=\"pin\"></ion-icon>\n </ion-segment-button>\n</ion-segment>\n\n<!-- Icon end -->\n<ion-segment value=\"1\">\n <ion-segment-button value=\"1\" layout=\"icon-end\">\n <ion-icon name=\"call\"></ion-icon>\n <ion-label>Item One</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"2\" disabled layout=\"icon-end\">\n <ion-icon name=\"heart\"></ion-icon>\n <ion-label>Item Two</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"3\" layout=\"icon-end\">\n <ion-icon name=\"pin\"></ion-icon>\n <ion-label>Item Three</ion-label>\n </ion-segment-button>\n</ion-segment>\n```\n\n```javascript\n// Listen for ionChange on segment\nconst segment = document.querySelector('ion-segment');\nsegment.addEventListener('ionChange', (ev) => {\n console.log('Segment changed', ev);\n})\n```",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSegment, IonSegmentButton, IonLabel, IonIcon } from '@ionic/react';\nimport { call, camera, bookmark, heart, pin } from 'ionicons/icons';\n\nexport const SegmentButtonExamples: React.FC = () => {\n return (\n <IonPage>\n <IonHeader>\n <IonToolbar>\n <IonTitle>SegmentButton</IonTitle>\n </IonToolbar>\n </IonHeader>\n <IonContent>\n {/*-- Segment buttons with text and click listener --*/}\n <IonSegment onIonChange={(e) => console.log(`${e.detail.value} segment selected`)}>\n <IonSegmentButton value=\"Friends\">\n <IonLabel>Friends</IonLabel>\n </IonSegmentButton>\n <IonSegmentButton value=\"Enemies\">\n <IonLabel>Enemies</IonLabel>\n </IonSegmentButton>\n </IonSegment>\n\n {/*-- Segment buttons with the first checked and the last disabled --*/}\n <IonSegment value=\"paid\">\n <IonSegmentButton value=\"paid\">\n <IonLabel>Paid</IonLabel>\n </IonSegmentButton>\n <IonSegmentButton value=\"free\">\n <IonLabel>Free</IonLabel>\n </IonSegmentButton>\n <IonSegmentButton disabled value=\"top\">\n <IonLabel>Top</IonLabel>\n </IonSegmentButton>\n </IonSegment>\n\n {/*-- Segment buttons with values and icons --*/}\n <IonSegment>\n <IonSegmentButton value=\"camera\">\n <IonIcon icon={camera} />\n </IonSegmentButton>\n <IonSegmentButton value=\"bookmark\">\n <IonIcon icon={bookmark} />\n </IonSegmentButton>\n </IonSegment>\n\n {/*-- Segment with a value that checks the last button --*/}\n <IonSegment value=\"shared\">\n <IonSegmentButton value=\"bookmarks\">\n <IonLabel>Bookmarks</IonLabel>\n </IonSegmentButton>\n <IonSegmentButton value=\"reading\">\n <IonLabel>Reading List</IonLabel>\n </IonSegmentButton>\n <IonSegmentButton value=\"shared\">\n <IonLabel>Shared Links</IonLabel>\n </IonSegmentButton>\n </IonSegment>\n\n {/*-- Label only --*/}\n <IonSegment value=\"1\">\n <IonSegmentButton value=\"1\">\n <IonLabel>Item One</IonLabel>\n </IonSegmentButton>\n <IonSegmentButton value=\"2\">\n <IonLabel>Item Two</IonLabel>\n </IonSegmentButton>\n <IonSegmentButton value=\"3\">\n <IonLabel>Item Three</IonLabel>\n </IonSegmentButton>\n </IonSegment>\n\n {/*-- Icon only --*/}\n <IonSegment value=\"heart\">\n <IonSegmentButton value=\"call\">\n <IonIcon icon={call} />\n </IonSegmentButton>\n <IonSegmentButton value=\"heart\">\n <IonIcon icon={heart} />\n </IonSegmentButton>\n <IonSegmentButton value=\"pin\">\n <IonIcon icon={pin} />\n </IonSegmentButton>\n </IonSegment>\n\n {/*-- Icon top --*/}\n <IonSegment value=\"2\">\n <IonSegmentButton value=\"1\">\n <IonLabel>Item One</IonLabel>\n <IonIcon icon={call} />\n </IonSegmentButton>\n <IonSegmentButton value=\"2\">\n <IonLabel>Item Two</IonLabel>\n <IonIcon icon={heart} />\n </IonSegmentButton>\n <IonSegmentButton value=\"3\">\n <IonLabel>Item Three</IonLabel>\n <IonIcon icon={pin} />\n </IonSegmentButton>\n </IonSegment>\n\n {/*-- Icon bottom --*/}\n <IonSegment value=\"1\">\n <IonSegmentButton value=\"1\" layout=\"icon-bottom\">\n <IonIcon icon={call} />\n <IonLabel>Item One</IonLabel>\n </IonSegmentButton>\n <IonSegmentButton value=\"2\" layout=\"icon-bottom\">\n <IonIcon icon={heart} />\n <IonLabel>Item Two</IonLabel>\n </IonSegmentButton>\n <IonSegmentButton value=\"3\" layout=\"icon-bottom\">\n <IonIcon icon={pin} />\n <IonLabel>Item Three</IonLabel>\n </IonSegmentButton>\n </IonSegment>\n\n {/*-- Icon start --*/}\n <IonSegment value=\"1\">\n <IonSegmentButton value=\"1\" layout=\"icon-start\">\n <IonLabel>Item One</IonLabel>\n <IonIcon icon={call} />\n </IonSegmentButton>\n <IonSegmentButton value=\"2\" layout=\"icon-start\">\n <IonLabel>Item Two</IonLabel>\n <IonIcon icon={heart} />\n </IonSegmentButton>\n <IonSegmentButton value=\"3\" layout=\"icon-start\">\n <IonLabel>Item Three</IonLabel>\n <IonIcon icon={pin} />\n </IonSegmentButton>\n </IonSegment>\n\n {/*-- Icon end --*/}\n <IonSegment value=\"1\">\n <IonSegmentButton value=\"1\" layout=\"icon-end\">\n <IonIcon icon={call} />\n <IonLabel>Item One</IonLabel>\n </IonSegmentButton>\n <IonSegmentButton value=\"2\" disabled layout=\"icon-end\">\n <IonIcon icon={heart} />\n <IonLabel>Item Two</IonLabel>\n </IonSegmentButton>\n <IonSegmentButton value=\"3\" layout=\"icon-end\">\n <IonIcon icon={pin} />\n <IonLabel>Item Three</IonLabel>\n </IonSegmentButton>\n </IonSegment>\n </IonContent>\n </IonPage>\n );\n};\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'segment-button-example',\n styleUrl: 'segment-button-example.css'\n})\nexport class SegmentButtonExample {\n segmentChanged(ev: any) {\n console.log('Segment changed', ev);\n }\n\n render() {\n return [\n // Segment buttons with text and click listener\n <ion-segment onIonChange={(ev) => this.segmentChanged(ev)}>\n <ion-segment-button>\n <ion-label>Friends</ion-label>\n </ion-segment-button>\n <ion-segment-button>\n <ion-label>Enemies</ion-label>\n </ion-segment-button>\n </ion-segment>,\n\n // Segment buttons with the first checked and the last disabled\n <ion-segment value=\"paid\">\n <ion-segment-button value=\"paid\">\n <ion-label>Paid</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"free\">\n <ion-label>Free</ion-label>\n </ion-segment-button>\n <ion-segment-button disabled value=\"top\">\n <ion-label>Top</ion-label>\n </ion-segment-button>\n </ion-segment>,\n\n // Segment buttons with values and icons\n <ion-segment>\n <ion-segment-button value=\"camera\">\n <ion-icon name=\"camera\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"bookmark\">\n <ion-icon name=\"bookmark\"></ion-icon>\n </ion-segment-button>\n </ion-segment>,\n\n // Segment with a value that checks the last button\n <ion-segment value=\"shared\">\n <ion-segment-button value=\"bookmarks\">\n <ion-label>Bookmarks</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"reading\">\n <ion-label>Reading List</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"shared\">\n <ion-label>Shared Links</ion-label>\n </ion-segment-button>\n </ion-segment>,\n\n // Label only\n <ion-segment value=\"1\">\n <ion-segment-button value=\"1\">\n <ion-label>Item One</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"2\">\n <ion-label>Item Two</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"3\">\n <ion-label>Item Three</ion-label>\n </ion-segment-button>\n </ion-segment>,\n\n // Icon only\n <ion-segment value=\"heart\">\n <ion-segment-button value=\"call\">\n <ion-icon name=\"call\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"heart\">\n <ion-icon name=\"heart\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"pin\">\n <ion-icon name=\"pin\"></ion-icon>\n </ion-segment-button>\n </ion-segment>,\n\n // Icon top\n <ion-segment value=\"2\">\n <ion-segment-button value=\"1\">\n <ion-label>Item One</ion-label>\n <ion-icon name=\"call\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"2\">\n <ion-label>Item Two</ion-label>\n <ion-icon name=\"heart\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"3\">\n <ion-label>Item Three</ion-label>\n <ion-icon name=\"pin\"></ion-icon>\n </ion-segment-button>\n </ion-segment>,\n\n // Icon bottom\n <ion-segment value=\"1\">\n <ion-segment-button value=\"1\" layout=\"icon-bottom\">\n <ion-icon name=\"call\"></ion-icon>\n <ion-label>Item One</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"2\" layout=\"icon-bottom\">\n <ion-icon name=\"heart\"></ion-icon>\n <ion-label>Item Two</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"3\" layout=\"icon-bottom\">\n <ion-icon name=\"pin\"></ion-icon>\n <ion-label>Item Three</ion-label>\n </ion-segment-button>\n </ion-segment>,\n\n // Icon start\n <ion-segment value=\"1\">\n <ion-segment-button value=\"1\" layout=\"icon-start\">\n <ion-label>Item One</ion-label>\n <ion-icon name=\"call\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"2\" layout=\"icon-start\">\n <ion-label>Item Two</ion-label>\n <ion-icon name=\"heart\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"3\" layout=\"icon-start\">\n <ion-label>Item Three</ion-label>\n <ion-icon name=\"pin\"></ion-icon>\n </ion-segment-button>\n </ion-segment>,\n\n // Icon end\n <ion-segment value=\"1\">\n <ion-segment-button value=\"1\" layout=\"icon-end\">\n <ion-icon name=\"call\"></ion-icon>\n <ion-label>Item One</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"2\" disabled layout=\"icon-end\">\n <ion-icon name=\"heart\"></ion-icon>\n <ion-label>Item Two</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"3\" layout=\"icon-end\">\n <ion-icon name=\"pin\"></ion-icon>\n <ion-label>Item Three</ion-label>\n </ion-segment-button>\n </ion-segment>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <!-- Segment buttons with text and click listener -->\n <ion-segment @ionChange=\"segmentChanged($event)\">\n <ion-segment-button>\n <ion-label>Friends</ion-label>\n </ion-segment-button>\n <ion-segment-button>\n <ion-label>Enemies</ion-label>\n </ion-segment-button>\n </ion-segment>\n\n <!-- Segment buttons with the first checked and the last disabled -->\n <ion-segment value=\"paid\">\n <ion-segment-button value=\"paid\">\n <ion-label>Paid</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"free\">\n <ion-label>Free</ion-label>\n </ion-segment-button>\n <ion-segment-button disabled value=\"top\">\n <ion-label>Top</ion-label>\n </ion-segment-button>\n </ion-segment>\n\n <!-- Segment buttons with values and icons -->\n <ion-segment>\n <ion-segment-button value=\"camera\">\n <ion-icon :icon=\"camera\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"bookmark\">\n <ion-icon :icon=\"bookmark\"></ion-icon>\n </ion-segment-button>\n </ion-segment>\n\n <!-- Segment with a value that checks the last button -->\n <ion-segment value=\"shared\">\n <ion-segment-button value=\"bookmarks\">\n <ion-label>Bookmarks</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"reading\">\n <ion-label>Reading List</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"shared\">\n <ion-label>Shared Links</ion-label>\n </ion-segment-button>\n </ion-segment>\n \n <!-- Label only -->\n <ion-segment value=\"1\">\n <ion-segment-button value=\"1\">\n <ion-label>Item One</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"2\">\n <ion-label>Item Two</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"3\">\n <ion-label>Item Three</ion-label>\n </ion-segment-button>\n </ion-segment>\n \n <!-- Icon only -->\n <ion-segment value=\"heart\">\n <ion-segment-button value=\"call\">\n <ion-icon :icon=\"call\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"heart\">\n <ion-icon :icon=\"heart\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"pin\">\n <ion-icon :icon=\"pin\"></ion-icon>\n </ion-segment-button>\n </ion-segment>\n \n <!-- Icon top -->\n <ion-segment value=\"2\">\n <ion-segment-button value=\"1\">\n <ion-label>Item One</ion-label>\n <ion-icon :icon=\"call\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"2\">\n <ion-label>Item Two</ion-label>\n <ion-icon :icon=\"heart\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"3\">\n <ion-label>Item Three</ion-label>\n <ion-icon :icon=\"pin\"></ion-icon>\n </ion-segment-button>\n </ion-segment>\n \n <!-- Icon bottom -->\n <ion-segment value=\"1\">\n <ion-segment-button value=\"1\" layout=\"icon-bottom\">\n <ion-icon :icon=\"call\"></ion-icon>\n <ion-label>Item One</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"2\" layout=\"icon-bottom\">\n <ion-icon :icon=\"heart\"></ion-icon>\n <ion-label>Item Two</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"3\" layout=\"icon-bottom\">\n <ion-icon :icon=\"pin\"></ion-icon>\n <ion-label>Item Three</ion-label>\n </ion-segment-button>\n </ion-segment>\n \n <!-- Icon start -->\n <ion-segment value=\"1\">\n <ion-segment-button value=\"1\" layout=\"icon-start\">\n <ion-label>Item One</ion-label>\n <ion-icon :icon=\"call\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"2\" layout=\"icon-start\">\n <ion-label>Item Two</ion-label>\n <ion-icon :icon=\"heart\"></ion-icon>\n </ion-segment-button>\n <ion-segment-button value=\"3\" layout=\"icon-start\">\n <ion-label>Item Three</ion-label>\n <ion-icon :icon=\"pin\"></ion-icon>\n </ion-segment-button>\n </ion-segment>\n \n <!-- Icon end -->\n <ion-segment value=\"1\">\n <ion-segment-button value=\"1\" layout=\"icon-end\">\n <ion-icon :icon=\"call\"></ion-icon>\n <ion-label>Item One</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"2\" disabled layout=\"icon-end\">\n <ion-icon :icon=\"heart\"></ion-icon>\n <ion-label>Item Two</ion-label>\n </ion-segment-button>\n <ion-segment-button value=\"3\" layout=\"icon-end\">\n <ion-icon :icon=\"pin\"></ion-icon>\n <ion-label>Item Three</ion-label>\n </ion-segment-button>\n </ion-segment>\n</template>\n\n<script lang=\"ts\">\nimport { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';\nimport { bookmark, call, camera, heart, pin } from 'ionicons/icons';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonIcon, IonLabel, IonSegment, IonSegmentButtonr },\n methods: {\n segmentChanged(ev: CustomEvent) {\n console.log('Segment changed', ev);\n }\n }\n setup() {\n return { \n bookmark, \n call, \n camera, \n heart, \n pin\n }\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot interact with the segment button.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "layout",
|
||
"type": "\"icon-bottom\" | \"icon-end\" | \"icon-hide\" | \"icon-start\" | \"icon-top\" | \"label-hide\" | undefined",
|
||
"mutable": false,
|
||
"attr": "layout",
|
||
"reflectToAttr": false,
|
||
"docs": "Set the layout of the text and icon in the segment.",
|
||
"docsTags": [],
|
||
"default": "'icon-top'",
|
||
"values": [
|
||
{
|
||
"value": "icon-bottom",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "icon-end",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "icon-hide",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "icon-start",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "icon-top",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "label-hide",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "type",
|
||
"type": "\"button\" | \"reset\" | \"submit\"",
|
||
"mutable": false,
|
||
"attr": "type",
|
||
"reflectToAttr": false,
|
||
"docs": "The type of the button.",
|
||
"docsTags": [],
|
||
"default": "'button'",
|
||
"values": [
|
||
{
|
||
"value": "button",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "reset",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "submit",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "value",
|
||
"reflectToAttr": false,
|
||
"docs": "The value of the segment button.",
|
||
"docsTags": [],
|
||
"default": "'ion-sb-' + (ids++)",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the segment button"
|
||
},
|
||
{
|
||
"name": "--background-checked",
|
||
"annotation": "prop",
|
||
"docs": "Background of the checked segment button"
|
||
},
|
||
{
|
||
"name": "--background-focused",
|
||
"annotation": "prop",
|
||
"docs": "Background of the segment button when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--background-focused-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the segment button background when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--background-hover",
|
||
"annotation": "prop",
|
||
"docs": "Background of the segment button on hover"
|
||
},
|
||
{
|
||
"name": "--background-hover-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the segment button background on hover"
|
||
},
|
||
{
|
||
"name": "--border-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the segment button border"
|
||
},
|
||
{
|
||
"name": "--border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Radius of the segment button border"
|
||
},
|
||
{
|
||
"name": "--border-style",
|
||
"annotation": "prop",
|
||
"docs": "Style of the segment button border"
|
||
},
|
||
{
|
||
"name": "--border-width",
|
||
"annotation": "prop",
|
||
"docs": "Width of the segment button border"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the segment button"
|
||
},
|
||
{
|
||
"name": "--color-checked",
|
||
"annotation": "prop",
|
||
"docs": "Color of the checked segment button"
|
||
},
|
||
{
|
||
"name": "--color-focused",
|
||
"annotation": "prop",
|
||
"docs": "Color of the segment button when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--color-hover",
|
||
"annotation": "prop",
|
||
"docs": "Color of the segment button on hover"
|
||
},
|
||
{
|
||
"name": "--indicator-box-shadow",
|
||
"annotation": "prop",
|
||
"docs": "Box shadow on the indicator for the checked segment button"
|
||
},
|
||
{
|
||
"name": "--indicator-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the indicator for the checked segment button"
|
||
},
|
||
{
|
||
"name": "--indicator-height",
|
||
"annotation": "prop",
|
||
"docs": "Height of the indicator for the checked segment button"
|
||
},
|
||
{
|
||
"name": "--indicator-transform",
|
||
"annotation": "prop",
|
||
"docs": "Transform of the indicator for the checked segment button"
|
||
},
|
||
{
|
||
"name": "--indicator-transition",
|
||
"annotation": "prop",
|
||
"docs": "Transition of the indicator for the checked segment button"
|
||
},
|
||
{
|
||
"name": "--margin-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom margin of the segment button"
|
||
},
|
||
{
|
||
"name": "--margin-end",
|
||
"annotation": "prop",
|
||
"docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button"
|
||
},
|
||
{
|
||
"name": "--margin-start",
|
||
"annotation": "prop",
|
||
"docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button"
|
||
},
|
||
{
|
||
"name": "--margin-top",
|
||
"annotation": "prop",
|
||
"docs": "Top margin of the segment button"
|
||
},
|
||
{
|
||
"name": "--padding-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom padding of the segment button"
|
||
},
|
||
{
|
||
"name": "--padding-end",
|
||
"annotation": "prop",
|
||
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button"
|
||
},
|
||
{
|
||
"name": "--padding-start",
|
||
"annotation": "prop",
|
||
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button"
|
||
},
|
||
{
|
||
"name": "--padding-top",
|
||
"annotation": "prop",
|
||
"docs": "Top padding of the segment button"
|
||
},
|
||
{
|
||
"name": "--transition",
|
||
"annotation": "prop",
|
||
"docs": "Transition of the segment button"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [
|
||
{
|
||
"name": "indicator",
|
||
"docs": "The indicator displayed on the checked segment button."
|
||
},
|
||
{
|
||
"name": "indicator-background",
|
||
"docs": "The background element for the indicator displayed on the checked segment button."
|
||
},
|
||
{
|
||
"name": "native",
|
||
"docs": "The native HTML button element that wraps all child elements."
|
||
}
|
||
],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-ripple-effect"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-segment-button": [
|
||
"ion-ripple-effect"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/select/select.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-select",
|
||
"readme": "# ion-select\n\nSelects 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.\n\n## Interfaces\n\nBy default, select uses [ion-alert](../alert) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](../action-sheet) or [ion-popover](../popover) by passing `action-sheet` or `popover`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces.\n\n\n## Single Selection\n\nBy default, the select allows the user to select only one option. The alert interface presents users with a radio button styled list of options. The action sheet interface can only be used with a single value select. The select component's value receives the value of the selected option's value.\n\n\n## Multiple Selection\n\nBy adding the `multiple` attribute to select, users are able to select multiple options. When multiple options can be selected, the alert overlay presents users with a checkbox styled list of options. The select component's value receives an array of all of the selected option values.\n\nNote: the `action-sheet` and `popover` interfaces will not work with multiple selection.\n\n## Object Value References\n\nWhen using objects for select values, it is possible for the identities of these objects to change if they are coming from a server or database, while the selected value's identity remains the same. For example, this can occur when an existing record with the desired object value is loaded into the select, but the newly retrieved select options now have different identities. This will result in the select appearing to have no value at all, even though the original selection in still intact.\n\nBy default, the select uses object equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.\n\n## Select Buttons\n\nThe alert supports two buttons: `Cancel` and `OK`. Each button's text can be customized using the `cancelText` and `okText` properties.\n\nThe `action-sheet` and `popover` interfaces do not have an `OK` button, clicking on any of the options will automatically close the overlay and select that value. The `popover` interface does not have a `Cancel` button, clicking on the backdrop will close the overlay.\n\n\n## Interface Options\n\nSince select uses the alert, action sheet and popover interfaces, options can be passed to these components through the `interfaceOptions` property. This can be used to pass a custom header, subheader, css class, and more.\n\nSee the [ion-alert docs](../alert), [ion-action-sheet docs](../action-sheet), and [ion-popover docs](../popover) for the properties that each interface accepts.\n\nNote: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.\n\n## Customization\n\nThere are two units that make up the Select component and each need to be styled separately. The `ion-select` element is represented on the view by the selected value(s), or placeholder if there is none, and dropdown icon. The interface, which is defined in the [Interfaces](#interfaces) section above, is the dialog that opens when clicking on the `ion-select`. The interface contains all of the options defined by adding `ion-select-option` elements. The following sections will go over the differences between styling these.\n\n### Styling Select Element\n\nAs mentioned, the `ion-select` element consists only of the value(s), or placeholder, and icon that is displayed on the view. To customize this, style using a combination of CSS and any of the [CSS custom properties](#css-custom-properties):\n\n```css\nion-select {\n /* Applies to the value and placeholder color */\n color: #545ca7;\n\n /* Set a different placeholder color */\n --placeholder-color: #971e49;\n\n /* Set full opacity on the placeholder */\n --placeholder-opacity: 1;\n}\n```\n\nAlternatively, depending on the [browser support](https://caniuse.com/#feat=mdn-css_selectors_part) needed, CSS shadow parts can be used to style the select:\n\n```css\n/* Set the width to the full container and center the content */\nion-select {\n width: 100%;\n\n justify-content: center;\n}\n\n/* Set the flex in order to size the text width to its content */\nion-select::part(placeholder),\nion-select::part(text) {\n flex: 0 0 auto;\n}\n\n/* Set the placeholder color and opacity */\nion-select::part(placeholder) {\n color: #20a08a;\n opacity: 1;\n}\n\n/*\n * Set the font of the first letter of the placeholder\n * Shadow parts work with pseudo-elements, too!\n * https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\n */\nion-select::part(placeholder)::first-letter {\n font-size: 24px;\n font-weight: 500;\n}\n\n/* Set the text color */\nion-select::part(text) {\n color: #545ca7;\n}\n\n/* Set the icon color and opacity */\nion-select::part(icon) {\n color: #971e49;\n opacity: 1;\n}\n```\n\nNotice that by using `::part`, any CSS property on the element can be targeted.\n\n### Styling Select Interface\n\nCustomizing the interface dialog should be done by following the Customization section in that interface's documentation:\n\n- [Alert Customization](../alert#customization)\n- [Action Sheet Customization](../action-sheet#customization)\n- [Popover Customization](../popover#customization)\n\nHowever, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, see the [Select Options documentation](../select-option) for usage examples of customizing options.\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
},
|
||
{
|
||
"text": "placeholder - The text displayed in the select when there is no value.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "text - The displayed value of the select.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "icon - The select icon container.",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "### Single Selection\n\n```html\n<ion-list>\n <ion-list-header>\n <ion-label>\n Single Selection\n </ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Gender</ion-label>\n <ion-select placeholder=\"Select One\">\n <ion-select-option value=\"f\">Female</ion-select-option>\n <ion-select-option value=\"m\">Male</ion-select-option>\n </ion-select>\n </ion-item>\n\n <ion-item>\n <ion-label>Hair Color</ion-label>\n <ion-select value=\"brown\" okText=\"Okay\" cancelText=\"Dismiss\">\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n </ion-item>\n\n</ion-list>\n```\n\n### Multiple Selection\n\n```html\n<ion-list>\n <ion-list-header>\n <ion-label>\n Multiple Selection\n </ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Toppings</ion-label>\n <ion-select multiple=\"true\" cancelText=\"Nah\" okText=\"Okay!\">\n <ion-select-option value=\"bacon\">Bacon</ion-select-option>\n <ion-select-option value=\"olives\">Black Olives</ion-select-option>\n <ion-select-option value=\"xcheese\">Extra Cheese</ion-select-option>\n <ion-select-option value=\"peppers\">Green Peppers</ion-select-option>\n <ion-select-option value=\"mushrooms\">Mushrooms</ion-select-option>\n <ion-select-option value=\"onions\">Onions</ion-select-option>\n <ion-select-option value=\"pepperoni\">Pepperoni</ion-select-option>\n <ion-select-option value=\"pineapple\">Pineapple</ion-select-option>\n <ion-select-option value=\"sausage\">Sausage</ion-select-option>\n <ion-select-option value=\"Spinach\">Spinach</ion-select-option>\n </ion-select>\n </ion-item>\n\n <ion-item>\n <ion-label>Pets</ion-label>\n <ion-select multiple=\"true\" [value]=\"['bird', 'dog']\">\n <ion-select-option value=\"bird\">Bird</ion-select-option>\n <ion-select-option value=\"cat\">Cat</ion-select-option>\n <ion-select-option value=\"dog\">Dog</ion-select-option>\n <ion-select-option value=\"honeybadger\">Honey Badger</ion-select-option>\n </ion-select>\n </ion-item>\n</ion-list>\n```\n\n### Objects as Values\n\n```html\n<ion-list>\n <ion-list-header>\n <ion-label>\n Objects as Values (compareWith)\n </ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Users</ion-label>\n <ion-select [compareWith]=\"compareWith\">\n <ion-select-option *ngFor=\"let user of users\" [value]=\"user\">{{user.first + ' ' + user.last}}</ion-select-option>\n </ion-select>\n </ion-item>\n</ion-list>\n```\n\n```typescript\nimport { Component } from '@angular/core';\n\ninterface User {\n id: number;\n first: string;\n last: string;\n}\n\n@Component({\n selector: 'select-example',\n templateUrl: 'select-example.html',\n styleUrls: ['./select-example.css'],\n})\nexport class SelectExample {\n users: User[] = [\n {\n id: 1,\n first: 'Alice',\n last: 'Smith',\n },\n {\n id: 2,\n first: 'Bob',\n last: 'Davis',\n },\n {\n id: 3,\n first: 'Charlie',\n last: 'Rosenburg',\n }\n ];\n\n compareWith(o1: User, o2: User) {\n return o1 && o2 ? o1.id === o2.id : o1 === o2;\n }\n}\n```\n\n### Objects as Values with Multiple Selection\n\n```html\n<ion-list>\n <ion-list-header>\n <ion-label>\n Objects as Values (compareWith)\n </ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Users</ion-label>\n <ion-select [compareWith]=\"compareWith\" multiple=\"true\">\n <ion-select-option *ngFor=\"let user of users\" [value]=\"user\">{{user.first + ' ' + user.last}}</ion-select-option>\n </ion-select>\n </ion-item>\n</ion-list>\n```\n\n```typescript\nimport { Component } from '@angular/core';\n\ninterface User {\n id: number;\n first: string;\n last: string;\n}\n\n@Component({\n selector: 'select-example',\n templateUrl: 'select-example.html',\n styleUrls: ['./select-example.css'],\n})\nexport class SelectExample {\n users: User[] = [\n {\n id: 1,\n first: 'Alice',\n last: 'Smith',\n },\n {\n id: 2,\n first: 'Bob',\n last: 'Davis',\n },\n {\n id: 3,\n first: 'Charlie',\n last: 'Rosenburg',\n }\n ];\n\n compareWith(o1: User, o2: User | User[]) {\n if (!o1 || !o2) {\n return o1 === o2;\n }\n\n if (Array.isArray(o2)) {\n return o2.some((u: User) => u.id === o1.id);\n }\n\n return o1.id === o2.id;\n }\n}\n```\n\n### Interface Options\n\n```html\n<ion-list>\n <ion-list-header>\n <ion-label>\n Interface Options\n </ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Alert</ion-label>\n <ion-select [interfaceOptions]=\"customAlertOptions\" interface=\"alert\" multiple=\"true\" placeholder=\"Select One\">\n <ion-select-option value=\"bacon\">Bacon</ion-select-option>\n <ion-select-option value=\"olives\">Black Olives</ion-select-option>\n <ion-select-option value=\"xcheese\">Extra Cheese</ion-select-option>\n <ion-select-option value=\"peppers\">Green Peppers</ion-select-option>\n <ion-select-option value=\"mushrooms\">Mushrooms</ion-select-option>\n <ion-select-option value=\"onions\">Onions</ion-select-option>\n <ion-select-option value=\"pepperoni\">Pepperoni</ion-select-option>\n <ion-select-option value=\"pineapple\">Pineapple</ion-select-option>\n <ion-select-option value=\"sausage\">Sausage</ion-select-option>\n <ion-select-option value=\"Spinach\">Spinach</ion-select-option>\n </ion-select>\n </ion-item>\n\n <ion-item>\n <ion-label>Popover</ion-label>\n <ion-select [interfaceOptions]=\"customPopoverOptions\" interface=\"popover\" placeholder=\"Select One\">\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n </ion-item>\n\n <ion-item>\n <ion-label>Action Sheet</ion-label>\n <ion-select [interfaceOptions]=\"customActionSheetOptions\" interface=\"action-sheet\" placeholder=\"Select One\">\n <ion-select-option value=\"red\">Red</ion-select-option>\n <ion-select-option value=\"purple\">Purple</ion-select-option>\n <ion-select-option value=\"yellow\">Yellow</ion-select-option>\n <ion-select-option value=\"orange\">Orange</ion-select-option>\n <ion-select-option value=\"green\">Green</ion-select-option>\n </ion-select>\n </ion-item>\n\n</ion-list>\n```\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'select-example',\n templateUrl: 'select-example.html',\n styleUrls: ['./select-example.css'],\n})\nexport class SelectExample {\n customAlertOptions: any = {\n header: 'Pizza Toppings',\n subHeader: 'Select your toppings',\n message: '$1.00 per topping',\n translucent: true\n };\n\n customPopoverOptions: any = {\n header: 'Hair Color',\n subHeader: 'Select your hair color',\n message: 'Only select your dominant hair color'\n };\n\n customActionSheetOptions: any = {\n header: 'Colors',\n subHeader: 'Select your favorite color'\n };\n}\n```\n",
|
||
"javascript": "### Single Selection\n\n```html\n<ion-list>\n <ion-list-header>\n <ion-label>\n Single Selection\n </ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Gender</ion-label>\n <ion-select placeholder=\"Select One\">\n <ion-select-option value=\"f\">Female</ion-select-option>\n <ion-select-option value=\"m\">Male</ion-select-option>\n </ion-select>\n </ion-item>\n\n <ion-item>\n <ion-label>Hair Color</ion-label>\n <ion-select value=\"brown\" ok-text=\"Okay\" cancel-text=\"Dismiss\">\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n </ion-item>\n\n</ion-list>\n```\n\n### Multiple Selection\n\n```html\n<ion-list>\n <ion-list-header>\n <ion-label>\n Multiple Selection\n </ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Toppings</ion-label>\n <ion-select multiple=\"true\" cancel-text=\"Nah\" ok-text=\"Okay!\">\n <ion-select-option value=\"bacon\">Bacon</ion-select-option>\n <ion-select-option value=\"olives\">Black Olives</ion-select-option>\n <ion-select-option value=\"xcheese\">Extra Cheese</ion-select-option>\n <ion-select-option value=\"peppers\">Green Peppers</ion-select-option>\n <ion-select-option value=\"mushrooms\">Mushrooms</ion-select-option>\n <ion-select-option value=\"onions\">Onions</ion-select-option>\n <ion-select-option value=\"pepperoni\">Pepperoni</ion-select-option>\n <ion-select-option value=\"pineapple\">Pineapple</ion-select-option>\n <ion-select-option value=\"sausage\">Sausage</ion-select-option>\n <ion-select-option value=\"Spinach\">Spinach</ion-select-option>\n </ion-select>\n </ion-item>\n\n <ion-item>\n <ion-label>Pets</ion-label>\n <ion-select id=\"multiple\" multiple=\"true\">\n <ion-select-option value=\"bird\">Bird</ion-select-option>\n <ion-select-option value=\"cat\">Cat</ion-select-option>\n <ion-select-option value=\"dog\">Dog</ion-select-option>\n <ion-select-option value=\"honeybadger\">Honey Badger</ion-select-option>\n </ion-select>\n </ion-item>\n</ion-list>\n```\n\n```javascript\nconst select = document.querySelector('multiple');\nselect.value = ['bird', 'dog'];\n```\n\n### Objects as Values\n\n```html\n<ion-list>\n <ion-list-header>\n <ion-label>\n Objects as Values (compareWith)\n </ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Users</ion-label>\n <ion-select id=\"objectSelectCompareWith\"></ion-select>\n </ion-item>\n</ion-list>\n```\n\n```javascript\n let objectOptions = [\n {\n id: 1,\n first: 'Alice',\n last: 'Smith',\n },\n {\n id: 2,\n first: 'Bob',\n last: 'Davis',\n },\n {\n id: 3,\n first: 'Charlie',\n last: 'Rosenburg',\n }\n ];\n\n let compareWithFn = (o1, o2) => {\n return o1 && o2 ? o1.id === o2.id : o1 === o2;\n };\n\n let objectSelectElement = document.getElementById('objectSelectCompareWith');\n objectSelectElement.compareWith = compareWithFn;\n\n objectOptions.forEach((option, i) => {\n let selectOption = document.createElement('ion-select-option');\n selectOption.value = option;\n selectOption.textContent = option.first + ' ' + option.last;\n\n objectSelectElement.appendChild(selectOption)\n });\n\n objectSelectElement.value = objectOptions[0];\n}\n```\n\n### Interface Options\n\n```html\n<ion-list>\n <ion-list-header>\n <ion-label>\n Interface Options\n </ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Alert</ion-label>\n <ion-select id=\"customAlertSelect\" interface=\"alert\" multiple=\"true\" placeholder=\"Select One\">\n <ion-select-option value=\"bacon\">Bacon</ion-select-option>\n <ion-select-option value=\"olives\">Black Olives</ion-select-option>\n <ion-select-option value=\"xcheese\">Extra Cheese</ion-select-option>\n <ion-select-option value=\"peppers\">Green Peppers</ion-select-option>\n <ion-select-option value=\"mushrooms\">Mushrooms</ion-select-option>\n <ion-select-option value=\"onions\">Onions</ion-select-option>\n <ion-select-option value=\"pepperoni\">Pepperoni</ion-select-option>\n <ion-select-option value=\"pineapple\">Pineapple</ion-select-option>\n <ion-select-option value=\"sausage\">Sausage</ion-select-option>\n <ion-select-option value=\"Spinach\">Spinach</ion-select-option>\n </ion-select>\n </ion-item>\n\n <ion-item>\n <ion-label>Popover</ion-label>\n <ion-select id=\"customPopoverSelect\" interface=\"popover\" placeholder=\"Select One\">\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n </ion-item>\n\n <ion-item>\n <ion-label>Action Sheet</ion-label>\n <ion-select id=\"customActionSheetSelect\" interface=\"action-sheet\" placeholder=\"Select One\">\n <ion-select-option value=\"red\">Red</ion-select-option>\n <ion-select-option value=\"purple\">Purple</ion-select-option>\n <ion-select-option value=\"yellow\">Yellow</ion-select-option>\n <ion-select-option value=\"orange\">Orange</ion-select-option>\n <ion-select-option value=\"green\">Green</ion-select-option>\n </ion-select>\n </ion-item>\n\n</ion-list>\n```\n\n```javascript\nvar customAlertSelect = document.getElementById('customAlertSelect');\nvar customAlertOptions = {\n header: 'Pizza Toppings',\n subHeader: 'Select your toppings',\n message: '$1.00 per topping',\n translucent: true\n};\ncustomAlertSelect.interfaceOptions = customAlertOptions;\n\nvar customPopoverSelect = document.getElementById('customPopoverSelect');\nvar customPopoverOptions = {\n header: 'Hair Color',\n subHeader: 'Select your hair color',\n message: 'Only select your dominant hair color'\n};\ncustomPopoverSelect.interfaceOptions = customPopoverOptions;\n\nvar customActionSheetSelect = document.getElementById('customActionSheetSelect');\nvar customActionSheetOptions = {\n header: 'Colors',\n subHeader: 'Select your favorite color'\n};\ncustomActionSheetSelect.interfaceOptions = customActionSheetOptions;\n```",
|
||
"react": "### Single Selection\n\n```tsx\nimport React, { useState } from 'react';\nimport { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonPage, IonItemDivider } from '@ionic/react';\n\nexport const SingleSelection: React.FC = () => {\n\n const [gender, setGender] = useState<string>();\n const [hairColor, setHairColor] = useState<string>('brown');\n\n return (\n <IonPage>\n <IonContent>\n <IonList>\n <IonListHeader>\n <IonLabel>\n Single Selection\n </IonLabel>\n </IonListHeader>\n\n <IonItem>\n <IonLabel>Gender</IonLabel>\n <IonSelect value={gender} placeholder=\"Select One\" onIonChange={e => setGender(e.detail.value)}>\n <IonSelectOption value=\"female\">Female</IonSelectOption>\n <IonSelectOption value=\"male\">Male</IonSelectOption>\n </IonSelect>\n </IonItem>\n\n <IonItem>\n <IonLabel>Hair Color</IonLabel>\n <IonSelect value={hairColor} okText=\"Okay\" cancelText=\"Dismiss\" onIonChange={e => setHairColor(e.detail.value)}>\n <IonSelectOption value=\"brown\">Brown</IonSelectOption>\n <IonSelectOption value=\"blonde\">Blonde</IonSelectOption>\n <IonSelectOption value=\"black\">Black</IonSelectOption>\n <IonSelectOption value=\"red\">Red</IonSelectOption>\n </IonSelect>\n </IonItem>\n <IonItemDivider>Your Selections</IonItemDivider>\n <IonItem>Gender: {gender ?? '(none selected)'}</IonItem>\n <IonItem>Hair Color: {hairColor}</IonItem>\n </IonList>\n </IonContent>\n </IonPage>\n );\n};\n```\n\n\n### Multiple Selection\n\n```tsx\nimport React, { useState } from 'react';\nimport { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonPage, IonItemDivider } from '@ionic/react';\n\nexport const MultipleSelection: React.FC = () => {\n\n const [toppings, setToppings] = useState<string[]>([]);\n const [pets, setPets] = useState<string[]>(['bird', 'dog']);\n\n return (\n <IonPage>\n <IonContent>\n <IonList>\n <IonListHeader>\n <IonLabel>\n Multiple Selection\n </IonLabel>\n </IonListHeader>\n\n <IonItem>\n <IonLabel>Toppings</IonLabel>\n <IonSelect value={toppings} multiple={true} cancelText=\"Nah\" okText=\"Okay!\" onIonChange={e => setToppings(e.detail.value)}>\n <IonSelectOption value=\"bacon\">Bacon</IonSelectOption>\n <IonSelectOption value=\"olives\">Black Olives</IonSelectOption>\n <IonSelectOption value=\"xcheese\">Extra Cheese</IonSelectOption>\n <IonSelectOption value=\"peppers\">Green Peppers</IonSelectOption>\n <IonSelectOption value=\"mushrooms\">Mushrooms</IonSelectOption>\n <IonSelectOption value=\"onions\">Onions</IonSelectOption>\n <IonSelectOption value=\"pepperoni\">Pepperoni</IonSelectOption>\n <IonSelectOption value=\"pineapple\">Pineapple</IonSelectOption>\n <IonSelectOption value=\"sausage\">Sausage</IonSelectOption>\n <IonSelectOption value=\"Spinach\">Spinach</IonSelectOption>\n </IonSelect>\n </IonItem>\n\n <IonItem>\n <IonLabel>Pets</IonLabel>\n <IonSelect multiple={true} value={pets} onIonChange={e => setPets(e.detail.value)}>\n <IonSelectOption value=\"bird\">Bird</IonSelectOption>\n <IonSelectOption value=\"cat\">Cat</IonSelectOption>\n <IonSelectOption value=\"dog\">Dog</IonSelectOption>\n <IonSelectOption value=\"honeybadger\">Honey Badger</IonSelectOption>\n </IonSelect>\n </IonItem>\n <IonItemDivider>Your Selections</IonItemDivider>\n <IonItem>Toppings: {toppings.length ? toppings.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'}</IonItem>\n <IonItem>Pets: {pets.length ? pets.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'}</IonItem>\n </IonList>\n </IonContent>\n </IonPage>\n );\n};\n```\n\n\n### Objects as Values\n\n```tsx\nimport React, { useState } from 'react';\nimport { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonPage, IonItemDivider } from '@ionic/react';\n\nconst users = [\n {\n id: 1,\n first: 'Alice',\n last: 'Smith'\n },\n {\n id: 2,\n first: 'Bob',\n last: 'Davis'\n },\n {\n id: 3,\n first: 'Charlie',\n last: 'Rosenburg',\n }\n];\n\ntype User = typeof users[number];\n\nconst compareWith = (o1: User, o2: User) => {\n return o1 && o2 ? o1.id === o2.id : o1 === o2;\n};\n\nexport const ObjectSelection: React.FC = () => {\n\n const [selectedUsers, setSelectedUsers] = useState<User[]>([]);\n\n return (\n <IonPage>\n <IonContent>\n <IonList>\n <IonListHeader>\n <IonLabel>\n Objects as Values (compareWith)\n </IonLabel>\n </IonListHeader>\n <IonItem>\n <IonLabel>Users</IonLabel>\n <IonSelect compareWith={compareWith} value={selectedUsers} multiple onIonChange={e => setSelectedUsers(e.detail.value)}>\n {users.map(user => (\n <IonSelectOption key={user.id} value={user}>\n {user.first} {user.last}\n </IonSelectOption>\n ))}\n </IonSelect>\n </IonItem>\n <IonItemDivider>Selected Users</IonItemDivider>\n {selectedUsers.length ?\n selectedUsers.map(user => <IonItem key={user.id}>{user.first} {user.last}</IonItem>) :\n <IonItem>(none selected)</IonItem>\n }\n </IonList>\n </IonContent>\n </IonPage>\n );\n};\n```\n\n\n### Interface Options\n\n```tsx\nimport React, { useState } from 'react';\nimport { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonPage, IonItemDivider } from '@ionic/react';\n\nconst customAlertOptions = {\n header: 'Pizza Toppings',\n subHeader: 'Select your toppings',\n message: '$1.00 per topping',\n translucent: true\n};\n\nconst customPopoverOptions = {\n header: 'Hair Color',\n subHeader: 'Select your hair color',\n message: 'Only select your dominant hair color'\n};\n\nconst customActionSheetOptions = {\n header: 'Colors',\n subHeader: 'Select your favorite color'\n};\n\nexport const InterfaceOptionsSelection: React.FC = () => {\n\n const [toppings, setToppings] = useState<string[]>([]);\n const [hairColor, setHairColor] = useState<string>('brown');\n const [color, setColor] = useState<string>();\n\n return (\n <IonPage>\n <IonContent>\n <IonList>\n <IonListHeader>\n <IonLabel>\n Interface Options\n </IonLabel>\n </IonListHeader>\n\n <IonItem>\n <IonLabel>Alert</IonLabel>\n <IonSelect\n interfaceOptions={customAlertOptions}\n interface=\"alert\"\n multiple={true}\n placeholder=\"Select One\"\n onIonChange={e => setToppings(e.detail.value)}\n value={toppings}\n >\n <IonSelectOption value=\"bacon\">Bacon</IonSelectOption>\n <IonSelectOption value=\"olives\">Black Olives</IonSelectOption>\n <IonSelectOption value=\"xcheese\">Extra Cheese</IonSelectOption>\n <IonSelectOption value=\"peppers\">Green Peppers</IonSelectOption>\n <IonSelectOption value=\"mushrooms\">Mushrooms</IonSelectOption>\n <IonSelectOption value=\"onions\">Onions</IonSelectOption>\n <IonSelectOption value=\"pepperoni\">Pepperoni</IonSelectOption>\n <IonSelectOption value=\"pineapple\">Pineapple</IonSelectOption>\n <IonSelectOption value=\"sausage\">Sausage</IonSelectOption>\n <IonSelectOption value=\"Spinach\">Spinach</IonSelectOption>\n </IonSelect>\n </IonItem>\n\n <IonItem>\n <IonLabel>Popover</IonLabel>\n <IonSelect\n interfaceOptions={customPopoverOptions}\n interface=\"popover\"\n placeholder=\"Select One\"\n onIonChange={e => setHairColor(e.detail.value)}\n value={hairColor}>\n <IonSelectOption value=\"brown\">Brown</IonSelectOption>\n <IonSelectOption value=\"blonde\">Blonde</IonSelectOption>\n <IonSelectOption value=\"black\">Black</IonSelectOption>\n <IonSelectOption value=\"red\">Red</IonSelectOption>\n </IonSelect>\n </IonItem>\n\n <IonItem>\n <IonLabel>Action Sheet</IonLabel>\n <IonSelect\n interfaceOptions={customActionSheetOptions}\n interface=\"action-sheet\"\n placeholder=\"Select One\"\n onIonChange={e => setColor(e.detail.value)}\n value={color}\n >\n <IonSelectOption value=\"red\">Red</IonSelectOption>\n <IonSelectOption value=\"purple\">Purple</IonSelectOption>\n <IonSelectOption value=\"yellow\">Yellow</IonSelectOption>\n <IonSelectOption value=\"orange\">Orange</IonSelectOption>\n <IonSelectOption value=\"green\">Green</IonSelectOption>\n </IonSelect>\n </IonItem>\n\n <IonItemDivider>Your Selections</IonItemDivider>\n <IonItem>Toppings: {toppings.length ? toppings.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'}</IonItem>\n <IonItem>Hair Color: {hairColor}</IonItem>\n <IonItem>Color: {color ?? '(none selected)'}</IonItem>\n </IonList>\n </IonContent>\n </IonPage>\n );\n};\n```",
|
||
"stencil": "### Single Selection\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'select-example',\n styleUrl: 'select-example.css'\n})\nexport class SelectExample {\n render() {\n return [\n <ion-list>\n <ion-list-header>\n <ion-label>\n Single Selection\n </ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Gender</ion-label>\n <ion-select placeholder=\"Select One\">\n <ion-select-option value=\"f\">Female</ion-select-option>\n <ion-select-option value=\"m\">Male</ion-select-option>\n </ion-select>\n </ion-item>\n\n <ion-item>\n <ion-label>Hair Color</ion-label>\n <ion-select value=\"brown\" okText=\"Okay\" cancelText=\"Dismiss\">\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n </ion-item>\n\n </ion-list>\n ];\n }\n}\n```\n\n### Multiple Selection\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'select-example',\n styleUrl: 'select-example.css'\n})\nexport class SelectExample {\n render() {\n return [\n <ion-list>\n <ion-list-header>\n <ion-label>\n Multiple Selection\n </ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Toppings</ion-label>\n <ion-select multiple={true} cancelText=\"Nah\" okText=\"Okay!\">\n <ion-select-option value=\"bacon\">Bacon</ion-select-option>\n <ion-select-option value=\"olives\">Black Olives</ion-select-option>\n <ion-select-option value=\"xcheese\">Extra Cheese</ion-select-option>\n <ion-select-option value=\"peppers\">Green Peppers</ion-select-option>\n <ion-select-option value=\"mushrooms\">Mushrooms</ion-select-option>\n <ion-select-option value=\"onions\">Onions</ion-select-option>\n <ion-select-option value=\"pepperoni\">Pepperoni</ion-select-option>\n <ion-select-option value=\"pineapple\">Pineapple</ion-select-option>\n <ion-select-option value=\"sausage\">Sausage</ion-select-option>\n <ion-select-option value=\"Spinach\">Spinach</ion-select-option>\n </ion-select>\n </ion-item>\n\n <ion-item>\n <ion-label>Pets</ion-label>\n <ion-select multiple={true} value={['bird', 'dog']}>\n <ion-select-option value=\"bird\">Bird</ion-select-option>\n <ion-select-option value=\"cat\">Cat</ion-select-option>\n <ion-select-option value=\"dog\">Dog</ion-select-option>\n <ion-select-option value=\"honeybadger\">Honey Badger</ion-select-option>\n </ion-select>\n </ion-item>\n </ion-list>\n ];\n }\n}\n```\n\n### Objects as Values\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'select-example',\n styleUrl: 'select-example.css'\n})\nexport class SelectExample {\n private users: any[] = [\n {\n id: 1,\n first: 'Alice',\n last: 'Smith',\n },\n {\n id: 2,\n first: 'Bob',\n last: 'Davis',\n },\n {\n id: 3,\n first: 'Charlie',\n last: 'Rosenburg',\n }\n ];\n\n compareWith = (o1, o2) => {\n return o1 && o2 ? o1.id === o2.id : o1 === o2;\n };\n\n render() {\n return [\n <ion-list>\n <ion-list-header>\n <ion-label>\n Objects as Values (compareWith)\n </ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Users</ion-label>\n <ion-select compareWith={this.compareWith}>\n {this.users.map(user =>\n <ion-select-option value={user}>\n {user.first + ' ' + user.last}\n </ion-select-option>\n )}\n </ion-select>\n </ion-item>\n </ion-list>\n ];\n }\n}\n```\n\n### Interface Options\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'select-example',\n styleUrl: 'select-example.css'\n})\nexport class SelectExample {\n private customAlertOptions: any = {\n header: 'Pizza Toppings',\n subHeader: 'Select your toppings',\n message: '$1.00 per topping',\n translucent: true\n };\n\n private customPopoverOptions: any = {\n header: 'Hair Color',\n subHeader: 'Select your hair color',\n message: 'Only select your dominant hair color'\n };\n\n private customActionSheetOptions: any = {\n header: 'Colors',\n subHeader: 'Select your favorite color'\n };\n\n render() {\n return [\n <ion-list>\n <ion-list-header>\n <ion-label>\n Interface Options\n </ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Alert</ion-label>\n <ion-select interfaceOptions={this.customAlertOptions} interface=\"alert\" multiple={true} placeholder=\"Select One\">\n <ion-select-option value=\"bacon\">Bacon</ion-select-option>\n <ion-select-option value=\"olives\">Black Olives</ion-select-option>\n <ion-select-option value=\"xcheese\">Extra Cheese</ion-select-option>\n <ion-select-option value=\"peppers\">Green Peppers</ion-select-option>\n <ion-select-option value=\"mushrooms\">Mushrooms</ion-select-option>\n <ion-select-option value=\"onions\">Onions</ion-select-option>\n <ion-select-option value=\"pepperoni\">Pepperoni</ion-select-option>\n <ion-select-option value=\"pineapple\">Pineapple</ion-select-option>\n <ion-select-option value=\"sausage\">Sausage</ion-select-option>\n <ion-select-option value=\"Spinach\">Spinach</ion-select-option>\n </ion-select>\n </ion-item>\n\n <ion-item>\n <ion-label>Popover</ion-label>\n <ion-select interfaceOptions={this.customPopoverOptions} interface=\"popover\" placeholder=\"Select One\">\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n </ion-item>\n\n <ion-item>\n <ion-label>Action Sheet</ion-label>\n <ion-select interfaceOptions={this.customActionSheetOptions} interface=\"action-sheet\" placeholder=\"Select One\">\n <ion-select-option value=\"red\">Red</ion-select-option>\n <ion-select-option value=\"purple\">Purple</ion-select-option>\n <ion-select-option value=\"yellow\">Yellow</ion-select-option>\n <ion-select-option value=\"orange\">Orange</ion-select-option>\n <ion-select-option value=\"green\">Green</ion-select-option>\n </ion-select>\n </ion-item>\n </ion-list>\n ];\n }\n}\n```",
|
||
"vue": "### Single Selection\n\n```html\n<template>\n <ion-list>\n <ion-list-header>\n <ion-label>\n Single Selection\n </ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Gender</ion-label>\n <ion-select placeholder=\"Select One\">\n <ion-select-option value=\"f\">Female</ion-select-option>\n <ion-select-option value=\"m\">Male</ion-select-option>\n </ion-select>\n </ion-item>\n\n <ion-item>\n <ion-label>Hair Color</ion-label>\n <ion-select value=\"brown\" ok-text=\"Okay\" cancel-text=\"Dismiss\">\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n </ion-item>\n\n </ion-list>\n</template>\n\n<script>\nimport { \n IonItem, \n IonLabel, \n IonList,\n IonListHeader,\n IonSelect,\n IonSelectOption\n} from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: {\n IonItem, \n IonLabel, \n IonList,\n IonListHeader,\n IonSelect,\n IonSelectOption\n }\n});\n</script>\n```\n\n### Multiple Selection\n\n```html\n<template>\n <ion-list>\n <ion-list-header>\n <ion-label>\n Multiple Selection\n </ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Toppings</ion-label>\n <ion-select multiple=\"true\" cancel-text=\"Nah\" ok-text=\"Okay!\">\n <ion-select-option value=\"bacon\">Bacon</ion-select-option>\n <ion-select-option value=\"olives\">Black Olives</ion-select-option>\n <ion-select-option value=\"xcheese\">Extra Cheese</ion-select-option>\n <ion-select-option value=\"peppers\">Green Peppers</ion-select-option>\n <ion-select-option value=\"mushrooms\">Mushrooms</ion-select-option>\n <ion-select-option value=\"onions\">Onions</ion-select-option>\n <ion-select-option value=\"pepperoni\">Pepperoni</ion-select-option>\n <ion-select-option value=\"pineapple\">Pineapple</ion-select-option>\n <ion-select-option value=\"sausage\">Sausage</ion-select-option>\n <ion-select-option value=\"Spinach\">Spinach</ion-select-option>\n </ion-select>\n </ion-item>\n\n <ion-item>\n <ion-label>Pets</ion-label>\n <ion-select multiple=\"true\" :value=['bird', 'dog']>\n <ion-select-option value=\"bird\">Bird</ion-select-option>\n <ion-select-option value=\"cat\">Cat</ion-select-option>\n <ion-select-option value=\"dog\">Dog</ion-select-option>\n <ion-select-option value=\"honeybadger\">Honey Badger</ion-select-option>\n </ion-select>\n </ion-item>\n </ion-list>\n</template>\n\n<script>\nimport { \n IonItem, \n IonLabel, \n IonList,\n IonListHeader,\n IonSelect,\n IonSelectOption\n} from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: {\n IonItem, \n IonLabel, \n IonList,\n IonListHeader,\n IonSelect,\n IonSelectOption\n }\n});\n</script>\n```\n\n### Interface Options\n\n```html\n<template>\n <ion-list>\n <ion-list-header>\n <ion-label>\n Interface Options\n </ion-label>\n </ion-list-header>\n\n <ion-item>\n <ion-label>Alert</ion-label>\n <ion-select :interface-options=\"customAlertOptions\" interface=\"alert\" multiple=\"true\" placeholder=\"Select One\">\n <ion-select-option value=\"bacon\">Bacon</ion-select-option>\n <ion-select-option value=\"olives\">Black Olives</ion-select-option>\n <ion-select-option value=\"xcheese\">Extra Cheese</ion-select-option>\n <ion-select-option value=\"peppers\">Green Peppers</ion-select-option>\n <ion-select-option value=\"mushrooms\">Mushrooms</ion-select-option>\n <ion-select-option value=\"onions\">Onions</ion-select-option>\n <ion-select-option value=\"pepperoni\">Pepperoni</ion-select-option>\n <ion-select-option value=\"pineapple\">Pineapple</ion-select-option>\n <ion-select-option value=\"sausage\">Sausage</ion-select-option>\n <ion-select-option value=\"Spinach\">Spinach</ion-select-option>\n </ion-select>\n </ion-item>\n\n <ion-item>\n <ion-label>Popover</ion-label>\n <ion-select :interface-options=\"customPopoverOptions\" interface=\"popover\" placeholder=\"Select One\">\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n </ion-item>\n\n <ion-item>\n <ion-label>Action Sheet</ion-label>\n <ion-select :interface-options=\"customActionSheetOptions\" interface=\"action-sheet\" placeholder=\"Select One\">\n <ion-select-option value=\"red\">Red</ion-select-option>\n <ion-select-option value=\"purple\">Purple</ion-select-option>\n <ion-select-option value=\"yellow\">Yellow</ion-select-option>\n <ion-select-option value=\"orange\">Orange</ion-select-option>\n <ion-select-option value=\"green\">Green</ion-select-option>\n </ion-select>\n </ion-item>\n\n </ion-list>\n</template>\n\n<script>\nimport { \n IonItem, \n IonLabel, \n IonList,\n IonListHeader,\n IonSelect,\n IonSelectOption\n} from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: {\n IonItem, \n IonLabel, \n IonList,\n IonListHeader,\n IonSelect,\n IonSelectOption\n },\n setup() {\n const customAlertOptions: any = {\n header: 'Pizza Toppings',\n subHeader: 'Select your toppings',\n message: '$1.00 per topping',\n translucent: true\n };\n\n const customPopoverOptions: any = {\n header: 'Hair Color',\n subHeader: 'Select your hair color',\n message: 'Only select your dominant hair color'\n };\n\n const customActionSheetOptions: any = {\n header: 'Colors',\n subHeader: 'Select your favorite color'\n };\n \n return {\n customAlertOptions,\n customPopoverOptions,\n customActionSheetOptions\n }\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "cancelText",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "cancel-text",
|
||
"reflectToAttr": false,
|
||
"docs": "The text to display on the cancel button.",
|
||
"docsTags": [],
|
||
"default": "'Cancel'",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "compareWith",
|
||
"type": "((currentValue: any, compareValue: any) => boolean) | null | string | undefined",
|
||
"mutable": false,
|
||
"attr": "compare-with",
|
||
"reflectToAttr": false,
|
||
"docs": "A property name or function used to compare object values",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((currentValue: any, compareValue: any) => boolean)"
|
||
},
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot interact with the select.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "interface",
|
||
"type": "\"action-sheet\" | \"alert\" | \"popover\"",
|
||
"mutable": false,
|
||
"attr": "interface",
|
||
"reflectToAttr": false,
|
||
"docs": "The interface the select should use: `action-sheet`, `popover` or `alert`.",
|
||
"docsTags": [],
|
||
"default": "'alert'",
|
||
"values": [
|
||
{
|
||
"value": "action-sheet",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "alert",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "popover",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "interfaceOptions",
|
||
"type": "any",
|
||
"mutable": false,
|
||
"attr": "interface-options",
|
||
"reflectToAttr": false,
|
||
"docs": "Any additional options that the `alert`, `action-sheet` or `popover` interface\ncan take. See the [ion-alert docs](../alert), the\n[ion-action-sheet docs](../action-sheet) and the\n[ion-popover docs](../popover) for the\ncreate options for each interface.\n\nNote: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.",
|
||
"docsTags": [],
|
||
"default": "{}",
|
||
"values": [
|
||
{
|
||
"type": "any"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "multiple",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "multiple",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the select can accept multiple values.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "name",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "name",
|
||
"reflectToAttr": false,
|
||
"docs": "The name of the control, which is submitted with the form data.",
|
||
"docsTags": [],
|
||
"default": "this.inputId",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "okText",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "ok-text",
|
||
"reflectToAttr": false,
|
||
"docs": "The text to display on the ok button.",
|
||
"docsTags": [],
|
||
"default": "'OK'",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "placeholder",
|
||
"type": "null | string | undefined",
|
||
"mutable": false,
|
||
"attr": "placeholder",
|
||
"reflectToAttr": false,
|
||
"docs": "The text to display when the select is empty.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "selectedText",
|
||
"type": "null | string | undefined",
|
||
"mutable": false,
|
||
"attr": "selected-text",
|
||
"reflectToAttr": false,
|
||
"docs": "The text to display instead of the selected option's value.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "any",
|
||
"mutable": true,
|
||
"attr": "value",
|
||
"reflectToAttr": false,
|
||
"docs": "the value of the select.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "any"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "open",
|
||
"returns": {
|
||
"type": "Promise<any>",
|
||
"docs": ""
|
||
},
|
||
"signature": "open(event?: UIEvent | undefined) => Promise<any>",
|
||
"parameters": [],
|
||
"docs": "Open the select overlay. The overlay is either an alert, action sheet, or popover,\ndepending on the `interface` property on the `ion-select`.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "event The user interface event that called the open."
|
||
}
|
||
]
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionBlur",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the select loses focus.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionCancel",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the selection is cancelled.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionChange",
|
||
"detail": "SelectChangeEventDetail<any>",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the value has changed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionFocus",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the select has focus.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--padding-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom padding of the select"
|
||
},
|
||
{
|
||
"name": "--padding-end",
|
||
"annotation": "prop",
|
||
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select"
|
||
},
|
||
{
|
||
"name": "--padding-start",
|
||
"annotation": "prop",
|
||
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select"
|
||
},
|
||
{
|
||
"name": "--padding-top",
|
||
"annotation": "prop",
|
||
"docs": "Top padding of the select"
|
||
},
|
||
{
|
||
"name": "--placeholder-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the select placeholder text"
|
||
},
|
||
{
|
||
"name": "--placeholder-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the select placeholder text"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [
|
||
{
|
||
"name": "icon",
|
||
"docs": "The select icon container."
|
||
},
|
||
{
|
||
"name": "placeholder",
|
||
"docs": "The text displayed in the select when there is no value."
|
||
},
|
||
{
|
||
"name": "text",
|
||
"docs": "The displayed value of the select."
|
||
}
|
||
],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/select-option/select-option.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-select-option",
|
||
"readme": "# ion-select-option\n\nSelect 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).\n\n## Customization\n\nEach `ion-select-option` component that is added as a child of an `ion-select` is passed to the interface to display it in the dialog. It's important to note that the `ion-select-option` element itself is hidden from the view. This means that attempting to style it will not have any effect on the option in the dialog:\n\n```css\n/* DOES NOT work */\nion-select-option {\n color: red;\n}\n```\n\nInstead, each interface option has the class `.select-interface-option` which can be styled. Keep in mind that due to the overlays being scoped components the selector by itself will not work and a custom `cssClass` is recommended to be passed to the interface.\n\n```css\n/* This will NOT work on its own */\n.select-interface-option {\n color: red;\n}\n\n/*\n * \"my-custom-interface\" needs to be passed in through\n * the cssClass of the interface options for this to work\n */\n.my-custom-interface .select-interface-option {\n color: red;\n}\n```\n\n> Note: Some interfaces require more in depth styling due to how the options are rendered. See usage for expanded information on this.\n\nThe options can be styled individually by adding your own class on the `ion-select-option` which gets passed to the interface option. See the [Usage](#usage) section below for examples of styling and setting individual classes on options.\n\n",
|
||
"docs": "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).",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"javascript": "```html\n<ion-item>\n <ion-label>Select</ion-label>\n <ion-select>\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n</ion-item>\n```\n\n### Customizing Options\n\n```html\n<ion-item>\n <ion-label>Select: Alert Interface</ion-label>\n <ion-select class=\"custom-options\">\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n</ion-item>\n\n<ion-item>\n <ion-label>Select: Alert Interface (Multiple Selection)</ion-label>\n <ion-select class=\"custom-options\" multiple=\"true\">\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n</ion-item>\n\n<ion-item>\n <ion-label>Select: Popover Interface</ion-label>\n <ion-select interface=\"popover\" class=\"custom-options\">\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n</ion-item>\n\n<ion-item>\n <ion-label>Select: Action Sheet Interface</ion-label>\n <ion-select interface=\"action-sheet\" class=\"custom-options\">\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n</ion-item>\n```\n\n```css\n/* Popover Interface: set color for the popover using Item's CSS variables */\n.my-custom-interface .select-interface-option {\n --color: #971e49;\n --color-hover: #79193b;\n}\n\n/* Action Sheet Interface: set color for the action sheet using its button CSS variables */\n.my-custom-interface .select-interface-option {\n --button-color: #971e49;\n --button-color-hover: #79193b;\n}\n\n/* Alert Interface: set color for alert options (single selection) */\n.my-custom-interface .select-interface-option .alert-radio-label {\n color: #971e49;\n}\n\n/* Alert Interface: set color for alert options (multiple selection) */\n.my-custom-interface .select-interface-option .alert-checkbox-label {\n color: #971e49;\n}\n\n/* Alert Interface: set color for checked alert options (single selection) */\n.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label {\n color: #79193b;\n}\n\n/* Alert Interface: set color for checked alert options (multiple selection) */\n.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label {\n color: #79193b;\n}\n```\n\n```javascript\n// Pass a custom class to each select interface for styling\nconst selects = document.querySelectorAll('.custom-options');\n\nfor (var i = 0; i < selects.length; i++) {\n selects[i].interfaceOptions = {\n cssClass: 'my-custom-interface'\n };\n};\n```\n\n> Note: In the CSS examples, some of the selectors could be combined together, but are separated out in order to better explain what each selector is for.\n\n### Customizing Individual Options\n\nTo customize an individual option, set a class on the `ion-select-option`:\n\n```html\n<ion-item>\n <ion-label>Select</ion-label>\n <ion-select class=\"custom-options\" interface=\"popover\">\n <ion-select-option value=\"brown\" class=\"brown-option\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n</ion-item>\n```\n\n```css\n/* Popover Interface: set color for the popover using Item's CSS variables */\n.my-custom-interface .brown-option {\n --color: #5e3e2c;\n --color-hover: #362419;\n}\n```\n\n```javascript\n// Pass a custom class to each select interface for styling\nconst select = document.querySelector('.custom-options');\nselect.interfaceOptions = {\n cssClass: 'my-custom-interface'\n};\n```",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonPage } from '@ionic/react';\n\nexport const SelectOptionExample: React.FC = () => {\n return (\n <IonPage>\n <IonContent>\n <IonItem>\n <IonLabel>Select</IonLabel>\n <IonSelect>\n <IonSelectOption value=\"brown\">Brown</IonSelectOption>\n <IonSelectOption value=\"blonde\">Blonde</IonSelectOption>\n <IonSelectOption value=\"black\">Black</IonSelectOption>\n <IonSelectOption value=\"red\">Red</IonSelectOption>\n </IonSelect>\n </IonItem>\n </IonContent>\n </IonPage>\n );\n};\n```\n\n### Customizing Options\n\n```tsx\nimport React from 'react';\nimport { IonContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonPage } from '@ionic/react';\n\nconst options = {\n cssClass: 'my-custom-interface'\n};\n\nexport const SelectOptionExample: React.FC = () => {\n return (\n <IonPage>\n <IonContent>\n <IonItem>\n <IonLabel>Select: Alert Interface</IonLabel>\n <IonSelect interfaceOptions={options}>\n <IonSelectOption value=\"brown\">Brown</IonSelectOption>\n <IonSelectOption value=\"blonde\">Blonde</IonSelectOption>\n <IonSelectOption value=\"black\">Black</IonSelectOption>\n <IonSelectOption value=\"red\">Red</IonSelectOption>\n </IonSelect>\n </IonItem>\n\n <IonItem>\n <IonLabel>Select: Alert Interface (Multiple Selection)</IonLabel>\n <IonSelect interfaceOptions={options} multiple={true}>\n <IonSelectOption value=\"brown\">Brown</IonSelectOption>\n <IonSelectOption value=\"blonde\">Blonde</IonSelectOption>\n <IonSelectOption value=\"black\">Black</IonSelectOption>\n <IonSelectOption value=\"red\">Red</IonSelectOption>\n </IonSelect>\n </IonItem>\n\n <IonItem>\n <IonLabel>Select: Popover Interface</IonLabel>\n <IonSelect interface=\"popover\" interfaceOptions={options}>\n <IonSelectOption value=\"brown\">Brown</IonSelectOption>\n <IonSelectOption value=\"blonde\">Blonde</IonSelectOption>\n <IonSelectOption value=\"black\">Black</IonSelectOption>\n <IonSelectOption value=\"red\">Red</IonSelectOption>\n </IonSelect>\n </IonItem>\n\n <IonItem>\n <IonLabel>Select: Action Sheet Interface</IonLabel>\n <IonSelect interface=\"action-sheet\" interfaceOptions={options}>\n <IonSelectOption value=\"brown\">Brown</IonSelectOption>\n <IonSelectOption value=\"blonde\">Blonde</IonSelectOption>\n <IonSelectOption value=\"black\">Black</IonSelectOption>\n <IonSelectOption value=\"red\">Red</IonSelectOption>\n </IonSelect>\n </IonItem>\n </IonContent>\n </IonPage>\n );\n};\n```\n\n```css\n/* Popover Interface: set color for the popover using Item's CSS variables */\n.my-custom-interface .select-interface-option {\n --color: #971e49;\n --color-hover: #79193b;\n}\n\n/* Action Sheet Interface: set color for the action sheet using its button CSS variables */\n.my-custom-interface .select-interface-option {\n --button-color: #971e49;\n --button-color-hover: #79193b;\n}\n\n/* Alert Interface: set color for alert options (single selection) */\n.my-custom-interface .select-interface-option .alert-radio-label {\n color: #971e49;\n}\n\n/* Alert Interface: set color for alert options (multiple selection) */\n.my-custom-interface .select-interface-option .alert-checkbox-label {\n color: #971e49;\n}\n\n/* Alert Interface: set color for checked alert options (single selection) */\n.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label {\n color: #79193b;\n}\n\n/* Alert Interface: set color for checked alert options (multiple selection) */\n.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label {\n color: #79193b;\n}\n```\n\n> Note: In the CSS examples, some of the selectors could be combined together, but are separated out in order to better explain what each selector is for.\n\n\n### Customizing Individual Options\n\nTo customize an individual option, set a class on the `ion-select-option`:\n\n```tsx\nimport React from 'react';\nimport { IonContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonPage } from '@ionic/react';\n\nconst options = {\n cssClass: 'my-custom-interface'\n};\n\nexport const SelectOptionExample: React.FC = () => {\n return (\n <IonPage>\n <IonContent>\n <IonItem>\n <IonLabel>Select</IonLabel>\n <IonSelect interface=\"popover\" interfaceOptions={options}>\n <IonSelectOption value=\"brown\" class=\"brown-option\">Brown</IonSelectOption>\n <IonSelectOption value=\"blonde\">Blonde</IonSelectOption>\n <IonSelectOption value=\"black\">Black</IonSelectOption>\n <IonSelectOption value=\"red\">Red</IonSelectOption>\n </IonSelect>\n </IonItem>\n </IonContent>\n </IonPage>\n );\n};\n```\n\n```css\n/* Popover Interface: set color for the popover using Item's CSS variables */\n.my-custom-interface .brown-option {\n --color: #5e3e2c;\n --color-hover: #362419;\n}\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'select-option-example',\n styleUrl: 'select-option-example.css'\n})\nexport class SelectOptionExample {\n render() {\n return [\n <ion-item>\n <ion-label>Select</ion-label>\n <ion-select>\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n </ion-item>\n ];\n }\n}\n```\n\n### Customizing Options\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'select-option-example',\n styleUrl: 'select-option-example.css'\n})\nexport class SelectOptionExample {\n options = {\n cssClass: 'my-custom-interface'\n };\n\n render() {\n return [\n <ion-item>\n <ion-label>Select: Alert Interface</ion-label>\n <ion-select interfaceOptions={options}>\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n </ion-item>,\n\n <ion-item>\n <ion-label>Select: Alert Interface (Multiple Selection)</ion-label>\n <ion-select interfaceOptions={options} multiple={true}>\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n </ion-item>,\n\n <ion-item>\n <ion-label>Select: Popover Interface</ion-label>\n <ion-select interface=\"popover\" interfaceOptions={options}>\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n </ion-item>,\n\n <ion-item>\n <ion-label>Select: Action Sheet Interface</ion-label>\n <ion-select interface=\"action-sheet\" interfaceOptions={options}>\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n </ion-item>\n ];\n }\n}\n```\n\n```css\n/* Popover Interface: set color for the popover using Item's CSS variables */\n.my-custom-interface .select-interface-option {\n --color: #971e49;\n --color-hover: #79193b;\n}\n\n/* Action Sheet Interface: set color for the action sheet using its button CSS variables */\n.my-custom-interface .select-interface-option {\n --button-color: #971e49;\n --button-color-hover: #79193b;\n}\n\n/* Alert Interface: set color for alert options (single selection) */\n.my-custom-interface .select-interface-option .alert-radio-label {\n color: #971e49;\n}\n\n/* Alert Interface: set color for alert options (multiple selection) */\n.my-custom-interface .select-interface-option .alert-checkbox-label {\n color: #971e49;\n}\n\n/* Alert Interface: set color for checked alert options (single selection) */\n.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label {\n color: #79193b;\n}\n\n/* Alert Interface: set color for checked alert options (multiple selection) */\n.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label {\n color: #79193b;\n}\n```\n\n> Note: In the CSS examples, some of the selectors could be combined together, but are separated out in order to better explain what each selector is for.\n\n### Customizing Individual Options\n\nTo customize an individual option, set a class on the `ion-select-option`:\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'select-option-example',\n styleUrl: 'select-option-example.css'\n})\nexport class SelectOptionExample {\n options = {\n cssClass: 'my-custom-interface'\n };\n\n render() {\n return [\n <ion-item>\n <ion-label>Select</ion-label>\n <ion-select interface=\"popover\" interfaceOptions={options}>\n <ion-select-option value=\"brown\" class=\"brown-option\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n </ion-item>\n ];\n }\n}\n```\n\n```css\n/* Popover Interface: set color for the popover using Item's CSS variables */\n.my-custom-interface .brown-option {\n --color: #5e3e2c;\n --color-hover: #362419;\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-item>\n <ion-label>Select</ion-label>\n <ion-select>\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n </ion-item>\n</template>\n\n<script>\nimport { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonItem, IonLabel, IonSelect, IonSelectOption }\n});\n</script>\n```\n\n### Customizing Options\n\n```html\n<template>\n <ion-item>\n <ion-label>Select: Alert Interface</ion-label>\n <ion-select :interface-options=\"options\">\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n </ion-item>\n\n <ion-item>\n <ion-label>Select: Alert Interface (Multiple Selection)</ion-label>\n <ion-select :interface-options=\"options\" multiple=\"true\">\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n </ion-item>\n\n <ion-item>\n <ion-label>Select: Popover Interface</ion-label>\n <ion-select interface=\"popover\" :interface-options=\"options\">\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n </ion-item>\n\n <ion-item>\n <ion-label>Select: Action Sheet Interface</ion-label>\n <ion-select interface=\"action-sheet\" :interface-options=\"options\">\n <ion-select-option value=\"brown\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n </ion-item>\n</template>\n\n<script>\nimport { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonItem, IonLabel, IonSelect, IonSelectOption },\n setup() {\n const options: any = {\n cssClass: 'my-custom-interface'\n };\n \n return { options }\n }\n});\n</script>\n```\n\n```css\n/* Popover Interface: set color for the popover using Item's CSS variables */\n.my-custom-interface .select-interface-option {\n --color: #971e49;\n --color-hover: #79193b;\n}\n\n/* Action Sheet Interface: set color for the action sheet using its button CSS variables */\n.my-custom-interface .select-interface-option {\n --button-color: #971e49;\n --button-color-hover: #79193b;\n}\n\n/* Alert Interface: set color for alert options (single selection) */\n.my-custom-interface .select-interface-option .alert-radio-label {\n color: #971e49;\n}\n\n/* Alert Interface: set color for alert options (multiple selection) */\n.my-custom-interface .select-interface-option .alert-checkbox-label {\n color: #971e49;\n}\n\n/* Alert Interface: set color for checked alert options (single selection) */\n.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label {\n color: #79193b;\n}\n\n/* Alert Interface: set color for checked alert options (multiple selection) */\n.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label {\n color: #79193b;\n}\n```\n\n> Note: In the CSS examples, some of the selectors could be combined together, but are separated out in order to better explain what each selector is for.\n\n\n### Customizing Individual Options\n\nTo customize an individual option, set a class on the `ion-select-option`:\n\n```html\n<template>\n <ion-item>\n <ion-label>Select</ion-label>\n <ion-select interface=\"popover\" :interface-options=\"options\">\n <ion-select-option value=\"brown\" class=\"brown-option\">Brown</ion-select-option>\n <ion-select-option value=\"blonde\">Blonde</ion-select-option>\n <ion-select-option value=\"black\">Black</ion-select-option>\n <ion-select-option value=\"red\">Red</ion-select-option>\n </ion-select>\n </ion-item>\n</template>\n\n<script>\nimport { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonItem, IonLabel, IonSelect, IonSelectOption },\n setup() {\n const options: any = {\n cssClass: 'my-custom-interface'\n };\n \n return { options }\n }\n});\n</script>\n```\n\n```css\n/* Popover Interface: set color for the popover using Item's CSS variables */\n.my-custom-interface .brown-option {\n --color: #5e3e2c;\n --color-hover: #362419;\n}\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot interact with the select option. This property does not apply when `interface=\"action-sheet\"` as `ion-action-sheet` does not allow for disabled buttons.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "any",
|
||
"mutable": false,
|
||
"attr": "value",
|
||
"reflectToAttr": false,
|
||
"docs": "The text value of the option.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "any"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/skeleton-text/skeleton-text.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-skeleton-text",
|
||
"readme": "# ion-skeleton-text\n\nSkeleton Text is a component for rendering placeholder content. The element will render a gray block at the specified width.\n\n",
|
||
"docs": "Skeleton Text is a component for rendering placeholder content. The element will render a gray block at the specified width.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"angular": "```html\n<!-- Data to display after skeleton screen -->\n<div *ngIf=\"data\">\n <div class=\"ion-padding\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar arcu non vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt vehicula.\n </div>\n\n <ion-list>\n <ion-list-header>\n <ion-label>\n Data\n </ion-label>\n </ion-list-header>\n <ion-item>\n <ion-avatar slot=\"start\">\n <img src=\"./avatar.svg\">\n </ion-avatar>\n <ion-label>\n <h3>\n {{ data.heading }}\n </h3>\n <p>\n {{ data.para1 }}\n </p>\n <p>\n {{ data.para2 }}\n </p>\n </ion-label>\n </ion-item>\n <ion-item>\n <ion-thumbnail slot=\"start\">\n <img src=\"./thumbnail.svg\">\n </ion-thumbnail>\n <ion-label>\n <h3>\n {{ data.heading }}\n </h3>\n <p>\n {{ data.para1 }}\n </p>\n <p>\n {{ data.para2 }}\n </p>\n </ion-label>\n </ion-item>\n <ion-item>\n <ion-icon name=\"call\" slot=\"start\"></ion-icon>\n <ion-label>\n <h3>\n {{ data.heading }}\n </h3>\n <p>\n {{ data.para1 }}\n </p>\n <p>\n {{ data.para2 }}\n </p>\n </ion-label>\n </ion-item>\n </ion-list>\n</div>\n\n<!-- Skeleton screen -->\n<div *ngIf=\"!data\">\n <div class=\"ion-padding custom-skeleton\">\n <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n <ion-skeleton-text animated></ion-skeleton-text>\n <ion-skeleton-text animated style=\"width: 88%\"></ion-skeleton-text>\n <ion-skeleton-text animated style=\"width: 70%\"></ion-skeleton-text>\n <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n </div>\n\n <ion-list>\n <ion-list-header>\n <ion-label>\n <ion-skeleton-text animated style=\"width: 20%\"></ion-skeleton-text>\n </ion-label>\n </ion-list-header>\n <ion-item>\n <ion-avatar slot=\"start\">\n <ion-skeleton-text animated></ion-skeleton-text>\n </ion-avatar>\n <ion-label>\n <h3>\n <ion-skeleton-text animated style=\"width: 50%\"></ion-skeleton-text>\n </h3>\n <p>\n <ion-skeleton-text animated style=\"width: 80%\"></ion-skeleton-text>\n </p>\n <p>\n <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n </p>\n </ion-label>\n </ion-item>\n <ion-item>\n <ion-thumbnail slot=\"start\">\n <ion-skeleton-text animated></ion-skeleton-text>\n </ion-thumbnail>\n <ion-label>\n <h3>\n <ion-skeleton-text animated style=\"width: 50%\"></ion-skeleton-text>\n </h3>\n <p>\n <ion-skeleton-text animated style=\"width: 80%\"></ion-skeleton-text>\n </p>\n <p>\n <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n </p>\n </ion-label>\n </ion-item>\n <ion-item>\n <ion-skeleton-text animated style=\"width: 27px; height: 27px\" slot=\"start\"></ion-skeleton-text>\n <ion-label>\n <h3>\n <ion-skeleton-text animated style=\"width: 50%\"></ion-skeleton-text>\n </h3>\n <p>\n <ion-skeleton-text animated style=\"width: 80%\"></ion-skeleton-text>\n </p>\n <p>\n <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n </p>\n </ion-label>\n </ion-item>\n </ion-list>\n</div>\n```\n\n```css\n/* Custom Skeleton Line Height and Margin */\n.custom-skeleton ion-skeleton-text {\n line-height: 13px;\n}\n\n.custom-skeleton ion-skeleton-text:last-child {\n margin-bottom: 5px;\n}\n```\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'skeleton-text-example',\n templateUrl: 'skeleton-text-example.html',\n styleUrls: ['./skeleton-text-example.css']\n})\nexport class SkeletonTextExample {\n data: any;\n\n constructor() {}\n\n ionViewWillEnter() {\n setTimeout(() => {\n this.data = {\n 'heading': 'Normal text',\n 'para1': 'Lorem ipsum dolor sit amet, consectetur',\n 'para2': 'adipiscing elit.'\n };\n }, 5000);\n }\n}\n```",
|
||
"javascript": "```html\n<!-- Data to display after skeleton screen -->\n<div id=\"data\">\n <div class=\"ion-padding\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar arcu non vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt vehicula.\n </div>\n\n <ion-list>\n <ion-list-header>\n <ion-label>\n Data\n </ion-label>\n </ion-list-header>\n <ion-item>\n <ion-avatar slot=\"start\">\n <img src=\"./avatar.svg\">\n </ion-avatar>\n <ion-label>\n <h3>\n Normal text\n </h3>\n <p>\n Lorem ipsum dolor sit amet, consectetur\n </p>\n <p>\n adipiscing elit.\n </p>\n </ion-label>\n </ion-item>\n <ion-item>\n <ion-thumbnail slot=\"start\">\n <img src=\"./thumbnail.svg\">\n </ion-thumbnail>\n <ion-label>\n <h3>\n Normal text\n </h3>\n <p>\n Lorem ipsum dolor sit amet, consectetur\n </p>\n <p>\n adipiscing elit.\n </p>\n </ion-label>\n </ion-item>\n <ion-item>\n <ion-icon name=\"call\" slot=\"start\"></ion-icon>\n <ion-label>\n <h3>\n Normal text\n </h3>\n <p>\n Lorem ipsum dolor sit amet, consectetur\n </p>\n <p>\n adipiscing elit.\n </p>\n </ion-label>\n </ion-item>\n </ion-list>\n</div>\n\n<!-- Skeleton screen -->\n<div id=\"skeleton\">\n <div class=\"ion-padding custom-skeleton\">\n <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n <ion-skeleton-text animated></ion-skeleton-text>\n <ion-skeleton-text animated style=\"width: 88%\"></ion-skeleton-text>\n <ion-skeleton-text animated style=\"width: 70%\"></ion-skeleton-text>\n <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n </div>\n\n <ion-list>\n <ion-list-header>\n <ion-label>\n <ion-skeleton-text animated style=\"width: 20%\"></ion-skeleton-text>\n </ion-label>\n </ion-list-header>\n <ion-item>\n <ion-avatar slot=\"start\">\n <ion-skeleton-text animated></ion-skeleton-text>\n </ion-avatar>\n <ion-label>\n <h3>\n <ion-skeleton-text animated style=\"width: 50%\"></ion-skeleton-text>\n </h3>\n <p>\n <ion-skeleton-text animated style=\"width: 80%\"></ion-skeleton-text>\n </p>\n <p>\n <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n </p>\n </ion-label>\n </ion-item>\n <ion-item>\n <ion-thumbnail slot=\"start\">\n <ion-skeleton-text animated></ion-skeleton-text>\n </ion-thumbnail>\n <ion-label>\n <h3>\n <ion-skeleton-text animated style=\"width: 50%\"></ion-skeleton-text>\n </h3>\n <p>\n <ion-skeleton-text animated style=\"width: 80%\"></ion-skeleton-text>\n </p>\n <p>\n <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n </p>\n </ion-label>\n </ion-item>\n <ion-item>\n <ion-skeleton-text animated style=\"width: 27px; height: 27px\" slot=\"start\"></ion-skeleton-text>\n <ion-label>\n <h3>\n <ion-skeleton-text animated style=\"width: 50%\"></ion-skeleton-text>\n </h3>\n <p>\n <ion-skeleton-text animated style=\"width: 80%\"></ion-skeleton-text>\n </p>\n <p>\n <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n </p>\n </ion-label>\n </ion-item>\n </ion-list>\n</div>\n```\n\n```css\n#data {\n display: none;\n}\n\n/* Custom Skeleton Line Height and Margin */\n.custom-skeleton ion-skeleton-text {\n line-height: 13px;\n}\n\n.custom-skeleton ion-skeleton-text:last-child {\n margin-bottom: 5px;\n}\n```\n\n```javascript\nfunction onLoad() {\n const skeletonEl = document.getElementById('skeleton');\n const dataEl = document.getElementById('data');\n\n setTimeout(() => {\n skeletonEl.style.display = 'none';\n dataEl.style.display = 'block';\n }, 5000);\n}\n```",
|
||
"react": "```tsx\nimport React, { useState } from 'react';\nimport {\n IonContent,\n IonItem,\n IonAvatar,\n IonLabel,\n IonSkeletonText,\n IonListHeader,\n IonIcon,\n IonThumbnail,\n IonList\n} from '@ionic/react';\nimport { call } from 'ionicons/icons';\n\nimport './SkeletonTextExample.css';\n\nexport const SkeletonTextExample: React.FC = () => {\n const [data, setData] = useState();\n\n setTimeout(() => {\n setData({\n heading: 'Normal text',\n para1: 'Lorem ipsum dolor sit amet, consectetur',\n para2: 'adipiscing elit.'\n });\n }, 5000);\n\n return (\n <IonContent>\n {data ? (\n <>\n <div className=\"ion-padding\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar\n arcu non vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt\n vehicula.\n </div>\n\n <IonList>\n <IonListHeader>\n <IonLabel>\n Data\n </IonLabel>\n </IonListHeader>\n <IonItem>\n <IonAvatar slot=\"start\">\n <img src=\"./avatar.svg\" />\n </IonAvatar>\n <IonLabel>\n <h3>{data.heading}</h3>\n <p>{data.para1}</p>\n <p>{data.para2}</p>\n </IonLabel>\n </IonItem>\n <IonItem>\n <IonThumbnail slot=\"start\">\n <img src=\"./thumbnail.svg\" />\n </IonThumbnail>\n <IonLabel>\n <h3>{data.heading}</h3>\n <p>{data.para1}</p>\n <p>{data.para2}</p>\n </IonLabel>\n </IonItem>\n <IonItem>\n <IonIcon icon={call} slot=\"start\" />\n <IonLabel>\n <h3>{data.heading}</h3>\n <p>{data.para1}</p>\n <p>{data.para2}</p>\n </IonLabel>\n </IonItem>\n </IonList>\n </>\n ) : (\n <>\n <div className=\"ion-padding custom-skeleton\">\n <IonSkeletonText animated style={{ width: '60%' }} />\n <IonSkeletonText animated />\n <IonSkeletonText animated style={{ width: '88%' }} />\n <IonSkeletonText animated style={{ width: '70%' }} />\n <IonSkeletonText animated style={{ width: '60%' }} />\n </div>\n\n <IonList>\n <IonListHeader>\n <IonLabel>\n <IonSkeletonText animated style={{ width: '20%' }} />\n </IonLabel>\n </IonListHeader>\n <IonItem>\n <IonAvatar slot=\"start\">\n <IonSkeletonText animated />\n </IonAvatar>\n <IonLabel>\n <h3>\n <IonSkeletonText animated style={{ width: '50%' }} />\n </h3>\n <p>\n <IonSkeletonText animated style={{ width: '80%' }} />\n </p>\n <p>\n <IonSkeletonText animated style={{ width: '60%' }} />\n </p>\n </IonLabel>\n </IonItem>\n <IonItem>\n <IonThumbnail slot=\"start\">\n <IonSkeletonText animated />\n </IonThumbnail>\n <IonLabel>\n <h3>\n <IonSkeletonText animated style={{ width: '50%' }} />\n </h3>\n <p>\n <IonSkeletonText animated style={{ width: '80%' }} />\n </p>\n <p>\n <IonSkeletonText animated style={{ width: '60%' }} />\n </p>\n </IonLabel>\n </IonItem>\n <IonItem>\n <IonSkeletonText animated style={{ width: '27px', height: '27px' }} slot=\"start\" />\n <IonLabel>\n <h3>\n <IonSkeletonText animated style={{ width: '50%' }} />\n </h3>\n <p>\n <IonSkeletonText animated style={{ width: '80%' }} />\n </p>\n <p>\n <IonSkeletonText animated style={{ width: '60%' }} />\n </p>\n </IonLabel>\n </IonItem>\n </IonList>\n </>\n )}\n </IonContent>\n );\n};\n```\n\n```css\n/* Custom Skeleton Line Height and Margin */\n.custom-skeleton ion-skeleton-text {\n line-height: 13px;\n}\n\n.custom-skeleton ion-skeleton-text:last-child {\n margin-bottom: 5px;\n}\n```",
|
||
"stencil": "```tsx\nimport { Component, State, h } from '@stencil/core';\n\n@Component({\n tag: 'skeleton-text-example',\n styleUrl: 'skeleton-text-example.css'\n})\nexport class SkeletonTextExample {\n @State() data: any;\n\n componentWillLoad() {\n // Data will show after 5 seconds\n setTimeout(() => {\n this.data = {\n 'heading': 'Normal text',\n 'para1': 'Lorem ipsum dolor sit amet, consectetur',\n 'para2': 'adipiscing elit.'\n };\n }, 5000);\n }\n\n // Render skeleton screen when there is no data\n renderSkeletonScreen() {\n return [\n <ion-content>\n <div class=\"ion-padding custom-skeleton\">\n <ion-skeleton-text animated style={{ 'width': '60%' }}></ion-skeleton-text>\n <ion-skeleton-text animated></ion-skeleton-text>\n <ion-skeleton-text animated style={{ 'width': '88%' }}></ion-skeleton-text>\n <ion-skeleton-text animated style={{ 'width': '70%' }}></ion-skeleton-text>\n <ion-skeleton-text animated style={{ 'width': '60%' }}></ion-skeleton-text>\n </div>\n\n <ion-list>\n <ion-list-header>\n <ion-label>\n <ion-skeleton-text animated style={{ 'width': '20%' }}></ion-skeleton-text>\n </ion-label>\n </ion-list-header>\n <ion-item>\n <ion-avatar slot=\"start\">\n <ion-skeleton-text animated></ion-skeleton-text>\n </ion-avatar>\n <ion-label>\n <h3>\n <ion-skeleton-text animated style={{ 'width': '50%' }}></ion-skeleton-text>\n </h3>\n <p>\n <ion-skeleton-text animated style={{ 'width': '80%' }}></ion-skeleton-text>\n </p>\n <p>\n <ion-skeleton-text animated style={{ 'width': '60%' }}></ion-skeleton-text>\n </p>\n </ion-label>\n </ion-item>\n <ion-item>\n <ion-thumbnail slot=\"start\">\n <ion-skeleton-text animated></ion-skeleton-text>\n </ion-thumbnail>\n <ion-label>\n <h3>\n <ion-skeleton-text animated style={{ 'width': '50%' }}></ion-skeleton-text>\n </h3>\n <p>\n <ion-skeleton-text animated style={{ 'width': '80%' }}></ion-skeleton-text>\n </p>\n <p>\n <ion-skeleton-text animated style={{ 'width': '60%' }}></ion-skeleton-text>\n </p>\n </ion-label>\n </ion-item>\n <ion-item>\n <ion-skeleton-text animated style={{ 'width': '27p', 'height': '27px' }} slot=\"start\"></ion-skeleton-text>\n <ion-label>\n <h3>\n <ion-skeleton-text animated style={{ 'width': '50%' }}></ion-skeleton-text>\n </h3>\n <p>\n <ion-skeleton-text animated style={{ 'width': '80%' }}></ion-skeleton-text>\n </p>\n <p>\n <ion-skeleton-text animated style={{ 'width': '60%' }}></ion-skeleton-text>\n </p>\n </ion-label>\n </ion-item>\n </ion-list>\n </ion-content>\n ];\n }\n\n // Render the elements with data\n renderDataScreen() {\n return [\n <ion-content>\n <div class=\"ion-padding\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar arcu non vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt vehicula.\n </div>\n\n <ion-list>\n <ion-list-header>\n <ion-label>\n Data\n </ion-label>\n </ion-list-header>\n <ion-item>\n <ion-avatar slot=\"start\">\n <img src=\"./avatar.svg\"/>\n </ion-avatar>\n <ion-label>\n <h3>\n { this.data.heading }\n </h3>\n <p>\n { this.data.para1 }\n </p>\n <p>\n { this.data.para2 }\n </p>\n </ion-label>\n </ion-item>\n <ion-item>\n <ion-thumbnail slot=\"start\">\n <img src=\"./thumbnail.svg\"/>\n </ion-thumbnail>\n <ion-label>\n <h3>\n { this.data.heading }\n </h3>\n <p>\n { this.data.para1 }\n </p>\n <p>\n { this.data.para2 }\n </p>\n </ion-label>\n </ion-item>\n <ion-item>\n <ion-icon name=\"call\" slot=\"start\"></ion-icon>\n <ion-label>\n <h3>\n { this.data.heading }\n </h3>\n <p>\n { this.data.para1 }\n </p>\n <p>\n { this.data.para2 }\n </p>\n </ion-label>\n </ion-item>\n </ion-list>\n </ion-content>\n ];\n }\n\n render() {\n if (this.data) {\n return this.renderDataScreen();\n } else {\n return this.renderSkeletonScreen();\n }\n }\n}\n```\n\n```css\n/* Custom Skeleton Line Height and Margin */\n.custom-skeleton ion-skeleton-text {\n line-height: 13px;\n}\n\n.custom-skeleton ion-skeleton-text:last-child {\n margin-bottom: 5px;\n}\n```",
|
||
"vue": "```html\n<template>\n <!-- Data to display after skeleton screen -->\n <div v-if=\"data\">\n <div class=\"ion-padding\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar arcu non vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt vehicula.\n </div>\n\n <ion-list>\n <ion-list-header>\n <ion-label>\n Data\n </ion-label>\n </ion-list-header>\n <ion-item>\n <ion-avatar slot=\"start\">\n <img src=\"./avatar.svg\">\n </ion-avatar>\n <ion-label>\n <h3>\n {{ data.heading }}\n </h3>\n <p>\n {{ data.para1 }}\n </p>\n <p>\n {{ data.para2 }}\n </p>\n </ion-label>\n </ion-item>\n <ion-item>\n <ion-thumbnail slot=\"start\">\n <img src=\"./thumbnail.svg\">\n </ion-thumbnail>\n <ion-label>\n <h3>\n {{ data.heading }}\n </h3>\n <p>\n {{ data.para1 }}\n </p>\n <p>\n {{ data.para2 }}\n </p>\n </ion-label>\n </ion-item>\n <ion-item>\n <ion-icon :icon=\"call\" slot=\"start\"></ion-icon>\n <ion-label>\n <h3>\n {{ data.heading }}\n </h3>\n <p>\n {{ data.para1 }}\n </p>\n <p>\n {{ data.para2 }}\n </p>\n </ion-label>\n </ion-item>\n </ion-list>\n </div>\n\n <!-- Skeleton screen -->\n <div v-if=\"!data\">\n <div class=\"ion-padding custom-skeleton\">\n <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n <ion-skeleton-text animated></ion-skeleton-text>\n <ion-skeleton-text animated style=\"width: 88%\"></ion-skeleton-text>\n <ion-skeleton-text animated style=\"width: 70%\"></ion-skeleton-text>\n <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n </div>\n\n <ion-list>\n <ion-list-header>\n <ion-label>\n <ion-skeleton-text animated style=\"width: 20%\"></ion-skeleton-text>\n </ion-label>\n </ion-list-header>\n <ion-item>\n <ion-avatar slot=\"start\">\n <ion-skeleton-text animated></ion-skeleton-text>\n </ion-avatar>\n <ion-label>\n <h3>\n <ion-skeleton-text animated style=\"width: 50%\"></ion-skeleton-text>\n </h3>\n <p>\n <ion-skeleton-text animated style=\"width: 80%\"></ion-skeleton-text>\n </p>\n <p>\n <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n </p>\n </ion-label>\n </ion-item>\n <ion-item>\n <ion-thumbnail slot=\"start\">\n <ion-skeleton-text animated></ion-skeleton-text>\n </ion-thumbnail>\n <ion-label>\n <h3>\n <ion-skeleton-text animated style=\"width: 50%\"></ion-skeleton-text>\n </h3>\n <p>\n <ion-skeleton-text animated style=\"width: 80%\"></ion-skeleton-text>\n </p>\n <p>\n <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n </p>\n </ion-label>\n </ion-item>\n <ion-item>\n <ion-skeleton-text animated style=\"width: 27px; height: 27px\" slot=\"start\"></ion-skeleton-text>\n <ion-label>\n <h3>\n <ion-skeleton-text animated style=\"width: 50%\"></ion-skeleton-text>\n </h3>\n <p>\n <ion-skeleton-text animated style=\"width: 80%\"></ion-skeleton-text>\n </p>\n <p>\n <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n </p>\n </ion-label>\n </ion-item>\n </ion-list>\n </div>\n</template>\n\n<style>\n /* Custom Skeleton Line Height and Margin */\n .custom-skeleton ion-skeleton-text {\n line-height: 13px;\n }\n\n .custom-skeleton ion-skeleton-text:last-child {\n margin-bottom: 5px;\n }\n</style>\n\n<script>\nimport { \n IonAvatar,\n IonIcon,\n IonItem, \n IonLabel, \n IonList, \n IonListHeader,\n IonSkeletonText,\n IonThumbnail\n} from '@ionic/vue';\nimport { call } from 'ionicons/icons';\nimport { defineComponent, ref } from 'vue';\n\nexport default defineComponent({\n components: {\n IonAvatar,\n IonIcon,\n IonItem, \n IonLabel, \n IonList, \n IonListHeader,\n IonSkeletonText,\n IonThumbnail\n },\n setup() {\n const data = ref();\n \n setTimeout(() => {\n data.value = {\n 'heading': 'Normal text',\n 'para1': 'Lorem ipsum dolor sit amet, consectetur',\n 'para2': 'adipiscing elit.'\n };\n }, 5000);\n \n return { data }\n }\n});\n</script>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "animated",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "animated",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the skeleton text will animate.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the skeleton text"
|
||
},
|
||
{
|
||
"name": "--background-rgb",
|
||
"annotation": "prop",
|
||
"docs": "Background of the skeleton text in rgb format"
|
||
},
|
||
{
|
||
"name": "--border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Border radius of the skeleton text"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/slide/slide.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-slide",
|
||
"readme": "# ion-slide\n\nThe 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.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {},
|
||
"props": [],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/slides/slides.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-slides",
|
||
"readme": "# ion-slides\n\nThe 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\n\n## Migration\n\nWith the release of Ionic Framework v6, the Ionic Team has deprecated the `ion-slides` and `ion-slide` components in favor of using the official framework integrations provided by Swiper. Fear not! You will still be able to use slides components in your application. Additionally, because you are still using Swiper, the functionality of your slides component should remain exactly the same.\n\n### What is Swiper.js?\n\nSwiper.js is the carousel/slider library that powers `ion-slides`. The library is bundled automatically with all versions of Ionic Framework. When Ionic Framework v4. was first released, Swiper did not have framework specific integrations of its library, so `ion-slides` was created as a way of bridging the gap between the core Swiper library and frameworks such as Angular, React, and Vue.\n\nSince then, the Swiper team has released framework specific integrations of Swiper.js for Angular, React, Vue, and more!\n\n### What are the benefits of this change?\n\nThere are several benefits for members of the Ionic Framework community. By using the official Swiper.js framework integrations:\n\n- Developers can now be in control of the exact version of Swiper.js they want to use. Previously, developers would need to rely on the Ionic Team to update the version internally and release a new version of Ionic Framework.\n- The Ionic Team can spend more time triaging and fixing other non-slides issues, speeding up our development process so we can make the framework work better for our community.\n- Developers should experience fewer bugs.\n- Application bundle sizes can shrink in some cases. By installing Swiper.js as a 3rd party dependency in your application, bundlers such as Webpack or Rollup should be able to treeshake your code better.\n- Developers have access to new features that they previously did not have when using `ion-slides`.\n\n### How long do I have to migrate?\n\nWe plan to remove `ion-slides` and `ion-slide` in Ionic Framework v7. `ion-slides` and `ion-slide` will continue to be available for the entire Ionic Framework v6 lifecycle but will only receive critical bug fixes.\n\n### How do I migrate?\n\nSince the underlying technology that powers your slides is the same, the migration process is easy! Follow the guides below for your specific framework.\n\nMigration for Ionic Angular users: https://ionicframework.com/docs/angular/slides\nMigration for Ionic React users: https://ionicframework.com/docs/react/slides\nMigration for Ionic Vue users: https://ionicframework.com/docs/vue/slides\n\n------\n\nThe following documentation applies to the `ion-slides` component.\n\n## Custom Animations\n\nBy default, Ionic slides use the built-in `slide` animation effect. Custom animations can be provided via the `options` property. Examples of other animations can be found below.\n\n\n### Coverflow\n\n```typescript\nconst slideOpts = {\n slidesPerView: 3,\n coverflowEffect: {\n rotate: 50,\n stretch: 0,\n depth: 100,\n modifier: 1,\n slideShadows: true,\n },\n on: {\n beforeInit() {\n const swiper = this;\n\n swiper.classNames.push(`${swiper.params.containerModifierClass}coverflow`);\n swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);\n\n swiper.params.watchSlidesProgress = true;\n swiper.originalParams.watchSlidesProgress = true;\n },\n setTranslate() {\n const swiper = this;\n const {\n width: swiperWidth, height: swiperHeight, slides, $wrapperEl, slidesSizesGrid, $\n } = swiper;\n const params = swiper.params.coverflowEffect;\n const isHorizontal = swiper.isHorizontal();\n const transform$$1 = swiper.translate;\n const center = isHorizontal ? -transform$$1 + (swiperWidth / 2) : -transform$$1 + (swiperHeight / 2);\n const rotate = isHorizontal ? params.rotate : -params.rotate;\n const translate = params.depth;\n // Each slide offset from center\n for (let i = 0, length = slides.length; i < length; i += 1) {\n const $slideEl = slides.eq(i);\n const slideSize = slidesSizesGrid[i];\n const slideOffset = $slideEl[0].swiperSlideOffset;\n const offsetMultiplier = ((center - slideOffset - (slideSize / 2)) / slideSize) * params.modifier;\n\n let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;\n let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;\n // var rotateZ = 0\n let translateZ = -translate * Math.abs(offsetMultiplier);\n\n let translateY = isHorizontal ? 0 : params.stretch * (offsetMultiplier);\n let translateX = isHorizontal ? params.stretch * (offsetMultiplier) : 0;\n\n // Fix for ultra small values\n if (Math.abs(translateX) < 0.001) translateX = 0;\n if (Math.abs(translateY) < 0.001) translateY = 0;\n if (Math.abs(translateZ) < 0.001) translateZ = 0;\n if (Math.abs(rotateY) < 0.001) rotateY = 0;\n if (Math.abs(rotateX) < 0.001) rotateX = 0;\n\n const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\n\n $slideEl.transform(slideTransform);\n $slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;\n if (params.slideShadows) {\n // Set shadows\n let $shadowBeforeEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');\n let $shadowAfterEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');\n if ($shadowBeforeEl.length === 0) {\n $shadowBeforeEl = swiper.$(`<div class=\"swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}\"></div>`);\n $slideEl.append($shadowBeforeEl);\n }\n if ($shadowAfterEl.length === 0) {\n $shadowAfterEl = swiper.$(`<div class=\"swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}\"></div>`);\n $slideEl.append($shadowAfterEl);\n }\n if ($shadowBeforeEl.length) $shadowBeforeEl[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;\n if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = (-offsetMultiplier) > 0 ? -offsetMultiplier : 0;\n }\n }\n\n // Set correct perspective for IE10\n if (swiper.support.pointerEvents || swiper.support.prefixedPointerEvents) {\n const ws = $wrapperEl[0].style;\n ws.perspectiveOrigin = `${center}px 50%`;\n }\n },\n setTransition(duration) {\n const swiper = this;\n swiper.slides\n .transition(duration)\n .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')\n .transition(duration);\n }\n }\n}\n```\n\n### Cube\n\n```typescript\nconst slideOpts = {\n grabCursor: true,\n cubeEffect: {\n shadow: true,\n slideShadows: true,\n shadowOffset: 20,\n shadowScale: 0.94,\n },\n on: {\n beforeInit: function() {\n const swiper = this;\n swiper.classNames.push(`${swiper.params.containerModifierClass}cube`);\n swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);\n\n const overwriteParams = {\n slidesPerView: 1,\n slidesPerColumn: 1,\n slidesPerGroup: 1,\n watchSlidesProgress: true,\n resistanceRatio: 0,\n spaceBetween: 0,\n centeredSlides: false,\n virtualTranslate: true,\n };\n\n this.params = Object.assign(this.params, overwriteParams);\n this.originalParams = Object.assign(this.originalParams, overwriteParams);\n },\n setTranslate: function() {\n const swiper = this;\n const {\n $el, $wrapperEl, slides, width: swiperWidth, height: swiperHeight, rtlTranslate: rtl, size: swiperSize,\n } = swiper;\n const params = swiper.params.cubeEffect;\n const isHorizontal = swiper.isHorizontal();\n const isVirtual = swiper.virtual && swiper.params.virtual.enabled;\n let wrapperRotate = 0;\n let $cubeShadowEl;\n if (params.shadow) {\n if (isHorizontal) {\n $cubeShadowEl = $wrapperEl.find('.swiper-cube-shadow');\n if ($cubeShadowEl.length === 0) {\n $cubeShadowEl = swiper.$('<div class=\"swiper-cube-shadow\"></div>');\n $wrapperEl.append($cubeShadowEl);\n }\n $cubeShadowEl.css({ height: `${swiperWidth}px` });\n } else {\n $cubeShadowEl = $el.find('.swiper-cube-shadow');\n if ($cubeShadowEl.length === 0) {\n $cubeShadowEl = swiper.$('<div class=\"swiper-cube-shadow\"></div>');\n $el.append($cubeShadowEl);\n }\n }\n }\n\n for (let i = 0; i < slides.length; i += 1) {\n const $slideEl = slides.eq(i);\n let slideIndex = i;\n if (isVirtual) {\n slideIndex = parseInt($slideEl.attr('data-swiper-slide-index'), 10);\n }\n let slideAngle = slideIndex * 90;\n let round = Math.floor(slideAngle / 360);\n if (rtl) {\n slideAngle = -slideAngle;\n round = Math.floor(-slideAngle / 360);\n }\n const progress = Math.max(Math.min($slideEl[0].progress, 1), -1);\n let tx = 0;\n let ty = 0;\n let tz = 0;\n if (slideIndex % 4 === 0) {\n tx = -round * 4 * swiperSize;\n tz = 0;\n } else if ((slideIndex - 1) % 4 === 0) {\n tx = 0;\n tz = -round * 4 * swiperSize;\n } else if ((slideIndex - 2) % 4 === 0) {\n tx = swiperSize + (round * 4 * swiperSize);\n tz = swiperSize;\n } else if ((slideIndex - 3) % 4 === 0) {\n tx = -swiperSize;\n tz = (3 * swiperSize) + (swiperSize * 4 * round);\n }\n if (rtl) {\n tx = -tx;\n }\n\n if (!isHorizontal) {\n ty = tx;\n tx = 0;\n }\n\n const transform$$1 = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${isHorizontal ? slideAngle : 0}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;\n if (progress <= 1 && progress > -1) {\n wrapperRotate = (slideIndex * 90) + (progress * 90);\n if (rtl) wrapperRotate = (-slideIndex * 90) - (progress * 90);\n }\n $slideEl.transform(transform$$1);\n if (params.slideShadows) {\n // Set shadows\n let shadowBefore = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');\n let shadowAfter = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');\n if (shadowBefore.length === 0) {\n shadowBefore = swiper.$(`<div class=\"swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}\"></div>`);\n $slideEl.append(shadowBefore);\n }\n if (shadowAfter.length === 0) {\n shadowAfter = swiper.$(`<div class=\"swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}\"></div>`);\n $slideEl.append(shadowAfter);\n }\n if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);\n if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);\n }\n }\n $wrapperEl.css({\n '-webkit-transform-origin': `50% 50% -${swiperSize / 2}px`,\n '-moz-transform-origin': `50% 50% -${swiperSize / 2}px`,\n '-ms-transform-origin': `50% 50% -${swiperSize / 2}px`,\n 'transform-origin': `50% 50% -${swiperSize / 2}px`,\n });\n\n if (params.shadow) {\n if (isHorizontal) {\n $cubeShadowEl.transform(`translate3d(0px, ${(swiperWidth / 2) + params.shadowOffset}px, ${-swiperWidth / 2}px) rotateX(90deg) rotateZ(0deg) scale(${params.shadowScale})`);\n } else {\n const shadowAngle = Math.abs(wrapperRotate) - (Math.floor(Math.abs(wrapperRotate) / 90) * 90);\n const multiplier = 1.5 - (\n (Math.sin((shadowAngle * 2 * Math.PI) / 360) / 2)\n + (Math.cos((shadowAngle * 2 * Math.PI) / 360) / 2)\n );\n const scale1 = params.shadowScale;\n const scale2 = params.shadowScale / multiplier;\n const offset$$1 = params.shadowOffset;\n $cubeShadowEl.transform(`scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${(swiperHeight / 2) + offset$$1}px, ${-swiperHeight / 2 / scale2}px) rotateX(-90deg)`);\n }\n }\n\n const zFactor = (swiper.browser.isSafari || swiper.browser.isUiWebView) ? (-swiperSize / 2) : 0;\n $wrapperEl\n .transform(`translate3d(0px,0,${zFactor}px) rotateX(${swiper.isHorizontal() ? 0 : wrapperRotate}deg) rotateY(${swiper.isHorizontal() ? -wrapperRotate : 0}deg)`);\n },\n setTransition: function(duration) {\n const swiper = this;\n const { $el, slides } = swiper;\n slides\n .transition(duration)\n .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')\n .transition(duration);\n if (swiper.params.cubeEffect.shadow && !swiper.isHorizontal()) {\n $el.find('.swiper-cube-shadow').transition(duration);\n }\n },\n }\n}\n```\n\n### Fade\n\n```typescript\nconst slideOpts = {\n on: {\n beforeInit() {\n const swiper = this;\n swiper.classNames.push(`${swiper.params.containerModifierClass}fade`);\n const overwriteParams = {\n slidesPerView: 1,\n slidesPerColumn: 1,\n slidesPerGroup: 1,\n watchSlidesProgress: true,\n spaceBetween: 0,\n virtualTranslate: true,\n };\n swiper.params = Object.assign(swiper.params, overwriteParams);\n swiper.params = Object.assign(swiper.originalParams, overwriteParams);\n },\n setTranslate() {\n const swiper = this;\n const { slides } = swiper;\n for (let i = 0; i < slides.length; i += 1) {\n const $slideEl = swiper.slides.eq(i);\n const offset$$1 = $slideEl[0].swiperSlideOffset;\n let tx = -offset$$1;\n if (!swiper.params.virtualTranslate) tx -= swiper.translate;\n let ty = 0;\n if (!swiper.isHorizontal()) {\n ty = tx;\n tx = 0;\n }\n const slideOpacity = swiper.params.fadeEffect.crossFade\n ? Math.max(1 - Math.abs($slideEl[0].progress), 0)\n : 1 + Math.min(Math.max($slideEl[0].progress, -1), 0);\n $slideEl\n .css({\n opacity: slideOpacity,\n })\n .transform(`translate3d(${tx}px, ${ty}px, 0px)`);\n }\n },\n setTransition(duration) {\n const swiper = this;\n const { slides, $wrapperEl } = swiper;\n slides.transition(duration);\n if (swiper.params.virtualTranslate && duration !== 0) {\n let eventTriggered = false;\n slides.transitionEnd(() => {\n if (eventTriggered) return;\n if (!swiper || swiper.destroyed) return;\n eventTriggered = true;\n swiper.animating = false;\n const triggerEvents = ['webkitTransitionEnd', 'transitionend'];\n for (let i = 0; i < triggerEvents.length; i += 1) {\n $wrapperEl.trigger(triggerEvents[i]);\n }\n });\n }\n },\n }\n}\n```\n\n### Flip\n\n```typescript\nconst slideOpts = {\n on: {\n beforeInit() {\n const swiper = this;\n swiper.classNames.push(`${swiper.params.containerModifierClass}flip`);\n swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);\n const overwriteParams = {\n slidesPerView: 1,\n slidesPerColumn: 1,\n slidesPerGroup: 1,\n watchSlidesProgress: true,\n spaceBetween: 0,\n virtualTranslate: true,\n };\n swiper.params = Object.assign(swiper.params, overwriteParams);\n swiper.originalParams = Object.assign(swiper.originalParams, overwriteParams);\n },\n setTranslate() {\n const swiper = this;\n const { $, slides, rtlTranslate: rtl } = swiper;\n for (let i = 0; i < slides.length; i += 1) {\n const $slideEl = slides.eq(i);\n let progress = $slideEl[0].progress;\n if (swiper.params.flipEffect.limitRotation) {\n progress = Math.max(Math.min($slideEl[0].progress, 1), -1);\n }\n const offset$$1 = $slideEl[0].swiperSlideOffset;\n const rotate = -180 * progress;\n let rotateY = rotate;\n let rotateX = 0;\n let tx = -offset$$1;\n let ty = 0;\n if (!swiper.isHorizontal()) {\n ty = tx;\n tx = 0;\n rotateX = -rotateY;\n rotateY = 0;\n } else if (rtl) {\n rotateY = -rotateY;\n }\n\n $slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length;\n\n if (swiper.params.flipEffect.slideShadows) {\n // Set shadows\n let shadowBefore = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');\n let shadowAfter = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');\n if (shadowBefore.length === 0) {\n shadowBefore = swiper.$(`<div class=\"swiper-slide-shadow-${swiper.isHorizontal() ? 'left' : 'top'}\"></div>`);\n $slideEl.append(shadowBefore);\n }\n if (shadowAfter.length === 0) {\n shadowAfter = swiper.$(`<div class=\"swiper-slide-shadow-${swiper.isHorizontal() ? 'right' : 'bottom'}\"></div>`);\n $slideEl.append(shadowAfter);\n }\n if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);\n if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);\n }\n $slideEl\n .transform(`translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`);\n }\n },\n setTransition(duration) {\n const swiper = this;\n const { slides, activeIndex, $wrapperEl } = swiper;\n slides\n .transition(duration)\n .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')\n .transition(duration);\n if (swiper.params.virtualTranslate && duration !== 0) {\n let eventTriggered = false;\n // eslint-disable-next-line\n slides.eq(activeIndex).transitionEnd(function onTransitionEnd() {\n if (eventTriggered) return;\n if (!swiper || swiper.destroyed) return;\n\n eventTriggered = true;\n swiper.animating = false;\n const triggerEvents = ['webkitTransitionEnd', 'transitionend'];\n for (let i = 0; i < triggerEvents.length; i += 1) {\n $wrapperEl.trigger(triggerEvents[i]);\n }\n });\n }\n }\n }\n};\n```\n",
|
||
"docs": "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",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'slides-example',\n template: `\n <ion-content>\n <ion-slides pager=\"true\" [options]=\"slideOpts\">\n <ion-slide>\n <h1>Slide 1</h1>\n </ion-slide>\n <ion-slide>\n <h1>Slide 2</h1>\n </ion-slide>\n <ion-slide>\n <h1>Slide 3</h1>\n </ion-slide>\n </ion-slides>\n </ion-content>\n `\n})\nexport class SlideExample {\n // Optional parameters to pass to the swiper instance.\n // See http://idangero.us/swiper/api/ for valid options.\n slideOpts = {\n initialSlide: 1,\n speed: 400\n };\n constructor() {}\n}\n```\n\n```css\n/* Without setting height the slides will take up the height of the slide's content */\nion-slides {\n height: 100%;\n}\n```\n",
|
||
"javascript": "```html\n<ion-content>\n <ion-slides pager=\"true\">\n <ion-slide>\n <h1>Slide 1</h1>\n </ion-slide>\n\n <ion-slide>\n <h1>Slide 2</h1>\n </ion-slide>\n\n <ion-slide>\n <h1>Slide 3</h1>\n </ion-slide>\n </ion-slides>\n</ion-content>\n```\n\n```javascript\nvar slides = document.querySelector('ion-slides');\n\n// Optional parameters to pass to the swiper instance.\n// See http://idangero.us/swiper/api/ for valid options.\nslides.options = {\n initialSlide: 1,\n speed: 400\n}\n```\n\n```css\n/* Without setting height the slides will take up the height of the slide's content */\nion-slides {\n height: 100%;\n}\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonSlides, IonSlide, IonContent } from '@ionic/react';\n\n// Optional parameters to pass to the swiper instance.\n// See http://idangero.us/swiper/api/ for valid options.\nconst slideOpts = {\n initialSlide: 1,\n speed: 400\n};\n\nexport const SlidesExample: React.FC = () => (\n <IonContent>\n <IonSlides pager={true} options={slideOpts}>\n <IonSlide>\n <h1>Slide 1</h1>\n </IonSlide>\n <IonSlide>\n <h1>Slide 2</h1>\n </IonSlide>\n <IonSlide>\n <h1>Slide 3</h1>\n </IonSlide>\n </IonSlides>\n </IonContent>\n);\n```\n\n```css\n/* Without setting height the slides will take up the height of the slide's content */\nion-slides {\n height: 100%;\n}\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'slides-example',\n styleUrl: 'slides-example.css'\n})\nexport class SlidesExample {\n // Optional parameters to pass to the swiper instance.\n // See http://idangero.us/swiper/api/ for valid options.\n private slideOpts = {\n initialSlide: 1,\n speed: 400\n };\n\n render() {\n return [\n <ion-content>\n <ion-slides pager={true} options={this.slideOpts}>\n <ion-slide>\n <h1>Slide 1</h1>\n </ion-slide>\n\n <ion-slide>\n <h1>Slide 2</h1>\n </ion-slide>\n\n <ion-slide>\n <h1>Slide 3</h1>\n </ion-slide>\n </ion-slides>\n </ion-content>\n ];\n }\n}\n```\n\n```css\n/* Without setting height the slides will take up the height of the slide's content */\nion-slides {\n height: 100%;\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-slides pager=\"true\" :options=\"slideOpts\">\n <ion-slide>\n <h1>Slide 1</h1>\n </ion-slide>\n <ion-slide>\n <h1>Slide 2</h1>\n </ion-slide>\n <ion-slide>\n <h1>Slide 3</h1>\n </ion-slide>\n </ion-slides>\n</template>\n\n\n<script>\nimport { IonSlides, IonSlide } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonSlides, IonSlide },\n setup() {\n // Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.\n const slideOpts = {\n initialSlide: 1,\n speed: 400\n };\n return { slideOpts }\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "options",
|
||
"type": "any",
|
||
"mutable": false,
|
||
"attr": "options",
|
||
"reflectToAttr": false,
|
||
"docs": "Options to pass to the swiper instance.\nSee http://idangero.us/swiper/api/ for valid options",
|
||
"docsTags": [],
|
||
"default": "{}",
|
||
"values": [
|
||
{
|
||
"type": "any"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "pager",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "pager",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, show the pagination.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "scrollbar",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "scrollbar",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, show the scrollbar.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "getActiveIndex",
|
||
"returns": {
|
||
"type": "Promise<number>",
|
||
"docs": ""
|
||
},
|
||
"signature": "getActiveIndex() => Promise<number>",
|
||
"parameters": [],
|
||
"docs": "Get the index of the active slide.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "getPreviousIndex",
|
||
"returns": {
|
||
"type": "Promise<number>",
|
||
"docs": ""
|
||
},
|
||
"signature": "getPreviousIndex() => Promise<number>",
|
||
"parameters": [],
|
||
"docs": "Get the index of the previous slide.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "getSwiper",
|
||
"returns": {
|
||
"type": "Promise<any>",
|
||
"docs": ""
|
||
},
|
||
"signature": "getSwiper() => Promise<any>",
|
||
"parameters": [],
|
||
"docs": "Get the Swiper instance.\nUse this to access the full Swiper API.\nSee https://idangero.us/swiper/api/ for all API options.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "isBeginning",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "isBeginning() => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Get whether or not the current slide is the first slide.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "isEnd",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "isEnd() => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Get whether or not the current slide is the last slide.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "length",
|
||
"returns": {
|
||
"type": "Promise<number>",
|
||
"docs": ""
|
||
},
|
||
"signature": "length() => Promise<number>",
|
||
"parameters": [],
|
||
"docs": "Get the total number of slides.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "lockSwipeToNext",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "lockSwipeToNext(lock: boolean) => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Lock or unlock the ability to slide to the next slide.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "lock If `true`, disable swiping to the next slide."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "lockSwipeToPrev",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "lockSwipeToPrev(lock: boolean) => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Lock or unlock the ability to slide to the previous slide.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "lock If `true`, disable swiping to the previous slide."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "lockSwipes",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "lockSwipes(lock: boolean) => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Lock or unlock the ability to slide to the next or previous slide.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "lock If `true`, disable swiping to the next and previous slide."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "slideNext",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "slideNext(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Transition to the next slide.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "speed The transition duration (in ms)."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "slidePrev",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "slidePrev(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Transition to the previous slide.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "speed The transition duration (in ms)."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "runCallbacks If true, the transition will produce the [Transition/SlideChange][Start/End] transition events."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "slideTo",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "slideTo(index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Transition to the specified slide.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "index The index of the slide to transition to."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "speed The transition duration (in ms)."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "startAutoplay",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "startAutoplay() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Start auto play.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "stopAutoplay",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "stopAutoplay() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Stop auto play.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "update",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "update() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Update the underlying slider implementation. Call this if you've added or removed\nchild slides.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "updateAutoHeight",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "updateAutoHeight(speed?: number | undefined) => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Force swiper to update its height (when autoHeight is enabled) for the duration\nequal to 'speed' parameter.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "speed The transition duration (in ms)."
|
||
}
|
||
]
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionSlideDidChange",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted after the active slide has changed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionSlideDoubleTap",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the user double taps on the slide's container.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionSlideDrag",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the slider is actively being moved.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionSlideNextEnd",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the next slide has ended.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionSlideNextStart",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the next slide has started.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionSlidePrevEnd",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the previous slide has ended.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionSlidePrevStart",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the previous slide has started.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionSlideReachEnd",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the slider is at the last slide.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionSlideReachStart",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the slider is at its initial position.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionSlidesDidLoad",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted after Swiper initialization",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionSlideTap",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the user taps/clicks on the slide's container.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionSlideTouchEnd",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the user releases the touch.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionSlideTouchStart",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the user first touches the slider.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionSlideTransitionEnd",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the slide transition has ended.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionSlideTransitionStart",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the slide transition has started.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionSlideWillChange",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted before the active slide has changed.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--bullet-background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the pagination bullets"
|
||
},
|
||
{
|
||
"name": "--bullet-background-active",
|
||
"annotation": "prop",
|
||
"docs": "Background of the active pagination bullet"
|
||
},
|
||
{
|
||
"name": "--progress-bar-background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the pagination progress-bar"
|
||
},
|
||
{
|
||
"name": "--progress-bar-background-active",
|
||
"annotation": "prop",
|
||
"docs": "Background of the active pagination progress-bar"
|
||
},
|
||
{
|
||
"name": "--scroll-bar-background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the pagination scroll-bar"
|
||
},
|
||
{
|
||
"name": "--scroll-bar-background-active",
|
||
"annotation": "prop",
|
||
"docs": "Background of the active pagination scroll-bar"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/spinner/spinner.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-spinner",
|
||
"readme": "# ion-spinner\n\nThe 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.\n\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"angular": "```html\n<!-- Default Spinner -->\n<ion-spinner></ion-spinner>\n\n<!-- Lines -->\n<ion-spinner name=\"lines\"></ion-spinner>\n\n<!-- Lines Small -->\n<ion-spinner name=\"lines-small\"></ion-spinner>\n\n<!-- Dots -->\n<ion-spinner name=\"dots\"></ion-spinner>\n\n<!-- Bubbles -->\n<ion-spinner name=\"bubbles\"></ion-spinner>\n\n<!-- Circles -->\n<ion-spinner name=\"circles\"></ion-spinner>\n\n<!-- Crescent -->\n<ion-spinner name=\"crescent\"></ion-spinner>\n\n<!-- Paused Default Spinner -->\n<ion-spinner paused></ion-spinner>\n```\n",
|
||
"javascript": "```html\n<!-- Default Spinner -->\n<ion-spinner></ion-spinner>\n\n<!-- Lines -->\n<ion-spinner name=\"lines\"></ion-spinner>\n\n<!-- Lines Small -->\n<ion-spinner name=\"lines-small\"></ion-spinner>\n\n<!-- Dots -->\n<ion-spinner name=\"dots\"></ion-spinner>\n\n<!-- Bubbles -->\n<ion-spinner name=\"bubbles\"></ion-spinner>\n\n<!-- Circles -->\n<ion-spinner name=\"circles\"></ion-spinner>\n\n<!-- Crescent -->\n<ion-spinner name=\"crescent\"></ion-spinner>\n\n<!-- Paused Default Spinner -->\n<ion-spinner paused></ion-spinner>\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonSpinner, IonContent } from '@ionic/react';\n\nexport const SpinnerExample: React.FC = () => (\n <IonContent>\n {/*-- Default Spinner --*/}\n <IonSpinner />\n\n {/*-- Lines --*/}\n <IonSpinner name=\"lines\" />\n\n {/*-- Lines Small --*/}\n <IonSpinner name=\"lines-small\" />\n\n {/*-- Dots --*/}\n <IonSpinner name=\"dots\" />\n\n {/*-- Bubbles --*/}\n <IonSpinner name=\"bubbles\" />\n\n {/*-- Circles --*/}\n <IonSpinner name=\"circles\" />\n\n {/*-- Crescent --*/}\n <IonSpinner name=\"crescent\" />\n\n {/*-- Paused Default Spinner --*/}\n <IonSpinner paused />\n </IonContent>\n);\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'spinner-example',\n styleUrl: 'spinner-example.css'\n})\nexport class SpinnerExample {\n render() {\n return [\n // Default Spinner\n <ion-spinner></ion-spinner>,\n\n // Lines\n <ion-spinner name=\"lines\"></ion-spinner>,\n\n // Lines Small\n <ion-spinner name=\"lines-small\"></ion-spinner>,\n\n // Dots\n <ion-spinner name=\"dots\"></ion-spinner>,\n\n // Bubbles\n <ion-spinner name=\"bubbles\"></ion-spinner>,\n\n // Circles\n <ion-spinner name=\"circles\"></ion-spinner>,\n\n // Crescent\n <ion-spinner name=\"crescent\"></ion-spinner>,\n\n // Paused Default Spinner\n <ion-spinner paused={true}></ion-spinner>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <!-- Default Spinner -->\n <ion-spinner></ion-spinner>\n\n <!-- Lines -->\n <ion-spinner name=\"lines\"></ion-spinner>\n\n <!-- Lines Small -->\n <ion-spinner name=\"lines-small\"></ion-spinner>\n\n <!-- Dots -->\n <ion-spinner name=\"dots\"></ion-spinner>\n\n <!-- Bubbles -->\n <ion-spinner name=\"bubbles\"></ion-spinner>\n\n <!-- Circles -->\n <ion-spinner name=\"circles\"></ion-spinner>\n\n <!-- Crescent -->\n <ion-spinner name=\"crescent\"></ion-spinner>\n\n <!-- Paused Default Spinner -->\n <ion-spinner paused></ion-spinner>\n</template>\n\n<script>\nimport { IonSpinner } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonSpinner }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "duration",
|
||
"type": "number | undefined",
|
||
"mutable": false,
|
||
"attr": "duration",
|
||
"reflectToAttr": false,
|
||
"docs": "Duration of the spinner animation in milliseconds. The default varies based on the spinner.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "name",
|
||
"type": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-small\" | undefined",
|
||
"mutable": false,
|
||
"attr": "name",
|
||
"reflectToAttr": false,
|
||
"docs": "The name of the SVG spinner to use. If a name is not provided, the platform's default\nspinner will be used.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "bubbles",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "circles",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "circular",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "crescent",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "dots",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "lines",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "lines-small",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "paused",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "paused",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the spinner's animation will be paused.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the spinner"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [
|
||
"ion-infinite-scroll-content",
|
||
"ion-loading",
|
||
"ion-refresher-content"
|
||
],
|
||
"dependencies": [],
|
||
"dependencyGraph": {
|
||
"ion-infinite-scroll-content": [
|
||
"ion-spinner"
|
||
],
|
||
"ion-loading": [
|
||
"ion-spinner"
|
||
],
|
||
"ion-refresher-content": [
|
||
"ion-spinner"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/split-pane/split-pane.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-split-pane",
|
||
"readme": "# ion-split-pane\n\nA 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.\n\n\n## Setting Breakpoints\n\nBy default, the split pane will expand when the screen is larger than 992px. To customize this, pass a breakpoint in the `when` property. The `when` property can accept a boolean value, any valid media query, or one of Ionic's predefined sizes.\n\n\n```html\n<!-- can be \"xs\", \"sm\", \"md\", \"lg\", or \"xl\" -->\n<ion-split-pane when=\"md\"></ion-split-pane>\n\n<!-- can be any valid media query https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries -->\n<ion-split-pane when=\"(min-width: 40px)\"></ion-split-pane>\n```\n\n\n | Size | Value | Description |\n |------|-----------------------|-----------------------------------------------------------------------|\n | `xs` | `(min-width: 0px)` | Show the split-pane when the min-width is 0px (meaning, always) |\n | `sm` | `(min-width: 576px)` | Show the split-pane when the min-width is 576px |\n | `md` | `(min-width: 768px)` | Show the split-pane when the min-width is 768px |\n | `lg` | `(min-width: 992px)` | Show the split-pane when the min-width is 992px (default break point) |\n | `xl` | `(min-width: 1200px)` | Show the split-pane when the min-width is 1200px |\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"angular": "```html\n<ion-split-pane contentId=\"main\">\n <!-- the side menu -->\n <ion-menu contentId=\"main\">\n <ion-header>\n <ion-toolbar>\n <ion-title>Menu</ion-title>\n </ion-toolbar>\n </ion-header>\n </ion-menu>\n\n <!-- the main content -->\n <ion-router-outlet id=\"main\"></ion-router-outlet>\n</ion-split-pane>\n```\n",
|
||
"javascript": "```html\n<ion-split-pane content-id=\"main\">\n <!-- the side menu -->\n <ion-menu content-id=\"main\">\n <ion-header>\n <ion-toolbar>\n <ion-title>Menu</ion-title>\n </ion-toolbar>\n </ion-header>\n </ion-menu>\n\n <!-- the main content -->\n <ion-content id=\"main\">\n <h1>Hello</h1>\n </ion-content>\n</ion-split-pane>\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport {\n IonSplitPane,\n IonMenu,\n IonHeader,\n IonToolbar,\n IonTitle,\n IonRouterOutlet,\n IonContent,\n IonPage\n} from '@ionic/react';\n\nexport const SplitPlaneExample: React.SFC<{}> = () => (\n <IonContent>\n <IonSplitPane contentId=\"main\">\n {/*-- the side menu --*/}\n <IonMenu contentId=\"main\">\n <IonHeader>\n <IonToolbar>\n <IonTitle>Menu</IonTitle>\n </IonToolbar>\n </IonHeader>\n </IonMenu>\n\n {/*-- the main content --*/}\n <IonPage id=\"main\"/>\n </IonSplitPane>\n </IonContent>\n);\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'split-pane-example',\n styleUrl: 'split-pane-example.css'\n})\nexport class SplitPaneExample {\n render() {\n return [\n <ion-split-pane content-id=\"main\">\n {/* the side menu */}\n <ion-menu content-id=\"main\">\n <ion-header>\n <ion-toolbar>\n <ion-title>Menu</ion-title>\n </ion-toolbar>\n </ion-header>\n </ion-menu>\n\n {/* the main content */}\n <ion-router-outlet id=\"main\"></ion-router-outlet>\n </ion-split-pane>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <ion-split-pane content-id=\"main\">\n <!-- the side menu -->\n <ion-menu content-id=\"main\">\n <ion-header>\n <ion-toolbar>\n <ion-title>Menu</ion-title>\n </ion-toolbar>\n </ion-header>\n </ion-menu>\n\n <!-- the main content -->\n <ion-router-outlet id=\"main\"></ion-router-outlet>\n </ion-split-pane>\n</template>\n\n<script>\nimport { \n IonHeader, \n IonMenu, \n IonRouterOutlet, \n IonSplitPane, \n IonTitle, \n IonToolbar\n} from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: {\n IonHeader, \n IonMenu, \n IonRouterOutlet, \n IonSplitPane, \n IonTitle, \n IonToolbar\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "contentId",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "content-id",
|
||
"reflectToAttr": true,
|
||
"docs": "The `id` of the main content. When using\na router this is typically `ion-router-outlet`.\nWhen not using a router, this is typically\nyour main view's `ion-content`. This is not the\nid of the `ion-content` inside of your `ion-menu`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the split pane will be hidden.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "when",
|
||
"type": "boolean | string",
|
||
"mutable": false,
|
||
"attr": "when",
|
||
"reflectToAttr": false,
|
||
"docs": "When the split-pane should be shown.\nCan be a CSS media query expression, or a shortcut expression.\nCan also be a boolean expression.",
|
||
"docsTags": [],
|
||
"default": "QUERY['lg']",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
},
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [
|
||
{
|
||
"event": "ionSplitPaneVisible",
|
||
"detail": "{ visible: boolean; }",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Expression to be called when the split-pane visibility has changed",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--border",
|
||
"annotation": "prop",
|
||
"docs": "Border between panes"
|
||
},
|
||
{
|
||
"name": "--side-max-width",
|
||
"annotation": "prop",
|
||
"docs": "Maximum width of the side pane. Does not apply when split pane is collapsed."
|
||
},
|
||
{
|
||
"name": "--side-min-width",
|
||
"annotation": "prop",
|
||
"docs": "Minimum width of the side pane. Does not apply when split pane is collapsed."
|
||
},
|
||
{
|
||
"name": "--side-width",
|
||
"annotation": "prop",
|
||
"docs": "Width of the side pane. Does not apply when split pane is collapsed."
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/tab/tab.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-tab",
|
||
"readme": "# ion-tab\n\nThe 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.\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {},
|
||
"props": [
|
||
{
|
||
"name": "component",
|
||
"type": "Function | HTMLElement | null | string | undefined",
|
||
"mutable": false,
|
||
"attr": "component",
|
||
"reflectToAttr": false,
|
||
"docs": "The component to display inside of the tab.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "Function"
|
||
},
|
||
{
|
||
"type": "HTMLElement"
|
||
},
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "tab",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "tab",
|
||
"reflectToAttr": false,
|
||
"docs": "A tab id must be provided for each `ion-tab`. It's used internally to reference\nthe selected tab or by the router to switch between them.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": true
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "setActive",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "setActive() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Set the active component for the tab",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/tab-bar/tab-bar.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-tab-bar",
|
||
"readme": "# ion-tab-bar\n\nThe 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).\n\n",
|
||
"docs": "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).",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<ion-tabs>\n <!-- Tab bar -->\n <ion-tab-bar slot=\"bottom\">\n <ion-tab-button tab=\"account\">\n <ion-icon name=\"person\"></ion-icon>\n </ion-tab-button>\n <ion-tab-button tab=\"contact\">\n <ion-icon name=\"call\"></ion-icon>\n </ion-tab-button>\n <ion-tab-button tab=\"settings\">\n <ion-icon name=\"settings\"></ion-icon>\n </ion-tab-button>\n </ion-tab-bar>\n</ion-tabs>\n```",
|
||
"javascript": "```html\n<ion-tabs>\n <!-- Tab views -->\n <ion-tab tab=\"account\"></ion-tab>\n <ion-tab tab=\"contact\"></ion-tab>\n <ion-tab tab=\"settings\"></ion-tab>\n\n <!-- Tab bar -->\n <ion-tab-bar slot=\"bottom\">\n <ion-tab-button tab=\"account\">\n <ion-icon name=\"person\"></ion-icon>\n </ion-tab-button>\n <ion-tab-button tab=\"contact\">\n <ion-icon name=\"call\"></ion-icon>\n </ion-tab-button>\n <ion-tab-button tab=\"settings\">\n <ion-icon name=\"settings\"></ion-icon>\n </ion-tab-button>\n </ion-tab-bar>\n</ion-tabs>\n```",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonTabs, IonTabBar, IonTabButton, IonIcon, IonContent } from '@ionic/react';\nimport { call, person, settings } from 'ionicons/icons';\n\nexport const TabBarExample: React.FC = () => (\n <IonContent>\n <IonTabs>\n {/*-- Tab bar --*/}\n <IonTabBar slot=\"bottom\">\n <IonTabButton tab=\"account\">\n <IonIcon icon={person} />\n </IonTabButton>\n <IonTabButton tab=\"contact\">\n <IonIcon icon={call} />\n </IonTabButton>\n <IonTabButton tab=\"settings\">\n <IonIcon icon={settings} />\n </IonTabButton>\n </IonTabBar>\n </IonTabs>\n </IonContent>\n);\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'tab-bar-example',\n styleUrl: 'tab-bar-example.css'\n})\nexport class TabBarExample {\n render() {\n return [\n <ion-tabs>\n {/* Tab views */}\n <ion-tab tab=\"account\" component=\"page-account\"></ion-tab>\n <ion-tab tab=\"contact\" component=\"page-contact\"></ion-tab>\n <ion-tab tab=\"settings\" component=\"page-settings\"></ion-tab>\n\n {/* Tab bar */}\n <ion-tab-bar slot=\"bottom\">\n <ion-tab-button tab=\"account\">\n <ion-icon name=\"person\"></ion-icon>\n </ion-tab-button>\n <ion-tab-button tab=\"contact\">\n <ion-icon name=\"call\"></ion-icon>\n </ion-tab-button>\n <ion-tab-button tab=\"settings\">\n <ion-icon name=\"settings\"></ion-icon>\n </ion-tab-button>\n </ion-tab-bar>\n </ion-tabs>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <ion-tabs>\n <!-- Tab bar -->\n <ion-tab-bar slot=\"bottom\">\n <ion-tab-button tab=\"account\">\n <ion-icon :icon=\"person\"></ion-icon>\n </ion-tab-button>\n <ion-tab-button tab=\"contact\">\n <ion-icon :icon=\"call\"></ion-icon>\n </ion-tab-button>\n <ion-tab-button tab=\"settings\">\n <ion-icon :icon=\"settings\"></ion-icon>\n </ion-tab-button>\n </ion-tab-bar>\n </ion-tabs>\n</template>\n\n<script>\nimport { IonIcon, IonTabBar, IonTabButton, IonTabs } from '@ionic/vue';\nimport { call, person, settings } from 'ionicons/icons';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonIcon, IonTabBar, IonTabButton, IonTabs },\n setup() {\n return { call, person, settings }\n }\n});\n</script>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "selectedTab",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "selected-tab",
|
||
"reflectToAttr": false,
|
||
"docs": "The selected tab component",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "translucent",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "translucent",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the tab bar will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the tab bar"
|
||
},
|
||
{
|
||
"name": "--border",
|
||
"annotation": "prop",
|
||
"docs": "Border of the tab bar"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the tab bar"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/tab-button/tab-button.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-tab-button",
|
||
"readme": "# ion-tab-button\n\nA 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.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
},
|
||
{
|
||
"text": "native - The native HTML anchor element that wraps all child elements.",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<ion-tabs>\n <!-- Tab bar -->\n <ion-tab-bar slot=\"bottom\">\n <ion-tab-button tab=\"schedule\">\n <ion-icon name=\"calendar\"></ion-icon>\n <ion-label>Schedule</ion-label>\n </ion-tab-button>\n\n <ion-tab-button tab=\"speakers\">\n <ion-icon name=\"person-circle\"></ion-icon>\n <ion-label>Speakers</ion-label>\n </ion-tab-button>\n\n <ion-tab-button tab=\"map\">\n <ion-icon name=\"map\"></ion-icon>\n <ion-label>Map</ion-label>\n </ion-tab-button>\n\n <ion-tab-button tab=\"about\">\n <ion-icon name=\"information-circle\"></ion-icon>\n <ion-label>About</ion-label>\n </ion-tab-button>\n </ion-tab-bar>\n</ion-tabs>\n```\n",
|
||
"javascript": "```html\n<ion-tabs>\n <!-- Tab views -->\n <ion-tab tab=\"schedule\">\n <ion-router-outlet name=\"schedule\"></ion-router-outlet>\n </ion-tab>\n\n <ion-tab tab=\"speakers\">\n <ion-router-outlet name=\"speakers\"></ion-router-outlet>\n </ion-tab>\n\n <ion-tab tab=\"map\">\n <ion-router-outlet name=\"map\"></ion-router-outlet>\n </ion-tab>\n\n <ion-tab tab=\"about\">\n <ion-router-outlet name=\"about\"></ion-router-outlet>\n </ion-tab>\n\n <!-- Tab bar -->\n <ion-tab-bar slot=\"bottom\">\n <ion-tab-button tab=\"schedule\" href=\"/app/tabs/(schedule:schedule)\">\n <ion-icon name=\"calendar\"></ion-icon>\n <ion-label>Schedule</ion-label>\n </ion-tab-button>\n\n <ion-tab-button tab=\"speakers\" href=\"/app/tabs/(speakers:speakers)\">\n <ion-icon name=\"person-circle\"></ion-icon>\n <ion-label>Speakers</ion-label>\n </ion-tab-button>\n\n <ion-tab-button tab=\"map\" href=\"/app/tabs/(map:map)\">\n <ion-icon name=\"map\"></ion-icon>\n <ion-label>Map</ion-label>\n </ion-tab-button>\n\n <ion-tab-button tab=\"about\" href=\"/app/tabs/(about:about)\">\n <ion-icon name=\"information-circle\"></ion-icon>\n <ion-label>About</ion-label>\n </ion-tab-button>\n </ion-tab-bar>\n</ion-tabs>\n```\n",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonContent } from '@ionic/react';\nimport { calendar, personCircle, map, informationCircle } from 'ionicons/icons';\n\nexport const TabButtonExample: React.FC = () => (\n <IonContent>\n <IonTabs>\n {/*-- Tab bar --*/}\n <IonTabBar slot=\"bottom\">\n <IonTabButton tab=\"schedule\">\n <IonIcon icon={calendar} />\n <IonLabel>Schedule</IonLabel>\n </IonTabButton>\n\n <IonTabButton tab=\"speakers\">\n <IonIcon icon={personCircle} />\n <IonLabel>Speakers</IonLabel>\n </IonTabButton>\n\n <IonTabButton tab=\"map\">\n <IonIcon icon={map} />\n <IonLabel>Map</IonLabel>\n </IonTabButton>\n\n <IonTabButton tab=\"about\">\n <IonIcon icon={informationCircle} />\n <IonLabel>About</IonLabel>\n </IonTabButton>\n </IonTabBar>\n </IonTabs>\n </IonContent>\n);\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'tab-button-example',\n styleUrl: 'tab-button-example.css'\n})\nexport class TabButtonExample {\n render() {\n return [\n <ion-tabs>\n {/* Tab views */}\n <ion-tab tab=\"schedule\">\n <ion-router-outlet name=\"schedule\"></ion-router-outlet>\n </ion-tab>\n\n <ion-tab tab=\"speakers\">\n <ion-router-outlet name=\"speakers\"></ion-router-outlet>\n </ion-tab>\n\n <ion-tab tab=\"map\">\n <ion-router-outlet name=\"map\"></ion-router-outlet>\n </ion-tab>\n\n <ion-tab tab=\"about\">\n <ion-router-outlet name=\"about\"></ion-router-outlet>\n </ion-tab>\n\n {/* Tab bar */}\n <ion-tab-bar slot=\"bottom\">\n <ion-tab-button tab=\"schedule\" href=\"/app/tabs/(schedule:schedule)\">\n <ion-icon name=\"calendar\"></ion-icon>\n <ion-label>Schedule</ion-label>\n </ion-tab-button>\n\n <ion-tab-button tab=\"speakers\" href=\"/app/tabs/(speakers:speakers)\">\n <ion-icon name=\"person-circle\"></ion-icon>\n <ion-label>Speakers</ion-label>\n </ion-tab-button>\n\n <ion-tab-button tab=\"map\" href=\"/app/tabs/(map:map)\">\n <ion-icon name=\"map\"></ion-icon>\n <ion-label>Map</ion-label>\n </ion-tab-button>\n\n <ion-tab-button tab=\"about\" href=\"/app/tabs/(about:about)\">\n <ion-icon name=\"information-circle\"></ion-icon>\n <ion-label>About</ion-label>\n </ion-tab-button>\n </ion-tab-bar>\n </ion-tabs>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <ion-tabs>\n <!-- Tab bar -->\n <ion-tab-bar slot=\"bottom\">\n <ion-tab-button tab=\"schedule\" href=\"/tabs/schedule\">\n <ion-icon :icon=\"calendar\"></ion-icon>\n <ion-label>Schedule</ion-label>\n </ion-tab-button>\n\n <ion-tab-button tab=\"speakers\" href=\"/tabs/speakers\">\n <ion-icon :icon=\"person-circle\"></ion-icon>\n <ion-label>Speakers</ion-label>\n </ion-tab-button>\n\n <ion-tab-button tab=\"map\" href=\"/tabs/map\">\n <ion-icon :icon=\"map\"></ion-icon>\n <ion-label>Map</ion-label>\n </ion-tab-button>\n\n <ion-tab-button tab=\"about\" href=\"/tabs/about\">\n <ion-icon :icon=\"informationCircle\"></ion-icon>\n <ion-label>About</ion-label>\n </ion-tab-button>\n </ion-tab-bar>\n </ion-tabs>\n</template>\n\n<script>\nimport { \n IonIcon, \n IonLabel, \n IonTabBar, \n IonTabButton, \n IonTabs\n} from '@ionic/vue';\nimport { calendar, informationCircle, map, personCircle } from 'ionicons/icons';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: {\n IonIcon, \n IonLabel, \n IonTabBar, \n IonTabButton, \n IonTabs\n },\n setup() {\n return { calendar, informationCircle, map, personCircle }\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot interact with the tab button.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "download",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "download",
|
||
"reflectToAttr": false,
|
||
"docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "href",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "href",
|
||
"reflectToAttr": false,
|
||
"docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "layout",
|
||
"type": "\"icon-bottom\" | \"icon-end\" | \"icon-hide\" | \"icon-start\" | \"icon-top\" | \"label-hide\" | undefined",
|
||
"mutable": true,
|
||
"attr": "layout",
|
||
"reflectToAttr": false,
|
||
"docs": "Set the layout of the text and icon in the tab bar.\nIt defaults to `'icon-top'`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "icon-bottom",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "icon-end",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "icon-hide",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "icon-start",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "icon-top",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "label-hide",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "rel",
|
||
"reflectToAttr": false,
|
||
"docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "selected",
|
||
"type": "boolean",
|
||
"mutable": true,
|
||
"attr": "selected",
|
||
"reflectToAttr": false,
|
||
"docs": "The selected tab component",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "tab",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "tab",
|
||
"reflectToAttr": false,
|
||
"docs": "A tab id must be provided for each `ion-tab`. It's used internally to reference\nthe selected tab or by the router to switch between them.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "target",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "target",
|
||
"reflectToAttr": false,
|
||
"docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [
|
||
{
|
||
"event": "ionTabBarChanged",
|
||
"target": "window",
|
||
"capture": false,
|
||
"passive": false
|
||
}
|
||
],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the tab button"
|
||
},
|
||
{
|
||
"name": "--background-focused",
|
||
"annotation": "prop",
|
||
"docs": "Background of the tab button when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--background-focused-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the tab button background when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the tab button"
|
||
},
|
||
{
|
||
"name": "--color-focused",
|
||
"annotation": "prop",
|
||
"docs": "Color of the tab button when focused with the tab key"
|
||
},
|
||
{
|
||
"name": "--color-selected",
|
||
"annotation": "prop",
|
||
"docs": "Color of the selected tab button"
|
||
},
|
||
{
|
||
"name": "--padding-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom padding of the tab button"
|
||
},
|
||
{
|
||
"name": "--padding-end",
|
||
"annotation": "prop",
|
||
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button"
|
||
},
|
||
{
|
||
"name": "--padding-start",
|
||
"annotation": "prop",
|
||
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button"
|
||
},
|
||
{
|
||
"name": "--padding-top",
|
||
"annotation": "prop",
|
||
"docs": "Top padding of the tab button"
|
||
},
|
||
{
|
||
"name": "--ripple-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the button ripple effect"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [
|
||
{
|
||
"name": "native",
|
||
"docs": "The native HTML anchor element that wraps all child elements."
|
||
}
|
||
],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-ripple-effect"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-tab-button": [
|
||
"ion-ripple-effect"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/tabs/tabs.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-tabs",
|
||
"readme": "# ion-tabs\n\nTabs 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.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "- Content is placed between the named slots if provided without a slot.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "top - Content is placed at the top of the screen.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "bottom - Content is placed at the bottom of the screen.",
|
||
"name": "slot"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<ion-tabs>\n <ion-tab-bar slot=\"bottom\">\n <ion-tab-button tab=\"schedule\">\n <ion-icon name=\"calendar\"></ion-icon>\n <ion-label>Schedule</ion-label>\n <ion-badge>6</ion-badge>\n </ion-tab-button>\n\n <ion-tab-button tab=\"speakers\">\n <ion-icon name=\"person-circle\"></ion-icon>\n <ion-label>Speakers</ion-label>\n </ion-tab-button>\n\n <ion-tab-button tab=\"map\">\n <ion-icon name=\"map\"></ion-icon>\n <ion-label>Map</ion-label>\n </ion-tab-button>\n\n <ion-tab-button tab=\"about\">\n <ion-icon name=\"information-circle\"></ion-icon>\n <ion-label>About</ion-label>\n </ion-tab-button>\n </ion-tab-bar>\n</ion-tabs>\n```\n\n\n### Router integration\n\nWhen used with Angular's router the `tab` property of the `ion-tab-button` should be a reference to the route path.\n\n```html\n<ion-tabs>\n <ion-tab-bar slot=\"bottom\">\n <ion-tab-button tab=\"schedule\">\n <ion-icon name=\"calendar\"></ion-icon>\n <ion-label>Schedule</ion-label>\n </ion-tab-button>\n </ion-tab-bar>\n</ion-tabs>\n```\n\n```typescript\nimport { Routes } from '@angular/router';\nimport { TabsPage } from './tabs-page';\n\nconst routes: Routes = [\n {\n path: 'tabs',\n component: TabsPage,\n children: [\n {\n path: 'schedule',\n children: [\n {\n path: '',\n loadChildren: '../schedule/schedule.module#ScheduleModule'\n }\n ]\n },\n {\n path: '',\n redirectTo: '/app/tabs/schedule',\n pathMatch: 'full'\n }\n ]\n }\n];\n```\n",
|
||
"javascript": "```html\n<ion-tabs>\n\n <ion-tab tab=\"tab-schedule\">\n <ion-nav></ion-nav>\n </ion-tab>\n\n <ion-tab tab=\"tab-speaker\">\n <ion-nav></ion-nav>\n </ion-tab>\n\n <ion-tab tab=\"tab-map\" component=\"page-map\">\n <ion-nav></ion-nav>\n </ion-tab>\n\n <ion-tab tab=\"tab-about\" component=\"page-about\">\n <ion-nav></ion-nav>\n </ion-tab>\n\n <ion-tab-bar slot=\"bottom\">\n <ion-tab-button tab=\"tab-schedule\">\n <ion-icon name=\"calendar\"></ion-icon>\n <ion-label>Schedule</ion-label>\n <ion-badge>6</ion-badge>\n </ion-tab-button>\n\n <ion-tab-button tab=\"tab-speaker\">\n <ion-icon name=\"person-circle\"></ion-icon>\n <ion-label>Speakers</ion-label>\n </ion-tab-button>\n\n <ion-tab-button tab=\"tab-map\">\n <ion-icon name=\"map\"></ion-icon>\n <ion-label>Map</ion-label>\n </ion-tab-button>\n\n <ion-tab-button tab=\"tab-about\">\n <ion-icon name=\"information-circle\"></ion-icon>\n <ion-label>About</ion-label>\n </ion-tab-button>\n </ion-tab-bar>\n\n</ion-tabs>\n```\n\n\n### Activating Tabs\n\nEach `ion-tab-button` will activate one of the tabs when pressed. In order to link the `ion-tab-button` to the `ion-tab` container, a matching `tab` property should be set on each component.\n\n```html\n<ion-tab tab=\"settings\">\n ...\n</ion-tab>\n\n<ion-tab-button tab=\"settings\">\n ...\n</ion-tab-button>\n```\n\nThe `ion-tab-button` and `ion-tab` above are linked by the common `tab` property.\n\nThe `tab` property identifies each tab, and it has to be unique within the `ion-tabs`. It's important to always set the `tab` property on the `ion-tab` and `ion-tab-button`, even if one component is not used.\n\n\n### Router integration\n\nWhen used with Ionic's router (`ion-router`) the `tab` property of the `ion-tab` matches the `component` property of an `ion-route`.\n\nThe following route within the scope of an `ion-tabs` outlet:\n\n```html\n<ion-route url=\"/settings-page\" component=\"settings\"></ion-route>\n```\n\nwill match the following tab:\n\n```html\n<ion-tab tab=\"settings\" component=\"settings-component\"></ion-tab>\n```",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonBadge } from '@ionic/react';\nimport { calendar, personCircle, map, informationCircle } from 'ionicons/icons';\n\n\nexport const TabsExample: React.FC = () => (\n <IonTabs>\n <IonTabBar slot=\"bottom\">\n <IonTabButton tab=\"schedule\">\n <IonIcon icon={calendar} />\n <IonLabel>Schedule</IonLabel>\n <IonBadge>6</IonBadge>\n </IonTabButton>\n\n <IonTabButton tab=\"speakers\">\n <IonIcon icon={personCircle} />\n <IonLabel>Speakers</IonLabel>\n </IonTabButton>\n\n <IonTabButton tab=\"map\">\n <IonIcon icon={map} />\n <IonLabel>Map</IonLabel>\n </IonTabButton>\n\n <IonTabButton tab=\"about\">\n <IonIcon icon={informationCircle} />\n <IonLabel>About</IonLabel>\n </IonTabButton>\n </IonTabBar>\n </IonTabs>\n);\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'tabs-example',\n styleUrl: 'tabs-example.css'\n})\nexport class TabsExample {\n render() {\n return [\n <ion-tabs>\n <ion-tab tab=\"tab-schedule\">\n <ion-nav></ion-nav>\n </ion-tab>\n\n <ion-tab tab=\"tab-speaker\">\n <ion-nav></ion-nav>\n </ion-tab>\n\n <ion-tab tab=\"tab-map\" component=\"page-map\">\n <ion-nav></ion-nav>\n </ion-tab>\n\n <ion-tab tab=\"tab-about\" component=\"page-about\">\n <ion-nav></ion-nav>\n </ion-tab>\n\n <ion-tab-bar slot=\"bottom\">\n <ion-tab-button tab=\"tab-schedule\">\n <ion-icon name=\"calendar\"></ion-icon>\n <ion-label>Schedule</ion-label>\n <ion-badge>6</ion-badge>\n </ion-tab-button>\n\n <ion-tab-button tab=\"tab-speaker\">\n <ion-icon name=\"person-circle\"></ion-icon>\n <ion-label>Speakers</ion-label>\n </ion-tab-button>\n\n <ion-tab-button tab=\"tab-map\">\n <ion-icon name=\"map\"></ion-icon>\n <ion-label>Map</ion-label>\n </ion-tab-button>\n\n <ion-tab-button tab=\"tab-about\">\n <ion-icon name=\"information-circle\"></ion-icon>\n <ion-label>About</ion-label>\n </ion-tab-button>\n </ion-tab-bar>\n\n </ion-tabs>\n ];\n }\n}\n```\n\n\n### Activating Tabs\n\nEach `ion-tab-button` will activate one of the tabs when pressed. In order to link the `ion-tab-button` to the `ion-tab` container, a matching `tab` property should be set on each component.\n\n```jsx\n<ion-tab tab=\"settings\">\n ...\n</ion-tab>\n\n<ion-tab-button tab=\"settings\">\n ...\n</ion-tab-button>\n```\n\nThe `ion-tab-button` and `ion-tab` above are linked by the common `tab` property.\n\nThe `tab` property identifies each tab, and it has to be unique within the `ion-tabs`. It's important to always set the `tab` property on the `ion-tab` and `ion-tab-button`, even if one component is not used.\n\n\n### Router integration\n\nWhen used with Ionic's router (`ion-router`) the `tab` property of the `ion-tab` matches the `component` property of an `ion-route`.\n\nThe following route within the scope of an `ion-tabs` outlet:\n\n```tsx\n<ion-route url=\"/settings-page\" component=\"settings\"></ion-route>\n```\n\nwill match the following tab:\n\n```tsx\n<ion-tab tab=\"settings\" component=\"settings-component\"></ion-tab>\n```",
|
||
"vue": "**Tabs.vue**\n```html\n<template>\n <ion-page>\n <ion-tabs @ionTabsWillChange=\"beforeTabChange\" @ionTabsDidChange=\"afterTabChange\">\n <ion-tab-bar slot=\"bottom\">\n <ion-tab-button tab=\"schedule\" href=\"/tabs/schedule\">\n <ion-icon :icon=\"calendar\"></ion-icon>\n <ion-label>Schedule</ion-label>\n <ion-badge>6</ion-badge>\n </ion-tab-button>\n \n <ion-tab-button tab=\"speakers\" href=\"/tabs/speakers\">\n <ion-icon :icon=\"personCircle\"></ion-icon>\n <ion-label>Speakers</ion-label>\n </ion-tab-button>\n </ion-tab-bar>\n </ion-tabs>\n </ion-page>\n</template>\n\n<script>\nimport { defineComponent } from 'vue';\nimport { \n IonIcon, \n IonLabel, \n IonPage,\n IonTabBar, \n IonTabButton, \n IonTabs\n} from '@ionic/vue';\nimport { calendar, personCircle } from 'ionicons/icons';\n\nexport default defineComponent({\n components: { IonIcon, IonLabel, IonPage, IonTabBar, IonTabButton, IonTabs },\n setup() {\n const beforeTabChange = () => {\n // do something before tab change\n }\n const afterTabChange = () => {\n // do something after tab change\n }\n return {\n calendar,\n personCircle,\n beforeTabChange,\n afterTabChange\n }\n }\n});\n</script>\n```\n\n**Schedule.vue**\n```html\n<template>\n <ion-page>\n <ion-header>\n <ion-toolbar>\n <ion-title>Schedule</ion-title>\n </ion-toolbar>\n </ion-header>\n \n <ion-content class=\"ion-padding\">Schedule Tab</ion-content>\n </ion-page>\n</template>\n\n<script>\nimport { defineComponent } from 'vue';\nimport {\n IonContent,\n IonHeader,\n IonPage,\n IonTitle,\n IonToolbar\n} from '@ionic/vue';\n\nexport default defineComponent({\n components: { IonContent, IonHeader, IonPage, IonTitle, IonToolbar }\n});\n</script>\n```\n\n**Speakers.vue**\n```html\n<template>\n <ion-page>\n <ion-header>\n <ion-toolbar>\n <ion-title>Speakers</ion-title>\n </ion-toolbar>\n </ion-header>\n \n <ion-content class=\"ion-padding\">Speakers Tab</ion-content>\n </ion-page>\n</template>\n\n<script>\nimport { defineComponent } from 'vue';\nimport {\n IonContent,\n IonHeader,\n IonPage,\n IonTitle,\n IonToolbar\n} from '@ionic/vue';\n\nexport default defineComponent({\n components: { IonContent, IonHeader, IonPage, IonTitle, IonToolbar }\n});\n</script>\n```"
|
||
},
|
||
"props": [],
|
||
"methods": [
|
||
{
|
||
"name": "getSelected",
|
||
"returns": {
|
||
"type": "Promise<string | undefined>",
|
||
"docs": ""
|
||
},
|
||
"signature": "getSelected() => Promise<string | undefined>",
|
||
"parameters": [],
|
||
"docs": "Get the currently selected tab.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "getTab",
|
||
"returns": {
|
||
"type": "Promise<HTMLIonTabElement | undefined>",
|
||
"docs": ""
|
||
},
|
||
"signature": "getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>",
|
||
"parameters": [],
|
||
"docs": "Get a specific tab by the value of its `tab` property or an element reference.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "select",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "select(tab: string | HTMLIonTabElement) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Select a tab by the value of its `tab` property or an element reference.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
|
||
}
|
||
]
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionTabsDidChange",
|
||
"detail": "{ tab: string; }",
|
||
"bubbles": false,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the navigation has finished transitioning to a new component.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionTabsWillChange",
|
||
"detail": "{ tab: string; }",
|
||
"bubbles": false,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the navigation is about to transition to a new component.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"docs": "Content is placed between the named slots if provided without a slot."
|
||
},
|
||
{
|
||
"name": "bottom",
|
||
"docs": "Content is placed at the bottom of the screen."
|
||
},
|
||
{
|
||
"name": "top",
|
||
"docs": "Content is placed at the top of the screen."
|
||
}
|
||
],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/text/text.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-text",
|
||
"readme": "# ion-text\n\nThe 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.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"javascript": "```html\n<ion-text color=\"secondary\">\n <h1>H1: The quick brown fox jumps over the lazy dog</h1>\n</ion-text>\n\n<ion-text color=\"primary\">\n <h2>H2: The quick brown fox jumps over the lazy dog</h2>\n</ion-text>\n\n<ion-text color=\"light\">\n <h3>H3: The quick brown fox jumps over the lazy dog</h3>\n</ion-text>\n\n<ion-text color=\"danger\">\n <h4 >H4: The quick brown fox jumps over the lazy dog</h4>\n</ion-text>\n\n<ion-text color=\"dark\">\n <h5>H5: The quick brown fox jumps over the lazy dog</h5>\n</ion-text>\n\n<p>\n I saw a werewolf with a Chinese menu in his hand.\n Walking through the <ion-text color=\"danger\"><sub>streets</sub></ion-text> of Soho in the rain.\n He <ion-text color=\"primary\"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.\n Gonna get a <ion-text color=\"secondary\"><a>big dish of beef chow mein.</a></ion-text>\n <ion-text color=\"danger\"><ion-icon name=\"cut\"></ion-icon></ion-text>\n</p>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/textarea/textarea.tsx",
|
||
"encapsulation": "scoped",
|
||
"tag": "ion-textarea",
|
||
"readme": "# ion-textarea\n\nThe 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.\n\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<!-- Default textarea -->\n<ion-textarea></ion-textarea>\n\n<!-- Textarea in an item with a placeholder -->\n<ion-item>\n <ion-textarea placeholder=\"Enter more information here...\"></ion-textarea>\n</ion-item>\n\n<!-- Textarea in an item with a floating label -->\n<ion-item>\n <ion-label position=\"floating\">Description</ion-label>\n <ion-textarea></ion-textarea>\n</ion-item>\n\n<!-- Disabled and readonly textarea in an item with a stacked label -->\n<ion-item>\n <ion-label position=\"stacked\">Summary</ion-label>\n <ion-textarea\n disabled\n readonly\n value=\"Ionic enables developers to build performant, high-quality mobile apps.\">\n </ion-textarea>\n</ion-item>\n\n<!-- Textarea that clears the value on edit -->\n<ion-item>\n <ion-label>Comment</ion-label>\n <ion-textarea clearOnEdit=\"true\"></ion-textarea>\n</ion-item>\n\n<!-- Textarea with custom number of rows and cols -->\n<ion-item>\n <ion-label>Notes</ion-label>\n <ion-textarea rows=\"6\" cols=\"20\" placeholder=\"Enter any notes here...\"></ion-textarea>\n</ion-item>\n```\n",
|
||
"javascript": "```html\n<!-- Default textarea -->\n<ion-textarea></ion-textarea>\n\n<!-- Textarea in an item with a placeholder -->\n<ion-item>\n <ion-textarea placeholder=\"Enter more information here...\"></ion-textarea>\n</ion-item>\n\n<!-- Textarea in an item with a floating label -->\n<ion-item>\n <ion-label position=\"floating\">Description</ion-label>\n <ion-textarea></ion-textarea>\n</ion-item>\n\n<!-- Disabled and readonly textarea in an item with a stacked label -->\n<ion-item>\n <ion-label position=\"stacked\">Summary</ion-label>\n <ion-textarea\n disabled\n readonly\n value=\"Ionic enables developers to build performant, high-quality mobile apps.\">\n </ion-textarea>\n</ion-item>\n\n<!-- Textarea that clears the value on edit -->\n<ion-item>\n <ion-label>Comment</ion-label>\n <ion-textarea clear-on-edit=\"true\"></ion-textarea>\n</ion-item>\n\n<!-- Textarea with custom number of rows and cols -->\n<ion-item>\n <ion-label>Notes</ion-label>\n <ion-textarea rows=\"6\" cols=\"20\" placeholder=\"Enter any notes here...\"></ion-textarea>\n</ion-item>\n```\n",
|
||
"react": "```tsx\nimport React, { useState } from 'react';\nimport { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonTextarea, IonItem, IonLabel, IonItemDivider, IonList } from '@ionic/react';\n\nexport const TextAreaExamples: React.FC = () => {\n const [text, setText] = useState<string>();\n\n return (\n <IonPage>\n <IonHeader>\n <IonToolbar>\n <IonTitle>TextArea Examples</IonTitle>\n </IonToolbar>\n </IonHeader>\n <IonContent>\n <IonList>\n <IonItemDivider>Default textarea</IonItemDivider> \n <IonItem>\n <IonTextarea value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>\n </IonItem>\n\n <IonItemDivider>Textarea in an item with a placeholder</IonItemDivider>\n <IonItem>\n <IonTextarea placeholder=\"Enter more information here...\" value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>\n </IonItem>\n\n <IonItemDivider>Textarea in an item with a floating label</IonItemDivider>\n <IonItem>\n <IonLabel position=\"floating\">Description</IonLabel>\n <IonTextarea value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>\n </IonItem>\n\n <IonItemDivider>Disabled and readonly textarea in an item with a stacked label</IonItemDivider>\n <IonItem>\n <IonLabel position=\"stacked\">Summary</IonLabel>\n <IonTextarea\n disabled\n readonly\n value={text} onIonChange={e => setText(e.detail.value!)}>\n </IonTextarea>\n </IonItem>\n\n <IonItemDivider>Textarea that clears the value on edit</IonItemDivider>\n <IonItem>\n <IonLabel>Comment</IonLabel>\n <IonTextarea clearOnEdit={true} value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>\n </IonItem>\n\n <IonItemDivider>Textarea with custom number of rows and cols</IonItemDivider>\n <IonItem>\n <IonLabel>Notes</IonLabel>\n <IonTextarea rows={6} cols={20} placeholder=\"Enter any notes here...\" value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>\n </IonItem>\n </IonList>\n </IonContent>\n </IonPage>\n );\n};\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'textarea-example',\n styleUrl: 'textarea-example.css'\n})\nexport class TextareaExample {\n render() {\n return [\n // Default textarea\n <ion-textarea></ion-textarea>,\n\n // Textarea in an item with a placeholder\n <ion-item>\n <ion-textarea placeholder=\"Enter more information here...\"></ion-textarea>\n </ion-item>,\n\n // Textarea in an item with a floating label\n <ion-item>\n <ion-label position=\"floating\">Description</ion-label>\n <ion-textarea></ion-textarea>\n </ion-item>,\n\n // Disabled and readonly textarea in an item with a stacked label\n <ion-item>\n <ion-label position=\"stacked\">Summary</ion-label>\n <ion-textarea\n disabled\n readonly\n value=\"Ionic enables developers to build performant, high-quality mobile apps.\">\n </ion-textarea>\n </ion-item>,\n\n // Textarea that clears the value on edit\n <ion-item>\n <ion-label>Comment</ion-label>\n <ion-textarea clearOnEdit={true}></ion-textarea>\n </ion-item>,\n\n // Textarea with custom number of rows and cols\n <ion-item>\n <ion-label>Notes</ion-label>\n <ion-textarea rows={6} cols={20} placeholder=\"Enter any notes here...\"></ion-textarea>\n </ion-item>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <!-- Default textarea -->\n <ion-textarea></ion-textarea>\n\n <!-- Textarea in an item with a placeholder -->\n <ion-item>\n <ion-textarea placeholder=\"Enter more information here...\"></ion-textarea>\n </ion-item>\n\n <!-- Textarea in an item with a floating label -->\n <ion-item>\n <ion-label position=\"floating\">Description</ion-label>\n <ion-textarea></ion-textarea>\n </ion-item>\n\n <!-- Disabled and readonly textarea in an item with a stacked label -->\n <ion-item>\n <ion-label position=\"stacked\">Summary</ion-label>\n <ion-textarea\n disabled\n readonly\n value=\"Ionic enables developers to build performant, high-quality mobile apps.\">\n </ion-textarea>\n </ion-item>\n\n <!-- Textarea that clears the value on edit -->\n <ion-item>\n <ion-label>Comment</ion-label>\n <ion-textarea clear-on-edit=\"true\"></ion-textarea>\n </ion-item>\n\n <!-- Textarea with custom number of rows and cols -->\n <ion-item>\n <ion-label>Notes</ion-label>\n <ion-textarea rows=\"6\" cols=\"20\" placeholder=\"Enter any notes here...\"></ion-textarea>\n </ion-item>\n</template>\n\n<script>\nimport { IonItem, IonLabel, IonTextarea } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonItem, IonLabel, IonTextarea }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "autoGrow",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "auto-grow",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the element height will increase based on the value.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "autocapitalize",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "autocapitalize",
|
||
"reflectToAttr": false,
|
||
"docs": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.",
|
||
"docsTags": [],
|
||
"default": "'none'",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "autofocus",
|
||
"reflectToAttr": false,
|
||
"docs": "This Boolean attribute lets you specify that a form control should have input focus when the page loads.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "clearOnEdit",
|
||
"type": "boolean",
|
||
"mutable": true,
|
||
"attr": "clear-on-edit",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "cols",
|
||
"type": "number | undefined",
|
||
"mutable": false,
|
||
"attr": "cols",
|
||
"reflectToAttr": false,
|
||
"docs": "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "debounce",
|
||
"type": "number",
|
||
"mutable": false,
|
||
"attr": "debounce",
|
||
"reflectToAttr": false,
|
||
"docs": "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`.",
|
||
"docsTags": [],
|
||
"default": "0",
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot interact with the textarea.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "enterkeyhint",
|
||
"type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
|
||
"mutable": false,
|
||
"attr": "enterkeyhint",
|
||
"reflectToAttr": false,
|
||
"docs": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "done",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "enter",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "go",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "next",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "previous",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "search",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "send",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "inputmode",
|
||
"type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
|
||
"mutable": false,
|
||
"attr": "inputmode",
|
||
"reflectToAttr": false,
|
||
"docs": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "decimal",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "email",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "none",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "numeric",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "search",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "tel",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "text",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "url",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "maxlength",
|
||
"type": "number | undefined",
|
||
"mutable": false,
|
||
"attr": "maxlength",
|
||
"reflectToAttr": false,
|
||
"docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "minlength",
|
||
"type": "number | undefined",
|
||
"mutable": false,
|
||
"attr": "minlength",
|
||
"reflectToAttr": false,
|
||
"docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "name",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "name",
|
||
"reflectToAttr": false,
|
||
"docs": "The name of the control, which is submitted with the form data.",
|
||
"docsTags": [],
|
||
"default": "this.inputId",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "placeholder",
|
||
"type": "null | string | undefined",
|
||
"mutable": false,
|
||
"attr": "placeholder",
|
||
"reflectToAttr": false,
|
||
"docs": "Instructional text that shows before the input has a value.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "readonly",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "readonly",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot modify the value.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "required",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "required",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user must fill in a value before submitting a form.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "rows",
|
||
"type": "number | undefined",
|
||
"mutable": false,
|
||
"attr": "rows",
|
||
"reflectToAttr": false,
|
||
"docs": "The number of visible text lines for the control.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "spellcheck",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "spellcheck",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the element will have its spelling and grammar checked.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "null | string | undefined",
|
||
"mutable": true,
|
||
"attr": "value",
|
||
"reflectToAttr": false,
|
||
"docs": "The value of the textarea.",
|
||
"docsTags": [],
|
||
"default": "''",
|
||
"values": [
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "wrap",
|
||
"type": "\"hard\" | \"off\" | \"soft\" | undefined",
|
||
"mutable": false,
|
||
"attr": "wrap",
|
||
"reflectToAttr": false,
|
||
"docs": "Indicates how the control wraps text.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "hard",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "off",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "soft",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "getInputElement",
|
||
"returns": {
|
||
"type": "Promise<HTMLTextAreaElement>",
|
||
"docs": ""
|
||
},
|
||
"signature": "getInputElement() => Promise<HTMLTextAreaElement>",
|
||
"parameters": [],
|
||
"docs": "Returns the native `<textarea>` element used under the hood.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "setFocus",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "setFocus() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global\n`textarea.focus()`.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionBlur",
|
||
"detail": "FocusEvent",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the input loses focus.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionChange",
|
||
"detail": "TextareaChangeEventDetail",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the input value has changed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionFocus",
|
||
"detail": "FocusEvent",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the input has focus.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionInput",
|
||
"detail": "KeyboardEvent",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when a keyboard input occurred.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the textarea"
|
||
},
|
||
{
|
||
"name": "--border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Border radius of the textarea"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the text"
|
||
},
|
||
{
|
||
"name": "--padding-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom padding of the textarea"
|
||
},
|
||
{
|
||
"name": "--padding-end",
|
||
"annotation": "prop",
|
||
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea"
|
||
},
|
||
{
|
||
"name": "--padding-start",
|
||
"annotation": "prop",
|
||
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea"
|
||
},
|
||
{
|
||
"name": "--padding-top",
|
||
"annotation": "prop",
|
||
"docs": "Top padding of the textarea"
|
||
},
|
||
{
|
||
"name": "--placeholder-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the placeholder text"
|
||
},
|
||
{
|
||
"name": "--placeholder-font-style",
|
||
"annotation": "prop",
|
||
"docs": "Style of the placeholder text"
|
||
},
|
||
{
|
||
"name": "--placeholder-font-weight",
|
||
"annotation": "prop",
|
||
"docs": "Weight of the placeholder text"
|
||
},
|
||
{
|
||
"name": "--placeholder-opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the placeholder text"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/thumbnail/thumbnail.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-thumbnail",
|
||
"readme": "# ion-thumbnail\n\nThumbnails 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.\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"angular": "```html\n<ion-thumbnail>\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\">\n</ion-thumbnail>\n\n<ion-item>\n <ion-thumbnail slot=\"start\">\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\">\n </ion-thumbnail>\n <ion-label>Item Thumbnail</ion-label>\n</ion-item>\n```",
|
||
"javascript": "```html\n<ion-thumbnail>\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\">\n</ion-thumbnail>\n\n<ion-item>\n <ion-thumbnail slot=\"start\">\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\">\n </ion-thumbnail>\n <ion-label>Item Thumbnail</ion-label>\n</ion-item>\n```",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonThumbnail, IonItem, IonLabel, IonContent } from '@ionic/react';\n\nexport const ThumbnailExample: React.FC = () => (\n <IonContent>\n <IonThumbnail>\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\" />\n </IonThumbnail>\n\n <IonItem>\n <IonThumbnail slot=\"start\">\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\" />\n </IonThumbnail>\n <IonLabel>Item Thumbnail</IonLabel>\n </IonItem>\n </IonContent>\n);\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'thumbnail-example',\n styleUrl: 'thumbnail-example.css'\n})\nexport class ThumbnailExample {\n render() {\n return [\n <ion-thumbnail>\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\"/>\n </ion-thumbnail>,\n\n <ion-item>\n <ion-thumbnail slot=\"start\">\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\"/>\n </ion-thumbnail>\n <ion-label>Item Thumbnail</ion-label>\n </ion-item>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <ion-thumbnail>\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\">\n </ion-thumbnail>\n\n <ion-item>\n <ion-thumbnail slot=\"start\">\n <img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\">\n </ion-thumbnail>\n <ion-label>Item Thumbnail</ion-label>\n </ion-item>\n</template>\n\n<script>\nimport { IonItem, IonLabel, IonThumbnail } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonItem, IonLabel, IonThumbnail }\n});\n</script>\n```"
|
||
},
|
||
"props": [],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Border radius of the thumbnail"
|
||
},
|
||
{
|
||
"name": "--size",
|
||
"annotation": "prop",
|
||
"docs": "Size of the thumbnail"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/title/title.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-title",
|
||
"readme": "# ion-title\n\n`ion-title` is a component that sets the title of the `Toolbar`.\n",
|
||
"docs": "`ion-title` is a component that sets the title of the `Toolbar`.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"angular": "```html\n<!-- Default title -->\n<ion-toolbar>\n <ion-title>Default Title</ion-title>\n</ion-toolbar>\n\n<!-- Small title above a default title -->\n<ion-toolbar>\n <ion-title size=\"small\">Small Title above a Default Title</ion-title>\n</ion-toolbar>\n<ion-toolbar>\n <ion-title>Default Title</ion-title>\n</ion-toolbar>\n\n<!-- Large title -->\n<ion-toolbar>\n <ion-title size=\"large\">Large Title</ion-title>\n</ion-toolbar>\n```\n\n### Collapsible Large Titles\n\nIonic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements.\n\n```html\n<ion-header translucent=\"true\">\n <ion-toolbar>\n <ion-title>Settings</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content fullscreen=\"true\">\n <ion-header collapse=\"condense\">\n <ion-toolbar>\n <ion-title size=\"large\">Settings</ion-title>\n </ion-toolbar>\n <ion-toolbar>\n <ion-searchbar></ion-searchbar>\n </ion-toolbar>\n </ion-header>\n\n ...\n\n</ion-content>\n```\n\nIn the example above, notice there are two `ion-header` elements. The first `ion-header` represents the \"collapsed\" state of your collapsible header, and the second `ion-header` represents the \"expanded\" state of your collapsible header. Notice that the second `ion-header` must have `collapse=\"condense\"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size=\"large\"`.\n\n```html\n<ion-header translucent=\"true\">\n <ion-toolbar>\n <ion-buttons collapse=\"true\" slot=\"end\">\n <ion-button>Click Me</ion-button>\n </ion-buttons>\n <ion-title>Settings</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content fullscreen=\"true\">\n <ion-header collapse=\"condense\">\n <ion-toolbar>\n <ion-buttons collapse=\"true\" slot=\"end\">\n <ion-button>Click Me</ion-button>\n </ion-buttons>\n <ion-title size=\"large\">Settings</ion-title>\n </ion-toolbar>\n <ion-toolbar>\n <ion-searchbar></ion-searchbar>\n </ion-toolbar>\n </ion-header>\n\n ...\n\n</ion-content>\n```\n\nIn this example, notice that we have added two sets of `ion-buttons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.\n\n`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.\n\n> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.\n\n### Styling Collapsible Large Titles\n\nThe collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the `ion-toolbar` that contains the collapsible large title should always match the background color of `ion-content`. \n\nBy default, the `ion-toolbar` that contains the standard title is hidden using `opacity: 0` and is progressively shown as you collapse the large title by scrolling. As a result, the background color that you see behind the standard title is actually the background color of `ion-content`.\n\nYou can change the background color of the toolbar with the standard title by setting the `--background` CSS variable on `ion-toolbar`. This will give the effect of the header changing color as you collapse the large title.\n\nWhen styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.\n\n```css\nion-title.title-large {\n color: purple;\n font-size: 30px;\n}\n```\n",
|
||
"javascript": "```html\n<!-- Default title -->\n<ion-toolbar>\n <ion-title>Default Title</ion-title>\n</ion-toolbar>\n\n<!-- Small title above a default title -->\n<ion-toolbar>\n <ion-title size=\"small\">Small Title above a Default Title</ion-title>\n</ion-toolbar>\n<ion-toolbar>\n <ion-title>Default Title</ion-title>\n</ion-toolbar>\n\n<!-- Large title -->\n<ion-toolbar>\n <ion-title size=\"large\">Large Title</ion-title>\n</ion-toolbar>\n```\n\n### Collapsible Large Titles\n\nIonic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements.\n\n```html\n<ion-header translucent=\"true\">\n <ion-toolbar>\n <ion-title>Settings</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content fullscreen=\"true\">\n <ion-header collapse=\"condense\">\n <ion-toolbar>\n <ion-title size=\"large\">Settings</ion-title>\n </ion-toolbar>\n <ion-toolbar>\n <ion-searchbar></ion-searchbar>\n </ion-toolbar>\n </ion-header>\n\n ...\n\n</ion-content>\n```\n\nIn the example above, notice there are two `ion-header` elements. The first `ion-header` represents the \"collapsed\" state of your collapsible header, and the second `ion-header` represents the \"expanded\" state of your collapsible header. Notice that the second `ion-header` must have `collapse=\"condense\"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size=\"large\"`.\n\n```html\n<ion-header translucent=\"true\">\n <ion-toolbar>\n <ion-buttons collapse=\"true\" slot=\"end\">\n <ion-button>Click Me</ion-button>\n </ion-buttons>\n <ion-title>Settings</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content fullscreen=\"true\">\n <ion-header collapse=\"condense\">\n <ion-toolbar>\n <ion-buttons collapse=\"true\" slot=\"end\">\n <ion-button>Click Me</ion-button>\n </ion-buttons>\n <ion-title size=\"large\">Settings</ion-title>\n </ion-toolbar>\n <ion-toolbar>\n <ion-searchbar></ion-searchbar>\n </ion-toolbar>\n </ion-header>\n\n ...\n\n</ion-content>\n```\n\nIn this example, notice that we have added two sets of `ion-buttons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.\n\n`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.\n\n> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.\n\n### Styling Collapsible Large Titles\n\nThe collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the `ion-toolbar` that contains the collapsible large title should always match the background color of `ion-content`. \n\nBy default, the `ion-toolbar` that contains the standard title is hidden using `opacity: 0` and is progressively shown as you collapse the large title by scrolling. As a result, the background color that you see behind the standard title is actually the background color of `ion-content`.\n\nYou can change the background color of the toolbar with the standard title by setting the `--background` CSS variable on `ion-toolbar`. This will give the effect of the header changing color as you collapse the large title.\n\nWhen styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.\n\n```css\nion-title.title-large {\n color: purple;\n font-size: 30px;\n}\n```",
|
||
"react": "```tsx\nimport React from 'react';\nimport {\n IonTitle,\n IonToolbar\n} from '@ionic/react';\n\nexport const ToolbarExample: React.FC = () => (\n {/*-- Default title --*/}\n <IonToolbar>\n <IonTitle>Default Title</IonTitle>\n </IonToolbar>\n\n {/*-- Small title --*/}\n <IonToolbar>\n <IonTitle size=\"small\">Small Title above a Default Title</IonTitle>\n </IonToolbar>\n <IonToolbar>\n <IonTitle>Default Title</IonTitle>\n </IonToolbar>\n\n {/*-- Large title --*/}\n <IonToolbar>\n <IonTitle size=\"large\">Large Title</IonTitle>\n </IonToolbar>\n);\n```\n\n### Collapsible Large Titles\n\nIonic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `IonTitle`, `IonHeader`, and (optionally) `IonButtons` elements.\n\n```tsx\nimport React from 'react';\nimport {\n IonContent,\n IonHeader,\n IonSearchbar,\n IonTitle,\n IonToolbar\n} from '@ionic/react';\n\nexport const LargeTitleExample: React.FC = () => (\n <>\n <IonHeader translucent=\"true\">\n <IonToolbar>\n <IonTitle>Settings</IonTitle>\n </IonToolbar>\n </IonHeader>\n\n <IonContent fullscreen=\"true\">\n <IonHeader collapse=\"condense\">\n <IonToolbar>\n <IonTitle size=\"large\">Settings</IonTitle>\n </IonToolbar>\n <IonToolbar>\n <IonSearchbar></IonSearchbar>\n </IonToolbar>\n </IonHeader>\n\n ...\n\n </IonContent>\n </>\n);\n```\n\nIn the example above, notice there are two `IonHeader` elements. The first `IonHeader` represents the \"collapsed\" state of your collapsible header, and the second `IonHeader` represents the \"expanded\" state of your collapsible header. Notice that the second `IonHeader` must have `collapse=\"condense\"` and must exist within `IonContent`. Additionally, in order to get the large title styling, `IonTitle` must have `size=\"large\"`.\n\n```tsx\nimport React from 'react';\nimport {\n IonButton,\n IonButtons,\n IonContent,\n IonHeader,\n IonSearchbar,\n IonTitle,\n IonToolbar\n} from '@ionic/react';\n\nexport const LargeTitleExample: React.FC = () => (\n <>\n <IonHeader translucent=\"true\">\n <IonToolbar>\n <IonButtons collapse=\"true\" slot=\"end\">\n <IonButton>Click Me</IonButton>\n </IonButtons>\n <IonTitle>Settings</IonTitle>\n </IonToolbar>\n </IonHeader>\n\n <IonContent fullscreen=\"true\">\n <IonHeader collapse=\"condense\">\n <IonToolbar>\n <IonButtons collapse=\"true\" slot=\"end\">\n <IonButton>Click Me</IonButton>\n </IonButtons>\n <IonTitle size=\"large\">Settings</IonTitle>\n </IonToolbar>\n <IonToolbar>\n <IonSearchbar></IonSearchbar>\n </IonToolbar>\n </IonHeader>\n\n ...\n\n </IonContent>\n </>\n);\n```\n\nIn this example, notice that we have added two sets of `IonButtons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `IonTitle` element.\n\n`IonButtons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.\n\n> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `IonContent` and `translucent=\"true\"` be set on the main `IonHeader`.\n\n### Styling Collapsible Large Titles\n\nThe collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the `IonToolbar` that contains the collapsible large title should always match the background color of `IonContent`. \n\nBy default, the `IonToolbar` that contains the standard title is hidden using `opacity: 0` and is progressively shown as you collapse the large title by scrolling. As a result, the background color that you see behind the standard title is actually the background color of `IonContent`.\n\nYou can change the background color of the toolbar with the standard title by setting the `--background` CSS variable on `IonToolbar`. This will give the effect of the header changing color as you collapse the large title.\n\nWhen styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.\n\n```css\nion-title.title-large {\n color: purple;\n font-size: 30px;\n}\n```",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'title-example',\n styleUrl: 'title-example.css'\n})\nexport class TitleExample {\n render() {\n return [\n // Default title\n <ion-toolbar>\n <ion-title>Default Title</ion-title>\n </ion-toolbar>,\n\n // Small title above a default title\n <ion-toolbar>\n <ion-title size=\"small\">Small Title above a Default Title</ion-title>\n </ion-toolbar>,\n <ion-toolbar>\n <ion-title>Default Title</ion-title>\n </ion-toolbar>,\n\n // Large title\n <ion-toolbar>\n <ion-title size=\"large\">Large Title</ion-title>\n </ion-toolbar>\n ];\n }\n}\n```\n\n\n### Collapsible Large Titles\n\nIonic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements.\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'title-example',\n styleUrl: 'title-example.css'\n})\nexport class TitleExample {\n render() {\n return [\n <ion-header translucent={true}>\n <ion-toolbar>\n <ion-title>Settings</ion-title>\n </ion-toolbar>\n </ion-header>,\n\n <ion-content fullscreen={true}>\n <ion-header collapse=\"condense\">\n <ion-toolbar>\n <ion-title size=\"large\">Settings</ion-title>\n </ion-toolbar>\n <ion-toolbar>\n <ion-searchbar></ion-searchbar>\n </ion-toolbar>\n </ion-header>\n\n ...\n\n </ion-content>\n ];\n }\n}\n```\n\nIn the example above, notice there are two `ion-header` elements. The first `ion-header` represents the \"collapsed\" state of your collapsible header, and the second `ion-header` represents the \"expanded\" state of your collapsible header. Notice that the second `ion-header` must have `collapse=\"condense\"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size=\"large\"`.\n\n```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'title-example',\n styleUrl: 'title-example.css'\n})\nexport class TitleExample {\n render() {\n return [\n <ion-header translucent={true}>\n <ion-toolbar>\n <ion-buttons collapse={true} slot=\"end\">\n <ion-button>Click Me</ion-button>\n </ion-buttons>\n <ion-title>Settings</ion-title>\n </ion-toolbar>\n </ion-header>,\n\n <ion-content fullscreen={true}>\n <ion-header collapse=\"condense\">\n <ion-toolbar>\n <ion-buttons collapse={true} slot=\"end\">\n <ion-button>Click Me</ion-button>\n </ion-buttons>\n <ion-title size=\"large\">Settings</ion-title>\n </ion-toolbar>\n <ion-toolbar>\n <ion-searchbar></ion-searchbar>\n </ion-toolbar>\n </ion-header>\n\n ...\n\n </ion-content>\n ];\n }\n}\n```\n\nIn this example, notice that we have added two sets of `ion-buttons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.\n\n`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.\n\nWhen styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.\n\n> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.\n\n### Styling Collapsible Large Titles\n\nThe collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the `ion-toolbar` that contains the collapsible large title should always match the background color of `ion-content`. \n\nBy default, the `ion-toolbar` that contains the standard title is hidden using `opacity: 0` and is progressively shown as you collapse the large title by scrolling. As a result, the background color that you see behind the standard title is actually the background color of `ion-content`.\n\nYou can change the background color of the toolbar with the standard title by setting the `--background` CSS variable on `ion-toolbar`. This will give the effect of the header changing color as you collapse the large title.\n\nWhen styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.\n\n```css\nion-title.title-large {\n color: purple;\n font-size: 30px;\n}\n```",
|
||
"vue": "```html\n<template>\n <!-- Default title -->\n <ion-toolbar>\n <ion-title>Default Title</ion-title>\n </ion-toolbar>\n\n <!-- Small title -->\n <ion-toolbar>\n <ion-title size=\"small\">Small Title above a Default Title</ion-title>\n </ion-toolbar>\n <ion-toolbar>\n <ion-title>Default Title</ion-title>\n </ion-toolbar>\n\n <!-- Large title -->\n <ion-toolbar>\n <ion-title size=\"large\">Large Title</ion-title>\n </ion-toolbar>\n</template>\n\n<script>\nimport { IonTitle, IonToolbar } from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: { IonTitle, IonToolbar }\n});\n</script>\n```\n\n### Collapsible Large Titles\n\nIonic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements.\n\n```html\n<template>\n <ion-header :translucent=\"true\">\n <ion-toolbar>\n <ion-title>Settings</ion-title>\n </ion-toolbar>\n </ion-header>\n\n <ion-content :fullscreen=\"true\">\n <ion-header collapse=\"condense\">\n <ion-toolbar>\n <ion-title size=\"large\">Settings</ion-title>\n </ion-toolbar>\n <ion-toolbar>\n <ion-searchbar></ion-searchbar>\n </ion-toolbar>\n </ion-header>\n\n ...\n\n </ion-content>\n</template>\n\n<script>\nimport { \n IonContent, \n IonHeader, \n IonSearchbar, \n IonTitle, \n IonToolbar\n} from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: {\n IonContent, \n IonHeader, \n IonSearchbar, \n IonTitle, \n IonToolbar\n }\n});\n</script>\n```\n\nIn the example above, notice there are two `ion-header` elements. The first `ion-header` represents the \"collapsed\" state of your collapsible header, and the second `ion-header` represents the \"expanded\" state of your collapsible header. Notice that the second `ion-header` must have `collapse=\"condense\"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size=\"large\"`.\n\n```html\n<template>\n <ion-header :translucent=\"true\">\n <ion-toolbar>\n <ion-buttons :collapse=\"true\" slot=\"end\">\n <ion-button>Click Me</ion-button>\n </ion-buttons>\n <ion-title>Settings</ion-title>\n </ion-toolbar>\n </ion-header>\n\n <ion-content :fullscreen=\"true\">\n <ion-header collapse=\"condense\">\n <ion-toolbar>\n <ion-buttons :collapse=\"true\" slot=\"end\">\n <ion-button>Click Me</ion-button>\n </ion-buttons>\n <ion-title size=\"large\">Settings</ion-title>\n </ion-toolbar>\n <ion-toolbar>\n <ion-searchbar></ion-searchbar>\n </ion-toolbar>\n </ion-header>\n\n ...\n\n </ion-content>\n</template>\n\n<script>\nimport { \n IonButton,\n IonButtons,\n IonContent, \n IonHeader, \n IonSearchbar, \n IonTitle, \n IonToolbar\n} from '@ionic/vue';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: {\n IonButton,\n IonButtons,\n IonContent, \n IonHeader, \n IonSearchbar, \n IonTitle, \n IonToolbar\n }\n});\n</script>\n```\n\nIn this example, notice that we have added two sets of `ion-buttons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.\n\n`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.\n\n> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.\n\n### Styling Collapsible Large Titles\n\nThe collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the `ion-toolbar` that contains the collapsible large title should always match the background color of `ion-content`. \n\nBy default, the `ion-toolbar` that contains the standard title is hidden using `opacity: 0` and is progressively shown as you collapse the large title by scrolling. As a result, the background color that you see behind the standard title is actually the background color of `ion-content`.\n\nYou can change the background color of the toolbar with the standard title by setting the `--background` CSS variable on `ion-toolbar`. This will give the effect of the header changing color as you collapse the large title.\n\nWhen styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.\n\n```css\nion-title.title-large {\n color: purple;\n font-size: 30px;\n}\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "size",
|
||
"type": "\"large\" | \"small\" | undefined",
|
||
"mutable": false,
|
||
"attr": "size",
|
||
"reflectToAttr": false,
|
||
"docs": "The size of the toolbar title.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "large",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "small",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Text color of the title"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/toast/toast.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-toast",
|
||
"readme": "# ion-toast\n\nA 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.\n\n## Positioning\n\nToasts can be positioned at the top, bottom or middle of the viewport. The position can be passed upon creation. The possible values are `top`, `bottom` and `middle`. If the position is not specified, the toast will be displayed at the bottom of the viewport.\n\n## Dismissing\n\nThe toast can be dismissed automatically after a specific amount of time by passing the number of milliseconds to display it in the `duration` of the toast options. If a button with a role of `\"cancel\"` is added, then that button will dismiss the toast. To dismiss the toast after creation, call the `dismiss()` method on the instance.\n\n## Interfaces\n\n### ToastButton\n\n```typescript\ninterface ToastButton {\n text?: string;\n icon?: string;\n side?: 'start' | 'end';\n role?: 'cancel' | string;\n cssClass?: string | string[];\n handler?: () => boolean | void | Promise<boolean | void>;\n}\n```\n\n### ToastOptions\n\n```typescript\ninterface ToastOptions {\n header?: string;\n message?: string | IonicSafeString;\n cssClass?: string | string[];\n duration?: number;\n buttons?: (ToastButton | string)[];\n position?: 'top' | 'bottom' | 'middle';\n translucent?: boolean;\n animated?: boolean;\n htmlAttributes?: ToastAttributes;\n\n color?: Color;\n mode?: Mode;\n keyboardClose?: boolean;\n id?: string;\n\n enterAnimation?: AnimationBuilder;\n leaveAnimation?: AnimationBuilder;\n}\n```\n\n### ToastAttributes\n```typescript\ninterface ToastAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}\n```\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
},
|
||
{
|
||
"text": "button - Any button element that is displayed inside of the toast.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "container - The element that wraps all child elements.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "header - The header text of the toast.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "message - The body text of the toast.",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```typescript\nimport { Component } from '@angular/core';\nimport { ToastController } from '@ionic/angular';\n\n@Component({\n selector: 'toast-example',\n templateUrl: 'toast-example.html',\n styleUrls: ['./toast-example.css'],\n})\nexport class ToastExample {\n\n constructor(public toastController: ToastController) {}\n\n async presentToast() {\n const toast = await this.toastController.create({\n message: 'Your settings have been saved.',\n duration: 2000\n });\n toast.present();\n }\n\n async presentToastWithOptions() {\n const toast = await this.toastController.create({\n header: 'Toast header',\n message: 'Click to Close',\n position: 'top',\n buttons: [\n {\n side: 'start',\n icon: 'star',\n text: 'Favorite',\n handler: () => {\n console.log('Favorite clicked');\n }\n }, {\n text: 'Done',\n role: 'cancel',\n handler: () => {\n console.log('Cancel clicked');\n }\n }\n ]\n });\n await toast.present();\n \n const { role } = await toast.onDidDismiss();\n console.log('onDidDismiss resolved with role', role);\n }\n\n}\n```\n",
|
||
"javascript": "```javascript\nasync function presentToast() {\n const toast = document.createElement('ion-toast');\n toast.message = 'Your settings have been saved.';\n toast.duration = 2000;\n\n document.body.appendChild(toast);\n return toast.present();\n}\n\nasync function presentToastWithOptions() {\n const toast = document.createElement('ion-toast');\n toast.header = 'Toast header';\n toast.message = 'Click to Close';\n toast.position = 'top';\n toast.buttons = [\n {\n side: 'start',\n icon: 'star',\n text: 'Favorite',\n handler: () => {\n console.log('Favorite clicked');\n }\n }, {\n text: 'Done',\n role: 'cancel',\n handler: () => {\n console.log('Cancel clicked');\n }\n }\n ];\n\n document.body.appendChild(toast);\n await toast.present();\n \n const { role } = await toast.onDidDismiss();\n console.log('onDidDismiss resolved with role', role);\n}\n```\n",
|
||
"react": "```tsx\n/* Using the useIonToast Hook */\n\nimport React from 'react';\nimport { IonButton, IonContent, IonPage, useIonToast } from '@ionic/react';\n\nconst ToastExample: React.FC = () => {\n const [present, dismiss] = useIonToast();\n\n return (\n <IonPage>\n <IonContent>\n <IonButton\n expand=\"block\"\n onClick={() =>\n present({\n buttons: [{ text: 'hide', handler: () => dismiss() }],\n message: 'toast from hook, click hide to dismiss',\n onDidDismiss: () => console.log('dismissed'),\n onWillDismiss: () => console.log('will dismiss'),\n })\n }\n >\n Show Toast\n </IonButton>\n <IonButton\n expand=\"block\"\n onClick={() => present('hello from hook', 3000)}\n >\n Show Toast using params, closes in 3 secs\n </IonButton>\n <IonButton expand=\"block\" onClick={dismiss}>\n Hide Toast\n </IonButton>\n </IonContent>\n </IonPage>\n );\n};\n```\n\n```tsx\n/* Using the IonToast Component */\n\nimport React, { useState } from 'react';\nimport { IonToast, IonContent, IonButton } from '@ionic/react';\n\nexport const ToastExample: React.FC = () => {\n const [showToast1, setShowToast1] = useState(false);\n const [showToast2, setShowToast2] = useState(false);\n\n return (\n <IonContent>\n <IonButton onClick={() => setShowToast1(true)} expand=\"block\">Show Toast 1</IonButton>\n <IonButton onClick={() => setShowToast2(true)} expand=\"block\">Show Toast 2</IonButton>\n <IonToast\n isOpen={showToast1}\n onDidDismiss={() => setShowToast1(false)}\n message=\"Your settings have been saved.\"\n duration={200}\n />\n\n <IonToast\n isOpen={showToast2}\n onDidDismiss={() => setShowToast2(false)}\n message=\"Click to Close\"\n position=\"top\"\n buttons={[\n {\n side: 'start',\n icon: 'star',\n text: 'Favorite',\n handler: () => {\n console.log('Favorite clicked');\n }\n },\n {\n text: 'Done',\n role: 'cancel',\n handler: () => {\n console.log('Cancel clicked');\n }\n }\n ]}\n />\n </IonContent>\n );\n};\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\nimport { toastController } from '@ionic/core';\n\n@Component({\n tag: 'toast-example',\n styleUrl: 'toast-example.css'\n})\nexport class ToastExample {\n async presentToast() {\n const toast = await toastController.create({\n message: 'Your settings have been saved.',\n duration: 2000\n });\n toast.present();\n }\n\n async presentToastWithOptions() {\n const toast = await toastController.create({\n header: 'Toast header',\n message: 'Click to Close',\n position: 'top',\n buttons: [\n {\n side: 'start',\n icon: 'star',\n text: 'Favorite',\n handler: () => {\n console.log('Favorite clicked');\n }\n }, {\n text: 'Done',\n role: 'cancel',\n handler: () => {\n console.log('Cancel clicked');\n }\n }\n ]\n });\n await toast.present();\n \n const { role } = await toast.onDidDismiss();\n console.log('onDidDismiss resolved with role', role);\n }\n\n render() {\n return [\n <ion-content>\n <ion-button onClick={() => this.presentToast()}>Present Toast</ion-button>\n <ion-button onClick={() => this.presentToastWithOptions()}>Present Toast: Options</ion-button>\n </ion-content>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-page>\n <ion-content class=\"ion-padding\">\n <ion-button @click=\"openToast\">Open Toast</ion-button>\n <ion-button @click=\"openToastOptions\">Open Toast: Options</ion-button>\n </ion-content>\n </ion-page>\n</template>\n\n<script>\nimport { IonButton, IonContent, IonPage, toastController } from '@ionic/vue';\n\nexport default {\n components: { IonButton, IonContent, IonPage },\n methods: {\n async openToast() {\n const toast = await toastController\n .create({\n message: 'Your settings have been saved.',\n duration: 2000\n })\n return toast.present();\n },\n async openToastOptions() {\n const toast = await toastController\n .create({\n header: 'Toast header',\n message: 'Click to Close',\n position: 'top',\n buttons: [\n {\n side: 'start',\n icon: 'star',\n text: 'Favorite',\n handler: () => {\n console.log('Favorite clicked');\n }\n }, {\n text: 'Done',\n role: 'cancel',\n handler: () => {\n console.log('Cancel clicked');\n }\n }\n ]\n })\n await toast.present();\n \n const { role } = await toast.onDidDismiss();\n console.log('onDidDismiss resolved with role', role);\n },\n },\n}\n</script>\n```\n\nDevelopers can also use this component directly in their template:\n\n```html\n<template>\n <ion-button @click=\"setOpen(true)\">Show Toast</ion-button>\n <ion-toast\n :is-open=\"isOpenRef\"\n message=\"Your settings have been saved.\"\n :duration=\"2000\"\n @didDismiss=\"setOpen(false)\"\n >\n </ion-toast>\n</template>\n\n<script>\nimport { IonToast, IonButton } from '@ionic/vue';\nimport { defineComponent, ref } from 'vue';\n\nexport default defineComponent({\n components: { IonToast, IonButton },\n setup() {\n const isOpenRef = ref(false);\n const setOpen = (state: boolean) => isOpenRef.value = state;\n \n return { isOpenRef, setOpen }\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "animated",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "animated",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the toast will animate.",
|
||
"docsTags": [],
|
||
"default": "true",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "buttons",
|
||
"type": "(string | ToastButton)[] | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "An array of buttons for the toast.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "(string"
|
||
},
|
||
{
|
||
"type": "ToastButton)[]"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "cssClass",
|
||
"type": "string | string[] | undefined",
|
||
"mutable": false,
|
||
"attr": "css-class",
|
||
"reflectToAttr": false,
|
||
"docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "string[]"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "duration",
|
||
"type": "number",
|
||
"mutable": false,
|
||
"attr": "duration",
|
||
"reflectToAttr": false,
|
||
"docs": "How many milliseconds to wait before hiding the toast. By default, it will show\nuntil `dismiss()` is called.",
|
||
"docsTags": [],
|
||
"default": "0",
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "enterAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Animation to use when the toast is presented.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "header",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "header",
|
||
"reflectToAttr": false,
|
||
"docs": "Header to be shown in the toast.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "htmlAttributes",
|
||
"type": "ToastAttributes | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Additional attributes to pass to the toast.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "ToastAttributes"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "keyboardClose",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "keyboard-close",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "leaveAnimation",
|
||
"type": "((baseEl: any, opts?: any) => Animation) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Animation to use when the toast is dismissed.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((baseEl: any, opts?: any) => Animation)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "message",
|
||
"type": "IonicSafeString | string | undefined",
|
||
"mutable": false,
|
||
"attr": "message",
|
||
"reflectToAttr": false,
|
||
"docs": "Message to be shown in the toast.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "IonicSafeString"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "position",
|
||
"type": "\"bottom\" | \"middle\" | \"top\"",
|
||
"mutable": false,
|
||
"attr": "position",
|
||
"reflectToAttr": false,
|
||
"docs": "The position of the toast on the screen.",
|
||
"docsTags": [],
|
||
"default": "'bottom'",
|
||
"values": [
|
||
{
|
||
"value": "bottom",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "middle",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "top",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "translucent",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "translucent",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the toast will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "dismiss",
|
||
"returns": {
|
||
"type": "Promise<boolean>",
|
||
"docs": ""
|
||
},
|
||
"signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
|
||
"parameters": [],
|
||
"docs": "Dismiss the toast overlay after it has been presented.",
|
||
"docsTags": [
|
||
{
|
||
"name": "param",
|
||
"text": "data Any data to emit in the dismiss events."
|
||
},
|
||
{
|
||
"name": "param",
|
||
"text": "role The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"name": "onDidDismiss",
|
||
"returns": {
|
||
"type": "Promise<OverlayEventDetail<T>>",
|
||
"docs": ""
|
||
},
|
||
"signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
|
||
"parameters": [],
|
||
"docs": "Returns a promise that resolves when the toast did dismiss.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "onWillDismiss",
|
||
"returns": {
|
||
"type": "Promise<OverlayEventDetail<T>>",
|
||
"docs": ""
|
||
},
|
||
"signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
|
||
"parameters": [],
|
||
"docs": "Returns a promise that resolves when the toast will dismiss.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "present",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "present() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "Present the toast overlay after it has been created.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"event": "ionToastDidDismiss",
|
||
"detail": "OverlayEventDetail<any>",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted after the toast has dismissed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionToastDidPresent",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted after the toast has presented.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionToastWillDismiss",
|
||
"detail": "OverlayEventDetail<any>",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted before the toast has dismissed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionToastWillPresent",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted before the toast has presented.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the toast"
|
||
},
|
||
{
|
||
"name": "--border-color",
|
||
"annotation": "prop",
|
||
"docs": "Border color of the toast"
|
||
},
|
||
{
|
||
"name": "--border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Border radius of the toast"
|
||
},
|
||
{
|
||
"name": "--border-style",
|
||
"annotation": "prop",
|
||
"docs": "Border style of the toast"
|
||
},
|
||
{
|
||
"name": "--border-width",
|
||
"annotation": "prop",
|
||
"docs": "Border width of the toast"
|
||
},
|
||
{
|
||
"name": "--box-shadow",
|
||
"annotation": "prop",
|
||
"docs": "Box shadow of the toast"
|
||
},
|
||
{
|
||
"name": "--button-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the button text"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the toast text"
|
||
},
|
||
{
|
||
"name": "--end",
|
||
"annotation": "prop",
|
||
"docs": "Position from the right if direction is left-to-right, and from the left if direction is right-to-left"
|
||
},
|
||
{
|
||
"name": "--height",
|
||
"annotation": "prop",
|
||
"docs": "Height of the toast"
|
||
},
|
||
{
|
||
"name": "--max-height",
|
||
"annotation": "prop",
|
||
"docs": "Maximum height of the toast"
|
||
},
|
||
{
|
||
"name": "--max-width",
|
||
"annotation": "prop",
|
||
"docs": "Maximum width of the toast"
|
||
},
|
||
{
|
||
"name": "--min-height",
|
||
"annotation": "prop",
|
||
"docs": "Minimum height of the toast"
|
||
},
|
||
{
|
||
"name": "--min-width",
|
||
"annotation": "prop",
|
||
"docs": "Minimum width of the toast"
|
||
},
|
||
{
|
||
"name": "--start",
|
||
"annotation": "prop",
|
||
"docs": "Position from the left if direction is left-to-right, and from the right if direction is right-to-left"
|
||
},
|
||
{
|
||
"name": "--white-space",
|
||
"annotation": "prop",
|
||
"docs": "White space of the toast message"
|
||
},
|
||
{
|
||
"name": "--width",
|
||
"annotation": "prop",
|
||
"docs": "Width of the toast"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [
|
||
{
|
||
"name": "button",
|
||
"docs": "Any button element that is displayed inside of the toast."
|
||
},
|
||
{
|
||
"name": "container",
|
||
"docs": "The element that wraps all child elements."
|
||
},
|
||
{
|
||
"name": "header",
|
||
"docs": "The header text of the toast."
|
||
},
|
||
{
|
||
"name": "message",
|
||
"docs": "The body text of the toast."
|
||
}
|
||
],
|
||
"dependents": [],
|
||
"dependencies": [
|
||
"ion-icon",
|
||
"ion-ripple-effect"
|
||
],
|
||
"dependencyGraph": {
|
||
"ion-toast": [
|
||
"ion-icon",
|
||
"ion-ripple-effect"
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"filePath": "./src/components/toggle/toggle.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-toggle",
|
||
"readme": "# ion-toggle\n\nToggles 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.\n\n## Customization\n\n### Customizing Background\n\nThe background of the toggle track and handle can be customized using CSS variables. There are also variables for setting the background differently when the toggle is checked.\n\n```css\nion-toggle {\n --background: #000;\n --background-checked: #7a49a5;\n\n --handle-background: #7a49a5;\n --handle-background-checked: #000;\n}\n```\n\nBecause these variables set the `background` property, which is a shorthand, it can accept any value that the [background property](https://developer.mozilla.org/en-US/docs/Web/CSS/background) accepts.\n\nA more complex case may involve adding an image to the handle background.\n\n```css\nion-toggle {\n --handle-background-checked: #fff url(/assets/power-icon.png) no-repeat center / contain;\n}\n```\n\nTaking it a step further, we could use the `::before` or `::after` pseudo-elements to position text on top of the background.\n\n```css\nion-toggle::before {\n position: absolute;\n\n top: 16px;\n left: 10px;\n\n content: \"ON\";\n\n color: white;\n font-size: 8px;\n\n z-index: 1;\n}\n```\n\n\n### Customizing Width\n\nAdjusting the width of the toggle **smaller** will result in a narrower track, with the handle remaining the default width. If desired, set `--handle-width` to make the handle narrower.\n\n```css\nion-toggle {\n width: 40px;\n}\n```\n\nAdjusting the width of the toggle **larger** will result in a wider track, with the handle remaining the default width. If desired, set `--handle-width` to make the handle wider.\n\n```css\nion-toggle {\n width: 100px;\n}\n```\n\n### Customizing Height\n\nAdjusting the height of the toggle **smaller** than the default will result in the handle height auto-sizing itself to the track. In `ios` the handle is shorter than the track (`100% - 4px`) and in `md` the handle is taller than the track (`100% + 6px`).\n\n```css\nion-toggle {\n height: 15px;\n}\n```\n\n> Note: this does not affect the handle width, width should be set using `--handle-width`.\n\nAdjusting the height of the toggle **larger** will keep the handle in the center at the default height. This can be modified by setting `--handle-height` which can be set to any amount but will not exceed the `--handle-max-height`.\n\n```css\nion-toggle {\n height: 60px;\n}\n```\n\n> Note: this does not affect the handle width, width should be set using `--handle-width`.\n\n### Customizing Spacing\n\nThe spacing refers to the horizontal gap between the handle and the track. By default, the handle has `2px` of spacing around it in `ios` **only**. In `md` mode there is no default spacing.\n\nTo remove the **horizontal** spacing, set `--handle-spacing` to `0px`.\n\n```css\nion-toggle {\n --handle-spacing: 0px;\n}\n```\n\nDue to the handle having a fixed height, to remove the spacing on the top and bottom, set the height to 100%.\n\n```css\nion-toggle {\n --handle-spacing: 0px;\n --handle-height: 100%;\n}\n```\n\n\n### Customizing Border Radius\n\nThe `--handle-border-radius` can be used to change the `border-radius` on the handle.\n\n```css\nion-toggle {\n --handle-border-radius: 14px 4px 4px 14px;\n}\n```\n\nTo target the `border-radius` only when the toggle is checked, target `.toggle-checked`:\n\n```css\nion-toggle.toggle-checked {\n --handle-border-radius: 4px 14px 14px 4px;\n}\n```\n\n\n### Customizing Box Shadow\n\nThe `--handle-box-shadow` can be used to change the `box-shadow` on the handle.\n\n```css\nion-toggle {\n --handle-box-shadow: 4px 0 2px 0 red;\n}\n```\n\nTo target the box shadow only when the toggle is checked, target `.toggle-checked`:\n\n```css\nion-toggle.toggle-checked {\n --handle-box-shadow: -4px 0 2px 0 red;\n}\n```\n\nSee the section on [customizing overflow](#customizing-overflow) to allow the `box-shadow` to overflow the toggle container.\n\n\n### Customizing Overflow\n\nSetting `overflow` on the toggle will be inherited by the toggle handle. By default, overflow is set to `hidden` in `ios` only. The `box-shadow` will still appear cut off due to the `contain` css property. Set `contain` to `none` in order to overflow the toggle container.\n\n```css\nion-toggle {\n --handle-box-shadow: 0 3px 12px rgba(255, 0, 0, 0.6), 0 3px 1px rgba(50, 70, 255, 0.6);\n\n overflow: visible;\n\n contain: none;\n}\n```\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
},
|
||
{
|
||
"text": "track - The background track of the toggle.",
|
||
"name": "part"
|
||
},
|
||
{
|
||
"text": "handle - The toggle handle, or knob, used to change the checked state.",
|
||
"name": "part"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<!-- Default Toggle -->\n<ion-toggle></ion-toggle>\n\n<!-- Disabled Toggle -->\n<ion-toggle disabled></ion-toggle>\n\n<!-- Checked Toggle -->\n<ion-toggle checked></ion-toggle>\n\n<!-- Toggle Colors -->\n<ion-toggle color=\"primary\"></ion-toggle>\n<ion-toggle color=\"secondary\"></ion-toggle>\n<ion-toggle color=\"danger\"></ion-toggle>\n<ion-toggle color=\"light\"></ion-toggle>\n<ion-toggle color=\"dark\"></ion-toggle>\n\n<!-- Toggles in a List -->\n<ion-list>\n <ion-item>\n <ion-label>Pepperoni</ion-label>\n <ion-toggle [(ngModel)]=\"pepperoni\"></ion-toggle>\n </ion-item>\n\n <ion-item>\n <ion-label>Sausage</ion-label>\n <ion-toggle [(ngModel)]=\"sausage\" disabled=\"true\"></ion-toggle>\n </ion-item>\n\n <ion-item>\n <ion-label>Mushrooms</ion-label>\n <ion-toggle [(ngModel)]=\"mushrooms\"></ion-toggle>\n </ion-item>\n</ion-list>\n```\n",
|
||
"javascript": "```html\n<!-- Default Toggle -->\n<ion-toggle></ion-toggle>\n\n<!-- Disabled Toggle -->\n<ion-toggle disabled></ion-toggle>\n\n<!-- Checked Toggle -->\n<ion-toggle checked></ion-toggle>\n\n<!-- Toggle Colors -->\n<ion-toggle color=\"primary\"></ion-toggle>\n<ion-toggle color=\"secondary\"></ion-toggle>\n<ion-toggle color=\"danger\"></ion-toggle>\n<ion-toggle color=\"light\"></ion-toggle>\n<ion-toggle color=\"dark\"></ion-toggle>\n\n<!-- Toggles in a List -->\n<ion-list>\n <ion-item>\n <ion-label>Pepperoni</ion-label>\n <ion-toggle slot=\"end\" value=\"pepperoni\" checked></ion-toggle>\n </ion-item>\n\n <ion-item>\n <ion-label>Sausage</ion-label>\n <ion-toggle slot=\"end\" value=\"sausage\" disabled></ion-toggle>\n </ion-item>\n\n <ion-item>\n <ion-label>Mushrooms</ion-label>\n <ion-toggle slot=\"end\" value=\"mushrooms\"></ion-toggle>\n </ion-item>\n</ion-list>\n```\n",
|
||
"react": "```tsx\nimport React, { useState } from 'react';\nimport { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonToggle, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react';\n\nexport const ToggleExamples: React.FC = () => {\n const [checked, setChecked] = useState(false);\n return (\n <IonPage>\n <IonHeader>\n <IonToolbar>\n <IonTitle>ToggleExamples</IonTitle>\n </IonToolbar>\n </IonHeader>\n <IonContent>\n <IonList>\n\n <IonItemDivider>Default Toggle</IonItemDivider>\n <IonItem>\n <IonLabel>Checked: {JSON.stringify(checked)}</IonLabel>\n <IonToggle checked={checked} onIonChange={e => setChecked(e.detail.checked)} />\n </IonItem>\n\n <IonItemDivider>Disabled Toggle</IonItemDivider>\n <IonItem><IonToggle disabled /></IonItem>\n\n <IonItemDivider>Checked Toggle</IonItemDivider>\n <IonItem><IonToggle checked /></IonItem>\n\n <IonItemDivider>Toggle Colors</IonItemDivider>\n <IonItem><IonToggle color=\"primary\" /></IonItem>\n <IonItem><IonToggle color=\"secondary\" /></IonItem>\n <IonItem><IonToggle color=\"danger\" /></IonItem>\n <IonItem><IonToggle color=\"light\" /></IonItem>\n <IonItem><IonToggle color=\"dark\" /></IonItem>\n\n <IonItemDivider>Toggles in a List</IonItemDivider>\n <IonItem>\n <IonLabel>Pepperoni</IonLabel>\n <IonToggle value=\"pepperoni\" />\n </IonItem>\n\n <IonItem>\n <IonLabel>Sausage</IonLabel>\n <IonToggle value=\"sausage\" disabled={true} />\n </IonItem>\n\n <IonItem>\n <IonLabel>Mushrooms</IonLabel>\n <IonToggle value=\"mushrooms\" />\n </IonItem>\n </IonList>\n </IonContent>\n </IonPage>\n );\n};\n```",
|
||
"stencil": "```tsx\nimport { Component, State, h } from '@stencil/core';\n\n@Component({\n tag: 'toggle-example',\n styleUrl: 'toggle-example.css'\n})\nexport class ToggleExample {\n @State() pepperoni: boolean = false;\n @State() sausage: boolean = true;\n @State() mushrooms: boolean = false;\n\n render() {\n return [\n // Default Toggle\n <ion-toggle></ion-toggle>,\n\n // Disabled Toggle\n <ion-toggle disabled></ion-toggle>,\n\n // Checked Toggle\n <ion-toggle checked></ion-toggle>,\n\n // Toggle Colors\n <ion-toggle color=\"primary\"></ion-toggle>,\n <ion-toggle color=\"secondary\"></ion-toggle>,\n <ion-toggle color=\"danger\"></ion-toggle>,\n <ion-toggle color=\"light\"></ion-toggle>,\n <ion-toggle color=\"dark\"></ion-toggle>,\n\n // Toggles in a List\n <ion-list>\n <ion-item>\n <ion-label>Pepperoni</ion-label>\n <ion-toggle checked={this.pepperoni} onIonChange={(ev) => this.pepperoni = ev.detail.checked}></ion-toggle>\n </ion-item>\n\n <ion-item>\n <ion-label>Sausage</ion-label>\n <ion-toggle checked={this.sausage} onIonChange={(ev) => this.sausage = ev.detail.checked} disabled={true}></ion-toggle>\n </ion-item>\n\n <ion-item>\n <ion-label>Mushrooms</ion-label>\n <ion-toggle checked={this.mushrooms} onIonChange={(ev) => this.mushrooms = ev.detail.checked}></ion-toggle>\n </ion-item>\n </ion-list>,\n\n <div>\n Pepperoni: {this.pepperoni ? \"true\" : \"false\"}<br/>\n Sausage: {this.sausage ? \"true\" : \"false\"}<br/>\n Mushrooms: {this.mushrooms ? \"true\" : \"false\"}\n </div>\n ];\n }\n}\n```\n",
|
||
"vue": "```html\n<template>\n <!-- Default Toggle -->\n <ion-toggle></ion-toggle>\n\n <!-- Disabled Toggle -->\n <ion-toggle disabled></ion-toggle>\n\n <!-- Checked Toggle -->\n <ion-toggle checked></ion-toggle>\n\n <!-- Toggle Colors -->\n <ion-toggle color=\"primary\"></ion-toggle>\n <ion-toggle color=\"secondary\"></ion-toggle>\n <ion-toggle color=\"danger\"></ion-toggle>\n <ion-toggle color=\"light\"></ion-toggle>\n <ion-toggle color=\"dark\"></ion-toggle>\n\n <!-- Toggles in a List -->\n <ion-list>\n <ion-item>\n <ion-label>Pepperoni</ion-label>\n <ion-toggle\n @ionChange=\"toppings.value.push($event.target.value)\"\n value=\"pepperoni\"\n :checked=\"toppings.value.indexOf('pepperoni') !== -1\">\n </ion-toggle>\n </ion-item>\n\n <ion-item>\n <ion-label>Sausage</ion-label>\n <ion-toggle\n @ionChange=\"toppings.value.push($event.target.value)\"\n value=\"sausage\"\n :checked=\"toppings.value.indexOf('pepperoni') !== -1\"\n disabled=\"true\">\n </ion-toggle>\n </ion-item>\n\n <ion-item>\n <ion-label>Mushrooms</ion-label>\n <ion-toggle\n @ionChange=\"toppings.value.push($event.target.value)\"\n value=\"mushrooms\"\n :checked=\"toppings.value.indexOf('pepperoni') !== -1\">\n </ion-toggle>\n </ion-item>\n </ion-list>\n</template>\n\n<script>\nimport { IonLabel, IonList, IonItem, IonToggle } from '@ionic/vue';\nimport { defineComponent, vue } from 'vue';\n\nexport default defineComponent({\n components: { IonLabel, IonList, IonItem, IonToggle },\n setup() {\n const toppings = ref([]);\n \n return { toppings };\n }\n});\n</script>\n```\n"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "checked",
|
||
"type": "boolean",
|
||
"mutable": true,
|
||
"attr": "checked",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the toggle is selected.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"mutable": false,
|
||
"attr": "disabled",
|
||
"reflectToAttr": false,
|
||
"docs": "If `true`, the user cannot interact with the toggle.",
|
||
"docsTags": [],
|
||
"default": "false",
|
||
"values": [
|
||
{
|
||
"type": "boolean"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "name",
|
||
"type": "string",
|
||
"mutable": false,
|
||
"attr": "name",
|
||
"reflectToAttr": false,
|
||
"docs": "The name of the control, which is submitted with the form data.",
|
||
"docsTags": [],
|
||
"default": "this.inputId",
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "null | string | undefined",
|
||
"mutable": false,
|
||
"attr": "value",
|
||
"reflectToAttr": false,
|
||
"docs": "The value of the toggle does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\nit's only used when the toggle participates in a native `<form>`.",
|
||
"docsTags": [],
|
||
"default": "'on'",
|
||
"values": [
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [
|
||
{
|
||
"event": "ionBlur",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the toggle loses focus.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionChange",
|
||
"detail": "ToggleChangeEventDetail",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the value property has changed.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"event": "ionFocus",
|
||
"detail": "void",
|
||
"bubbles": true,
|
||
"cancelable": true,
|
||
"composed": true,
|
||
"docs": "Emitted when the toggle has focus.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"listeners": [],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the toggle"
|
||
},
|
||
{
|
||
"name": "--background-checked",
|
||
"annotation": "prop",
|
||
"docs": "Background of the toggle when checked"
|
||
},
|
||
{
|
||
"name": "--border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Border radius of the toggle track"
|
||
},
|
||
{
|
||
"name": "--handle-background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the toggle handle"
|
||
},
|
||
{
|
||
"name": "--handle-background-checked",
|
||
"annotation": "prop",
|
||
"docs": "Background of the toggle handle when checked"
|
||
},
|
||
{
|
||
"name": "--handle-border-radius",
|
||
"annotation": "prop",
|
||
"docs": "Border radius of the toggle handle"
|
||
},
|
||
{
|
||
"name": "--handle-box-shadow",
|
||
"annotation": "prop",
|
||
"docs": "Box shadow of the toggle handle"
|
||
},
|
||
{
|
||
"name": "--handle-height",
|
||
"annotation": "prop",
|
||
"docs": "Height of the toggle handle"
|
||
},
|
||
{
|
||
"name": "--handle-max-height",
|
||
"annotation": "prop",
|
||
"docs": "Maximum height of the toggle handle"
|
||
},
|
||
{
|
||
"name": "--handle-spacing",
|
||
"annotation": "prop",
|
||
"docs": "Horizontal spacing around the toggle handle"
|
||
},
|
||
{
|
||
"name": "--handle-transition",
|
||
"annotation": "prop",
|
||
"docs": "Transition of the toggle handle"
|
||
},
|
||
{
|
||
"name": "--handle-width",
|
||
"annotation": "prop",
|
||
"docs": "Width of the toggle handle"
|
||
}
|
||
],
|
||
"slots": [],
|
||
"parts": [
|
||
{
|
||
"name": "handle",
|
||
"docs": "The toggle handle, or knob, used to change the checked state."
|
||
},
|
||
{
|
||
"name": "track",
|
||
"docs": "The background track of the toggle."
|
||
}
|
||
],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/toolbar/toolbar.tsx",
|
||
"encapsulation": "shadow",
|
||
"tag": "ion-toolbar",
|
||
"readme": "# ion-toolbar\n\nToolbars 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.\n\n\n## Buttons\n\nButtons placed in a toolbar should be placed inside of the `<ion-buttons>` element. The `<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. |\n\n\n## Borders\n\nIn `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and the `<ion-footer>` will receive a box-shadow on the top. In `ios` mode, the `<ion-header>` will receive a border on the bottom, and the `<ion-footer>` will receive a border on the top.\n\n\n",
|
||
"docs": "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.",
|
||
"docsTags": [
|
||
{
|
||
"text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use.",
|
||
"name": "virtualProp"
|
||
},
|
||
{
|
||
"text": "- Content is placed between the named slots if provided without a slot.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "start - Content is placed to the left of the toolbar text in LTR, and to the right in RTL.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "secondary - Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "primary - Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.",
|
||
"name": "slot"
|
||
},
|
||
{
|
||
"text": "end - Content is placed to the right of the toolbar text in LTR, and to the left in RTL.",
|
||
"name": "slot"
|
||
}
|
||
],
|
||
"usage": {
|
||
"angular": "```html\n<ion-toolbar>\n <ion-title>Title Only</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n <ion-title>Back Button</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-title size=\"small\">Small Title above a Default Title</ion-title>\n</ion-toolbar>\n<ion-toolbar>\n <ion-title>Default Title</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons slot=\"secondary\">\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"person-circle\"></ion-icon>\n </ion-button>\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"secondary\">\n <ion-icon slot=\"icon-only\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Default Buttons</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons slot=\"secondary\">\n <ion-button fill=\"solid\">\n <ion-icon slot=\"start\" name=\"person-circle\"></ion-icon>\n Contact\n </ion-button>\n </ion-buttons>\n <ion-title>Solid Buttons</ion-title>\n <ion-buttons slot=\"primary\">\n <ion-button fill=\"solid\" color=\"secondary\">\n Help\n <ion-icon slot=\"end\" name=\"help-circle\"></ion-icon>\n </ion-button>\n </ion-buttons>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons slot=\"secondary\">\n <ion-button fill=\"outline\">\n <ion-icon slot=\"start\" name=\"star\"></ion-icon>\n Star\n </ion-button>\n </ion-buttons>\n <ion-title>Outline Buttons</ion-title>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"danger\" fill=\"outline\">\n Edit\n <ion-icon slot=\"end\" name=\"create\"></ion-icon>\n </ion-button>\n </ion-buttons>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons slot=\"secondary\">\n <ion-button>\n Account\n </ion-button>\n </ion-buttons>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"danger\">\n Edit\n </ion-button>\n </ion-buttons>\n <ion-title>Text Only Buttons</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-menu-button autoHide=\"false\"></ion-menu-button>\n\n </ion-buttons>\n <ion-buttons slot=\"secondary\">\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Left side menu toggle</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons slot=\"primary\">\n <ion-button (click)=\"clickedStar()\">\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Right side menu toggle</ion-title>\n <ion-buttons slot=\"end\">\n <ion-menu-button autoHide=\"false\"></ion-menu-button>\n\n </ion-buttons>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons slot=\"primary\">\n <ion-button (click)=\"clickedSearch()\">\n <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-searchbar placeholder=\"Search Favorites\"></ion-searchbar>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-segment value=\"all\">\n <ion-segment-button value=\"all\">\n All\n </ion-segment-button>\n <ion-segment-button value=\"favorites\">\n Favorites\n </ion-segment-button>\n </ion-segment>\n</ion-toolbar>\n\n<ion-toolbar color=\"secondary\">\n <ion-buttons slot=\"secondary\">\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"person-circle\"></ion-icon>\n </ion-button>\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"primary\">\n <ion-icon slot=\"icon-only\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Secondary Toolbar</ion-title>\n</ion-toolbar>\n\n<ion-toolbar color=\"dark\">\n <ion-buttons slot=\"secondary\">\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"person-circle\"></ion-icon>\n </ion-button>\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"danger\">\n <ion-icon slot=\"icon-only\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Dark Toolbar</ion-title>\n</ion-toolbar>\n```",
|
||
"javascript": "```html\n<ion-toolbar>\n <ion-title>Title Only</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n <ion-title>Back Button</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-title size=\"small\">Small Title above a Default Title</ion-title>\n</ion-toolbar>\n<ion-toolbar>\n <ion-title>Default Title</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons slot=\"secondary\">\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"person-circle\"></ion-icon>\n </ion-button>\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"secondary\">\n <ion-icon slot=\"icon-only\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Default Buttons</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons slot=\"secondary\">\n <ion-button fill=\"solid\">\n <ion-icon slot=\"start\" name=\"person-circle\"></ion-icon>\n Contact\n </ion-button>\n </ion-buttons>\n <ion-title>Solid Buttons</ion-title>\n <ion-buttons slot=\"primary\">\n <ion-button fill=\"solid\" color=\"secondary\">\n Help\n <ion-icon slot=\"end\" name=\"help-circle\"></ion-icon>\n </ion-button>\n </ion-buttons>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons slot=\"secondary\">\n <ion-button fill=\"outline\">\n <ion-icon slot=\"start\" name=\"star\"></ion-icon>\n Star\n </ion-button>\n </ion-buttons>\n <ion-title>Outline Buttons</ion-title>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"danger\" fill=\"outline\">\n Edit\n <ion-icon slot=\"end\" name=\"create\"></ion-icon>\n </ion-button>\n </ion-buttons>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons slot=\"secondary\">\n <ion-button>\n Account\n </ion-button>\n </ion-buttons>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"danger\">\n Edit\n </ion-button>\n </ion-buttons>\n <ion-title>Text Only Buttons</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-menu-button auto-hide=\"false\"></ion-menu-button>\n </ion-buttons>\n <ion-buttons slot=\"secondary\">\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Left side menu toggle</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons slot=\"primary\">\n <ion-button onclick=\"clickedStar()\">\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Right side menu toggle</ion-title>\n <ion-buttons slot=\"end\">\n <ion-menu-button auto-hide=\"false\"></ion-menu-button>\n </ion-buttons>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-buttons slot=\"primary\">\n <ion-button onclick=\"clickedSearch()\">\n <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-searchbar placeholder=\"Search Favorites\"></ion-searchbar>\n</ion-toolbar>\n\n<ion-toolbar>\n <ion-segment value=\"all\">\n <ion-segment-button value=\"all\">\n All\n </ion-segment-button>\n <ion-segment-button value=\"favorites\">\n Favorites\n </ion-segment-button>\n </ion-segment>\n</ion-toolbar>\n\n<ion-toolbar color=\"secondary\">\n <ion-buttons slot=\"secondary\">\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"person-circle\"></ion-icon>\n </ion-button>\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"primary\">\n <ion-icon slot=\"icon-only\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Secondary Toolbar</ion-title>\n</ion-toolbar>\n\n<ion-toolbar color=\"dark\">\n <ion-buttons slot=\"secondary\">\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"person-circle\"></ion-icon>\n </ion-button>\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"danger\">\n <ion-icon slot=\"icon-only\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Dark Toolbar</ion-title>\n</ion-toolbar>\n```",
|
||
"react": "```tsx\nimport React from 'react';\nimport { IonToolbar, IonTitle, IonButtons, IonBackButton, IonButton, IonIcon, IonMenuButton, IonSearchbar, IonSegment, IonSegmentButton } from '@ionic/react';\nimport { personCircle, search, helpCircle, star, create, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons';\n\nexport const ToolbarExample: React.FC = () => (\n <IonToolbar>\n <IonTitle>Title Only</IonTitle>\n </IonToolbar>\n\n <IonToolbar>\n <IonButtons slot=\"start\">\n <IonBackButton defaultHref=\"/\" />\n </IonButtons>\n <IonTitle>Back Button</IonTitle>\n </IonToolbar>\n\n <IonToolbar>\n <IonTitle size=\"small\">Small Title above a Default Title</IonTitle>\n </IonToolbar>\n <IonToolbar>\n <IonTitle>Default Title</IonTitle>\n </IonToolbar>\n\n <IonToolbar>\n <IonButtons slot=\"secondary\">\n <IonButton>\n <IonIcon slot=\"icon-only\" icon={personCircle} />\n </IonButton>\n <IonButton>\n <IonIcon slot=\"icon-only\" icon={search} />\n </IonButton>\n </IonButtons>\n <IonButtons slot=\"primary\">\n <IonButton color=\"secondary\">\n <IonIcon slot=\"icon-only\" ios={ellipsisHorizontal} md={ellipsisVertical} />\n </IonButton>\n </IonButtons>\n <IonTitle>Default Buttons</IonTitle>\n </IonToolbar>\n\n <IonToolbar>\n <IonButtons slot=\"secondary\">\n <IonButton fill=\"solid\">\n <IonIcon slot=\"start\" icon={personCircle} />\n Contact\n </IonButton>\n </IonButtons>\n <IonTitle>Solid Buttons</IonTitle>\n <IonButtons slot=\"primary\">\n <IonButton fill=\"solid\" color=\"secondary\">\n Help\n <IonIcon slot=\"end\" icon={helpCircle} />\n </IonButton>\n </IonButtons>\n </IonToolbar>\n\n <IonToolbar>\n <IonButtons slot=\"secondary\">\n <IonButton fill=\"outline\">\n <IonIcon slot=\"start\" icon={star} />\n Star\n </IonButton>\n </IonButtons>\n <IonTitle>Outline Buttons</IonTitle>\n <IonButtons slot=\"primary\">\n <IonButton color=\"danger\" fill=\"outline\">\n Edit\n <IonIcon slot=\"end\" icon={create} />\n </IonButton>\n </IonButtons>\n </IonToolbar>\n\n <IonToolbar>\n <IonButtons slot=\"secondary\">\n <IonButton>Account</IonButton>\n </IonButtons>\n <IonButtons slot=\"primary\">\n <IonButton color=\"danger\">Edit</IonButton>\n </IonButtons>\n <IonTitle>Text Only Buttons</IonTitle>\n </IonToolbar>\n\n <IonToolbar>\n <IonButtons slot=\"start\">\n <IonMenuButton autoHide={false} />\n </IonButtons>\n <IonButtons slot=\"secondary\">\n <IonButton>\n <IonIcon slot=\"icon-only\" icon={star} />\n </IonButton>\n </IonButtons>\n <IonTitle>Left side menu toggle</IonTitle>\n </IonToolbar>\n\n <IonToolbar>\n <IonButtons slot=\"primary\">\n <IonButton onClick={() => {}}>\n <IonIcon slot=\"icon-only\" icon={star} />\n </IonButton>\n </IonButtons>\n <IonTitle>Right side menu toggle</IonTitle>\n <IonButtons slot=\"end\">\n <IonMenuButton autoHide={false} />\n </IonButtons>\n </IonToolbar>\n\n <IonToolbar>\n <IonButtons slot=\"primary\">\n <IonButton onClick={() => {}}>\n <IonIcon slot=\"icon-only\" icon={search} />\n </IonButton>\n </IonButtons>\n <IonSearchbar placeholder=\"Search Favorites\" />\n </IonToolbar>\n\n <IonToolbar>\n <IonSegment value=\"all\">\n <IonSegmentButton value=\"all\">\n All\n </IonSegmentButton>\n <IonSegmentButton value=\"favorites\">Favorites</IonSegmentButton>\n </IonSegment>\n </IonToolbar>\n\n <IonToolbar color=\"secondary\">\n <IonButtons slot=\"secondary\">\n <IonButton>\n <IonIcon slot=\"icon-only\" icon={personCircle} />\n </IonButton>\n <IonButton>\n <IonIcon slot=\"icon-only\" icon={search} />\n </IonButton>\n </IonButtons>\n <IonButtons slot=\"primary\">\n <IonButton color=\"primary\">\n <IonIcon slot=\"icon-only\" ios={ellipsisHorizontal} md={ellipsisVertical} />\n </IonButton>\n </IonButtons>\n <IonTitle>Secondary Toolbar</IonTitle>\n </IonToolbar>\n\n <IonToolbar color=\"dark\">\n <IonButtons slot=\"secondary\">\n <IonButton>\n <IonIcon slot=\"icon-only\" icon={personCircle} />\n </IonButton>\n <IonButton>\n <IonIcon slot=\"icon-only\" icon={search} />\n </IonButton>\n </IonButtons>\n <IonButtons slot=\"primary\">\n <IonButton color=\"danger\">\n <IonIcon slot=\"icon-only\" ios={ellipsisHorizontal} md={ellipsisVertical} />\n </IonButton>\n </IonButtons>\n <IonTitle>Dark Toolbar</IonTitle>\n </IonToolbar>\n);\n```\n",
|
||
"stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'toolbar-example',\n styleUrl: 'toolbar-example.css'\n})\nexport class ToolbarExample {\n\n clickedStar() {\n console.log(\"Clicked star button\");\n }\n\n clickedSearch() {\n console.log(\"Clicked search button\");\n }\n\n render() {\n return [\n <ion-toolbar>\n <ion-title>Title Only</ion-title>\n </ion-toolbar>,\n\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n <ion-title>Back Button</ion-title>\n </ion-toolbar>,\n\n <ion-toolbar>\n <ion-title size=\"small\">Small Title above a Default Title</ion-title>\n </ion-toolbar>,\n <ion-toolbar>\n <ion-title>Default Title</ion-title>\n </ion-toolbar>,\n\n <ion-toolbar>\n <ion-buttons slot=\"secondary\">\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"person-circle\"></ion-icon>\n </ion-button>\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"secondary\">\n <ion-icon slot=\"icon-only\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Default Buttons</ion-title>\n </ion-toolbar>,\n\n <ion-toolbar>\n <ion-buttons slot=\"secondary\">\n <ion-button fill=\"solid\">\n <ion-icon slot=\"start\" name=\"person-circle\"></ion-icon>\n Contact\n </ion-button>\n </ion-buttons>\n <ion-title>Solid Buttons</ion-title>\n <ion-buttons slot=\"primary\">\n <ion-button fill=\"solid\" color=\"secondary\">\n Help\n <ion-icon slot=\"end\" name=\"help-circle\"></ion-icon>\n </ion-button>\n </ion-buttons>\n </ion-toolbar>,\n\n <ion-toolbar>\n <ion-buttons slot=\"secondary\">\n <ion-button fill=\"outline\">\n <ion-icon slot=\"start\" name=\"star\"></ion-icon>\n Star\n </ion-button>\n </ion-buttons>\n <ion-title>Outline Buttons</ion-title>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"danger\" fill=\"outline\">\n Edit\n <ion-icon slot=\"end\" name=\"create\"></ion-icon>\n </ion-button>\n </ion-buttons>\n </ion-toolbar>,\n\n <ion-toolbar>\n <ion-buttons slot=\"secondary\">\n <ion-button>\n Account\n </ion-button>\n </ion-buttons>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"danger\">\n Edit\n </ion-button>\n </ion-buttons>\n <ion-title>Text Only Buttons</ion-title>\n </ion-toolbar>,\n\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-menu-button autoHide={false}></ion-menu-button>\n\n </ion-buttons>\n <ion-buttons slot=\"secondary\">\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Left side menu toggle</ion-title>\n </ion-toolbar>,\n\n <ion-toolbar>\n <ion-buttons slot=\"primary\">\n <ion-button onClick={() => this.clickedStar()}>\n <ion-icon slot=\"icon-only\" name=\"star\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Right side menu toggle</ion-title>\n <ion-buttons slot=\"end\">\n <ion-menu-button autoHide={false}></ion-menu-button>\n\n </ion-buttons>\n </ion-toolbar>,\n\n <ion-toolbar>\n <ion-buttons slot=\"primary\">\n <ion-button onClick={() => this.clickedSearch()}>\n <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-searchbar placeholder=\"Search Favorites\"></ion-searchbar>\n </ion-toolbar>,\n\n <ion-toolbar>\n <ion-segment value=\"all\">\n <ion-segment-button value=\"all\">\n All\n </ion-segment-button>\n <ion-segment-button value=\"favorites\">\n Favorites\n </ion-segment-button>\n </ion-segment>\n </ion-toolbar>,\n\n <ion-toolbar color=\"secondary\">\n <ion-buttons slot=\"secondary\">\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"person-circle\"></ion-icon>\n </ion-button>\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"primary\">\n <ion-icon slot=\"icon-only\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Secondary Toolbar</ion-title>\n </ion-toolbar>,\n\n <ion-toolbar color=\"dark\">\n <ion-buttons slot=\"secondary\">\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"person-circle\"></ion-icon>\n </ion-button>\n <ion-button>\n <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"danger\">\n <ion-icon slot=\"icon-only\" ios=\"ellipsis-horizontal\" md=\"ellipsis-vertical\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Dark Toolbar</ion-title>\n </ion-toolbar>\n ];\n }\n}\n```",
|
||
"vue": "```html\n<template>\n <ion-toolbar>\n <ion-title>Title Only</ion-title>\n </ion-toolbar>\n\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n <ion-title>Back Button</ion-title>\n </ion-toolbar>\n\n <ion-toolbar>\n <ion-title size=\"small\">Small Title above a Default Title</ion-title>\n </ion-toolbar>\n <ion-toolbar>\n <ion-title>Default Title</ion-title>\n </ion-toolbar>\n\n <ion-toolbar>\n <ion-buttons slot=\"secondary\">\n <ion-button>\n <ion-icon slot=\"icon-only\" :icon=\"personCircle\"></ion-icon>\n </ion-button>\n <ion-button>\n <ion-icon slot=\"icon-only\" :icon=\"search\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"secondary\">\n <ion-icon slot=\"icon-only\" :ios=\"ellipsisHorizontal\" :md=\"ellipsisVertical\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Default Buttons</ion-title>\n </ion-toolbar>\n\n <ion-toolbar>\n <ion-buttons slot=\"secondary\">\n <ion-button fill=\"solid\">\n <ion-icon slot=\"start\" :icon=\"person-circle\"></ion-icon>\n Contact\n </ion-button>\n </ion-buttons>\n <ion-title>Solid Buttons</ion-title>\n <ion-buttons slot=\"primary\">\n <ion-button fill=\"solid\" color=\"secondary\">\n Help\n <ion-icon slot=\"end\" :icon=\"help-circle\"></ion-icon>\n </ion-button>\n </ion-buttons>\n </ion-toolbar>\n\n <ion-toolbar>\n <ion-buttons slot=\"secondary\">\n <ion-button fill=\"outline\">\n <ion-icon slot=\"start\" :icon=\"star\"></ion-icon>\n Star\n </ion-button>\n </ion-buttons>\n <ion-title>Outline Buttons</ion-title>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"danger\" fill=\"outline\">\n Edit\n <ion-icon slot=\"end\" :icon=\"create\"></ion-icon>\n </ion-button>\n </ion-buttons>\n </ion-toolbar>\n\n <ion-toolbar>\n <ion-buttons slot=\"secondary\">\n <ion-button>\n Account\n </ion-button>\n </ion-buttons>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"danger\">\n Edit\n </ion-button>\n </ion-buttons>\n <ion-title>Text Only Buttons</ion-title>\n </ion-toolbar>\n\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-menu-button auto-hide=\"false\"></ion-menu-button>\n\n </ion-buttons>\n <ion-buttons slot=\"secondary\">\n <ion-button>\n <ion-icon slot=\"icon-only\" :icon=\"star\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Left side menu toggle</ion-title>\n </ion-toolbar>\n\n <ion-toolbar>\n <ion-buttons slot=\"primary\">\n <ion-button @click=\"clickedStar()\">\n <ion-icon slot=\"icon-only\" :icon=\"star\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Right side menu toggle</ion-title>\n <ion-buttons slot=\"end\">\n <ion-menu-button auto-hide=\"false\"></ion-menu-button>\n\n </ion-buttons>\n </ion-toolbar>\n\n <ion-toolbar>\n <ion-buttons slot=\"primary\">\n <ion-button @click=\"clickedSearch()\">\n <ion-icon slot=\"icon-only\" :icon=\"search\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-searchbar placeholder=\"Search Favorites\"></ion-searchbar>\n </ion-toolbar>\n\n <ion-toolbar>\n <ion-segment value=\"all\">\n <ion-segment-button value=\"all\">\n All\n </ion-segment-button>\n <ion-segment-button value=\"favorites\">\n Favorites\n </ion-segment-button>\n </ion-segment>\n </ion-toolbar>\n\n <ion-toolbar color=\"secondary\">\n <ion-buttons slot=\"secondary\">\n <ion-button>\n <ion-icon slot=\"icon-only\" :icon=\"personCircle\"></ion-icon>\n </ion-button>\n <ion-button>\n <ion-icon slot=\"icon-only\" :icon=\"search\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"primary\">\n <ion-icon slot=\"icon-only\" :ios=\"ellipsisHorizontal\" :md=\"ellipsisVertical\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Secondary Toolbar</ion-title>\n </ion-toolbar>\n\n <ion-toolbar color=\"dark\">\n <ion-buttons slot=\"secondary\">\n <ion-button>\n <ion-icon slot=\"icon-only\" :icon=\"personCircle\"></ion-icon>\n </ion-button>\n <ion-button>\n <ion-icon slot=\"icon-only\" :icon=\"search\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-buttons slot=\"primary\">\n <ion-button color=\"danger\">\n <ion-icon slot=\"icon-only\" :ios=\"ellipsisHorizontal\" :md=\"ellipsisVertical\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Dark Toolbar</ion-title>\n </ion-toolbar>\n</template>\n\n<script>\nimport { \n IonButton, \n IonButtons, \n IonIcon,\n IonTitle, \n IonToolbar\n} from '@ionic/vue';\nimport { \n ellipsisHorizontal,\n ellipsisVertical, \n helpCircle, \n personCircle, \n search, \n star\n} from 'ionicons/icons';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n components: {\n IonButton, \n IonButtons, \n IonIcon,\n IonTitle, \n IonToolbar\n },\n setup() {\n return {\n ellipsisHorizontal,\n ellipsisVertical, \n helpCircle, \n personCircle, \n search, \n star\n }\n }\n});\n</script>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "color",
|
||
"type": "string | undefined",
|
||
"mutable": false,
|
||
"attr": "color",
|
||
"reflectToAttr": true,
|
||
"docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "string"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "\"ios\" | \"md\"",
|
||
"mutable": false,
|
||
"attr": "mode",
|
||
"reflectToAttr": false,
|
||
"docs": "The mode determines which platform styles to use.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"value": "ios",
|
||
"type": "string"
|
||
},
|
||
{
|
||
"value": "md",
|
||
"type": "string"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [],
|
||
"events": [],
|
||
"listeners": [
|
||
{
|
||
"event": "ionStyle",
|
||
"capture": false,
|
||
"passive": false
|
||
}
|
||
],
|
||
"styles": [
|
||
{
|
||
"name": "--background",
|
||
"annotation": "prop",
|
||
"docs": "Background of the toolbar"
|
||
},
|
||
{
|
||
"name": "--border-color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the toolbar border"
|
||
},
|
||
{
|
||
"name": "--border-style",
|
||
"annotation": "prop",
|
||
"docs": "Style of the toolbar border"
|
||
},
|
||
{
|
||
"name": "--border-width",
|
||
"annotation": "prop",
|
||
"docs": "Width of the toolbar border"
|
||
},
|
||
{
|
||
"name": "--color",
|
||
"annotation": "prop",
|
||
"docs": "Color of the toolbar text"
|
||
},
|
||
{
|
||
"name": "--min-height",
|
||
"annotation": "prop",
|
||
"docs": "Minimum height of the toolbar"
|
||
},
|
||
{
|
||
"name": "--opacity",
|
||
"annotation": "prop",
|
||
"docs": "Opacity of the toolbar background"
|
||
},
|
||
{
|
||
"name": "--padding-bottom",
|
||
"annotation": "prop",
|
||
"docs": "Bottom padding of the toolbar"
|
||
},
|
||
{
|
||
"name": "--padding-end",
|
||
"annotation": "prop",
|
||
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar"
|
||
},
|
||
{
|
||
"name": "--padding-start",
|
||
"annotation": "prop",
|
||
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar"
|
||
},
|
||
{
|
||
"name": "--padding-top",
|
||
"annotation": "prop",
|
||
"docs": "Top padding of the toolbar"
|
||
}
|
||
],
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"docs": "Content is placed between the named slots if provided without a slot."
|
||
},
|
||
{
|
||
"name": "end",
|
||
"docs": "Content is placed to the right of the toolbar text in LTR, and to the left in RTL."
|
||
},
|
||
{
|
||
"name": "primary",
|
||
"docs": "Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode."
|
||
},
|
||
{
|
||
"name": "secondary",
|
||
"docs": "Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode."
|
||
},
|
||
{
|
||
"name": "start",
|
||
"docs": "Content is placed to the left of the toolbar text in LTR, and to the right in RTL."
|
||
}
|
||
],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
},
|
||
{
|
||
"filePath": "./src/components/virtual-scroll/virtual-scroll.tsx",
|
||
"encapsulation": "none",
|
||
"tag": "ion-virtual-scroll",
|
||
"readme": "# ion-virtual-scroll\n\nVirtual 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.\n\n## Angular\n\nFor virtual scrolling options in Ionic Angular, please see [Angular Virtual Scroll Guide](../angular/virtual-scroll).\n\n## React\n\nFor virtual scrolling options in Ionic React, please see [React Virtual Scroll Guide](../react/virtual-scroll).\n\n## Vue\n\nFor virtual scrolling options in Ionic Vue, please see [Vue Virtual Scroll Guide](../vue/virtual-scroll).\n\n------\n\nThe following documentation applies to the `ion-virtual-scroll` component.\n\n## Approximate Widths and Heights\n\nIf the height of items in the virtual scroll are not close to the\ndefault size of `40px`, it is extremely important to provide a value for\nthe `approxItemHeight` property. An exact pixel-perfect size is not necessary,\nbut without an estimate the virtual scroll will not render correctly.\n\nThe approximate width and height of each template is used to help\ndetermine how many cells should be created, and to help calculate\nthe height of the scrollable area. Note that the actual rendered size\nof each cell comes from the app's CSS, whereas this approximation\nis only used to help calculate initial dimensions.\n\nIt's also important to know that Ionic's default item sizes have\nslightly different heights between platforms, which is perfectly fine.\n\n## Images Within Virtual Scroll\n\nHTTP requests, image decoding, and image rendering can cause jank while\nscrolling. In order to better control images, Ionic provides `<ion-img>`\nto manage HTTP requests and image rendering. While scrolling through items\nquickly, `<ion-img>` knows when and when not to make requests, when and\nwhen not to render images, and only loads the images that are viewable\nafter scrolling. [Read more about `ion-img`.](../img)\n\nIt's also important for app developers to ensure image sizes are locked in,\nand after images have fully loaded they do not change size and affect any\nother element sizes. Simply put, to ensure rendering bugs are not introduced,\nit's vital that elements within a virtual item does not dynamically change.\n\nFor virtual scrolling, the natural effects of the `<img>` are not desirable\nfeatures. We recommend using the `<ion-img>` component over the native\n`<img>` element because when an `<img>` element is added to the DOM, it\nimmediately makes a HTTP request for the image file. Additionally, `<img>`\nrenders whenever it wants which could be while the user is scrolling. However,\n`<ion-img>` is governed by the containing `ion-content` and does not render\nimages while scrolling quickly.\n\n\n## Virtual Scroll Performance Tips\n\n### iOS Cordova WKWebView\n\nWhen deploying to iOS with Cordova, it's highly recommended to use the\n[WKWebView plugin](https://blog.ionicframework.com/cordova-ios-performance-improvements-drop-in-speed-with-wkwebview/)\nin order to take advantage of iOS's higher performing webview. Additionally,\nWKWebView is superior at scrolling efficiently in comparison to the older\nUIWebView.\n\n### Lock in element dimensions and locations\n\nIn order for virtual scroll to efficiently size and locate every item, it's\nvery important every element within each virtual item does not dynamically\nchange its dimensions or location. The best way to ensure size and location\ndoes not change, it's recommended each virtual item has locked in its size\nvia CSS.\n\n### Use `ion-img` for images\n\nWhen including images within Virtual Scroll, be sure to use\n[`ion-img`](../img/Img/) rather than the standard `<img>` HTML element.\nWith `ion-img`, images are lazy loaded so only the viewable ones are\nrendered, and HTTP requests are efficiently controlled while scrolling.\n\n### Set Approximate Widths and Heights\n\nAs mentioned above, all elements should lock in their dimensions. However,\nvirtual scroll isn't aware of the dimensions until after they have been\nrendered. For the initial render, virtual scroll still needs to set\nhow many items should be built. With \"approx\" property inputs, such as\n`approxItemHeight`, we're able to give virtual scroll an approximate size,\ntherefore allowing virtual scroll to decide how many items should be\ncreated.\n\n### Changing dataset should use `trackBy`\n\nIt is possible for the identities of elements in the iterator to change\nwhile the data does not. This can happen, for example, if the iterator\nproduced from an RPC to the server, and that RPC is re-run. Even if the\n\"data\" hasn't changed, the second response will produce objects with\ndifferent identities, and Ionic will tear down the entire DOM and rebuild\nit. This is an expensive operation and should be avoided if possible.\n\n### Efficient headers and footer functions\nEach virtual item must stay extremely efficient, but one way to really\nkill its performance is to perform any DOM operations within section header\nand footer functions. These functions are called for every record in the\ndataset, so please make sure they're performant.\n\n## React\n\nThe Virtual Scroll component is not supported in React.\n\n## Vue\n\n`ion-virtual-scroll` is not supported in Vue. We plan on integrating with existing community-driven solutions for virtual scroll in the near future. Follow our [GitHub issue thread](https://github.com/ionic-team/ionic-framework/issues/17887) for the latest updates.\n",
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"usage": {
|
||
"angular": "```html\n<ion-content>\n <ion-virtual-scroll [items]=\"items\" approxItemHeight=\"320px\">\n <ion-card *virtualItem=\"let item; let itemBounds = bounds;\">\n <div>\n <ion-img [src]=\"item.imgSrc\" [height]=\"item.imgHeight\" [alt]=\"item.name\"></ion-img>\n </div>\n <ion-card-header>\n <ion-card-title>{{ item.name }}</ion-card-title>\n </ion-card-header>\n <ion-card-content>{{ item.content }}</ion-card-content>\n </ion-card>\n </ion-virtual-scroll>\n</ion-content>\n```\n\n```typescript\nexport class VirtualScrollPageComponent {\n items: any[] = [];\n\n constructor() {\n for (let i = 0; i < 1000; i++) {\n this.items.push({\n name: i + ' - ' + images[rotateImg],\n imgSrc: getImgSrc(),\n avatarSrc: getImgSrc(),\n imgHeight: Math.floor(Math.random() * 50 + 150),\n content: lorem.substring(0, Math.random() * (lorem.length - 100) + 100)\n });\n\n rotateImg++;\n if (rotateImg === images.length) {\n rotateImg = 0;\n }\n }\n }\n}\n\nconst lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';\n\nconst images = [\n 'bandit',\n 'batmobile',\n 'blues-brothers',\n 'bueller',\n 'delorean',\n 'eleanor',\n 'general-lee',\n 'ghostbusters',\n 'knight-rider',\n 'mirth-mobile'\n];\n\nfunction getImgSrc() {\n const src = 'https://dummyimage.com/600x400/${Math.round( Math.random() * 99999)}/fff.png';\n rotateImg++;\n if (rotateImg === images.length) {\n rotateImg = 0;\n }\n return src;\n}\n\nlet rotateImg = 0;\n```\n\n### Basic\n\nThe array of records should be passed to the `items` property on the `ion-virtual-scroll` element.\nThe data given to the `items` property must be an array. An item template with the `*virtualItem` property is required in the `ion-virtual-scroll`. The `*virtualItem` property can be added to any element.\n\n```html\n<ion-virtual-scroll [items]=\"items\">\n <ion-item *virtualItem=\"let item\">\n {{ item }}\n </ion-item>\n</ion-virtual-scroll>\n```\n\n### Section Headers and Footers\n\nSection headers and footers are optional. They can be dynamically created\nfrom developer-defined functions. For example, a large list of contacts\nusually has a divider for each letter in the alphabet. Developers provide\ntheir own custom function to be called on each record. The logic in the\ncustom function should determine whether to create the section template\nand what data to provide to the template. The custom function should\nreturn `null` if a template shouldn't be created.\n\n```html\n<ion-virtual-scroll [items]=\"items\" [headerFn]=\"myHeaderFn\">\n <ion-item-divider *virtualHeader=\"let header\">\n {{ header }}\n </ion-item-divider>\n <ion-item *virtualItem=\"let item\">\n Item: {{ item }}\n </ion-item>\n</ion-virtual-scroll>\n```\n\nBelow is an example of a custom function called on every record. It\ngets passed the individual record, the record's index number,\nand the entire array of records. In this example, after every 20\nrecords a header will be inserted. So between the 19th and 20th records,\nbetween the 39th and 40th, and so on, a `<ion-item-divider>` will\nbe created and the template's data will come from the function's\nreturned data.\n\n```ts\nmyHeaderFn(record, recordIndex, records) {\n if (recordIndex % 20 === 0) {\n return 'Header ' + recordIndex;\n }\n return null;\n}\n```\n\n\n### Custom Components\n\nIf a custom component is going to be used within Virtual Scroll, it's best\nto wrap it with a `<div>` to ensure the component is rendered correctly. Since\neach custom component's implementation and internals can be quite different, wrapping\nwithin a `<div>` is a safe way to make sure dimensions are measured correctly.\n\n```html\n<ion-virtual-scroll [items]=\"items\">\n <div *virtualItem=\"let item\">\n <my-custom-item [item]=\"item\">\n {{ item }}\n </my-custom-item>\n </div>\n</ion-virtual-scroll>\n```"
|
||
},
|
||
"props": [
|
||
{
|
||
"name": "approxFooterHeight",
|
||
"type": "number",
|
||
"mutable": false,
|
||
"attr": "approx-footer-height",
|
||
"reflectToAttr": false,
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"default": "30",
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "approxHeaderHeight",
|
||
"type": "number",
|
||
"mutable": false,
|
||
"attr": "approx-header-height",
|
||
"reflectToAttr": false,
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"default": "30",
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "approxItemHeight",
|
||
"type": "number",
|
||
"mutable": false,
|
||
"attr": "approx-item-height",
|
||
"reflectToAttr": false,
|
||
"docs": "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.",
|
||
"docsTags": [],
|
||
"default": "45",
|
||
"values": [
|
||
{
|
||
"type": "number"
|
||
}
|
||
],
|
||
"optional": false,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "footerFn",
|
||
"type": "((item: any, index: number, items: any[]) => string | null | undefined) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Section footers and the data used within its given\ntemplate can be dynamically created by passing a function to `footerFn`.\nThe logic within the footer function can decide if the footer template\nshould be used, and what data to give to the footer template. The function\nmust return `null` if a footer cell shouldn't be created.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((item: any, index: number, items: any[]) => string"
|
||
},
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "undefined)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "footerHeight",
|
||
"type": "((item: any, index: number) => number) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "An optional function that maps each item footer within their height.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((item: any, index: number) => number)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "headerFn",
|
||
"type": "((item: any, index: number, items: any[]) => string | null | undefined) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "Section headers and the data used within its given\ntemplate can be dynamically created by passing a function to `headerFn`.\nFor example, a large list of contacts usually has dividers between each\nletter in the alphabet. App's can provide their own custom `headerFn`\nwhich is called with each record within the dataset. The logic within\nthe header function can decide if the header template should be used,\nand what data to give to the header template. The function must return\n`null` if a header cell shouldn't be created.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((item: any, index: number, items: any[]) => string"
|
||
},
|
||
{
|
||
"type": "null"
|
||
},
|
||
{
|
||
"type": "undefined)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "headerHeight",
|
||
"type": "((item: any, index: number) => number) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "An optional function that maps each item header within their height.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((item: any, index: number) => number)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "itemHeight",
|
||
"type": "((item: any, index: number) => number) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "An optional function that maps each item within their height.\nWhen this function is provides, heavy optimizations and fast path can be taked by\n`ion-virtual-scroll` leading to massive performance improvements.\n\nThis function allows to skip all DOM reads, which can be Doing so leads\nto massive performance",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((item: any, index: number) => number)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "items",
|
||
"type": "any[] | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "The data that builds the templates within the virtual scroll.\nIt's important to note that when this data has changed, then the\nentire virtual scroll is reset, which is an expensive operation and\nshould be avoided if possible.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "any[]"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "nodeRender",
|
||
"type": "((el: HTMLElement | null, cell: Cell, domIndex: number) => HTMLElement) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "NOTE: only Vanilla JS API.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((el: HTMLElement"
|
||
},
|
||
{
|
||
"type": "null, cell: Cell, domIndex: number) => HTMLElement)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "renderFooter",
|
||
"type": "((item: any, index: number) => any) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "NOTE: only JSX API for stencil.\n\nProvide a render function for the footer to be rendered. Returns a JSX virtual-dom.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((item: any, index: number) => any)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "renderHeader",
|
||
"type": "((item: any, index: number) => any) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "NOTE: only JSX API for stencil.\n\nProvide a render function for the header to be rendered. Returns a JSX virtual-dom.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((item: any, index: number) => any)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
},
|
||
{
|
||
"name": "renderItem",
|
||
"type": "((item: any, index: number) => any) | undefined",
|
||
"mutable": false,
|
||
"reflectToAttr": false,
|
||
"docs": "NOTE: only JSX API for stencil.\n\nProvide a render function for the items to be rendered. Returns a JSX virtual-dom.",
|
||
"docsTags": [],
|
||
"values": [
|
||
{
|
||
"type": "((item: any, index: number) => any)"
|
||
},
|
||
{
|
||
"type": "undefined"
|
||
}
|
||
],
|
||
"optional": true,
|
||
"required": false
|
||
}
|
||
],
|
||
"methods": [
|
||
{
|
||
"name": "checkEnd",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "checkEnd() => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "This method marks the tail the items array as dirty, so they can be re-rendered.\n\nIt's equivalent to calling:\n\n```js\nvirtualScroll.checkRange(lastItemLen);\n```",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "checkRange",
|
||
"returns": {
|
||
"type": "Promise<void>",
|
||
"docs": ""
|
||
},
|
||
"signature": "checkRange(offset: number, len?: number) => Promise<void>",
|
||
"parameters": [],
|
||
"docs": "This method marks a subset of items as dirty, so they can be re-rendered. Items should be marked as\ndirty any time the content or their style changes.\n\nThe subset of items to be updated can are specifing by an offset and a length.",
|
||
"docsTags": []
|
||
},
|
||
{
|
||
"name": "positionForItem",
|
||
"returns": {
|
||
"type": "Promise<number>",
|
||
"docs": ""
|
||
},
|
||
"signature": "positionForItem(index: number) => Promise<number>",
|
||
"parameters": [],
|
||
"docs": "Returns the position of the virtual item at the given index.",
|
||
"docsTags": []
|
||
}
|
||
],
|
||
"events": [],
|
||
"listeners": [
|
||
{
|
||
"event": "resize",
|
||
"target": "window",
|
||
"capture": false,
|
||
"passive": true
|
||
}
|
||
],
|
||
"styles": [],
|
||
"slots": [],
|
||
"parts": [],
|
||
"dependents": [],
|
||
"dependencies": [],
|
||
"dependencyGraph": {}
|
||
}
|
||
]
|
||
} |