1
votes

Ngb-accordéon s'agrandit lorsque vous cliquez sur la ligne

J'essaie de trouver une solution, pour ng-accordéon de ng-bootstrap.

Accordin - il y a une possibilité de cliquer à n'importe quel endroit de la ligne et de l'agrandir / réduire? Non seulement dans le libellé ...

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

angular bootstrap-4 ng-bootstrap

0 commentaires

3 Réponses :

3
votes

Cela devrait être facile avec des css personnalisés comme:

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;
}

Exemple Stackblitz

p >

3 commentaires

Merci, génial!

angular.io/guide/component-styles ng-deep est obsolète

@JensAlenius Le combinateur descendant qui perce les ombres est obsolète et la prise en charge est supprimée des principaux navigateurs et outils. En tant que tel, nous prévoyons de supprimer le support dans Angular (pour les 3 de / deep /, >>> et :: ng-deep). Jusque-là, :: ng-deep devrait être préféré pour une compatibilité plus large avec les outils.

1
votes

Ce n'est pas la réponse directe mais je pense que c'est une meilleure solution

<div class="card my-accordian">

Pourquoi? Il n'a besoin d'aucune tierce partie. C'est très flexible. Et il laisse un balisage contenant du HTML pur. Seuls les attributs angulaires sont utilisés. dans cette variante, vous pouvez ajouter du html dans l'en-tête. boutons ex, images. ajoutez simplement la carte suivante directement ci-dessous. tous les effets de survol peuvent facilement être stylisés en utilisant une classe supplémentaire:

<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>

1 commentaires

J'utilise aussi généralement du html pur s'il n'y a aucune exigence pour utiliser des composants pré-stylisés d'une bibliothèque tierce.

2
votes

pourquoi ne pas utiliser un en-tête de modèle et utiliser (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>

0 commentaires