Как мне установить изначально открытую панель расширения закрытой по умолчанию? - PullRequest
Новая
       29

Как мне установить изначально открытую панель расширения закрытой по умолчанию?

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

У меня есть sidenav с группой вкладок и панелью аккордеона.

Проблема в том, что все работает, но когда я добираюсь до части, где название панели расширения, панель расширения открыта.

Фактически, когда вы нажимаете в первый раз, он открывается снова, даже если он открыт по умолчанию, поэтому мне нужно, чтобы он был закрыт по умолчанию (я хотел бы, чтобы он выглядел закрытым, и вы должны нажать, чтобы открыть,Переключатель уже работает, когда вы нажимаете кнопку открытия / закрытия, но я хочу, чтобы он отображался закрыт по умолчанию )

Вы можете увидеть его в этом GIF:

GIF of initially opened accordion panel on sidenav

tabs-nav.component.html

<div class="breadcrumbs-sidenav">
    <div routerLink="/" routerLinkActive="active" (click)="back2Main()" style="cursor:pointer" class="vertical-align-text">Menú</div>
    <div *ngIf="numItemsSelected >= 1">&nbsp;<mat-icon>chevron_right</mat-icon>
    </div>
    <span *ngIf="numItemsSelected >= 1" routerLink="/" routerLinkActive="active" class="vertical-align-text" style="cursor:pointer;vertical-align: middle;" (click)="toBreadcrum1();">&nbsp;{{breadcrumb1.option}}</span>
    <div *ngIf="numItemsSelected >= 2">&nbsp;<mat-icon>chevron_right</mat-icon></div>
   <span *ngIf="numItemsSelected >= 2" routerLink="/" routerLinkActive="active" class="vertical-align-text" style="cursor:pointer" (click)="toBreadcrum2();">&nbsp;{{breadcrumb2.option}}</span>
    <div *ngIf="numItemsSelected >= 3">&nbsp;<mat-icon>chevron_right</mat-icon></div>
   <span *ngIf="numItemsSelected >= 3" routerLink="/" routerLinkActive="active" class="vertical-align-text" style="cursor:pointer" (click)="toBreadcrum3();">&nbsp;{{breadcrumb3.option}}</span>
   </div>
<div class="style-sidenav">
    <mat-tab-group class="navigation-tabs" [selectedIndex]="currentSelectedRootTab" dynamicHeight style="width:20vw; background-color:white">
        <mat-tab *ngFor="let rootTab of rootTabs; let rootIndex = index" [label]="rootIndex">
            <mat-nav-list>
        <div *ngFor="let rootOption of rootTab.options; let optionIndex = index;">
          <a mat-list-item *ngIf="!rootOption.rootTab && !rootOption.options" [routerLink]="rootOption.route" routerLinkActive="active"><mat-icon>{{rootOption.icon}}</mat-icon>{{rootOption.option}}</a>
          <mat-accordion *ngIf="rootOption.options">
              <mat-expansion-panel>
              <mat-expansion-panel-header>
                <mat-panel-title>
                  {{rootOption.option}}
                </mat-panel-title>
              </mat-expansion-panel-header>
              <div *ngFor="let option of rootOption.options"
                   class="option-routes"
                   [routerLink]="option.route">
                <mat-icon>{{option.icon}}</mat-icon><span class="option-label">{{option.label}}</span>
              </div>
            </mat-expansion-panel>
          </mat-accordion>
          <a mat-list-item style="width:100%; color: #777777;" *ngIf="rootOption.rootTab" (click)="rootSelected(optionIndex, rootOption.rootTab, rootOption)"><mat-icon>{{rootOption.icon}}</mat-icon>{{rootOption.option}}<div><mat-icon style="padding-left:0%;">chevron_right</mat-icon></div></a>
        </div>
            </mat-nav-list>
        </mat-tab>
    </mat-tab-group>
</div>

tabs-nav.component.ts

import { Component } from '@angular/core';

