Как добавить css для ion-menu в ionic 4, так как приложение app.css отсутствует? - PullRequest
Новая
       46

Как добавить css для ion-menu в ionic 4, так как приложение app.css отсутствует?

0 голосов
/ 28 мая 2019

Я хочу спроектировать ion-меню и реализовать css в меню, но там, где мы напишем css, я не получаю, так как нет app.css.Я хочу добавить категории и внутри которых я хочу добавить подкатегории, но из веб-службы.Как это сделать, пожалуйста, помогите мне.

Я пытался, но я могу показать параметры меню статические, а не динамические, которые я получу из API.Пожалуйста, подскажите, что мне делать. 

<ion-app>
  <ion-menu contentId="content" side="start">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div *ngFor="let p of pages">
        <ion-menu-toggle *ngIf="p.url">
          <ion-item [routerLink]="p.url" routerDirection="root" routerLinkActive="active">
            <ion-icon [name]="p.icon" slot="start"></ion-icon>
            <ion-label>
              {{p.title}}
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
        <ion-item button *ngIf="p.children?.length > 0" (click)="p.open = !p.open" [class.parent-active]="p.open"
          style="font-weight: 500;" detail="false">
          <ion-icon slot="start" name="arrow-forward" *ngIf="!p.open"></ion-icon>
          <ion-icon slot="start" name="arrow-down" *ngIf="p.open"></ion-icon>
          <ion-label>{{ p.title }}</ion-label>
        </ion-item>

        <ion-list *ngIf="p.open">
          <ion-menu-toggle>
            <ion-item *ngFor="let sub of p.children" class="sub-item" style="padding-left: 20px;
                  font-size: small;" [routerLink]="sub.url" routerDirection="root" routerLinkActive="active"
              style="--ion-text-color: var(--ion-color-primary);">
              <ion-icon [name]="sub.icon" slot="start"></ion-icon>
              <ion-label>
                {{ sub.title }}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </div>
    </ion-content>
  </ion-menu>
  <ion-router-outlet [swipeGesture]="false" id="content" main></ion-router-outlet>
</ion-app>

Я хочу, чтобы динамические данные отображались в боковом меню и создавали боковое меню.

app.component.ts 

pages = [
    {
      title: 'Main',
      url: '/home',
      icon: 'home'
    },
    {
      title: 'Categories',
      children: [
        {
          title: 'categories',
          url: '/categories',
          icon: 'arrow-dropright'
        },
        {
          title: 'wishlist',
          url: '/wishlist',
          icon: 'arrow-dropright'
        }, {
          title: 'Your Orders',
          url: '/your-orders',
          icon: 'arrow-dropright'
        }, {
          title: 'My Profile',
          url: '/profile',
          icon: 'play'
        }
      ]
    }, {
      title: 'Offers',
      children: [
        {
          title: 'categories',
          url: '/categories',
          icon: 'play'
        },
        {
          title: 'wishlist',
          url: '/wishlist',
          icon: 'play'
        },
      ]
    }, {
      title: 'LogOut',
      url: '/user-login',
      icon: 'log-out'
    }
  ];

1 Ответ

0 голосов
/ 28 мая 2019

Использование стиль ниже ионное содержание

например, это сделает ваш фон ионного меню черным. Как и другие элементы в вашем меню 

<style>
   ion-content{
    background:black;
  }
</style>
...