如何在 AngularDart 中大写 acx-scorecard 值文本

Question

我正在尝试使用 acx-scoreboard 组件，但无法自定义其字体大小和文本转换：大写；标签、价值和描述。那么，任何人都可以帮助我如何做到这一点。

app_component.html

<button (trigger)="generateNames()">
Names
</button>
<ul>
   <li *ngFor="let item of names">
      <acx-scorecard
          selectable
          [selected]="true"
          label="Selected scorecard"
          value="{{item.first}}{{item.second}}"
          description="Try clicking this">
      </acx-scorecard>
   </li>
</ul>

app_compoment.dart

 import 'package:angular/angular.dart';
 import 'package:angular_components/    angular_components.dart';
 import 'package:english_words/english_words.

 @Component(
     selector: 'my-app',
     templateUrl: 'app_component.html',
     styleUrls: const ['app_component.css'],
     directives: const [
       CORE_DIRECTIVES,
       materialDirectives,
       ScoreboardComponent,
       ScorecardComponent,
   ],
   providers: const [materialProviders],
   )

    class AppComponent implements OnInit    {          
      var names = <WordPair>[];

      void generateNames() { names =    generateWordPairs().take(2).toList(); }

       @override void ngOnInit()   { generateNames(); }

  }

Answer 1

目前您的情况最好的解决方案是使用 uppercase pipe.

<acx-scorecard
      selectable
      [selected]="true"
      label="{{Selected scorecard | uppercase }}"
      value="{{item.first | uppercase}}{{item.second | uppercase}}"
      description="{{Try clicking this | uppercase}}">

Answer 2

我们在内部使用 SASS mixin 来自定义样式。 https://github.com/dart-lang/angular_components/blob/master/lib/src/components/scorecard/_mixins.scss

遗憾的是，该功能在开源版本中尚不可用。 SASS 文件供您参考，可以向您展示我们如何定位不同的元素。我现在正在努力允许在您的项目中导入和访问它们。

目前，解决方法是使用类似的 css 来定位记分卡的不同部分。

该技术唯一的缺点是，如果用于表示记分卡的 html 元素发生变化，它很容易中断。 mixin 避免了这种情况，因为它充当抽象并且有一个合同，如果记分卡发生变化，它应该适当地更新。

例如，您可以通过向包含记分卡的组件添加样式来更改标签的样式：

acx-scorecard ::ng-deep h3 { // targets the scorecard label
  text-transform: capitalize;
}

::ng-deep 是 angular 现在支持的 /deep/ 的替代品。

如何在 AngularDart 中大写 acx-scorecard 值文本

How to capitalize acx-scorecard value text in AngularDart

dart

dart-webui

dart-html

angular-dart

angular-components