javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(popover): popover can now be used inline (#23231)

Browse Source 
BREAKING CHANGE: Converted `ion-popover` to use the Shadow DOM.
This commit is contained in:
Liam DeBeasi
2021-05-03 12:02:22 -04:00
committed by GitHub
parent 6fcb3a62b1
commit 308fa1c0dd
29 changed files with 826 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/vue/test-app/src/views/Overlays.vue
View File

@ -109,12 +109,12 @@
</ion-modal>
<ion-popover
css-class="popover-inline"
:is-open="isPopoverOpen"
:componentProps="overlayProps"
:event="popoverEvent"
@didDismiss="setPopoverRef(false)"
>
<PopoverContent></PopoverContent>
<PopoverContent :title="overlayProps.title"></PopoverContent>
</ion-popover>
<ion-toast
@ -250,32 +250,32 @@ export default defineComponent({
}
const openActionSheet = async () => {
const actionSheet = await actionSheetController.create({ buttons: actionSheetButtons });
const actionSheet = await actionSheetController.create({ cssClass: "ion-action-sheet-controller", buttons: actionSheetButtons });
await actionSheet.present();
}
const openAlert = async () => {
const alert = await alertController.create({ buttons: alertButtons, header: 'Alert!' });
const alert = await alertController.create({ cssClass: "ion-alert-controller", buttons: alertButtons, header: 'Alert!' });
await alert.present();
}
const openLoading = async () => {
const loading = await loadingController.create({ message: "Loading", duration: 2000, backdropDismiss: true });
const loading = await loadingController.create({ cssClass: "ion-loading-controller", message: "Loading", duration: 2000, backdropDismiss: true });
await loading.present();
}
const openToast = async () => {
const toast = await toastController.create({ header: "Toast!", buttons: toastButtons });
const toast = await toastController.create({ cssClass: "ion-toast-controller", header: "Toast!", buttons: toastButtons });
await toast.present();
}
const openModal = async () => {
const modal = await modalController.create({ component: ModalContent, componentProps: overlayProps });
const modal = await modalController.create({ cssClass: "ion-modal-controller", component: ModalContent, componentProps: overlayProps });
await modal.present();
}
const openPopover = async (event: Event) => {
const popover = await popoverController.create({ component: PopoverContent, event, componentProps: overlayProps });
const popover = await popoverController.create({ cssClass: "ion-popover-controller", component: PopoverContent, event, componentProps: overlayProps });
await popover.present();
}