Ionic底部弹出框 Action Sheet

Ionic4项目中我们可以使用Ionic4弹出底部框组件ion-action-sheet对项目进行布局。

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

操作表是一个显示一组选项的对话框。

它显示在应用内容的顶部，并且必须由用户手动关闭，然后才能恢复与应用的交互。破坏性选项在模式中显而易见。有多种方法可以关闭操作表，包括点击背景或点击桌面上的转义键。ios

创建

操作工作表控制器可由 操作工作表从数组创建，每个按钮都包含其 属性，也可以选择 and 。如果处理程序返回，则操作表不会被关闭。操作表还可以选择具有 和 .buttons text handler role falsetitle subTitle icon

按钮

按钮的属性可以是 或 。没有 role

属性的按钮将具有平台的默认查找。具有该角色的按钮将始终作为底部按钮加载，无论它们在数组中的哪个位置。所有其他按钮将按其添加到数组中的顺序显示。注意：我们建议按钮始终是数组中的第一个按钮，使其成为顶部按钮。此外，如果通过点击背景来关闭操作表，则它将从具有取消角色的按钮中触发处理程序。

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 自定义属性

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。