Angular 5 Material Как добавить выпадающие списки в многоуровневую карусель в стиле SideNav? - PullRequest
Новая
       31

Angular 5 Material Как добавить выпадающие списки в многоуровневую карусель в стиле SideNav?

0 голосов
/ 17 декабря 2018

enter image description here Hello World, у меня есть sidenav, который в основном работает с вкладками, просто эффект, который я хотел достичь при переходе.Но теперь я хотел бы добавить, что, нажав «Вариант 1, Вариант 2 или Вариант 3», выполните этот переход со вкладки, но две опции, которые должны появиться сейчас, это выпадающие списки с 5 и 2 вариантами (при открытиивыпадающий список) Но я не могу найти способ добиться этого.У кого-нибудь есть идеи, с чего начать или что-то подобное?

Вот мой код: https://stackblitz.com/edit/angular-x5xefi-xbxn4i

1 Ответ

0 голосов
/ 17 декабря 2018

РЕДАКТИРОВАТЬ 19.12.2018

См. Последний стек здесь для решения, которое имитирует желаемое поведение, например this .

18.12.2018

Я не уверен, что понимаю, чего именно вы хотите достичь, но вот быстрый и грязный stackblitz , который я собрал.Очевидно, вам придется немного стилизовать выпадающие меню / опции, чтобы они выглядели более естественно и соответствовали вашим другим стилям.

Изменения tab-group-basic-example.ts

{
  id: 2, // 1st level
  options: [
    { 
      option: 'Dropdown with 5 options', 
      route: '/Submenu1', 
      options: [
        { label: "Option 1", route: "/Submenu1" },
        { label: "Option 2", route: "/Submenu2" },
        { label: "Option 3", route: "/Submenu3" },
        { label: "Option 4", route: "/Submenu4" },
        { label: "Option 5", route: "/Submenu5" },
      ]        
    },
    // { option: 'TestJustIgnore', route: '/Submenu2' },
    // { option: 'TestJustIgnore', route: '/Submenu3' },
    { 
      option: 'Dropdown with 2 options', 
      route: '/Submenu4', 
      options: [
        { label: "Option 1", route: "/Submenu1" },
        { label: "Option 2", route: "/Submenu2" }
      ]  
    },
    // { option: 'TestJustIgnore', route: '/Submenu5' },
  ]
}

Я добавил свойство options, которое содержит массив опций для вашего выпадающего меню с текстовой меткой для отображения в качестве опции и маршрут, по которому он должен перемещаться.Когда это свойство установлено, вместо mat-list-item элемент mat-select будет отображаться с определенными параметрами.

Изменения в tab-group-basic-example.html

<a mat-list-item *ngIf="!rootOption.rootTab && !rootOption.options"
                 [routerLink]="rootOption.route" 
                 routerLinkActive="active">
  {{rootOption.option}}
</a>

<mat-select *ngIf="rootOption.options"                        
             placeholder="Select an Option">
  <mat-option *ngFor="let option of rootOption.options"
              [routerLink]="option.route" 
              [value]="option.label">
    {{option.label}}
  </mat-option>
</mat-select>

В основном он проверяет, определены ли вышеупомянутые options, если да, то элемент mat-select будет отображаться с предоставленными параметрами, если нет, то нормальный mat-list-item будет отображаться как обычный.

...