Как мне увеличить размер стрелки в мат-гармошке - PullRequest
Новая
       22

Как мне увеличить размер стрелки в мат-гармошке

0 голосов
/ 31 января 2019

Я использую коврик-гармошку и хочу увеличить размер стрелки .
Я пытаюсь увеличить размер, используя размер шрифта и ширину, но он не работает

в настоящее время, мой 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>

Ответы [ 2 ]

0 голосов
/ 31 января 2019

Подход 1:

Поскольку свойство ::after используется с селектором .mat-expansion-indicator, вы можете манипулировать высотой и шириной для достижения нужного размера значка. 

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


Подход 2:

Вы можете использовать свойство background-image для обработки любого значка из URL. 

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

Демонстрация - отображение большего значка на панели расширения (с обоими подходами)

0 голосов
/ 31 января 2019

Следующий пример такой же, как ваш?-> https://material.angular.io/components/expansion/examples

Затем вы можете контролировать размер стрелок с помощью padding (не font-size)

В примере CSS для стрелоквыглядят так: 

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

Измените значение отступа, чтобы изменить размер стрелки.

Ширина границы определяет толщину линий стрелки.

...