Tạo các tab biểu tượng với Chất liệu Góc?

Question

Tôi chỉ mới bắt đầu với Tài liệu Góc. Tôi đã tự hỏi nếu có một cách để hiển thị các biểu tượng trên các tab thay vì các nhãn văn bản thông thường. Vấn đề của tôi là, tôi đang sử dụng nó để xây dựng một ứng dụng di động và văn bản tab quá lớn để phù hợp.

Answer 1

Có hai cú pháp hỗ trợ cho md-tabs: một trong số họ sử dụng thuộc tính label và người kia sử dụng md-tab-label và md-tab-body như thẻ. Cú pháp này đã được thêm vào cụ thể cho trường hợp sử dụng này.

Cú pháp bạn đang sử dụng:

<md-tabs> 
    <md-tab label="One"> 
    Tab One Content 
    </md-tab> 
</md-tabs> 

Cú pháp mà bạn đang nhất có khả năng tìm kiếm

<md-tabs> 
    <md-tab> 
    <md-tab-label>One</md-tab-label> 
    <md-tab-body>Tab One Content</md-tab-body> 
    </md-tab> 
</md-tabs> 

Dưới đây là một CodePen chứng minh cú pháp sau:

http://codepen.io/robertmesserle/pen/7bbeaf916d45ac2dde4967cf57307338?editors=100

Answer 2

Tôi đã tìm ra. Vì bạn chỉ có thể cung cấp thuộc tính nhãn cho nó, tôi đã tạo phông chữ dingbat của riêng mình. Có rất nhiều công việc, nhưng cuối cùng nó đã hoạt động, nên tôi đoán là nó đáng giá.

Nếu ai là khó khăn, đây là những gì tôi đã làm: http://www.zoersel-tv.be/edius/inkscape-dingbats.pdf

Answer 3

Để xây dựng câu trả lời của Robert, bạn thậm chí có thể kết hợp một biểu tượng và văn bản trong một tab.

 <md-tab id="tab1" class="less-padding"> 
     <md-tab-label> 
      <section layout="column" layout-align="center center"> 
      <md-icon md-svg-src=".svg" class="md-accent"></md-icon> 
      Yes/No 
      </section> 
     </md-tab-label> 
     <md-tab-body> 
      View for Item #1 <br/> 
      data.selectedIndex = 0; 
     </md-tab-body> 
     </md-tab> 

Cuối cùng, chỉnh sửa CSS padding cho tab .md nơi đệm mặc định là "đệm: 12px 24px;". Tạo đệm trên và dưới bằng 1px và bạn nên làm tốt! Hy vọng nó sẽ giúp một ai đó!