Угловой 7+: ngbDropdown, а не всплывающее меню - PullRequest
Новая
       5

Угловой 7+: ngbDropdown, а не всплывающее меню

0 голосов
/ 01 июля 2019

Я использую ngb для отображения списка пользователей на экране.Когда пользователь нажимает на раскрывающийся список, он отображает форму сведений о пользователе.

Проблема в том, что эта форма всплывает над другими пользователями и контентом.Мне нужно данные пользователя, чтобы свернуть вместо popover .

Я попытался поставить aria-haspopup = false, но это ничего не даетНа самом деле это все еще показывает, что это правда в инспекторе, так что я немного запутался в том, что он делает и как этого добиться сейчас?Я думаю использовать что-то вроде переключения данных и свертывания, как в переключателе navbar, но не уверен, как правильно реализовать это в меню ngbDropdown ....

ссылка на изображение для желаемого результата 1 

<div ngbDropdown *ngFor="let user of users" class="user-list">
    <a ngbDropdownToggle id="dropdownForm" role="button" aria-haspopup="false" aria-expanded="false">{{user.firstName}} {{user.lastName }} </a>
    <div ngbDropdownMenu aria-labelledby="dropdownForm">
      <userForm></userForm>
    </div>
</div>

1 Ответ

1 голос
/ 01 июля 2019

Из описания / изображения, которым вы поделились, похоже, что вам нужен аккордеон, а не всплывающее окно ... потому что аккордеон имеет разборный эффект, а выпадающий список всегда будет всплывающим

релевантно HTML : 

<ngb-accordion #acc2="ngbAccordion" activeIds="ngb-panel-0" [closeOthers]="true">
  <ngb-panel  *ngFor="let user of users; let idx = index" class="user-list" >
    <ng-template ngbPanelTitle >
      <span  (click)='toggleAccordion(idx)'>{{user.firstName}} {{user.lastName }}</span>
      <span class='stickToRight' (click)='toggleAccordion(idx)' style='float:right'> 
        <!-- ... {{idx}} - {{user.opened }} -->
        <ng-container *ngIf="user.opened">
        <i class='fa fa-angle-down'></i>
        </ng-container>
        <ng-container *ngIf="!user.opened">
        <i class='fa fa-angle-right'></i>
        </ng-container>
      </span>
    </ng-template>
    <ng-template ngbPanelContent>
      <!-- <userForm></userForm> -->
      <input type='text' placeholder="first Name" value="{{user.firstName}}" />  <br/>
      <input type='text' placeholder="last Name" value="{{user.lastName}}" /> <br/>
      <input type='text' placeholder="Age" /> <br/>
    </ng-template>
  </ngb-panel>
</ngb-accordion>

релевантно TS : 

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

@Component({
  selector: 'ngbd-accordion-basic',
  templateUrl: './accordion-basic.html',
  styles: [`
  .stickToRight{position: absolute; right: 30px;}
  `]
})
export class NgbdAccordionBasic {
  users = [
    { firstName: 'fName 1', lastName: 'lName 1', opened: false },
    { firstName: 'fName 2', lastName: 'lName 2', opened: false },
    { firstName: 'fName 3', lastName: 'lName 3', opened: false },
    { firstName: 'fName 4', lastName: 'lName 4', opened: false },
    { firstName: 'fName 5', lastName: 'lName 5', opened: false }
  ];

  resetOthers(index) {
    for (var i = 0; i < this.users.length; i++) {
      if (i !== index) {
        this.users[i].opened = false;
      }
    }
  }

  toggleAccordion(index) {
    if (this.users[index].opened == false) {
      this.users[index].opened = true;
      this.resetOthers(index);
    } else {
      this.users[index].opened = false;
      this.resetOthers(index);
    }
  }
}

обновление : в свете комментария опрашивающего ниже

работает здесь можно использовать стек

...