Ngb-аккордеон расширяется при нажатии на строку - PullRequest
Новая
       209

Ngb-аккордеон расширяется при нажатии на строку

1 голос
/ 06 августа 2020

Я пытаюсь найти решение для ng-accordion от ng- bootstrap.

Accordin - есть ли возможность щелкнуть в любом месте строки и развернуть / свернуть его? Нет только на этикетке ... 

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
  <ngb-panel title="Simple" >
    <ng-template ngbPanelContent>
        Test text
    </ng-template>
  </ngb-panel>
</ngb-accordion>

Ответы [ 3 ]

2 голосов
/ 06 августа 2020

Это должно быть легко с пользовательским css например:

компонент. css

ngb-accordion ::ng-deep .card-header {
    padding: 0;
}

ngb-accordion ::ng-deep .card-header button {
  width: 100%;
  padding: 1.125rem 2rem;
  text-decoration: none;
  text-align: left;

}
ngb-accordion ::ng-deep .card-header button:focus {
  box-shadow: none;
}

Пример Stackblitz

1 голос
/ 07 августа 2020

почему бы не использовать заголовок шаблона и не использовать (click)="acc.toogle('ngb-panel-0')"? 

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
  <!--give "id" to the pannel-->
  <ngb-panel id="ngb-panel-0">
    <!--use a ng-template ngbPanelHeader-->
    <ng-template ngbPanelHeader let-opened="opened">
      <!--it's only a div with a (click)--->
      <!-- acc is the template Reference variable of the accordion-->
      <!-- ngb-panel-0 is the "id" of the pannel-->
      <div (click)="acc.toggle('ngb-panel-0')" >
        Simple
      </div>
    </ng-template>
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry 
       richardson ad squid. 3 wolf moon officia

    </ng-template>
  </ngb-panel>
1 голос
/ 06 августа 2020

Это не прямой ответ, но я думаю, что это лучшее решение 

<div class="card">
 <div class="card-header" data-toggle="collapse" (click)="showBody=!showBody">
  The title
 </div>
  <div class="card-body" *ngIf="showBody">
   Test text
  </div>
</div>

Почему? Для этого не нужны никакие 3-сторонние. Его очень гибкий. И он оставляет разметку, содержащую чистый html. Используются только атрибуты angular. в этом варианте вы можете добавить html в шапку. ex кнопки, изображения. просто добавьте следующую карту прямо ниже. любые эффекты наведения можно легко стилизовать с помощью дополнительного класса: 

<div class="card my-accordian">
...