0

我想设计 ion-menu 并在菜单中实现 css，但是我们将在哪里编写 css 我没有得到，因为没有可用的 app.css。我想添加类别，我想在其中添加子类别，但来自 Web 服务。如何做到这一点请帮助我。

我已经尝试过，但我能够显示我将从 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'
    }
  ];
4

2 回答 2

0

使用低于ion-content 的样式

例如，这将使您的离子菜单背景变黑。就像菜单中的其他元素一样

<style>
   ion-content{
    background:black;
  }
</style>
于 2019-05-28T05:54:43.977 回答
0

您可以在 src 目录中添加 app.componet.scss。您必须将 styleUrls 添加到 Component 装饰器，如下所示：

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], encapsulation: ViewEncapsulation.None })

于 2020-01-26T17:16:10.807 回答