Angular mat-selection-list, How to make single checkbox select similar to radio button?

后端 未结 14 1710
北恋
北恋 2021-02-18 21:22

How to make make single checkbox select from mat-selection-list. Similar to radio button which accepts one value from group of values.

14条回答
  •  面向向阳花
    2021-02-18 21:44

    Try this: I've got it working with a tick, changing css

        :host ::ng-deep .mat-radio-outer-circle{
          border-radius:2px;
        }
        :host ::ng-deep .mat-radio-inner-circle{
            border-radius:2px;
            background-color: transparent!important;
            border-bottom: 4px solid white;
            border-right:4px solid white;
            height:30px;  
            width:15px;
            margin-top: -8px;
           margin-left: 3px;
        }
        :host ::ng-deep .mat-radio-checked .mat-radio-outer-circle{
           background:#ff4081!important;
        }
        :host ::ng-deep .mat-radio-checked .mat-radio-inner-circle{
           transform: rotate(45deg) scale(0.5);
        }
     
        :host ::ng-deep .mat-radio-button .mat-radio-ripple{
          height: 20px; /*double of your required circle radius*/
          width: 20px;  /*double of your required circle radius*/
          left: calc(50% - 10px); /*'10px'-same as your required circle radius*/
          top: calc(50% - 10px); /*'10px'-same as your required circle radius */
        }
    

提交回复
热议问题