Ionic底部彈出框 Action Sheet

Ionic4項目中我們可以使用Ionic4彈出底部框組件ion-action-sheet對項目進行布局。

ion-action-sheet官方文檔地址：https://ionicframework.com/docs/api/action-sheet

操作表是一個顯示一組選項的對話框。

它顯示在應用內(nèi)容的頂部，并且必須由用戶手動關閉，然后才能恢復與應用的交互。破壞性選項在模式中顯而易見。有多種方法可以關閉操作表，包括點擊背景或點擊桌面上的轉(zhuǎn)義鍵。ios

創(chuàng)建

操作工作表控制器可由 操作工作表從數(shù)組創(chuàng)建，每個按鈕都包含其 屬性，也可以選擇 and 。如果處理程序返回，則操作表不會被關閉。操作表還可以選擇具有 和 .buttons text handler role falsetitle subTitle icon

按鈕

按鈕的屬性可以是 或 。沒有 role

屬性的按鈕將具有平臺的默認查找。具有該角色的按鈕將始終作為底部按鈕加載，無論它們在數(shù)組中的哪個位置。所有其他按鈕將按其添加到數(shù)組中的順序顯示。注意：我們建議按鈕始終是數(shù)組中的第一個按鈕，使其成為頂部按鈕。此外，如果通過點擊背景來關閉操作表，則它將從具有取消角色的按鈕中觸發(fā)處理程序。

ion-action-sheet 用法（用法）

async function presentActionSheet() { const actionSheetController = document.querySelector('ion-action-sheet-controller'); await actionSheetController.componentOnReady(); const actionSheet = await actionSheetController.create({ header: "Albums", buttons: [{ text: 'Delete', role: 'destructive', icon: 'trash', handler: () => { console.log('Delete clicked'); } }, { text: 'Share', icon: 'share', handler: () => { console.log('Share clicked'); } }, { text: 'Play (open modal)', icon: 'arrow-dropright-circle', handler: () => { console.log('Play clicked'); } }, { text: 'Favorite', icon: 'heart', handler: () => { console.log('Favorite clicked'); } }, { text: 'Cancel', icon: 'close', role: 'cancel', handler: () => { console.log('Cancel clicked'); } }] }); await actionSheet.present(); }

ion-action-sheet　屬性(Properties)

animated

ion-action-sheet中的CSS 自定義屬性

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。