Month:

July 2020

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