UNPKG

react-klasha

Version:

This is an reactJS library for implementing klasha payment gateway

1,143 lines (1,142 loc) 180 kB
{ "version": 1.1, "tags": [ { "name": "ion-action-sheet", "description": { "kind": "markdown", "value": "An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in `ios` mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop." }, "attributes": [ { "name": "animated", "description": "If `true`, the action sheet will animate." }, { "name": "backdrop-dismiss", "description": "If `true`, the action sheet will be dismissed when the backdrop is clicked." }, { "name": "css-class", "description": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces." }, { "name": "header", "description": "Title for the action sheet." }, { "name": "keyboard-close", "description": "If `true`, the keyboard will be automatically dismissed when the overlay is presented." }, { "name": "mode", "description": "The mode determines which platform styles to use.", "values": [ { "name": "ios" }, { "name": "md" } ] }, { "name": "sub-header", "description": "Subtitle for the action sheet." }, { "name": "translucent", "description": "If `true`, the action sheet will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)." } ], "references": [ { "name": "Source code", "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/action-sheet/action-sheet.tsx" } ] }, { "name": "ion-alert", "description": { "kind": "markdown", "value": "An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a `header`, `subHeader` and `message`." }, "attributes": [ { "name": "animated", "description": "If `true`, the alert will animate." }, { "name": "backdrop-dismiss", "description": "If `true`, the alert will be dismissed when the backdrop is clicked." }, { "name": "css-class", "description": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces." }, { "name": "header", "description": "The main title in the heading of the alert." }, { "name": "keyboard-close", "description": "If `true`, the keyboard will be automatically dismissed when the overlay is presented." }, { "name": "message", "description": "The main message to be displayed in the alert.\n`message` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)" }, { "name": "mode", "description": "The mode determines which platform styles to use.", "values": [ { "name": "ios" }, { "name": "md" } ] }, { "name": "sub-header", "description": "The subtitle in the heading of the alert. Displayed under the title." }, { "name": "translucent", "description": "If `true`, the alert will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)." } ], "references": [ { "name": "Source code", "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/alert/alert.tsx" } ] }, { "name": "ion-app", "description": { "kind": "markdown", "value": "App is a container element for an Ionic application. There should only be one `<ion-app>` element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the `<ion-app>` when they are presented." }, "attributes": [], "references": [ { "name": "Source code", "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/app/app.tsx" } ] }, { "name": "ion-avatar", "description": { "kind": "markdown", "value": "Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object.\n\nAvatars can be used by themselves or inside of any element. If placed inside of an `ion-chip` or `ion-item`, the avatar will resize to fit the parent component. To position an avatar on the left or right side of an item, set the slot to `start` or `end`, respectively." }, "attributes": [], "references": [ { "name": "Source code", "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/avatar/avatar.tsx" } ] }, { "name": "ion-back-button", "description": { "kind": "markdown", "value": "The back button navigates back in the app's history upon click. It is smart enough to know what to render based on the mode and when to show based on the navigation stack.\n\nTo change what is displayed in the back button, use the `text` and `icon` properties." }, "attributes": [ { "name": "color", "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)." }, { "name": "default-href", "description": "The url to navigate back to by default when there is no history." }, { "name": "disabled", "description": "If `true`, the user cannot interact with the button." }, { "name": "icon", "description": "The icon name to use for the back button." }, { "name": "mode", "description": "The mode determines which platform styles to use.", "values": [ { "name": "ios" }, { "name": "md" } ] }, { "name": "text", "description": "The text to display in the back button." }, { "name": "type", "description": "The type of the button.", "values": [ { "name": "button" }, { "name": "reset" }, { "name": "submit" } ] } ], "references": [ { "name": "Source code", "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/back-button/back-button.tsx" } ] }, { "name": "ion-backdrop", "description": { "kind": "markdown", "value": "Backdrops are full screen components that overlay other components. They are useful behind components that transition in on top of other content and can be used to dismiss that component." }, "attributes": [ { "name": "stop-propagation", "description": "If `true`, the backdrop will stop propagation on tap." }, { "name": "tappable", "description": "If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event." }, { "name": "visible", "description": "If `true`, the backdrop will be visible." } ], "references": [ { "name": "Source code", "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/backdrop/backdrop.tsx" } ] }, { "name": "ion-badge", "description": { "kind": "markdown", "value": "Badges are inline block elements that usually appear near another element. Typically they contain a number or other characters. They can be used as a notification that there are additional items associated with an element and indicate how many items there are." }, "attributes": [ { "name": "color", "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)." }, { "name": "mode", "description": "The mode determines which platform styles to use.", "values": [ { "name": "ios" }, { "name": "md" } ] } ], "references": [ { "name": "Source code", "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/badge/badge.tsx" } ] }, { "name": "ion-button", "description": { "kind": "markdown", "value": "Buttons provide a clickable element, which can be used in forms, or anywhere that needs simple, standard button functionality. They may display text, icons, or both. Buttons can be styled with several attributes to look a specific way." }, "attributes": [ { "name": "button-type", "description": "The type of button." }, { "name": "color", "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)." }, { "name": "disabled", "description": "If `true`, the user cannot interact with the button." }, { "name": "download", "description": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)." }, { "name": "expand", "description": "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button\nwithout left and right borders.", "values": [ { "name": "block" }, { "name": "full" } ] }, { "name": "fill", "description": "Set to `\"clear\"` for a transparent button, to `\"outline\"` for a transparent\nbutton with a border, or to `\"solid\"`. The default style is `\"solid\"` except inside of\na toolbar, where the default is `\"clear\"`.", "values": [ { "name": "clear" }, { "name": "default" }, { "name": "outline" }, { "name": "solid" } ] }, { "name": "href", "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered." }, { "name": "mode", "description": "The mode determines which platform styles to use.", "values": [ { "name": "ios" }, { "name": "md" } ] }, { "name": "rel", "description": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)." }, { "name": "router-direction", "description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.", "values": [ { "name": "back" }, { "name": "forward" }, { "name": "root" } ] }, { "name": "shape", "description": "The button shape.", "values": [ { "name": "round" } ] }, { "name": "size", "description": "The button size.", "values": [ { "name": "default" }, { "name": "large" }, { "name": "small" } ] }, { "name": "strong", "description": "If `true`, activates a button with a heavier font weight." }, { "name": "target", "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`." }, { "name": "type", "description": "The type of the button.", "values": [ { "name": "button" }, { "name": "reset" }, { "name": "submit" } ] } ], "references": [ { "name": "Source code", "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/button/button.tsx" } ] }, { "name": "ion-buttons", "description": { "kind": "markdown", "value": "The Buttons component is a container element. Buttons placed in a toolbar should be placed inside of the `<ion-buttons>` element.\n\nThe `<ion-buttons>` element can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot.\n\n| Slot | Description |\n|--------------|----------------------------------------------------------------------------------------------------------|\n| `secondary` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode. |\n| `primary` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode. |\n| `start` | Positions to the `left` of the content in LTR, and to the `right` in RTL. |\n| `end` | Positions to the `right` of the content in LTR, and to the `left` in RTL. |" }, "attributes": [ { "name": "collapse", "description": "If true, buttons will disappear when its\nparent toolbar has fully collapsed if the toolbar\nis not the first toolbar. If the toolbar is the\nfirst toolbar, the buttons will be hidden and will\nonly be shown once all toolbars have fully collapsed.\n\nOnly applies in `ios` mode with `collapse` set to\n`true` on `ion-header`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)" } ], "references": [ { "name": "Source code", "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/buttons/buttons.tsx" } ] }, { "name": "ion-card", "description": { "kind": "markdown", "value": "Cards are a standard piece of UI that serves as an entry point to more detailed\ninformation. A card can be a single component, but is often made up of some\nheader, title, subtitle, and content. `ion-card` is broken up into several\nsub-components to reflect this. Please see `ion-card-content`,\n`ion-card-header`, `ion-card-title`, `ion-card-subtitle`." }, "attributes": [ { "name": "button", "description": "If `true`, a button tag will be rendered and the card will be tappable." }, { "name": "color", "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)." }, { "name": "disabled", "description": "If `true`, the user cannot interact with the card." }, { "name": "download", "description": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)." }, { "name": "href", "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered." }, { "name": "mode", "description": "The mode determines which platform styles to use.", "values": [ { "name": "ios" }, { "name": "md" } ] }, { "name": "rel", "description": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)." }, { "name": "router-direction", "description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.", "values": [ { "name": "back" }, { "name": "forward" }, { "name": "root" } ] }, { "name": "target", "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`." }, { "name": "type", "description": "The type of the button. Only used when an `onclick` or `button` property is present.", "values": [ { "name": "button" }, { "name": "reset" }, { "name": "submit" } ] } ], "references": [ { "name": "Source code", "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/card/card.tsx" } ] }, { "name": "ion-card-content", "description": { "kind": "markdown", "value": "`ion-card-content` is child component of `ion-card` that adds some content padding.\nIt is recommended that any text content for a card should be placed in an `ion-card-content`." }, "attributes": [ { "name": "mode", "description": "The mode determines which platform styles to use.", "values": [ { "name": "ios" }, { "name": "md" } ] } ], "references": [ { "name": "Source code", "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/card-content/card-content.tsx" } ] }, { "name": "ion-card-header", "description": { "kind": "markdown", "value": "`ion-card-header` is a header component for `ion-card`." }, "attributes": [ { "name": "color", "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)." }, { "name": "mode", "description": "The mode determines which platform styles to use.", "values": [ { "name": "ios" }, { "name": "md" } ] }, { "name": "translucent", "description": "If `true`, the card header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)." } ], "references": [ { "name": "Source code", "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/card-header/card-header.tsx" } ] }, { "name": "ion-card-subtitle", "description": { "kind": "markdown", "value": "`ion-card-subtitle` is a child component of `ion-card`" }, "attributes": [ { "name": "color", "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)." }, { "name": "mode", "description": "The mode determines which platform styles to use.", "values": [ { "name": "ios" }, { "name": "md" } ] } ], "references": [ { "name": "Source code", "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/card-subtitle/card-subtitle.tsx" } ] }, { "name": "ion-card-title", "description": { "kind": "markdown", "value": "`ion-card-title` is a child component of `ion-card`" }, "attributes": [ { "name": "color", "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)." }, { "name": "mode", "description": "The mode determines which platform styles to use.", "values": [ { "name": "ios" }, { "name": "md" } ] } ], "references": [ { "name": "Source code", "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/card-title/card-title.tsx" } ] }, { "name": "ion-checkbox", "description": { "kind": "markdown", "value": "Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property." }, "attributes": [ { "name": "checked", "description": "If `true`, the checkbox is selected." }, { "name": "color", "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)." }, { "name": "disabled", "description": "If `true`, the user cannot interact with the checkbox." }, { "name": "indeterminate", "description": "If `true`, the checkbox will visually appear as indeterminate." }, { "name": "mode", "description": "The mode determines which platform styles to use.", "values": [ { "name": "ios" }, { "name": "md" } ] }, { "name": "name", "description": "The name of the control, which is submitted with the form data." }, { "name": "value", "description": "The value of the checkbox does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\nit's only used when the checkbox participates in a native `<form>`." } ], "references": [ { "name": "Source code", "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/checkbox/checkbox.tsx" } ] }, { "name": "ion-chip", "description": { "kind": "markdown", "value": "Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons." }, "attributes": [ { "name": "color", "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)." }, { "name": "disabled", "description": "If `true`, the user cannot interact with the chip." }, { "name": "mode", "description": "The mode determines which platform styles to use.", "values": [ { "name": "ios" }, { "name": "md" } ] }, { "name": "outline", "description": "Display an outline style button." } ], "references": [ { "name": "Source code", "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/chip/chip.tsx" } ] }, { "name": "ion-col", "description": { "kind": "markdown", "value": "Columns are cellular components of the [grid](../grid) system and go inside of a [row](../row).\nThey will expand to fill their row. All content within a grid should go inside of a column.\n\nSee [Grid Layout](/docs/layout/grid) for more information." }, "attributes": [ { "name": "offset", "description": "The amount to offset the column, in terms of how many columns it should shift to the end\nof the total available." }, { "name": "offset-lg", "description": "The amount to offset the column for lg screens, in terms of how many columns it should shift\nto the end of the total available." }, { "name": "offset-md", "description": "The amount to offset the column for md screens, in terms of how many columns it should shift\nto the end of the total available." }, { "name": "offset-sm", "description": "The amount to offset the column for sm screens, in terms of how many columns it should shift\nto the end of the total available." }, { "name": "offset-xl", "description": "The amount to offset the column for xl screens, in terms of how many columns it should shift\nto the end of the total available." }, { "name": "offset-xs", "description": "The amount to offset the column for xs screens, in terms of how many columns it should shift\nto the end of the total available." }, { "name": "pull", "description": "The amount to pull the column, in terms of how many columns it should shift to the start of\nthe total available." }, { "name": "pull-lg", "description": "The amount to pull the column for lg screens, in terms of how many columns it should shift\nto the start of the total available." }, { "name": "pull-md", "description": "The amount to pull the column for md screens, in terms of how many columns it should shift\nto the start of the total available." }, { "name": "pull-sm", "description": "The amount to pull the column for sm screens, in terms of how many columns it should shift\nto the start of the total available." }, { "name": "pull-xl", "description": "The amount to pull the column for xl screens, in terms of how many columns it should shift\nto the start of the total available." }, { "name": "pull-xs", "description": "The amount to pull the column for xs screens, in terms of how many columns it should shift\nto the start of the total available." }, { "name": "push", "description": "The amount to push the column, in terms of how many columns it should shift to the end\nof the total available." }, { "name": "push-lg", "description": "The amount to push the column for lg screens, in terms of how many columns it should shift\nto the end of the total available." }, { "name": "push-md", "description": "The amount to push the column for md screens, in terms of how many columns it should shift\nto the end of the total available." }, { "name": "push-sm", "description": "The amount to push the column for sm screens, in terms of how many columns it should shift\nto the end of the total available." }, { "name": "push-xl", "description": "The amount to push the column for xl screens, in terms of how many columns it should shift\nto the end of the total available." }, { "name": "push-xs", "description": "The amount to push the column for xs screens, in terms of how many columns it should shift\nto the end of the total available." }, { "name": "size", "description": "The size of the column, in terms of how many columns it should take up out of the total\navailable. If `\"auto\"` is passed, the column will be the size of its content." }, { "name": "size-lg", "description": "The size of the column for lg screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content." }, { "name": "size-md", "description": "The size of the column for md screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content." }, { "name": "size-sm", "description": "The size of the column for sm screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content." }, { "name": "size-xl", "description": "The size of the column for xl screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content." }, { "name": "size-xs", "description": "The size of the column for xs screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content." } ], "references": [ { "name": "Source code", "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/col/col.tsx" } ] }, { "name": "ion-content", "description": { "kind": "markdown", "value": "The content component provides an easy to use content area with some useful methods\nto control the scrollable area. There should only be one content in a single\nview.\n\nContent, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties)." }, "attributes": [ { "name": "color", "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)." }, { "name": "force-overscroll", "description": "If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.\nIf the content exceeds the bounds of ionContent, nothing will change.\nNote, the does not disable the system bounce on iOS. That is an OS level setting." }, { "name": "fullscreen", "description": "If `true`, the content will scroll behind the headers\nand footers. This effect can easily be seen by setting the toolbar\nto transparent." }, { "name": "scroll-events", "description": "Because of performance reasons, ionScroll events are disabled by default, in order to enable them\nand start listening from (ionScroll), set this property to `true`." }, { "name": "scroll-x", "description": "If you want to enable the content scrolling in the X axis, set this property to `true`." }, { "name": "scroll-y", "description": "If you want to disable the content scrolling in the Y axis, set this property to `false`." } ], "references": [ { "name": "Source code", "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/content/content.tsx" } ] }, { "name": "ion-datetime", "description": { "kind": "markdown", "value": "Datetimes present a picker interface from the bottom of a page, making it easy for\nusers to select dates and times. The picker displays scrollable columns that can be\nused to individually select years, months, days, hours and minute values. Datetimes\nare similar to the native `input` elements of type `datetime-local`, however, Ionic's\nDatetime component makes it easy to display the date and time in a preferred format,\nand manage the datetime values." }, "attributes": [ { "name": "cancel-text", "description": "The text to display on the picker's cancel button." }, { "name": "day-names", "description": "Full day of the week names. This can be used to provide\nlocale names for each day in the week. Defaults to English." }, { "name": "day-short-names", "description": "Short abbreviated day of the week names. This can be used to provide\nlocale names for each day in the week. Defaults to English.\nDefaults to: `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`" }, { "name": "day-values", "description": "Values used to create the list of selectable days. By default\nevery day is shown for the given month. However, to control exactly which days of\nthe month to display, the `dayValues` input can take a number, an array of numbers, or\na string of comma separated numbers. Note that even if the array days have an invalid\nnumber for the selected month, like `31` in February, it will correctly not show\ndays which are not valid for the selected month." }, { "name": "disabled", "description": "If `true`, the user cannot interact with the datetime." }, { "name": "display-format", "description": "The display format of the date and time as text that shows\nwithin the item. When the `pickerFormat` input is not used, then the\n`displayFormat` is used for both display the formatted text, and determining\nthe datetime picker's columns. See the `pickerFormat` input description for\nmore info. Defaults to `MMM D, YYYY`." }, { "name": "display-timezone", "description": "The timezone to use for display purposes only. See\n[Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString)\nfor a list of supported timezones. If no value is provided, the\ncomponent will default to displaying times in the user's local timezone." }, { "name": "done-text", "description": "The text to display on the picker's \"Done\" button." }, { "name": "hour-values", "description": "Values used to create the list of selectable hours. By default\nthe hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However,\nto control exactly which hours to display, the `hourValues` input can take a number, an\narray of numbers, or a string of comma separated numbers." }, { "name": "max", "description": "The maximum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\n`1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the maximum could just be the year, such as `1994`.\nDefaults to the end of this year." }, { "name": "min", "description": "The minimum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\nsuch as `1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the minimum could just be the year, such as `1994`.\nDefaults to the beginning of the year, 100 years ago from today." }, { "name": "minute-values", "description": "Values used to create the list of selectable minutes. By default\nthe minutes range from `0` to `59`. However, to control exactly which minutes to display,\nthe `minuteValues` input can take a number, an array of numbers, or a string of comma\nseparated numbers. For example, if the minute selections should only be every 15 minutes,\nthen this input value would be `minuteValues=\"0,15,30,45\"`." }, { "name": "mode", "description": "The mode determines which platform styles to use.", "values": [ { "name": "ios" }, { "name": "md" } ] }, { "name": "month-names", "description": "Full names for each month name. This can be used to provide\nlocale month names. Defaults to English." }, { "name": "month-short-names", "description": "Short abbreviated names for each month name. This can be used to provide\nlocale month names. Defaults to English." }, { "name": "month-values", "description": "Values used to create the list of selectable months. By default\nthe month values range from `1` to `12`. However, to control exactly which months to\ndisplay, the `monthValues` input can take a number, an array of numbers, or a string of\ncomma separated numbers. For example, if only summer months should be shown, then this\ninput value would be `monthValues=\"6,7,8\"`. Note that month numbers do *not* have a\nzero-based index, meaning January's value is `1`, and December's is `12`." }, { "name": "name", "description": "The name of the control, which is submitted with the form data." }, { "name": "picker-format", "description": "The format of the date and time picker columns the user selects.\nA datetime input can have one or many datetime parts, each getting their\nown column which allow individual selection of that particular datetime part. For\nexample, year and month columns are two individually selectable columns which help\nchoose an exact date from the datetime picker. Each column follows the string\nparse format. Defaults to use `displayFormat`." }, { "name": "placeholder", "description": "The text to display when there's no date selected yet.\nUsing lowercase to match the input attribute" }, { "name": "readonly", "description": "If `true`, the datetime appears normal but is not interactive." }, { "name": "value", "description": "The value of the datetime as a valid ISO 8601 datetime string." }, { "name": "year-values", "description": "Values used to create the list of selectable years. By default\nthe year values range between the `min` and `max` datetime inputs. However, to\ncontrol exactly which years to display, the `yearValues` input can take a number, an array\nof numbers, or string of comma separated numbers. For example, to show upcoming and\nrecent leap years, then this input's value would be `yearValues=\"2024,2020,2016,2012,2008\"`." } ], "references": [ { "name": "Source code", "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/datetime/datetime.tsx" } ] }, { "name": "ion-fab", "description": { "kind": "markdown", "value": "Fabs are container elements that contain one or more fab buttons. They should be placed in a fixed position that does not scroll with the content. Fab should have one main fab-button. Fabs can also contain fab-lists which contain related buttons that show when the main fab button is clicked. The same fab container can contain several [fab-list](../fab-list) elements with different side values." }, "attributes": [ { "name": "activated", "description": "If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.\nThat means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible." }, { "name": "edge", "description": "If `true`, the fab will display on the edge of the header if\n`vertical` is `\"top\"`, and on the edge of the footer if\nit is `\"bottom\"`. Should be used with a `fixed` slot." }, { "name": "horizontal", "description": "Where to align the fab horizontally in the viewport.", "values": [ { "name": "center" }, { "name": "end" }, { "name": "start" } ] }, { "name": "vertical", "description": "Where to align the fab vertically in the viewport.", "values": [ { "name": "bottom" }, { "name": "center" }, { "name": "top" } ] } ], "references": [ { "name": "Source code", "url": "./https:/github.com/ionic-team/ionic/tree/master/core/src/components/fab/fab.tsx" } ] }, { "name": "ion-fab-button", "description": { "kind": "markdown", "value": "Floating Action Buttons (FABs) represent the primary action in an application. By default, they have a circular shape. When pressed, the button may open more related actions. As the name suggests, FABs generally float over the content in a fixed position. This is not achieved exclusively by using an `<ion-fab-button>FAB</ion-fab-button>`. They need to be wrapped with an `<ion-fab>` component in order to be fixed over the content.\n\nIf the FAB button is not wrapped with `<ion-fab>`, it will scroll with the content. FAB buttons have a default size, a mini size and can accept different colors:" }, "attributes": [ { "name": "activated", "description": "If `true`, the fab button will be show a close icon." }, { "name": "close-icon", "description": "The icon name to use for the close icon. This will appear when the fab button\nis pressed. Only applies if it is the main button inside of a fab containing a\nfab list." }, { "name": "color", "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)." }, { "name": "disabled", "description": "If `true`, the user cannot interact with the fab button." }, { "name": "download", "description": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)." }, { "name": "href", "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered." }, { "name": "mode", "description": "The mode determines which platform styles to use.", "values": [ { "name": "ios" }, { "name": "md" } ] }, { "name": "rel", "description": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)." }, { "name": "router-direction", "description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.", "values": [ { "name": "back" }, { "name": "forward" }, { "name": "root" } ] }, { "name": "show", "description": "If `true`, the fab button will show when in a fab-list." }, { "name": "size", "description": "The size of the button. Set this to `small` in order to have a mini fab button.", "values": [ { "name": "small" } ] }, { "name": "target", "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`." }, { "name": "translucent", "description": "If `true`, the fab button will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)." }, { "name": "type", "description": "The type of the button.", "values": [ { "name": "button" }, { "name": "reset" }, { "name": "submit" } ] } ], "references": [ { "name": "Source code",