typescript 当设置minutesGap为1时,ngx材料时间选择器的设计不正确

3bygqnnd  于 2023-02-25  发布在  TypeScript
关注(0)|答案(1)|浏览(200)

下面是我的HTML代码

<mat-form-field>
  <mat-label>StartTime</mat-label>
  <input matInput readonly [ngxTimepicker]="timeStart" [formControlName]="'startTime'" [format]="24" />
  <ngx-material-timepicker-toggle [for]="timeStart">
    <mat-icon svgIcon="mat_solid:access_time" ngxMaterialTimepickerToggleIcon></mat-icon>
  </ngx-material-timepicker-toggle>
  <ngx-material-timepicker #timeStart [minutesGap]="1" disabled="false"></ngx-material-timepicker>
</mat-form-field>
tyky79it

tyky79it1#

我已经解决了这个使用添加下面的css
我已经为这个时间选择器添加了**'一分钟间隔'**这个自定义类,并在其上应用css,这样其他时间选择器就不会受到影响,

组件.html文件

<mat-form-field>
  <mat-label>StartTime</mat-label>
  <input matInput readonly [ngxTimepicker]="timeStart" [formControlName]="'startTime'" [format]="24" />
  <ngx-material-timepicker-toggle [for]="timeStart">
    <mat-icon svgIcon="mat_solid:access_time" ngxMaterialTimepickerToggleIcon></mat-icon>
  </ngx-material-timepicker-toggle>
  <ngx-material-timepicker #timeStart [minutesGap]="1" disabled="false" [timepickerClass]="'one-minute-gap'"></ngx-material-timepicker>
</mat-form-field>

组件.scss文件

::ng-deep .one-minute-gap {
    width: auto !important;
    ngx-material-timepicker-dial{
        .timepicker-dial{
            .timepicker-dial__container{
                justify-content: center !important;
            }
        }
    }
    ngx-material-timepicker-minutes-face {
        ngx-material-timepicker-face {
            .clock-face {
                width: 370px !important;
                height: 370px !important;
                padding: 5px !important;

                .clock-face__container {
                    .clock-face__number--outer {
                        height: calc(400px / 2 - 20px) !important;
                        span {
                            font-size: 12px !important;
                        }
                    }
                }
            }
        }
    }
}

现在看起来像下面

相关问题