góc/material2 mat-spinner đổi kích thước

Question

Có cách nào có thể thay đổi kích thước của mat-spinner hoặc mat-progress-circle?

Tôi đọc tài liệu của mat-spinner và mat-progress-circle nhưng họ cho biết rằng mat-diameter bị ngừng và trình quay sẽ lấy kích thước của phần tử gốc.

Làm cách nào để đặt mat-spinner vào góc mat-button ở góc trái mà không thay đổi chiều cao của nút?

<button mat-button> 
    <mat-spinner style="float:left;"></mat-spinner> 
    processing.... 
</button> 

Tôi cũng đã cố gắng để thay đổi chiều cao sử dụng trong dòng css như

style="float:left;height:10px;width:10px; 

nhưng là không đẹp để xem.

Answer 1

Tôi không chắc tại sao kiểu dáng của bạn không mang lại kết quả mong muốn. Như bạn đã đề cập, nội dung svg bên trong md-spinner sẽ được chia tỷ lệ theo kích thước của vùng chứa, vì vậy, hãy áp dụng width và height cho md-spinner.

CSS

md-spinner { 
    float:left; 
    width: 24px; 
    height: 24px; 
    margin: 5px 10px 0px 0px; 
} 

Template

<button md-raised-button> 
    <md-spinner></md-spinner>Raised Button with spinner 
</button> 

Plunk

http://plnkr.co/edit/RMvCtOCV9f4TxgB4G0Yz?p=preview

Đây có phải là điều bạn muốn đạt được không?

Answer 2

Với bản cập nhật mới nhất bạn nên sử dụng diameter tài sản:

<mat-spinner [diameter]="70"></mat-spinner> 

Đường kính đại diện cho số lượng điểm ảnh cho cả chiều rộng và chiều cao của spinner. Trong trường hợp này, nó có kích thước 70x70 pixel.

Xem ví dụ sau stackblitz:

https://stackblitz.com/edit/angular-material2-progress-spinner