Я пытаюсь найти решение для 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>
1
profiler 6 Авг 2020 в 20:46

3 ответа

Лучший ответ

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

< Сильный > component.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

2
yurzui 6 Авг 2020 в 18:25

Почему бы не использовать заголовок шаблона и не использовать (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
Eliseo 6 Авг 2020 в 21:17

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

<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. Используются только угловые атрибуты. в этом варианте вы можете добавить html в шапку. ex кнопки, изображения. просто добавьте следующую карту прямо ниже. любые эффекты наведения можно легко стилизовать с помощью дополнительного класса:

<div class="card my-accordian">
1
Jens Alenius 6 Авг 2020 в 21:51