如何在Dart上设计Angular材质选项卡面板（及其选项卡）？

Question

我想知道如何在Dart上设计Angular材质选项卡（及其选项卡）。

我在SASS工作时遇到了麻烦，我认为这是做到这一点的方法。

目前，我有这样的：

<material-tab-panel id="my_material_tab_panel"> 

    <material-tab label="First Tab" class="my-material-tabs"></material-tab> 

    <material-tab label="Second Tab" class="my-material-tabs"></material-tab> 

</material-tab-panel> 

编辑：我进口角分量和登记材料选项卡（组件和面板）作为指令：

import "dart:async"; 
import "dart:html"; 

import "package:angular/angular.dart"; 
import "package:angular_components/angular_components.dart"; 

@Component(
    selector: "view-test", 
    styleUrls: const ["test.css"], 
    templateUrl: "test.html", 
    directives: const [ 
     CORE_DIRECTIVES, 
     materialDirectives, 
     MaterialTabPanelComponent, 
     MaterialTabComponent 
    ] 
) 
// (...) 

我想要做的是：

1. 改变标签的文字颜色;
2. 更改标签背景颜色;
3. 更改选定的选项卡背景色;
4. 更改选定选项卡上的底部边框颜色。

感谢您的帮助。

Answer 1

你应该使用提供的混入： https://github.com/dart-lang/angular_components/blob/master/lib/material_tab/_mixins.scss

内，您的组件的SCSS文件，你可以这样做：

@import path/material_tab/mixins; 

material-tab { 
    @include tab-panel-tab-strip-width('', 200px); 
} 

中多数您需要的混入，如果缺少了什么，请在发送PR github上。