Блог

Пожалуйста, мне нужно сделать что-то вроде этой картинки, используя ionic Мне нужно, чтобы меню было исправлено на всех экранах приложений только с помощью значков. любая ПОМОЩЬ!

на данный момент я использую «ion-split-pane» для создания областей содержимого 1 и 2, мне нужно добавить этот синий раздел рядом с ними

 <ion-menu contentId="main-content" type="push">
  <ion-content>
    <ion-list lines="none">
    
      <ion-menu-toggle autoHide="false" *ngFor="let p of appPages; let i = index">
        <ion-item [routerLink]="p.url" routerLinkActive="selected" routerDirection="root" 
            detail="false">
          <ion-icon slot="start" [name]="p.icon   '-outline'"></ion-icon>
          <ion-label>
            {{p.title}}
          </ion-label>
        </ion-item>

      </ion-menu-toggle>
    </ion-list>

    <ion-list >
  
      <ion-menu-toggle autoHide="false">
        <ion-item routerLink="/login" routerLinkActive="active" routerDirection="root" detail="false">
          <ion-icon slot="start" name="log-in"></ion-icon>
          <ion-label>
            Login
          </ion-label>
        </ion-item>
      </ion-menu-toggle>

      
    </ion-list>

   
  </ion-content>
</ion-menu>

<ion-router-outlet id="main-content"></ion-router-outlet>
 

РЕШЕНО!

Я создал 3 <ion-content>

1 — один для мини-боковой панели

2 — один для основной боковой панели (область содержимого 1).

3- последний (область содержимого 2) содержимое mian

затем создал пользовательский scss для мини-боковой панели, я придал ей фиксированную небольшую ширину