diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index 9acc693024a..6f32a596638 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -413,7 +413,7 @@ export class IonItemSliding { proxyOutputs(this, this.el, ['ionDrag']); } } -proxyMethods(IonItemSliding, ['getOpenAmount', 'getSlidingRatio', 'close', 'closeOpened']); +proxyMethods(IonItemSliding, ['getOpenAmount', 'getSlidingRatio', 'open', 'close', 'closeOpened']); proxyInputs(IonItemSliding, ['disabled']); export declare interface IonLabel extends StencilComponents<'IonLabel'> {} diff --git a/core/api.txt b/core/api.txt index 55781e92043..14877da1fd4 100644 --- a/core/api.txt +++ b/core/api.txt @@ -471,6 +471,7 @@ ion-item-sliding,method,close,close() => Promise ion-item-sliding,method,closeOpened,closeOpened() => Promise ion-item-sliding,method,getOpenAmount,getOpenAmount() => Promise ion-item-sliding,method,getSlidingRatio,getSlidingRatio() => Promise +ion-item-sliding,method,open,open() => Promise ion-item-sliding,event,ionDrag,void,true ion-item,shadow diff --git a/core/src/components.d.ts b/core/src/components.d.ts index db0d7904c1c..f80e49793b7 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1978,6 +1978,10 @@ export namespace Components { * Get the ratio of the open amount of the item compared to the width of the options. If the number returned is positive, then the options on the right side are open. If the number returned is negative, then the options on the left side are open. If the absolute value of the number is greater than 1, the item is open more than the width of the options. */ 'getSlidingRatio': () => Promise; + /** + * Open the sliding item. + */ + 'open': () => Promise; } interface IonItemSlidingAttributes extends StencilHTMLAttributes { /** diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx index c7f1f7f83a5..3e6b3ffa105 100644 --- a/core/src/components/item-sliding/item-sliding.tsx +++ b/core/src/components/item-sliding/item-sliding.tsx @@ -116,6 +116,21 @@ export class ItemSliding implements ComponentInterface { return Promise.resolve(this.getSlidingRatioSync()); } + /** + * Open the sliding item. + */ + @Method() + async open() { + const options = this.el.querySelector('ion-item-options'); + if (options) { + options.style.display = 'flex'; + const width = options.offsetWidth; + openSlidingItem = this.el; + options.style.display = ''; + this.setOpenAmount(width, true); + } + } + /** * Close the sliding item. Items can also be closed from the [List](../../list/List). */ diff --git a/core/src/components/item-sliding/readme.md b/core/src/components/item-sliding/readme.md index b41c1c5455c..9646fa95328 100644 --- a/core/src/components/item-sliding/readme.md +++ b/core/src/components/item-sliding/readme.md @@ -692,6 +692,16 @@ Type: `Promise` +### `open() => Promise` + +Open the sliding item. + +#### Returns + +Type: `Promise` + + + ---------------------------------------------- diff --git a/core/src/components/item-sliding/test/basic/index.html b/core/src/components/item-sliding/test/basic/index.html index 3502bc67362..6053481cfd6 100644 --- a/core/src/components/item-sliding/test/basic/index.html +++ b/core/src/components/item-sliding/test/basic/index.html @@ -38,6 +38,7 @@ Toggle sliding Toggle Dynamic Options Close Opened Items + Open Item @@ -367,6 +368,11 @@

Normal button (no sliding)

list.closeSlidingItems(); } + function openItem() { + var item = document.getElementById('item0'); + item.open(); + } + function noclose(item) { var itemEle = document.getElementById(item); console.log('no close', itemEle); diff --git a/core/src/components/item-sliding/test/preview/index.html b/core/src/components/item-sliding/test/preview/index.html index a83ebbbf8cf..ff0ec61081c 100644 --- a/core/src/components/item-sliding/test/preview/index.html +++ b/core/src/components/item-sliding/test/preview/index.html @@ -32,6 +32,7 @@ Toggle sliding Toggle Dynamic Options Close Opened Items + Open Item @@ -356,6 +357,11 @@

Normal button (no sliding)

list.closeSlidingItems(); } + function openItem() { + var item = document.getElementById('item0'); + item.open(); + } + function noclose(item) { var itemEle = document.getElementById(item); console.log('no close', itemEle);