降低垫子按钮切换的高度以匹配按钮

Question

我有一个 Angular Flex-Layout 行，其中包含一些按钮和一个

mat-button-toggle-group

。不幸的是，

mat-button-toggle-group

比按钮大一些，我希望它们都处于相同的高度/行高。

目前看起来很热门：

尝试干预

mat-button-toggle-group

和其他的 css 类，但仅限于在内容保持不变的情况下降低按钮高度。

  <div fxLayout="row wrap" fxLayoutAlign="space-between end">
    <div>
        <div fxLayout="row wrap" fxLayoutAlign="space-between end">
          <div class="control-buttons">
            <button
              mat-stroked-button
            >
              <i class="material-icons">skip_previous</i>
            </button>    
            ( more buttons )
        </div>
    </div>
    <div>
        <div fxLayout="row wrap" fxLayoutAlign="space-between end">
            <mat-button-toggle-group multiple>
                  <mat-button-toggle
                    value="random"
                  >
                    <i class="material-icons">
                      shuffle
                    </i>
                    <span class="only-on-big-screen">
                      random
                    </span>                
                  </mat-button-toggle>    
                  ( more buttons )
              </mat-button-toggle-group>
          </div>
    </div>
  </div>

Answer 1

另一种解决方法是这样做：

.mat-button-toggle-group {
  height: 32px;
  align-items: center;
}

Answer 2

您可以通过添加自定义样式来更改高度。您必须更改班级的

line-height

mat-button-toggle-label-content

。

.mat-button-toggle-label-content {
    line-height: 32px !important;  <-- set you height here
}

Answer 3

根据角度材料文档，最好的方法应该是使用材料密度，因为这会按比例降低组件其余部分的高度：https://v15.material.angular.io/guide/theming

摘自文章：

密度系统基于密度标度。规模开始于 默认密度 0。每个整数递减（-1、-2 等） 将受影响的尺寸减少 4 像素，降至所需的最小尺寸 使组件渲染连贯。

在您的 styles.scss 文件中：

@use '@angular/material' as mat;

.small-btn-toggle {
    @include mat.button-toggle-density(-4);

    mat-button-toggle {
        width: 45px; // define a custom width if desired
    }
}

Answer 4

对我有用的是减少内容的行高并调整全局样式文件中按钮的高度。

.mat-button-toggle-button {
 height: 2rem; // the modified height that I wanted.
}

.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
  line-height: 1rem; // default value is 48px. I wanted the height to be 2rem, but had to adjust this line-height to 1rem so that the icons were vertically centered.
 }