Comment mettre en majuscule le texte de valeur acx-scorecard dans AngularDart

Question

J'essaye d'employer le composant d'acx-tableau de bord mais incapable de personnaliser sa taille de police et transformation de texte: capitaliser; d'étiquette, de valeur et de description. Alors, quelqu'un peut-il m'aider à faire cela?

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

Pour l'instant la meilleure solution dans votre cas est d'utiliser uppercasepipe.

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

Answer 2

En interne, nous utilisons les mixins SASS pour personnaliser le style. https://github.com/dart-lang/angular_components/blob/master/lib/src/components/scorecard/_mixins.scss

Malheureusement, cette fonctionnalité n'est pas encore disponible dans la version open source. Les fichiers SASS sont là pour vous servir de référence et peuvent vous montrer comment nous ciblons différents éléments. Je travaille actuellement pour permettre les importations et l'accès à celles-ci dans vos projets.

Pour l'instant, une solution de contournement serait d'utiliser le CSS similaire pour cibler les différentes parties de la carte de score.

Le seul problème lié à cette technique est qu'elle est vulnérable aux ruptures si les éléments html utilisés pour représenter la carte de performance changent. Le mixin évite cela car il agit comme une abstraction et a un contrat qu'il devrait être mis à jour de manière appropriée si le tableau de bord change.

Par exemple, vous pouvez changer le style de l'étiquette en ajoutant des styles à vos composants qui ont scorecards en eux:

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

:: ng profond est le remplacement pour/profond/que angulaire soutient maintenant .