@Component ({
  selector: 'app-tabs-nav',
  templateUrl: './tabs-nav.component.html',
  styleUrls: ['./tabs-nav.component.css']
})
export class TabsNavComponent {
  currentSelectedRootTab = 0;
  previousRootTab = 0;
  indexClicked = 0;
  numItemsSelected = 0;
  breadcrumb1;
  breadcrumb2;
  breadcrumb3;
  rootTabs = [
    {
      id: 0,
      options: [ // Aquí van las fijas, que no tienen ni drop ni transición //
        { option: 'Home', route: '/dashboard', icon: 'home' },
        { option: 'Link 1', route: '/parametros', icon: 'tune' },
        { option: 'Link 2', route: '/operativas', icon: 'settings' },
        { option: 'Link 3', route: '/productos', icon: 'layers' },
        { option: 'More', rootTab: 1, icon: 'flash_on' } // Esta si tiene transición //
      ]
    },
    {
      id: 1,
      options: [
        { option: 'OPTION 1', rootTab: 2 },
        { option: 'OPTION 2', rootTab: 4 },
        { option: 'OPTION 3', rootTab: 5 }
      ]
    },
    {
      id: 2,
      options: [
        {
          option: 'Portal Dropdown',
          route: '/Submenu1',
          options: [
            { label: 'Option 1', route: '/Submenu1', icon: 'filter_1' },
            { label: 'Option 2', route: '/Submenu2', icon: 'filter_2' },
            { label: 'Option 3', route: '/Submenu3', icon: 'filter_3' },
            { label: 'Option 4', route: '/Submenu4', icon: 'filter_4' },
            { label: 'Option 5', route: '/Submenu5', icon: 'filter_5' },
          ]
        },
        // { option: 'TestJustIgnore', route: '/Submenu2' },
        // { option: 'TestJustIgnore', route: '/Submenu3' },
        {
          option: 'Second Dropdown',
          route: '/Submenu4',
          options: [
            { label: 'Option 1', route: '/Submenu1', icon: 'filter_1' },
            { label: 'Option 2', route: '/Submenu2', icon: 'filter_2' }
          ]
        },
      ]
    },
    {
      id: 3, options: [
        { option: 'put additional options here' }
      ]
    },
    {
      id: 4,
      options: [
        {
          option: 'Portal Dropdown',
          route: '/Submenu1',
          options: [
            { label: 'Option 1', route: '/Submenu1', icon: 'filter_1' },
            { label: 'Option 2', route: '/Submenu2', icon: 'filter_2' },
            { label: 'Option 3', route: '/Submenu3', icon: 'filter_3' },
            { label: 'Option 4', route: '/Submenu4', icon: 'filter_4' },
            { label: 'Option 5', route: '/Submenu5', icon: 'filter_5' },
          ]
        },
        // { option: 'TestJustIgnore', route: '/Submenu2' },
        // { option: 'TestJustIgnore', route: '/Submenu3' },
        {
          option: 'Branches',
          route: 'Second Dropdown',
          options: [
            { label: 'Option 1', route: '/Submenu1', icon: 'filter_1' },
            { label: 'Option 2', route: '/Submenu2', icon: 'filter_2' }
          ]
        },
      ]
    },
    {
      id: 5,
      options: [
        {
          option: 'Portal Dropdown',
          route: '/Submenu1',
          options: [
            { label: 'Option 1', route: '/Submenu1', icon: 'filter_1' },
            { label: 'Option 2', route: '/Submenu2', icon: 'filter_2' },
            { label: 'Option 3', route: '/Submenu3', icon: 'filter_3' },
            { label: 'Option 4', route: '/Submenu4', icon: 'filter_4' },
            { label: 'Option 5', route: '/Submenu5', icon: 'filter_5' },
          ]
        },
        // { option: 'TestJustIgnore', route: '/Submenu2' },
        // { option: 'TestJustIgnore', route: '/Submenu3' },
        {
          option: 'Second Dropdown',
          route: '/Submenu4',
          options: [
            { label: 'Option 1', route: '/Submenu1', icon: 'filter_1' },
            { label: 'Option 2', route: '/Submenu2', icon: 'filter_2' }
          ]
        },
      ]
    }
  ];
  rootSelected(optionIndex, optionRootIndex, rootOption) {
    this.numItemsSelected++;
    this.previousRootTab = this.currentSelectedRootTab;
    this.currentSelectedRootTab = optionRootIndex;
    this.indexClicked = optionIndex;
    if (!this.breadcrumb1) {
      this.breadcrumb1 = rootOption;
    } else if (!this.breadcrumb2) {
      this.breadcrumb2 = rootOption;
    } else {
      this.breadcrumb3 = rootOption;
    }
  }
  back2Main() {
    this.currentSelectedRootTab = 0;
    this.previousRootTab = 0;
    this.indexClicked = 0;
    this.numItemsSelected = 0;
    this.breadcrumb1 = null;
    this.breadcrumb2 = null;
    this.breadcrumb3 = null;
  }
  toBreadcrum1() {
    if (this.numItemsSelected > 1) {
      this.currentSelectedRootTab = this.breadcrumb1.rootTab;
      this.breadcrumb2 = null;
      this.numItemsSelected--;
    }
  }
  toBreadcrum2() {
    if (this.numItemsSelected > 2) {
      this.currentSelectedRootTab = this.breadcrumb2.rootTab;
      this.breadcrumb3 = null;
      this.numItemsSelected--;
    }
  }
}

tabs-nav.component.css

::ng-deep .navigation-tabs .mat-tab-label-container{
  display:none;
}

.breadcrumbs-sidenav {
  display: flex;
  flex-direction: row;
  margin:1% ;
  height:10px;
  font-size: 13px;
  padding-top: 2.5px;
  padding-left: 2.5px;
}

.style-sidenav {
  display: flex;
  flex-direction: row;
  background-color:white;
  height: 100%;
  padding-top: 25px;
}


/* .vertical-align-text {
      padding-top: 1.5px;
      font-size: 13px;
      text-align: center;
      display: flex;
} */

.mat-expansion-panel:not([class*=mat-elevation-z]) {
  box-shadow: none;
}

.option-routes {
  margin-bottom: 5px;
  cursor: pointer;
  line-height: 35px;
  vertical-align: middle;
  color: #777777;
}

/* .option-label {
  margin-left: 10px;
} */

.material-icons {
    float: left;
}

.mat-icon {
  color: #fbc837;
  margin-right: 10px;
}

.mat-list-item, .mat-list-text, .mat-submenu-title, .mat-accordion, .vertical-align-text, .mat-expansion-panel-header-title { /* Color of the Sidenav Text */
  color: #777777;

}


.mat-expansion-indicator {
  color: #fbc837;
}

.mat-expansion-panel-header {
  height: 48px;
}

Я использую Angular версии 5.2.0 и не могу его обновить, поэтому мне нужно решение с этой версией.

...