ion-item-sliding

滑動項目包含一個可拖曳以顯示選項按鈕的項目。它需要一個 item 組件作為子項目。所有要顯示的選項都應放在 item options 元素中。

基本用法

滑動項目選項預設放置在項目的 "end" 側。這表示當項目從末端滑動到起始時會顯示選項，即在 LTR 中從右向左滑動，但在 RTL 中從左向右滑動。若要將它們放在相反的一側，以便在向相反方向滑動時顯示，請在 item options 元素上將 side 屬性設定為 "start"。為了根據滑動方向顯示兩組不同的選項，可以同時使用最多兩個項目選項。

圖示選項

當圖示與 item option 中的文字並排放置時，預設會將圖示顯示在文字上方。可以將圖示的 slot 變更為任何可用的 item option slots 以變更其位置。

可展開選項

如果滑動超過某個點，則可以展開選項以佔用父 ion-item 的完整寬度。這可以與 item options 上的 ionSwipe 事件結合使用，以便在項目完全滑動時呼叫方法。

介面

ItemSlidingCustomEvent

雖然不是必需的，但此介面可以用於取代 CustomEvent 介面，以針對從此組件發出的 Ionic 事件進行更強的類型檢查。

interface ItemSlidingCustomEvent extends CustomEvent {
  target: HTMLIonItemSlidingElement;
}

屬性

disabled

說明	如果為 true，則使用者無法與滑動項目互動。
屬性	disabled
類型	boolean
預設	false

事件

名稱	說明	氣泡
ionDrag	當滑動位置變更時發出。	true

方法

close

說明	關閉滑動項目。也可以從 List 關閉項目。
簽名	close() => Promise<void>

closeOpened

說明	關閉列表中所有滑動項目。也可以從 List 關閉項目。
簽名	closeOpened() => Promise<boolean>

getOpenAmount

說明	取得項目開啟的像素量。
簽名	getOpenAmount() => Promise<number>

getSlidingRatio

說明	取得項目開啟量與選項寬度相比的比率。如果傳回的數字為正數，則右側的選項會開啟。如果傳回的數字為負數，則左側的選項會開啟。如果數字的絕對值大於 1，則項目開啟的量會大於選項的寬度。
簽名	getSlidingRatio() => Promise<number>

open

說明	開啟滑動項目。
簽名	open(side: Side ｜ undefined) => Promise<void>

CSS Shadow Parts

此組件沒有可用的 CSS shadow parts。

CSS 自訂屬性

此組件沒有可用的 CSS 自訂屬性。

插槽

此組件沒有可用的插槽。