javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(overlay): expose "animated" API

Browse Source 
fixes #14775
This commit is contained in:
Manu Mtz.-Almeida
2018-08-26 18:52:22 +02:00
parent 771857b1df
commit 8b768fb73d
34 changed files with 122 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
core/src/components.d.ts vendored
View File

@@ -49,6 +49,7 @@ import {
SelectInterface,
SelectPopoverOption,
Side,
SpinnerTypes,
StyleEvent,
TabbarLayout,
TabbarPlacement,
@@ -83,6 +84,10 @@ export namespace Components {
interface IonActionSheetControllerAttributes extends StencilHTMLAttributes {}
interface IonActionSheet {
/**
* If true, the action sheet will animate. Defaults to `true`.
*/
'animated': boolean;
/**
* If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@@ -139,12 +144,12 @@ export namespace Components {
* If true, the action sheet will be translucent. Defaults to `false`.
*/
'translucent': boolean;
}
interface IonActionSheetAttributes extends StencilHTMLAttributes {
/**
* If true, the action sheet will animate. Defaults to `true`.
*/
'willAnimate': boolean;
}
interface IonActionSheetAttributes extends StencilHTMLAttributes {
'animated'?: boolean;
/**
* If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@@ -209,10 +214,6 @@ export namespace Components {
* If true, the action sheet will be translucent. Defaults to `false`.
*/
'translucent'?: boolean;
/**
* If true, the action sheet will animate. Defaults to `true`.
*/
'willAnimate'?: boolean;
}
interface IonAlertController {
@@ -232,6 +233,10 @@ export namespace Components {
interface IonAlertControllerAttributes extends StencilHTMLAttributes {}
interface IonAlert {
/**
* If true, the alert will animate. Defaults to `true`.
*/
'animated': boolean;
/**
* If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@@ -294,12 +299,12 @@ export namespace Components {
* If true, the alert will be translucent. Defaults to `false`.
*/
'translucent': boolean;
}
interface IonAlertAttributes extends StencilHTMLAttributes {
/**
* If true, the alert will animate. Defaults to `true`.
*/
'willAnimate': boolean;
}
interface IonAlertAttributes extends StencilHTMLAttributes {
'animated'?: boolean;
/**
* If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@@ -370,10 +375,6 @@ export namespace Components {
* If true, the alert will be translucent. Defaults to `false`.
*/
'translucent'?: boolean;
/**
* If true, the alert will animate. Defaults to `true`.
*/
'willAnimate'?: boolean;
}
interface IonAnchor {
@@ -2238,15 +2239,15 @@ export namespace Components {
interface IonLoadingControllerAttributes extends StencilHTMLAttributes {}
interface IonLoading {
/**
* If true, the loading indicator will animate. Defaults to `true`.
*/
'animated': boolean;
/**
* If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`.
*/
'backdropDismiss': boolean;
/**
* Optional text content to display in the loading indicator.
*/
'content': string;
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass': string | string[];
@@ -2271,6 +2272,10 @@ export namespace Components {
*/
'leaveAnimation': AnimationBuilder;
/**
* Optional text content to display in the loading indicator.
*/
'message': string;
/**
* 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<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>;
@@ -2295,21 +2300,17 @@ export namespace Components {
* If true, the loading indicator will be translucent. Defaults to `false`.
*/
'translucent': boolean;
}
interface IonLoadingAttributes extends StencilHTMLAttributes {
/**
* If true, the loading indicator will animate. Defaults to `true`.
*/
'willAnimate': boolean;
}
interface IonLoadingAttributes extends StencilHTMLAttributes {
'animated'?: boolean;
/**
* If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`.
*/
'backdropDismiss'?: boolean;
/**
* Optional text content to display in the loading indicator.
*/
'content'?: string;
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass'?: string | string[];
@@ -2330,6 +2331,10 @@ export namespace Components {
*/
'leaveAnimation'?: AnimationBuilder;
/**
* Optional text content to display in the loading indicator.
*/
'message'?: string;
/**
* Emitted after the loading has dismissed.
*/
'onIonLoadingDidDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
@@ -2366,10 +2371,6 @@ export namespace Components {
* If true, the loading indicator will be translucent. Defaults to `false`.
*/
'translucent'?: boolean;
/**
* If true, the loading indicator will animate. Defaults to `true`.
*/
'willAnimate'?: boolean;
}
interface IonMenuButton {
@@ -2581,6 +2582,10 @@ export namespace Components {
interface IonModalControllerAttributes extends StencilHTMLAttributes {}
interface IonModal {
/**
* If true, the modal will animate. Defaults to `true`.
*/
'animated': boolean;
/**
* If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@@ -2628,12 +2633,12 @@ export namespace Components {
* If true, a backdrop will be displayed behind the modal. Defaults to `true`.
*/
'showBackdrop': boolean;
}
interface IonModalAttributes extends StencilHTMLAttributes {
/**
* If true, the modal will animate. Defaults to `true`.
*/
'willAnimate': boolean;
}
interface IonModalAttributes extends StencilHTMLAttributes {
'animated'?: boolean;
/**
* If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@@ -2689,10 +2694,6 @@ export namespace Components {
* If true, a backdrop will be displayed behind the modal. Defaults to `true`.
*/
'showBackdrop'?: boolean;
/**
* If true, the modal will animate. Defaults to `true`.
*/
'willAnimate'?: boolean;
}
interface IonNavPop {}
@@ -2886,6 +2887,10 @@ export namespace Components {
interface IonPickerControllerAttributes extends StencilHTMLAttributes {}
interface IonPicker {
/**
* If true, the picker will animate. Defaults to `true`.
*/
'animated': boolean;
/**
* If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@@ -2943,12 +2948,12 @@ export namespace Components {
* If true, a backdrop will be displayed behind the picker. Defaults to `true`.
*/
'showBackdrop': boolean;
}
interface IonPickerAttributes extends StencilHTMLAttributes {
/**
* If true, the picker will animate. Defaults to `true`.
*/
'willAnimate': boolean;
}
interface IonPickerAttributes extends StencilHTMLAttributes {
'animated'?: boolean;
/**
* If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@@ -3010,10 +3015,6 @@ export namespace Components {
* If true, a backdrop will be displayed behind the picker. Defaults to `true`.
*/
'showBackdrop'?: boolean;
/**
* If true, the picker will animate. Defaults to `true`.
*/
'willAnimate'?: boolean;
}
interface IonPopoverController {
@@ -3033,6 +3034,10 @@ export namespace Components {
interface IonPopoverControllerAttributes extends StencilHTMLAttributes {}
interface IonPopover {
/**
* If true, the popover will animate. Defaults to `true`.
*/
'animated': boolean;
/**
* If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@@ -3096,12 +3101,12 @@ export namespace Components {
* If true, the popover will be translucent. Defaults to `false`.
*/
'translucent': boolean;
}
interface IonPopoverAttributes extends StencilHTMLAttributes {
/**
* If true, the popover will animate. Defaults to `true`.
*/
'willAnimate': boolean;
}
interface IonPopoverAttributes extends StencilHTMLAttributes {
'animated'?: boolean;
/**
* If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@@ -3173,10 +3178,6 @@ export namespace Components {
* If true, the popover will be translucent. Defaults to `false`.
*/
'translucent'?: boolean;
/**
* If true, the popover will animate. Defaults to `true`.
*/
'willAnimate'?: boolean;
}
interface IonRadioGroup {
@@ -4284,13 +4285,9 @@ export namespace Components {
*/
'duration': number;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
'mode': Mode;
/**
* The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`.
*/
'name': string;
'name': SpinnerTypes;
/**
* If true, the spinner's animation will be paused. Defaults to `false`.
*/
@@ -4306,13 +4303,9 @@ export namespace Components {
*/
'duration'?: number;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
'mode'?: Mode;
/**
* The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`.
*/
'name'?: string;
'name'?: SpinnerTypes;
/**
* If true, the spinner's animation will be paused. Defaults to `false`.
*/
@@ -4870,6 +4863,10 @@ export namespace Components {
interface IonToastControllerAttributes extends StencilHTMLAttributes {}
interface IonToast {
/**
* If true, the toast will animate. Defaults to `true`.
*/
'animated': boolean;
/**
* Text to display in the close button.
*/
@@ -4911,7 +4908,7 @@ export namespace Components {
/**
* The position of the toast on the screen. Possible values: "top", "middle", "bottom".
*/
'position': string;
'position': 'top' | 'bottom';
/**
* Present the toast overlay after it has been created.
*/
@@ -4924,12 +4921,12 @@ export namespace Components {
* If true, the toast will be translucent. Defaults to `false`.
*/
'translucent': boolean;
}
interface IonToastAttributes extends StencilHTMLAttributes {
/**
* If true, the toast will animate. Defaults to `true`.
*/
'willAnimate': boolean;
}
interface IonToastAttributes extends StencilHTMLAttributes {
'animated'?: boolean;
/**
* Text to display in the close button.
*/
@@ -4983,7 +4980,7 @@ export namespace Components {
/**
* The position of the toast on the screen. Possible values: "top", "middle", "bottom".
*/
'position'?: string;
'position'?: 'top' | 'bottom';
/**
* If true, the close button will be displayed. Defaults to `false`.
*/
@@ -4992,10 +4989,6 @@ export namespace Components {
* If true, the toast will be translucent. Defaults to `false`.
*/
'translucent'?: boolean;
/**
* If true, the toast will animate. Defaults to `true`.
*/
'willAnimate'?: boolean;
}
interface IonToggle {

1
core/src/components/action-sheet/action-sheet-interface.ts
View File

@@ -6,6 +6,7 @@ export interface ActionSheetOptions {
buttons: (ActionSheetButton | string)[];
backdropDismiss?: boolean;
translucent?: boolean;
animated?: boolean;
}
export interface ActionSheetButton {

2
core/src/components/action-sheet/action-sheet.tsx
View File

@@ -83,7 +83,7 @@ export class ActionSheet implements OverlayInterface {
/**
* If true, the action sheet will animate. Defaults to `true`.
*/
@Prop() willAnimate = true;
@Prop() animated = true;
/**
* Emitted after the alert has loaded.

2
core/src/components/action-sheet/readme.md
View File

@@ -18,6 +18,7 @@ A button's `role` property can either be `destructive` or `cancel`. Buttons with
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------- |
| `animated` | `animated` | If true, the action sheet will animate. Defaults to `true`. | `boolean` |
| `backdropDismiss` | `backdrop-dismiss` | If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `buttons` | -- | An array of buttons for the action sheet. | `ActionSheetButton[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` |
@@ -28,7 +29,6 @@ A button's `role` property can either be `destructive` or `cancel`. Buttons with
| `overlayId` | `overlay-id` | Unique ID to be used with the overlay. Internal only | `number` |
| `subHeader` | `sub-header` | Subtitle for the action sheet. | `string` |
| `translucent` | `translucent` | If true, the action sheet will be translucent. Defaults to `false`. | `boolean` |
| `willAnimate` | `will-animate` | If true, the action sheet will animate. Defaults to `true`. | `boolean` |
## Events

1
core/src/components/alert/alert-interface.ts
View File

@@ -10,6 +10,7 @@ export interface AlertOptions {
buttons?: (AlertButton | string)[];
backdropDismiss?: boolean;
translucent?: boolean;
animated?: boolean;
}
export interface AlertInput {

2
core/src/components/alert/alert.tsx
View File

@@ -94,7 +94,7 @@ export class Alert implements OverlayInterface {
/**
* If true, the alert will animate. Defaults to `true`.
*/
@Prop() willAnimate = true;
@Prop() animated = true;
/**
* Emitted after the alert has presented.

2
core/src/components/alert/readme.md
View File

@@ -27,6 +27,7 @@ Alerts can also include several different inputs whose data can be passed back t
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------------- |
| `animated` | `animated` | If true, the alert will animate. Defaults to `true`. | `boolean` |
| `backdropDismiss` | `backdrop-dismiss` | If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `buttons` | -- | Array of buttons to be added to the alert. | `(AlertButton | string)[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` |
@@ -40,7 +41,6 @@ Alerts can also include several different inputs whose data can be passed back t
| `overlayId` | `overlay-id` | | `number` |
| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string` |
| `translucent` | `translucent` | If true, the alert will be translucent. Defaults to `false`. | `boolean` |
| `willAnimate` | `will-animate` | If true, the alert will animate. Defaults to `true`. | `boolean` |
## Events

2
core/src/components/loading-controller/usage/javascript.md
View File

@@ -4,7 +4,7 @@ async function presentLoading() {
await loadingController.componentOnReady();
const loadingElement = await loadingController.create({
content: 'Please wait...',
message: 'Please wait...',
spinner: 'crescent',
duration: 2000
});

6
core/src/components/loading/loading-interface.ts
View File

@@ -1,9 +1,11 @@
import { SpinnerTypes } from '../../interface';
export interface LoadingOptions {
spinner?: string;
content?: string;
spinner?: SpinnerTypes;
message?: string;
cssClass?: string | string[];
showBackdrop?: boolean;
duration?: number;
translucent?: boolean;
animated?: boolean;
}

6
core/src/components/loading/loading.tsx
View File

@@ -46,7 +46,7 @@ export class Loading implements OverlayInterface {
/**
* Optional text content to display in the loading indicator.
*/
@Prop() content?: string;
@Prop() message?: string;
/**
* Additional classes to apply for custom CSS. If multiple classes are
@@ -83,7 +83,7 @@ export class Loading implements OverlayInterface {
/**
* If true, the loading indicator will animate. Defaults to `true`.
*/
@Prop() willAnimate = true;
@Prop() animated = true;
/**
* Emitted after the loading has unloaded.
@@ -205,7 +205,7 @@ export class Loading implements OverlayInterface {
</div>
)}
{this.content && <div class="loading-content">{this.content}</div>}
{this.message && <div class="loading-content">{this.message}</div>}
</div>
];
}

4
core/src/components/loading/readme.md
View File

@@ -20,18 +20,18 @@ The loading indicator can be dismissed automatically after a specific amount of
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| `animated` | `animated` | If true, the loading indicator will animate. Defaults to `true`. | `boolean` |
| `backdropDismiss` | `backdrop-dismiss` | If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`. | `boolean` |
| `content` | `content` | Optional text content to display in the loading indicator. | `string` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` |
| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `AnimationBuilder` |
| `keyboardClose` | `keyboard-close` | If true, the loading will blur any inputs and hide the keyboard | `boolean` |
| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `AnimationBuilder` |
| `message` | `message` | Optional text content to display in the loading indicator. | `string` |
| `overlayId` | `overlay-id` | | `number` |
| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the loading indicator. Defaults to `true`. | `boolean` |
| `spinner` | `spinner` | The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. | `string` |
| `translucent` | `translucent` | If true, the loading indicator will be translucent. Defaults to `false`. | `boolean` |
| `willAnimate` | `will-animate` | If true, the loading indicator will animate. Defaults to `true`. | `boolean` |
## Events

2
core/src/components/loading/test/basic/index.html
View File

@@ -65,7 +65,7 @@
const loadingController = document.querySelector('ion-loading-controller');
await loadingController.componentOnReady();
const loadingElement = await loadingController.create({
content: 'Hellooo',
message: 'Hellooo',
duration: 2000
});
return await loadingElement.present();

2
core/src/components/loading/test/preview/index.html
View File

@@ -65,7 +65,7 @@
const loadingController = document.querySelector('ion-loading-controller');
await loadingController.componentOnReady();
const loadingElement = await loadingController.create({
content: 'Hellooo',
message: 'Hellooo',
duration: 2000
});
return await loadingElement.present();

2
core/src/components/loading/test/standalone/index.html
View File

@@ -37,7 +37,7 @@
const loadingController = document.querySelector('ion-loading-controller');
await loadingController.componentOnReady();
const loadingElement = await loadingController.create({
content: 'Hellooo',
message: 'Hellooo',
duration: 2000
});
return await loadingElement.present();

4
core/src/components/loading/usage/angular.md
View File

@@ -12,7 +12,7 @@ export class LoadingExample {
async presentLoading() {
const loading = await this.loadingController.create({
content: 'Hellooo',
message: 'Hellooo',
duration: 2000
});
return await loading.present();
@@ -22,7 +22,7 @@ export class LoadingExample {
const loading = await this.loadingController.create({
spinner: 'hide',
duration: 5000,
content: 'Please wait...',
message: 'Please wait...',
translucent: true,
cssClass: 'custom-class custom-loading'
});

4
core/src/components/loading/usage/javascript.md
View File

@@ -4,7 +4,7 @@ async function presentLoading() {
await loadingController.componentOnReady();
const loading = await loadingController.create({
content: 'Hellooo',
message: 'Hellooo',
duration: 2000
});
return await loading.present();
@@ -17,7 +17,7 @@ async function presentLoadingWithOptions() {
const loading = await loadingController.create({
spinner: 'hide',
duration: 5000,
content: 'Please wait...',
message: 'Please wait...',
translucent: true,
cssClass: 'custom-class custom-loading'
});

1
core/src/components/modal/modal-interface.ts
View File

@@ -9,4 +9,5 @@ export interface ModalOptions {
leaveAnimation?: AnimationBuilder;
cssClass?: string | string[];
delegate?: FrameworkDelegate;
animated?: boolean;
}

2
core/src/components/modal/modal.tsx
View File

@@ -74,7 +74,7 @@ export class Modal implements OverlayInterface {
/**
* If true, the modal will animate. Defaults to `true`.
*/
@Prop() willAnimate = true;
@Prop() animated = true;
/**
* Emitted after the modal has loaded.

2
core/src/components/modal/readme.md
View File

@@ -16,6 +16,7 @@ Modals can be created using a [Modal Controller](../../modal-controller/ModalCon
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------- |
| `animated` | `animated` | If true, the modal will animate. Defaults to `true`. | `boolean` |
| `backdropDismiss` | `backdrop-dismiss` | If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `componentProps` | -- | The data to pass to the modal component. | `ComponentProps` |
| `component` | `component` | The component to display inside of the modal. | `ComponentRef` |
@@ -26,7 +27,6 @@ Modals can be created using a [Modal Controller](../../modal-controller/ModalCon
| `leaveAnimation` | -- | Animation to use when the modal is dismissed. | `AnimationBuilder` |
| `overlayId` | `overlay-id` | | `number` |
| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the modal. Defaults to `true`. | `boolean` |
| `willAnimate` | `will-animate` | If true, the modal will animate. Defaults to `true`. | `boolean` |
## Events

12
core/src/components/nav/nav.tsx
View File

@@ -48,7 +48,7 @@ export class Nav implements NavOutlet {
/**
* If the nav should animate the components or not
*/
@Prop({ mutable: true }) animated?: boolean;
@Prop() animated = true;
/** @hidden */
@Prop() delegate?: FrameworkDelegate;
@@ -101,9 +101,7 @@ export class Nav implements NavOutlet {
this.mode === 'ios'
);
}
if (this.animated === undefined) {
this.animated = this.config.getBoolean('animate', true);
}
this.ionNavWillLoad.emit();
}
@@ -783,15 +781,17 @@ export class Nav implements NavOutlet {
const enteringEl = enteringView.element!;
const leavingEl = leavingView && leavingView.element!;
const animated = this.animated && this.config.getBoolean('animated', true);
const animationOpts: TransitionOptions = {
mode: this.mode,
animated: this.animated,
showGoBack: this.canGoBack(enteringView),
animationCtrl: this.animationCtrl,
progressCallback,
queue: this.queue,
window: this.win,
baseEl: this.el,
progressCallback,
animated,
enteringEl,
leavingEl,

6
core/src/components/nav/test/nav-controller.spec.ts
View File

@@ -836,7 +836,7 @@ describe('NavController', () => {
});
describe('canSwipeBack', () => {
describe('canStart', () => {
it('should not swipe back when its not enabled', () => {
nav.swipeGesture = false;
@@ -844,7 +844,7 @@ describe('NavController', () => {
const view2 = mockView();
mockViews(nav, [view1, view2]);
const result = nav['canSwipeBack']();
const result = nav['canStart']();
expect(result).toEqual(false);
});
@@ -854,7 +854,7 @@ describe('NavController', () => {
const view2 = mockView();
mockViews(nav, [view1, view2]);
const result = nav['canSwipeBack']();
const result = nav['canStart']();
expect(result).toEqual(true);
});
});

15
core/src/components/picker/picker-interface.ts
View File

@@ -1,16 +1,17 @@
export interface PickerButton {
text?: string;
role?: string;
cssClass?: string | string[];
handler?: (value: any) => boolean | void;
}
export interface PickerOptions {
buttons?: PickerButton[];
columns?: PickerColumn[];
cssClass?: string | string[];
backdropDismiss?: boolean;
animated?: boolean;
}
export interface PickerButton {
text?: string;
role?: string;
cssClass?: string | string[];
handler?: (value: any) => boolean | void;
}
export interface PickerColumn {

2
core/src/components/picker/picker.tsx
View File

@@ -81,7 +81,7 @@ export class Picker implements OverlayInterface {
/**
* If true, the picker will animate. Defaults to `true`.
*/
@Prop() willAnimate = true;
@Prop() animated = true;
/**
* Emitted after the picker has loaded.

2
core/src/components/picker/readme.md
View File

@@ -11,6 +11,7 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------- |
| `animated` | `animated` | If true, the picker will animate. Defaults to `true`. | `boolean` |
| `backdropDismiss` | `backdrop-dismiss` | If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `buttons` | -- | Array of buttons to be displayed at the top of the picker. | `PickerButton[]` |
| `columns` | -- | Array of columns to be displayed in the picker. | `PickerColumn[]` |
@@ -21,7 +22,6 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a
| `leaveAnimation` | -- | Animation to use when the picker is dismissed. | `AnimationBuilder` |
| `overlayId` | `overlay-id` | | `number` |
| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the picker. Defaults to `true`. | `boolean` |
| `willAnimate` | `will-animate` | If true, the picker will animate. Defaults to `true`. | `boolean` |
## Events

1
core/src/components/popover/popover-interface.ts
View File

@@ -11,4 +11,5 @@ export interface PopoverOptions {
cssClass?: string | string[];
event?: Event;
delegate?: FrameworkDelegate;
animated?: boolean;
}

2
core/src/components/popover/popover.tsx
View File

@@ -95,7 +95,7 @@ export class Popover implements OverlayInterface {
/**
* If true, the popover will animate. Defaults to `true`.
*/
@Prop() willAnimate = true;
@Prop() animated = true;
/**
* Emitted after the popover has loaded.

2
core/src/components/popover/readme.md
View File

@@ -18,6 +18,7 @@ To present a popover, call the `present` method on a popover instance. In order
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| `animated` | `animated` | If true, the popover will animate. Defaults to `true`. | `boolean` |
| `backdropDismiss` | `backdrop-dismiss` | If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `Color` |
| `componentProps` | -- | The data to pass to the popover component. | `ComponentProps` |
@@ -32,7 +33,6 @@ To present a popover, call the `present` method on a popover instance. In order
| `overlayId` | `overlay-id` | | `number` |
| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the popover. Defaults to `true`. | `boolean` |
| `translucent` | `translucent` | If true, the popover will be translucent. Defaults to `false`. | `boolean` |
| `willAnimate` | `will-animate` | If true, the popover will animate. Defaults to `true`. | `boolean` |
## Events

8
core/src/components/router-outlet/route-outlet.tsx
View File

@@ -24,7 +24,7 @@ export class RouterOutlet implements NavOutlet {
@Prop({ context: 'window' }) win!: Window;
@Prop({ context: 'queue' }) queue!: QueueApi;
@Prop({ mutable: true }) animated?: boolean;
@Prop() animated = true;
@Prop() animationBuilder?: AnimationBuilder;
@Prop() delegate?: FrameworkDelegate;
@@ -33,9 +33,6 @@ export class RouterOutlet implements NavOutlet {
@Event() ionNavDidChange!: EventEmitter<void>;
componentWillLoad() {
if (this.animated === undefined) {
this.animated = this.config.getBoolean('animate', true);
}
this.ionNavWillLoad.emit();
}
@@ -125,7 +122,8 @@ export class RouterOutlet implements NavOutlet {
opts = opts || {};
const { mode, queue, animated, animationCtrl, win, el } = this;
const { mode, queue, animationCtrl, win, el } = this;
const animated = this.animated && this.config.getBoolean('animated', true);
await transition({
mode,
queue,

4
core/src/components/toast/readme.md
View File

@@ -22,6 +22,7 @@ The toast can be dismissed automatically after a specific amount of time by pass
| Property | Attribute | Description | Type |
| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------- | -------------------- |
| `animated` | `animated` | If true, the toast will animate. Defaults to `true`. | `boolean` |
| `closeButtonText` | `close-button-text` | Text to display in the close button. | `string` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` |
| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` |
@@ -30,10 +31,9 @@ The toast can be dismissed automatically after a specific amount of time by pass
| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `AnimationBuilder` |
| `message` | `message` | Message to be shown in the toast. | `string` |
| `overlayId` | `overlay-id` | | `number` |
| `position` | `position` | The position of the toast on the screen. Possible values: "top", "middle", "bottom". | `string` |
| `position` | `position` | The position of the toast on the screen. Possible values: "top", "middle", "bottom". | `"top"`, `"bottom"` |
| `showCloseButton` | `show-close-button` | If true, the close button will be displayed. Defaults to `false`. | `boolean` |
| `translucent` | `translucent` | If true, the toast will be translucent. Defaults to `false`. | `boolean` |
| `willAnimate` | `will-animate` | If true, the toast will animate. Defaults to `true`. | `boolean` |
## Events

3
core/src/components/toast/toast-interface.ts
View File

@@ -6,8 +6,9 @@ export interface ToastOptions {
duration?: number;
showCloseButton?: boolean;
closeButtonText?: string;
position?: string;
position?: 'top' | 'bottom';
translucent?: boolean;
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
animated?: boolean;
}

4
core/src/components/toast/toast.tsx
View File

@@ -71,7 +71,7 @@ export class Toast implements OverlayInterface {
/**
* The position of the toast on the screen. Possible values: "top", "middle", "bottom".
*/
@Prop() position?: string;
@Prop() position?: 'top' | 'bottom';
/**
* If true, the close button will be displayed. Defaults to `false`.
@@ -86,7 +86,7 @@ export class Toast implements OverlayInterface {
/**
* If true, the toast will animate. Defaults to `true`.
*/
@Prop() willAnimate = true;
@Prop() animated = true;
/**
* Emitted after the toast has loaded.

2
core/src/global/config.ts
View File

@@ -14,7 +14,7 @@ export interface IonicConfig {
spinner?: string;
loadingSpinner?: string;
menuIcon?: string;
animate?: boolean;
animated?: boolean;
pickerSpinner?: string;
refreshingIcon?: string;
refreshingSpinner?: string;

2
core/src/utils/overlays-interface.ts
View File

@@ -10,7 +10,7 @@ export interface OverlayEventDetail<T = any> {
export interface OverlayInterface {
mode: Mode;
el: HTMLElement;
willAnimate: boolean;
animated: boolean;
keyboardClose: boolean;
config: Config;
overlayId: number;

2
core/src/utils/overlays.ts
View File

@@ -135,7 +135,7 @@ async function overlayAnimation(
const aniRoot = baseEl.shadowRoot || overlay.el;
const animation = overlay.animation = await overlay.animationCtrl.create(animationBuilder, aniRoot, opts);
overlay.animation = animation;
if (!overlay.willAnimate) {
if (!overlay.animated) {
animation.duration(0);
}
if (overlay.keyboardClose) {