mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 20:33:32 +08:00
refactor(components): update to use shadow DOM and work with css variables
- updates components to use shadow DOM or scoped if they require css variables - moves global styles to an external stylesheet that needs to be imported - adds support for additional colors and removes the Sass loops to generate colors for each component - several property renames, bug fixes, and test updates Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com> Co-authored-by: Adam Bradley <adambradley25@gmail.com> Co-authored-by: Cam Wiegert <cam@camwiegert.com>
This commit is contained in:
Brandy Carney
445
core/src/components.d.ts
vendored
445
core/src/components.d.ts
vendored
@ -36,15 +36,21 @@ import {
|
||||
Animation,
|
||||
AnimationBuilder,
|
||||
BlockerConfig,
|
||||
BlockerDelegate,
|
||||
CheckedInputChangeEvent,
|
||||
Color,
|
||||
ComponentProps,
|
||||
ComponentRef,
|
||||
DomRenderFn,
|
||||
FrameworkDelegate,
|
||||
GestureCallback,
|
||||
GestureConfig,
|
||||
GestureDelegate,
|
||||
GestureDetail,
|
||||
HeaderFn,
|
||||
InputChangeEvent,
|
||||
ItemHeightFn,
|
||||
ItemRenderFn,
|
||||
Knob,
|
||||
LoadingOptions,
|
||||
Menu,
|
||||
@ -53,6 +59,7 @@ import {
|
||||
Mode,
|
||||
NavComponent,
|
||||
NavOptions,
|
||||
OverlayEventDetail,
|
||||
PickerButton,
|
||||
PickerColumn,
|
||||
PickerOptions,
|
||||
@ -63,47 +70,23 @@ import {
|
||||
RouterEventDetail,
|
||||
RouterOutletOptions,
|
||||
RouteWrite,
|
||||
ScrollBaseDetail,
|
||||
ScrollDetail,
|
||||
SelectInputChangeEvent,
|
||||
SelectInterface,
|
||||
SelectPopoverOption,
|
||||
Side,
|
||||
StyleEvent,
|
||||
TabbarLayout,
|
||||
TabbarPlacement,
|
||||
ToastOptions,
|
||||
TransitionDoneFn,
|
||||
TransitionInstruction,
|
||||
ViewController,
|
||||
} from './interface';
|
||||
import {
|
||||
OverlayEventDetail,
|
||||
} from './utils/overlays';
|
||||
import {
|
||||
EventEmitter,
|
||||
} from '@stencil/core';
|
||||
import {
|
||||
BlockerDelegate,
|
||||
GestureDelegate,
|
||||
} from './components/gesture-controller/gesture-controller-utils';
|
||||
import {
|
||||
Side,
|
||||
} from './utils/helpers';
|
||||
import {
|
||||
ViewController,
|
||||
} from './components/nav/view-controller';
|
||||
import {
|
||||
RouterIntent,
|
||||
} from './components/router/utils/constants';
|
||||
import {
|
||||
ScrollBaseDetail,
|
||||
ScrollDetail,
|
||||
} from './components/scroll/scroll';
|
||||
import {
|
||||
TabbarLayout,
|
||||
TabbarPlacement,
|
||||
} from './components/tabbar/tabbar';
|
||||
import {
|
||||
DomRenderFn,
|
||||
HeaderFn,
|
||||
ItemHeightFn,
|
||||
ItemRenderFn,
|
||||
} from './components/virtual-scroll/virtual-scroll-utils';
|
||||
|
||||
declare global {
|
||||
|
||||
@ -112,7 +95,7 @@ declare global {
|
||||
/**
|
||||
* Create an action sheet overlay with action sheet options.
|
||||
*/
|
||||
'create': (opts?: ActionSheetOptions | undefined) => Promise<HTMLIonActionSheetElement | null>;
|
||||
'create': (opts?: ActionSheetOptions | undefined) => Promise<HTMLIonActionSheetElement>;
|
||||
/**
|
||||
* Dismiss the open action sheet overlay.
|
||||
*/
|
||||
@ -188,11 +171,11 @@ declare global {
|
||||
/**
|
||||
* Returns a promise that resolves when the action-sheet did dismiss. It also accepts a callback that is called in the same circustances.
|
||||
*/
|
||||
'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
|
||||
'onDidDismiss': (callback?: ((detail: OverlayEventDetail<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>;
|
||||
/**
|
||||
* Returns a promise that resolves when the action-sheet will dismiss. It also accepts a callback that is called in the same circustances.
|
||||
*/
|
||||
'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
|
||||
'onWillDismiss': (callback?: ((detail: OverlayEventDetail<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>;
|
||||
/**
|
||||
* Unique ID to be used with the overlay. Internal only
|
||||
*/
|
||||
@ -315,7 +298,7 @@ declare global {
|
||||
/**
|
||||
* Create an alert overlay with alert options
|
||||
*/
|
||||
'create': (opts?: AlertOptions | undefined) => Promise<HTMLIonAlertElement | null>;
|
||||
'create': (opts?: AlertOptions | undefined) => Promise<HTMLIonAlertElement>;
|
||||
/**
|
||||
* Dismiss the open alert overlay.
|
||||
*/
|
||||
@ -359,7 +342,7 @@ declare global {
|
||||
/**
|
||||
* Array of buttons to be added to the alert.
|
||||
*/
|
||||
'buttons': AlertButton[];
|
||||
'buttons': (AlertButton | string)[];
|
||||
/**
|
||||
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
|
||||
*/
|
||||
@ -397,11 +380,11 @@ declare global {
|
||||
/**
|
||||
* Returns a promise that resolves when the alert did dismiss. It also accepts a callback that is called in the same circumstances.
|
||||
*/
|
||||
'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
|
||||
'onDidDismiss': (callback?: ((detail: OverlayEventDetail<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>;
|
||||
/**
|
||||
* Returns a promise that resolves when the alert will dismiss. It also accepts a callback that is called in the same circumstances.
|
||||
*/
|
||||
'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
|
||||
'onWillDismiss': (callback?: ((detail: OverlayEventDetail<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>;
|
||||
'overlayId': number;
|
||||
/**
|
||||
* Present the alert overlay after it has been created.
|
||||
@ -444,7 +427,7 @@ declare global {
|
||||
/**
|
||||
* Array of buttons to be added to the alert.
|
||||
*/
|
||||
'buttons'?: AlertButton[];
|
||||
'buttons'?: (AlertButton | string)[];
|
||||
/**
|
||||
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
|
||||
*/
|
||||
@ -801,7 +784,7 @@ declare global {
|
||||
namespace StencilComponents {
|
||||
interface IonBadge {
|
||||
/**
|
||||
* The color the badge should be
|
||||
* The color the badge should be.
|
||||
*/
|
||||
'color': Color;
|
||||
/**
|
||||
@ -831,7 +814,7 @@ declare global {
|
||||
namespace JSXElements {
|
||||
export interface IonBadgeAttributes extends HTMLAttributes {
|
||||
/**
|
||||
* The color the badge should be
|
||||
* The color the badge should be.
|
||||
*/
|
||||
'color'?: Color;
|
||||
/**
|
||||
@ -1015,10 +998,6 @@ declare global {
|
||||
|
||||
namespace StencilComponents {
|
||||
interface IonCardContent {
|
||||
/**
|
||||
* The color to use for the text.
|
||||
*/
|
||||
'color': Color;
|
||||
/**
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
@ -1045,10 +1024,6 @@ declare global {
|
||||
}
|
||||
namespace JSXElements {
|
||||
export interface IonCardContentAttributes extends HTMLAttributes {
|
||||
/**
|
||||
* The color to use for the text.
|
||||
*/
|
||||
'color'?: Color;
|
||||
/**
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
@ -1420,6 +1395,61 @@ declare global {
|
||||
}
|
||||
|
||||
|
||||
declare global {
|
||||
|
||||
namespace StencilComponents {
|
||||
interface IonChipIcon {
|
||||
/**
|
||||
* The color to use. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
*/
|
||||
'color': Color;
|
||||
/**
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
'mode': Mode;
|
||||
/**
|
||||
* The icon to use. Possible values are the same as `"ion-icon"`.
|
||||
*/
|
||||
'name': string;
|
||||
}
|
||||
}
|
||||
|
||||
interface HTMLIonChipIconElement extends StencilComponents.IonChipIcon, HTMLStencilElement {}
|
||||
|
||||
var HTMLIonChipIconElement: {
|
||||
prototype: HTMLIonChipIconElement;
|
||||
new (): HTMLIonChipIconElement;
|
||||
};
|
||||
interface HTMLElementTagNameMap {
|
||||
'ion-chip-icon': HTMLIonChipIconElement;
|
||||
}
|
||||
interface ElementTagNameMap {
|
||||
'ion-chip-icon': HTMLIonChipIconElement;
|
||||
}
|
||||
namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
'ion-chip-icon': JSXElements.IonChipIconAttributes;
|
||||
}
|
||||
}
|
||||
namespace JSXElements {
|
||||
export interface IonChipIconAttributes extends HTMLAttributes {
|
||||
/**
|
||||
* The color to use. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
*/
|
||||
'color'?: Color;
|
||||
/**
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
'mode'?: Mode;
|
||||
/**
|
||||
* The icon to use. Possible values are the same as `"ion-icon"`.
|
||||
*/
|
||||
'name'?: string;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
declare global {
|
||||
|
||||
namespace StencilComponents {
|
||||
@ -1694,6 +1724,7 @@ declare global {
|
||||
|
||||
namespace StencilComponents {
|
||||
interface IonContent {
|
||||
'color': Color;
|
||||
/**
|
||||
* If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting.
|
||||
*/
|
||||
@ -1702,24 +1733,15 @@ declare global {
|
||||
* If true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.
|
||||
*/
|
||||
'fullscreen': boolean;
|
||||
'getScrollElement': () => HTMLIonScrollElement;
|
||||
/**
|
||||
* Scroll by a specific X/Y distance
|
||||
* By default `ion-content` uses an `ion-scroll` under the hood to implement scrolling, if you want to disable the content scrolling for a given page, set this property to `false`.
|
||||
*/
|
||||
'scrollByPoint': (x: number, y: number, duration: number, done?: Function | undefined) => Promise<any>;
|
||||
'scrollEnabled': boolean;
|
||||
/**
|
||||
* Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`.
|
||||
*/
|
||||
'scrollEvents': boolean;
|
||||
/**
|
||||
* Scroll to the bottom of the content component. Duration of the scroll animation in milliseconds. Defaults to `300`. Returns a promise which is resolved when the scroll has completed.
|
||||
*/
|
||||
'scrollToBottom': (duration?: number) => Promise<void>;
|
||||
/**
|
||||
* Scroll to a specific X/Y coordinate in the content
|
||||
*/
|
||||
'scrollToPoint': (x: number, y: number, duration: number, done?: Function | undefined) => Promise<any>;
|
||||
/**
|
||||
* Scroll to the top of the content component. Duration of the scroll animation in milliseconds. Defaults to `300`. Returns a promise which is resolved when the scroll has completed.
|
||||
*/
|
||||
'scrollToTop': (duration?: number) => Promise<void>;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1742,6 +1764,7 @@ declare global {
|
||||
}
|
||||
namespace JSXElements {
|
||||
export interface IonContentAttributes extends HTMLAttributes {
|
||||
'color'?: Color;
|
||||
/**
|
||||
* If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting.
|
||||
*/
|
||||
@ -1750,7 +1773,13 @@ declare global {
|
||||
* If true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.
|
||||
*/
|
||||
'fullscreen'?: boolean;
|
||||
/**
|
||||
* By default `ion-content` uses an `ion-scroll` under the hood to implement scrolling, if you want to disable the content scrolling for a given page, set this property to `false`.
|
||||
*/
|
||||
'scrollEnabled'?: boolean;
|
||||
/**
|
||||
* Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`.
|
||||
*/
|
||||
'scrollEvents'?: boolean;
|
||||
}
|
||||
}
|
||||
@ -2148,9 +2177,9 @@ declare global {
|
||||
namespace StencilComponents {
|
||||
interface IonFooter {
|
||||
/**
|
||||
* If true, the footer will be translucent. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
'translucent': boolean;
|
||||
'mode': Mode;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2174,9 +2203,9 @@ declare global {
|
||||
namespace JSXElements {
|
||||
export interface IonFooterAttributes extends HTMLAttributes {
|
||||
/**
|
||||
* If true, the footer will be translucent. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
'translucent'?: boolean;
|
||||
'mode'?: Mode;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2233,10 +2262,6 @@ declare global {
|
||||
* What component to attach listeners to.
|
||||
*/
|
||||
'attachTo': string | HTMLElement;
|
||||
/**
|
||||
* If true, gesture will prevent any other gestures from firing
|
||||
*/
|
||||
'autoBlockAll': boolean;
|
||||
/**
|
||||
* Function to execute to see if gesture can start. Return boolean
|
||||
*/
|
||||
@ -2319,10 +2344,6 @@ declare global {
|
||||
* What component to attach listeners to.
|
||||
*/
|
||||
'attachTo'?: string | HTMLElement;
|
||||
/**
|
||||
* If true, gesture will prevent any other gestures from firing
|
||||
*/
|
||||
'autoBlockAll'?: boolean;
|
||||
/**
|
||||
* Function to execute to see if gesture can start. Return boolean
|
||||
*/
|
||||
@ -2428,9 +2449,9 @@ declare global {
|
||||
namespace StencilComponents {
|
||||
interface IonHeader {
|
||||
/**
|
||||
* If true, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
'translucent': boolean;
|
||||
'mode': Mode;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2454,9 +2475,9 @@ declare global {
|
||||
namespace JSXElements {
|
||||
export interface IonHeaderAttributes extends HTMLAttributes {
|
||||
/**
|
||||
* If true, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
'translucent'?: boolean;
|
||||
'mode'?: Mode;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2466,10 +2487,29 @@ declare global {
|
||||
|
||||
namespace StencilComponents {
|
||||
interface IonHideWhen {
|
||||
/**
|
||||
* If the current media query matches this value, the element will hide.
|
||||
*/
|
||||
'mediaQuery': string;
|
||||
/**
|
||||
* If the current platform matches the given value, the element will hide. Accepts a comma separated list of modes to match against.
|
||||
*/
|
||||
'mode': Mode;
|
||||
/**
|
||||
* If false, and two or more conditions are set, the element will hide when all are true. If true, and two or more conditions are set, the element will hide when at least one is true.
|
||||
*/
|
||||
'or': boolean;
|
||||
/**
|
||||
* If the current orientation matches this value, the element will hide.
|
||||
*/
|
||||
'orientation': string;
|
||||
/**
|
||||
* If the current platform matches the given value, the element will hide. Accepts a comma separated list of platform to match against.
|
||||
*/
|
||||
'platform': string;
|
||||
/**
|
||||
* If the current screen width matches the given size, the element will hide. Uses the build in sizes of xs, sm, md, lg, xl.
|
||||
*/
|
||||
'size': string;
|
||||
}
|
||||
}
|
||||
@ -2493,10 +2533,29 @@ declare global {
|
||||
}
|
||||
namespace JSXElements {
|
||||
export interface IonHideWhenAttributes extends HTMLAttributes {
|
||||
/**
|
||||
* If the current media query matches this value, the element will hide.
|
||||
*/
|
||||
'mediaQuery'?: string;
|
||||
/**
|
||||
* If the current platform matches the given value, the element will hide. Accepts a comma separated list of modes to match against.
|
||||
*/
|
||||
'mode'?: Mode;
|
||||
/**
|
||||
* If false, and two or more conditions are set, the element will hide when all are true. If true, and two or more conditions are set, the element will hide when at least one is true.
|
||||
*/
|
||||
'or'?: boolean;
|
||||
/**
|
||||
* If the current orientation matches this value, the element will hide.
|
||||
*/
|
||||
'orientation'?: string;
|
||||
/**
|
||||
* If the current platform matches the given value, the element will hide. Accepts a comma separated list of platform to match against.
|
||||
*/
|
||||
'platform'?: string;
|
||||
/**
|
||||
* If the current screen width matches the given size, the element will hide. Uses the build in sizes of xs, sm, md, lg, xl.
|
||||
*/
|
||||
'size'?: string;
|
||||
}
|
||||
}
|
||||
@ -3199,6 +3258,10 @@ declare global {
|
||||
* If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present.
|
||||
*/
|
||||
'detail': boolean;
|
||||
/**
|
||||
* The icon to use when `detail` is set to `true`. Defaults to `"ios-arrow-forward"`.
|
||||
*/
|
||||
'detailIcon': string;
|
||||
/**
|
||||
* If true, the user cannot interact with the item. Defaults to `false`.
|
||||
*/
|
||||
@ -3219,6 +3282,7 @@ declare global {
|
||||
* When using a router, it specifies the transition direction when navigating to another page using `href`.
|
||||
*/
|
||||
'routerDirection': RouterDirection;
|
||||
'state': 'valid' | 'unvalid' | 'focus';
|
||||
}
|
||||
}
|
||||
|
||||
@ -3253,6 +3317,10 @@ declare global {
|
||||
* If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present.
|
||||
*/
|
||||
'detail'?: boolean;
|
||||
/**
|
||||
* The icon to use when `detail` is set to `true`. Defaults to `"ios-arrow-forward"`.
|
||||
*/
|
||||
'detailIcon'?: string;
|
||||
/**
|
||||
* If true, the user cannot interact with the item. Defaults to `false`.
|
||||
*/
|
||||
@ -3273,6 +3341,7 @@ declare global {
|
||||
* When using a router, it specifies the transition direction when navigating to another page using `href`.
|
||||
*/
|
||||
'routerDirection'?: RouterDirection;
|
||||
'state'?: 'valid' | 'unvalid' | 'focus';
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -3397,6 +3466,10 @@ declare global {
|
||||
* Get the [Item Sliding](../../item-sliding/ItemSliding) that is currently opene.
|
||||
*/
|
||||
'getOpenItem': () => HTMLIonItemSlidingElement | undefined;
|
||||
/**
|
||||
* How the bottom border should be displayed on all items.
|
||||
*/
|
||||
'inset': boolean;
|
||||
/**
|
||||
* How the bottom border should be displayed on all items.
|
||||
*/
|
||||
@ -3427,6 +3500,10 @@ declare global {
|
||||
}
|
||||
namespace JSXElements {
|
||||
export interface IonListAttributes extends HTMLAttributes {
|
||||
/**
|
||||
* How the bottom border should be displayed on all items.
|
||||
*/
|
||||
'inset'?: boolean;
|
||||
/**
|
||||
* How the bottom border should be displayed on all items.
|
||||
*/
|
||||
@ -3443,7 +3520,7 @@ declare global {
|
||||
/**
|
||||
* Create a loading overlay with loading options.
|
||||
*/
|
||||
'create': (opts?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement | null>;
|
||||
'create': (opts?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>;
|
||||
/**
|
||||
* Dismiss the open loading overlay.
|
||||
*/
|
||||
@ -3523,11 +3600,11 @@ declare global {
|
||||
/**
|
||||
* Returns a promise that resolves when the loading did dismiss. It also accepts a callback that is called in the same circumstances.
|
||||
*/
|
||||
'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
|
||||
'onDidDismiss': (callback?: ((detail: OverlayEventDetail<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>;
|
||||
/**
|
||||
* Returns a promise that resolves when the loading will dismiss. It also accepts a callback that is called in the same circumstances.
|
||||
*/
|
||||
'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
|
||||
'onWillDismiss': (callback?: ((detail: OverlayEventDetail<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>;
|
||||
'overlayId': number;
|
||||
/**
|
||||
* Present the loading overlay after it has been created.
|
||||
@ -3849,10 +3926,6 @@ declare global {
|
||||
*/
|
||||
'menuId': string;
|
||||
'open': (animated?: boolean) => Promise<boolean>;
|
||||
/**
|
||||
* If true, the menu will persist on child pages.
|
||||
*/
|
||||
'persistent': boolean;
|
||||
'setOpen': (shouldOpen: boolean, animated?: boolean) => Promise<boolean>;
|
||||
/**
|
||||
* Which side of the view the menu should be placed. Default `"start"`.
|
||||
@ -3917,10 +3990,6 @@ declare global {
|
||||
* Emitted when the menu is open.
|
||||
*/
|
||||
'onIonOpen'?: (event: CustomEvent<void>) => void;
|
||||
/**
|
||||
* If true, the menu will persist on child pages.
|
||||
*/
|
||||
'persistent'?: boolean;
|
||||
/**
|
||||
* Which side of the view the menu should be placed. Default `"start"`.
|
||||
*/
|
||||
@ -3945,7 +4014,7 @@ declare global {
|
||||
/**
|
||||
* Create a modal overlay with modal options.
|
||||
*/
|
||||
'create': (opts?: ModalOptions | undefined) => Promise<HTMLIonModalElement | null>;
|
||||
'create': (opts?: ModalOptions | undefined) => Promise<HTMLIonModalElement>;
|
||||
/**
|
||||
* Dismiss the open modal overlay.
|
||||
*/
|
||||
@ -3986,10 +4055,6 @@ declare global {
|
||||
|
||||
namespace StencilComponents {
|
||||
interface IonModal {
|
||||
/**
|
||||
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
*/
|
||||
'color': Color;
|
||||
/**
|
||||
* The component to display inside of the modal.
|
||||
*/
|
||||
@ -4020,18 +4085,14 @@ declare global {
|
||||
* Animation to use when the modal is dismissed.
|
||||
*/
|
||||
'leaveAnimation': AnimationBuilder;
|
||||
/**
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
*/
|
||||
'mode': Mode;
|
||||
/**
|
||||
* Returns a promise that resolves when the modal did dismiss. It also accepts a callback that is called in the same circustances.
|
||||
*/
|
||||
'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
|
||||
'onDidDismiss': (callback?: ((detail: OverlayEventDetail<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>;
|
||||
/**
|
||||
* Returns a promise that resolves when the modal will dismiss. It also accepts a callback that is called in the same circustances.
|
||||
*/
|
||||
'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
|
||||
'onWillDismiss': (callback?: ((detail: OverlayEventDetail<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>;
|
||||
'overlayId': number;
|
||||
/**
|
||||
* Present the modal overlay after it has been created.
|
||||
@ -4067,10 +4128,6 @@ declare global {
|
||||
}
|
||||
namespace JSXElements {
|
||||
export interface IonModalAttributes extends HTMLAttributes {
|
||||
/**
|
||||
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
*/
|
||||
'color'?: Color;
|
||||
/**
|
||||
* The component to display inside of the modal.
|
||||
*/
|
||||
@ -4097,10 +4154,6 @@ declare global {
|
||||
* Animation to use when the modal is dismissed.
|
||||
*/
|
||||
'leaveAnimation'?: AnimationBuilder;
|
||||
/**
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
*/
|
||||
'mode'?: Mode;
|
||||
/**
|
||||
* Emitted after the modal has dismissed.
|
||||
*/
|
||||
@ -4303,6 +4356,7 @@ declare global {
|
||||
/**
|
||||
* Returns the length of navigation stack
|
||||
*/
|
||||
'isAnimating': () => boolean;
|
||||
'length': () => number;
|
||||
/**
|
||||
* Call to navigate back from a current component. Similar to push(), you can also pass navigation options.
|
||||
@ -4340,7 +4394,7 @@ declare global {
|
||||
* Set the root for the current navigation stack.
|
||||
*/
|
||||
'setRoot': (component: NavComponent, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
|
||||
'setRouteId': (id: string, params: any, direction: RouterIntent) => Promise<RouteWrite>;
|
||||
'setRouteId': (id: string, params: any, direction: number) => Promise<RouteWrite>;
|
||||
/**
|
||||
* If the nav component should allow for swipe-to-go-back
|
||||
*/
|
||||
@ -4485,7 +4539,7 @@ declare global {
|
||||
|
||||
namespace StencilComponents {
|
||||
interface IonPickerController {
|
||||
'create': (opts?: PickerOptions | undefined) => Promise<HTMLIonPickerElement | null>;
|
||||
'create': (opts?: PickerOptions | undefined) => Promise<HTMLIonPickerElement>;
|
||||
'dismiss': (data?: any, role?: string | undefined, pickerId?: number) => Promise<void>;
|
||||
'getTop': () => HTMLIonPickerElement;
|
||||
}
|
||||
@ -4575,11 +4629,11 @@ declare global {
|
||||
/**
|
||||
* Returns a promise that resolves when the picker did dismiss. It also accepts a callback that is called in the same circustances.
|
||||
*/
|
||||
'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
|
||||
'onDidDismiss': (callback?: ((detail: OverlayEventDetail<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>;
|
||||
/**
|
||||
* Returns a promise that resolves when the picker will dismiss. It also accepts a callback that is called in the same circustances.
|
||||
*/
|
||||
'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
|
||||
'onWillDismiss': (callback?: ((detail: OverlayEventDetail<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>;
|
||||
'overlayId': number;
|
||||
/**
|
||||
* Present the picker overlay after it has been created.
|
||||
@ -4692,7 +4746,7 @@ declare global {
|
||||
/**
|
||||
* Create a popover overlay with popover options.
|
||||
*/
|
||||
'create': (opts?: PopoverOptions | undefined) => Promise<HTMLIonPopoverElement | null>;
|
||||
'create': (opts?: PopoverOptions | undefined) => Promise<HTMLIonPopoverElement>;
|
||||
/**
|
||||
* Dismiss the open popover overlay.
|
||||
*/
|
||||
@ -4778,11 +4832,11 @@ declare global {
|
||||
/**
|
||||
* Returns a promise that resolves when the popover did dismiss. It also accepts a callback that is called in the same circustances.
|
||||
*/
|
||||
'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
|
||||
'onDidDismiss': (callback?: ((detail: OverlayEventDetail<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>;
|
||||
/**
|
||||
* Returns a promise that resolves when the popover will dismiss. It also accepts a callback that is called in the same circustances.
|
||||
*/
|
||||
'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
|
||||
'onWillDismiss': (callback?: ((detail: OverlayEventDetail<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>;
|
||||
'overlayId': number;
|
||||
/**
|
||||
* Present the popover overlay after it has been created.
|
||||
@ -5498,6 +5552,10 @@ declare global {
|
||||
* Adds the ripple effect to the parent elment
|
||||
*/
|
||||
'addRipple': (pageX: number, pageY: number) => void;
|
||||
'parent': HTMLElement | string;
|
||||
/**
|
||||
* If true, the ripple effect will listen to any click events and animate
|
||||
*/
|
||||
'tapClick': boolean;
|
||||
}
|
||||
}
|
||||
@ -5521,6 +5579,10 @@ declare global {
|
||||
}
|
||||
namespace JSXElements {
|
||||
export interface IonRippleEffectAttributes extends HTMLAttributes {
|
||||
'parent'?: HTMLElement | string;
|
||||
/**
|
||||
* If true, the ripple effect will listen to any click events and animate
|
||||
*/
|
||||
'tapClick'?: boolean;
|
||||
}
|
||||
}
|
||||
@ -5691,7 +5753,7 @@ declare global {
|
||||
|
||||
namespace StencilComponents {
|
||||
interface IonRouter {
|
||||
'navChanged': (intent: RouterIntent) => Promise<boolean>;
|
||||
'navChanged': (intent: number) => Promise<boolean>;
|
||||
'printDebug': () => void;
|
||||
/**
|
||||
* Navigate to the specified URL
|
||||
@ -5798,7 +5860,7 @@ declare global {
|
||||
*/
|
||||
'scrollByPoint': (x: number, y: number, duration: number, done?: Function | undefined) => Promise<any>;
|
||||
/**
|
||||
* If true, the component will emit scroll events
|
||||
* If true, the component will emit scroll events.
|
||||
*/
|
||||
'scrollEvents': boolean;
|
||||
/**
|
||||
@ -5856,7 +5918,7 @@ declare global {
|
||||
*/
|
||||
'onIonScrollStart'?: (event: CustomEvent<ScrollBaseDetail>) => void;
|
||||
/**
|
||||
* If true, the component will emit scroll events
|
||||
* If true, the component will emit scroll events.
|
||||
*/
|
||||
'scrollEvents'?: boolean;
|
||||
}
|
||||
@ -5881,11 +5943,19 @@ declare global {
|
||||
*/
|
||||
'autocorrect': string;
|
||||
/**
|
||||
* Set the the cancel button text. Default: `"Cancel"`.
|
||||
* Set the cancel button icon. Only applies to `md` mode. Defaults to `"md-arrow-back"`.
|
||||
*/
|
||||
'cancelButtonIcon': string;
|
||||
/**
|
||||
* Set the the cancel button text. Only applies to `ios` mode. Default: `"Cancel"`.
|
||||
*/
|
||||
'cancelButtonText': string;
|
||||
/**
|
||||
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
* Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`.
|
||||
*/
|
||||
'clearIcon': string;
|
||||
/**
|
||||
* The color the searchbar should be.
|
||||
*/
|
||||
'color': Color;
|
||||
/**
|
||||
@ -5893,13 +5963,17 @@ declare global {
|
||||
*/
|
||||
'debounce': number;
|
||||
/**
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
'mode': Mode;
|
||||
/**
|
||||
* Set the input's placeholder. Default `"Search"`.
|
||||
*/
|
||||
'placeholder': string;
|
||||
/**
|
||||
* The icon to use as the search icon. Defaults to `"search"`.
|
||||
*/
|
||||
'searchIcon': string;
|
||||
/**
|
||||
* If true, show the cancel button. Default `false`.
|
||||
*/
|
||||
@ -5951,11 +6025,19 @@ declare global {
|
||||
*/
|
||||
'autocorrect'?: string;
|
||||
/**
|
||||
* Set the the cancel button text. Default: `"Cancel"`.
|
||||
* Set the cancel button icon. Only applies to `md` mode. Defaults to `"md-arrow-back"`.
|
||||
*/
|
||||
'cancelButtonIcon'?: string;
|
||||
/**
|
||||
* Set the the cancel button text. Only applies to `ios` mode. Default: `"Cancel"`.
|
||||
*/
|
||||
'cancelButtonText'?: string;
|
||||
/**
|
||||
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
* Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`.
|
||||
*/
|
||||
'clearIcon'?: string;
|
||||
/**
|
||||
* The color the searchbar should be.
|
||||
*/
|
||||
'color'?: Color;
|
||||
/**
|
||||
@ -5963,7 +6045,7 @@ declare global {
|
||||
*/
|
||||
'debounce'?: number;
|
||||
/**
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
'mode'?: Mode;
|
||||
/**
|
||||
@ -5994,6 +6076,10 @@ declare global {
|
||||
* Set the input's placeholder. Default `"Search"`.
|
||||
*/
|
||||
'placeholder'?: string;
|
||||
/**
|
||||
* The icon to use as the search icon. Defaults to `"search"`.
|
||||
*/
|
||||
'searchIcon'?: string;
|
||||
/**
|
||||
* If true, show the cancel button. Default `false`.
|
||||
*/
|
||||
@ -6028,10 +6114,6 @@ declare global {
|
||||
*/
|
||||
'color': Color;
|
||||
'disabled': boolean;
|
||||
/**
|
||||
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
|
||||
*/
|
||||
'href': string;
|
||||
/**
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
@ -6071,10 +6153,6 @@ declare global {
|
||||
*/
|
||||
'color'?: Color;
|
||||
'disabled'?: boolean;
|
||||
/**
|
||||
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
|
||||
*/
|
||||
'href'?: string;
|
||||
/**
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
@ -6414,10 +6492,29 @@ declare global {
|
||||
|
||||
namespace StencilComponents {
|
||||
interface IonShowWhen {
|
||||
/**
|
||||
* If the current media query matches this value, the element will show.
|
||||
*/
|
||||
'mediaQuery': string;
|
||||
/**
|
||||
* If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against.
|
||||
*/
|
||||
'mode': Mode;
|
||||
/**
|
||||
* If false, and two or more conditions are set, the element will show when all are true. If true, and two or more conditions are set, the element will show when at least one is true.
|
||||
*/
|
||||
'or': boolean;
|
||||
/**
|
||||
* If the current orientation matches this value, the element will show.
|
||||
*/
|
||||
'orientation': string;
|
||||
/**
|
||||
* If the current platform matches the given value, the element will show. Accepts a comma separated list of platform to match against.
|
||||
*/
|
||||
'platform': string;
|
||||
/**
|
||||
* If the current screen width matches the given size, the element will show. Uses the build in sizes of xs, sm, md, lg, xl.
|
||||
*/
|
||||
'size': string;
|
||||
}
|
||||
}
|
||||
@ -6441,10 +6538,29 @@ declare global {
|
||||
}
|
||||
namespace JSXElements {
|
||||
export interface IonShowWhenAttributes extends HTMLAttributes {
|
||||
/**
|
||||
* If the current media query matches this value, the element will show.
|
||||
*/
|
||||
'mediaQuery'?: string;
|
||||
/**
|
||||
* If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against.
|
||||
*/
|
||||
'mode'?: Mode;
|
||||
/**
|
||||
* If false, and two or more conditions are set, the element will show when all are true. If true, and two or more conditions are set, the element will show when at least one is true.
|
||||
*/
|
||||
'or'?: boolean;
|
||||
/**
|
||||
* If the current orientation matches this value, the element will show.
|
||||
*/
|
||||
'orientation'?: string;
|
||||
/**
|
||||
* If the current platform matches the given value, the element will show. Accepts a comma separated list of platform to match against.
|
||||
*/
|
||||
'platform'?: string;
|
||||
/**
|
||||
* If the current screen width matches the given size, the element will show. Uses the build in sizes of xs, sm, md, lg, xl.
|
||||
*/
|
||||
'size'?: string;
|
||||
}
|
||||
}
|
||||
@ -6564,9 +6680,13 @@ declare global {
|
||||
*/
|
||||
'options': any;
|
||||
/**
|
||||
* Show or hide the pager
|
||||
* If true, show the pagination. Defaults to `false`.
|
||||
*/
|
||||
'pager': boolean;
|
||||
/**
|
||||
* If true, show the scrollbar. Defaults to `false`.
|
||||
*/
|
||||
'scrollbar': boolean;
|
||||
/**
|
||||
* Transition to the next slide.
|
||||
*/
|
||||
@ -6670,9 +6790,13 @@ declare global {
|
||||
*/
|
||||
'options'?: any;
|
||||
/**
|
||||
* Show or hide the pager
|
||||
* If true, show the pagination. Defaults to `false`.
|
||||
*/
|
||||
'pager'?: boolean;
|
||||
/**
|
||||
* If true, show the scrollbar. Defaults to `false`.
|
||||
*/
|
||||
'scrollbar'?: boolean;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -6809,49 +6933,12 @@ declare global {
|
||||
}
|
||||
|
||||
|
||||
declare global {
|
||||
|
||||
namespace StencilComponents {
|
||||
interface IonStatusTap {
|
||||
/**
|
||||
* How long the scrolling action should take.
|
||||
*/
|
||||
'duration': number;
|
||||
}
|
||||
}
|
||||
|
||||
interface HTMLIonStatusTapElement extends StencilComponents.IonStatusTap, HTMLStencilElement {}
|
||||
|
||||
var HTMLIonStatusTapElement: {
|
||||
prototype: HTMLIonStatusTapElement;
|
||||
new (): HTMLIonStatusTapElement;
|
||||
};
|
||||
interface HTMLElementTagNameMap {
|
||||
'ion-status-tap': HTMLIonStatusTapElement;
|
||||
}
|
||||
interface ElementTagNameMap {
|
||||
'ion-status-tap': HTMLIonStatusTapElement;
|
||||
}
|
||||
namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
'ion-status-tap': JSXElements.IonStatusTapAttributes;
|
||||
}
|
||||
}
|
||||
namespace JSXElements {
|
||||
export interface IonStatusTapAttributes extends HTMLAttributes {
|
||||
/**
|
||||
* How long the scrolling action should take.
|
||||
*/
|
||||
'duration'?: number;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
declare global {
|
||||
|
||||
namespace StencilComponents {
|
||||
interface IonTabButton {
|
||||
'color': Color;
|
||||
'mode': Mode;
|
||||
/**
|
||||
* If the tab is selected or not
|
||||
*/
|
||||
@ -6882,6 +6969,8 @@ declare global {
|
||||
}
|
||||
namespace JSXElements {
|
||||
export interface IonTabButtonAttributes extends HTMLAttributes {
|
||||
'color'?: Color;
|
||||
'mode'?: Mode;
|
||||
/**
|
||||
* Emitted when the tab button is loaded
|
||||
*/
|
||||
@ -7060,6 +7149,7 @@ declare global {
|
||||
|
||||
namespace StencilComponents {
|
||||
interface IonTabbar {
|
||||
'color': Color;
|
||||
/**
|
||||
* If the tabbar should include the highlight on the active tab
|
||||
*/
|
||||
@ -7068,6 +7158,7 @@ declare global {
|
||||
* The layout of the title and icons
|
||||
*/
|
||||
'layout': TabbarLayout;
|
||||
'mode': Mode;
|
||||
/**
|
||||
* The placement of the tabbar in the app
|
||||
*/
|
||||
@ -7110,6 +7201,7 @@ declare global {
|
||||
}
|
||||
namespace JSXElements {
|
||||
export interface IonTabbarAttributes extends HTMLAttributes {
|
||||
'color'?: Color;
|
||||
/**
|
||||
* If the tabbar should include the highlight on the active tab
|
||||
*/
|
||||
@ -7118,6 +7210,7 @@ declare global {
|
||||
* The layout of the title and icons
|
||||
*/
|
||||
'layout'?: TabbarLayout;
|
||||
'mode'?: Mode;
|
||||
/**
|
||||
* The placement of the tabbar in the app
|
||||
*/
|
||||
@ -7621,7 +7714,7 @@ declare global {
|
||||
/**
|
||||
* Create a toast overlay with toast options.
|
||||
*/
|
||||
'create': (opts?: ToastOptions | undefined) => Promise<HTMLIonToastElement | null>;
|
||||
'create': (opts?: ToastOptions | undefined) => Promise<HTMLIonToastElement>;
|
||||
/**
|
||||
* Dismiss the open toast overlay.
|
||||
*/
|
||||
@ -7694,11 +7787,11 @@ declare global {
|
||||
/**
|
||||
* Returns a promise that resolves when the toast did dismiss. It also accepts a callback that is called in the same circustances.
|
||||
*/
|
||||
'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
|
||||
'onDidDismiss': (callback?: ((detail: OverlayEventDetail<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>;
|
||||
/**
|
||||
* Returns a promise that resolves when the toast will dismiss. It also accepts a callback that is called in the same circustances.
|
||||
*/
|
||||
'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
|
||||
'onWillDismiss': (callback?: ((detail: OverlayEventDetail<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>;
|
||||
'overlayId': number;
|
||||
/**
|
||||
* The position of the toast on the screen. Possible values: "top", "middle", "bottom".
|
||||
|
||||
Reference in New Issue
Block a user