Vật liệu góc 2 - Tắt Ripple?

Question

Tôi hiện đang làm việc với md-tab-nhóm (chỉ cần cập nhật lên phiên bản mới nhất của ngày hôm qua) ...

Có ai biết

1. nếu nó có thể vô hiệu hóa /cấu hình Ripple trên thành phần hiện có (md-tab-group trong trường hợp này)? Phiên bản mới nhất làm cho tiêu đề tab của tôi nhảy vì gợn đang tính giá trị lớn, giải pháp là thêm một giá trị nhỏ cho md-gợn-max-radius cho md-tab-label trực tiếp trong mẫu của MdTabGroup.
2. nếu có kế hoạch xóa chiều rộng tối thiểu cho md-tab-nhãn? Tôi đang làm việc với một nhóm tab nhỏ (chỉ có chiều rộng 300px), do đó, chiều rộng tối thiểu 160px không thể sử dụng được.

Cảm ơn bạn!

Answer 1

Tôi đã đưa ra hai cách để ghi đè các kiểu md dựa trên một bài đăng khác. Tôi đã có cùng một vấn đề chính xác cho các tab quá rộng trong một nhóm tab nhỏ. Nó vẫn còn rất thử nghiệm và có thể cần giải thích thêm nhưng nó đã làm việc cho tôi.

1. giải pháp đầu tiên sử dụng Sass styling

Bạn có thể sử dụng /sâu/ trước lớp bạn đang cố gắng để ghi đè

/* your-component.component.scss file*/ 
 

 
/deep/ .md-tab-label { 
 
    min-width: 0px; /* Or whatever value you wish */ 
 
    /* In some situations !important seems necessary */ 
 
}

<!-- your-component.component.html --> 
 
<!-- Template from Angular Material's Github Readme.md --> 
 
<md-tab-group> 
 
    <md-tab> 
 
    <template md-tab-label> 
 
     The <em>best</em> pasta 
 
    </template> 
 
    <h1>Best pasta restaurants</h1> 
 
    <p>...</p> 
 
    </md-tab> 
 
    <md-tab> 
 
    <template md-tab-label> 
 
     <md-icon>thumb_down</md-icon> The worst sushi 
 
    </template> 
 
    <h1>Terrible sushi restaurants</h1> 
 
    <p>...</p> 
 
    </md-tab> 
 
</md-tab-group>

2. giải pháp thứ hai với css tinh khiết

   • Tạo một overrides.css tập tin mà bạn liên kết trong chính bạn index.html và sau đó ghi đè lên các lớp nguyên liệu ở đây

/* overrides.css */ 
 
.md-tab-label ,.md-tab-label-active { 
 
    min-width: 0; /* same comments as the first solution */ 
 
}

<!-- index.html --> 
 
<link rel="stylesheet" content="text/css" href="overrides.css">

Cả hai đều bẩn, nhưng đầu tiên cung cấp cho tôi một giải pháp tốt để ghi đè kiểu của thành phần md, giữ các thay đổi bên trong các thành phần liên quan (xem xét gói các thành phần đó chỉ để thay đổi cục bộ).

Answer 2

Sử dụng disableRipple làm thuộc tính để tắt các gợn sóng cho md-tab-group dưới dạng Angular2 + sử dụng tài liệu Góc.

Đơn giản chỉ cần làm một cái gì đó như thế này:

<md-tab-group disableRipple></md-tab-group>