Question

我正在使用手风琴垫，我想增加箭头的尺寸。
我正在尝试使用font-size和width来增加大小，但是它不起作用

当前，我的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>

Answer 1

方法1：

由于::after属性与选择器.mat-expansion-indicator一起使用，因此您可以操纵高度和宽度来获得所需的大小图标。

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

方法2：

您可以使用background-image属性来处理网址中的任何图标。

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

Demo - showing bigger icon on expansion panel (with both approaches)

Answer 2

您可以在选择器之前使用:: ng-deep，然后使用边框宽度和填充进行播放。

此外，不要忘记添加！important

您的代码如下

const getRouteValueAt = (idx) => {

   const routeTokens = location.pathname.replace(/^\/+/g,'').split('/')
   //[questions,20302776,how-to-get-route-parameter-in-javascript]

   return routeTokens.length > idx ? routeTokens[idx] : undefined
}

Answer 3

以下示例与您的示例相同吗？ -> https://material.angular.io/components/expansion/examples

然后，您可以使用 padding （不是字体大小）

来控制箭头的大小

在示例中，箭头的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;
}

更改填充值以更改箭头大小。

边界宽度控制箭头线的粗细。

如何增加手风琴中箭头的大小

3 个答案: