Tag:Ionic 5
Ionic 5 + React: positioning a popover relative to the clicked element
In the documentation, the requirement to have an Ionic 5 popover present itself beside a clicked element that activates the popover, you need to pass the mouse event to it.
To do so, you must assign the event prop of the IonPopover with the event value.
However, since React also nullifies all event properties due to Event Pooling and Ionic is looking for the eve… Read more
Ionic 5: animated collapsible searchbar using only SCSS
Add this to your global.scss of your Ionic 5 project:
ion-searchbar.collapsible {
width: 55px; // match hard-coded padding-inline-end when collapsed
// .searchbar-input {
// @include padding(6px, 55px);
// }
transition: width 0.5s ease-in-out;
--border-radius: 4px;
.searchbar-input.sc-ion-searchbar-md {
transition-property: padding-inli… Read more
Ionic 5 + Angular: custom Alert enter and leave animations
Since it’s hard to find an example in the documentation and elsewhere on the Internet, here’s a simple implemention of a custom fade-in animation for Ionic 5 alerts with Angular. Note that we choose what elements of an ion-alert to animate by using querySelector on HTMLElement baseEl. The div with class alert-wrapper is the dialog, but you can … Read more