Kendo上传样式

时间:2019-06-21 18:16:59

标签: html angular typescript kendo-ui

Picture of What the Style is supposed to look like

我正在尝试将剑道上载设置为圆形,并在其中包含垫子图标。我目前有一个垫子卡的头像上传器,需要使kendo UI #uploader看起来与那个相似。

我尝试更改边框半径使其变圆,但是“选择文件”按钮仍包含在其中。

<kendo-upload #uploader
        [saveUrl]="uploadSaveUrl"
        [removeUrl]="deleteFileUrl"
        (upload)="uploadEventHandler($event)"
        [withCredentials]="false"
        (remove)="removeEventHandler($event)"
        (success)="successEventHandler($event)"
        matInput
        [multiple]="false"
        formControlName="estimateRef"
        [(ngModel)]="fileList"
      >
</kendo-upload>

我需要它看起来像

<div class="center p-24 pb-56 pr-sm-92" style="text-align: center">
    <!-- <kendo-upload matInput formControlName="preConstructionRef"> -->
      <div *ngIf='!photoUploaded'><button mat-fab class='upload-button' color='primary'><div><mat-icon>add_a_photo</mat-icon></div>add photo</button></div>
      <div><img *ngIf='photoUploaded' class='preview-image' mat-card-avatar [src]="addCampaignForm['photo']"/></div>
      <!-- </kendo-upload> -->
</div>

scss file 

.upload-button {
  height: 130px;
  width: 130px;
}

我希望kendo上传器的样式与底部的相似。

0 个答案:

没有答案