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>

编辑：我导入Angular Components并将Material Tab（组件和面板）注册为指令：

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
    ]
)
// (...)

我想做的是：

更改标签文字颜色;
更改标签背景颜色;
更改所选标签背景颜色;
更改所选标签上的底部边框颜色。

感谢您的帮助。

Answer 1

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

在组件的scss文件中，您可以执行以下操作：

@import path/material_tab/mixins;

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

有大部分需要的mixins，如果缺少某些内容请在github上发送PR。

如何在Dart上设置Angular材质标签面板（及其标签）的样式？

1 个答案: