有角度的材料设计不需要单选按钮，而只需要按钮[关闭]

Question

下面是我的div

<div class="formField">
      <mat-radio-group aria-label="Select a state" formControlName="selectedActivity">
        <mat-radio-button style="  display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin: 5px;
        
        border: 1px solid #bdbdbd !important;
        
        background-color: #fff !important;
        
        box-sizing: border-box !important;
        position: relative;
        
        cursor: pointer;
        transition: border-color 0.3s, background-color 0.3s;
        " [value]="selectItem" *ngFor="let selectItem of selectArray"
          (click)="checkRadioButton($event)">
          <span [appTranslate]="selectItem.select"></span>
        </mat-radio-button>
      </mat-radio-group>
    </div>

div 当前显示此

我需要这个布局

我尝试使用按钮但不起作用，垫按钮也不起作用 我正在使用角度 16

Answer 1

您可以使用

scss

来实现这一点，我们只需隐藏与单选按钮部分

.mdc-radio

相关的部分，我们将其设为零宽度并使用

overflow: hidden

隐藏溢出的内容。然后我们只需设置其余元素的样式即可实现所需的输出。

:host ::ng-deep .custom-radio-group {
  mat-radio-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 5px;
    border: 1px solid #bdbdbd !important;
    background-color: #fff !important;
    box-sizing: border-box !important;
    position: relative;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
  }
  .mat-mdc-radio-checked {
    background-color: lightblue !important;
    border: 1px solid blue;
  }
  .mdc-label {
    cursor: pointer;
    padding: 2px 20px !important;
  }
  .mdc-radio {
    width: 0px !important;
    overflow: hidden !important;
    padding-left: 0px;
    padding-right: 0px;
  }
}

Stackblitz 演示