3
votes

Comment augmenter la taille de la flèche en accordéon mat

J'utilise l'accordéon mat et je souhaite augmenter la taille de la flèche .
J'essaie d'augmenter la taille en utilisant la taille et la largeur de la police, mais cela ne fonctionne pas

actuellement, mon font-size:30px;

<mat-accordion>
    <mat-expansion-panel>
        <mat-expansion-panel-header [expandedHeight]="'51px'">
            <mat-panel-title>
                Company Details
            </mat-panel-title>
        </mat-expansion-panel-header>
    </mat-expansion-panel>
    <mat-expansion-panel (opened)="panelOpenState = true"
     (closed)="panelOpenState = false">
        <mat-expansion-panel-header>
            <mat-panel-title>
                Company's Addresses Details
            </mat-panel-title>
        </mat-expansion-panel-header>
        <app-settings-addresses [linkElementDetails]="addressDetails">
        </app-settings-addresses>
    </mat-expansion-panel>
</mat-accordion>

angular css angular-material angular6

2 commentaires

Pouvez-vous s'il vous plaît partager le code css / scss que vous avez essayé?

Veuillez consulter l'approche de la solution, si cela n'est pas utile, veuillez commenter.

3 Réponses :

2
votes

L'exemple suivant est-il le même que le vôtre? -> https://material.angular.io/components/expansion/examples Ensuite, vous pouvez contrôler la taille des flèches avec padding (pas font-size)

Dans l'exemple, le CSS pour les flèches ressemble à ceci:

.mat-expansion-indicator::after {
    border-style: solid;
    border-width: 0 2px 2px 0;
    content: '';
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    vertical-align: middle;
}

Modifiez la valeur de remplissage pour changer la taille de la flèche.

La largeur de la bordure contrôle l'épaisseur des lignes de flèche. p >

1 commentaires

pour une raison quelconque, lorsque je mets cela dans mon fichier css, il ne montre pas les changements. mais cela fonctionne dans la console. même après avoir ajouté ! important . pourrais-je manquer autre chose?

3
votes

Approche 1:

Comme la propriété :: après est utilisée avec le sélecteur .mat-expansion-marker , vous pouvez manipuler le hauteur et largeur pour obtenir l'icône de la taille souhaitée.

.mat-expansion-indicator::after {
     height: 20px;
    width: 20px;
    background-image: url(https://img.icons8.com/material/24/000000/plus.png);
    background-size: cover;
    border: none;
    border-width: 0 !important;
    transform: rotate(0) !important;
}

Approche 2:

vous pouvez utiliser la propriété background-image pour gérer n'importe quelle icône de l'URL.

.mat-expansion-indicator::after {
    height: 10px; <======== adjust accordingly
    width: 10px; <======== adjust accordingly
}

Démo - montrant une icône plus grande sur panneau d'extension (avec les deux approches)

0 commentaires

1
votes

Vous pouvez utiliser :: ng-deep avant le sélecteur, puis jouer avec la largeur de la bordure et le remplissage.

De plus, n'oubliez pas d'ajouter! important

Votre code sera ressembler à

/*Decreasing the arrow size*/
::ng-deep .mat-expansion-indicator::after {
  padding: 2px !important; /* decreasing inside space */ 
  border-width: 0px 1px 1px 0px !important; /* decreasing border-width */
}

0 commentaires