Split Pane Layout

Ionic – Hide Scrollbar

Table of Contents

Code

Hide Scrollbar

				
					ion-content {
  --offset-bottom: auto!important; //for Scroll ability
  --overflow: hidden;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  // width: calc(100% + 15px);
}

Custom Scrollbar

				
					ion-content {
  --offset-bottom: auto !important; // for scroll ability
  --overflow: hidden;               // scrollbar hidden
  overflow: auto;                   
  &::-webkit-scrollbar {
    width: 0.25rem;
  }
  &::-webkit-scrollbar-track {
    background: #1e1e24;
  }
  &::-webkit-scrollbar-thumb {
    background: #4444b4;
  }
}

Ionic – Split Pane Layout

Table of Contents

Code

The Component

				
					
<ion-split-pane when="md"></ion-split-pane>


<ion-split-pane when="(min-width: 40px)"></ion-split-pane>
				
			
				
					<ion-split-pane contentId="main">
  
  <ion-menu contentId="main">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-menu>

  
  <ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane>

If you want a open/close butten for Desktops

				
					<ion-buttons slot="start">
      <ion-menu-toggle autoHide="false" menu="main-menu">
        <ion-button (click)="toggleMenu()">
          <ion-icon name="menu" slot="icon-only"></ion-icon>
        </ion-button>
      </ion-menu-toggle>
				
			
				
					import { SIZE_TO_MEDIA } from '@ionic/core/dist/collection/utils/media'



  toggleMenu() {
    const splitPane = document.querySelector('ion-split-pane');

  if(window.matchMedia(SIZE_TO_MEDIA[splitPane.when] || splitPane.when).matches)
  splitPane.classList.toggle('split-pane-visible')
}