wake-up-neo.com

So stellen Sie die Farbe der Umschaltflächen ein

Ich habe eine Gruppe von Schaltflächen. Sie sind sehr hell und verschwinden bei schlechten Bildschirmen mit hoher Helligkeit im Hintergrund.

 enter image description here

Wie kann ich sie richtig gestalten? Ich würde es vorziehen, ihnen die Farben accent oder primary zuzuweisen, so wie Sie es für normale Buttons tun können.

In einigen Fällen sind die Primär- und Akzentfarben dunkel. Sie sollten also weiß werden (mit etwas Transparenz). Bei normalen Tasten funktioniert es automatisch.

<div class="output-size">
  <mat-button-toggle-group>
    <mat-button-toggle value="letter">Letter</mat-button-toggle>
    <mat-button-toggle value="legal">Legal</mat-button-toggle>
    <mat-button-toggle value="a4">A4</mat-button-toggle>
    <mat-button-toggle value="a5">A5</mat-button-toggle>
  </mat-button-toggle-group>
</div>
angularangular-materialangular5
14
Codo

matButtonToggle unterstützt die color-Eigenschaft wie matButton nicht.

Sie können die css-Klassen .mat-button-toggle und .mat-button-toggle-checked verwenden, um die verschiedenen Status zu formatieren.

Mit Materialmotings können Sie die gewünschte Palette aus dem Design extrahieren und die Standardkontrastfarbe des Hintergrunds auf die Textfarbe anwenden, um einen optimalen Kontrast mit hellen oder dunklen Farben zu erzielen.

Hier ist ein Stackblitz mit Ihrem mat-button-toggle-group-Beispiel: Stackblitz Winkel-t1k1x6

Theming verwendet:

@import '[email protected]/material/theming';

@include mat-core();

$app-primary: mat-palette($mat-Indigo);
$app-accent:  mat-palette($mat-pink, A200, A100, A400);

$app-theme: mat-light-theme($app-primary, $app-accent);

@mixin mix-app-theme($app-theme) {
  $primary: map-get($app-theme, primary);
  $accent: map-get($app-theme, accent);

  .mat-button-toggle {
    background-color: mat-color($primary);
    color: mat-color($primary, default-contrast);
  }

  .mat-button-toggle-checked {
    background-color: mat-color($accent);
    color: mat-color($accent, default-contrast);
  }
}

// Include the mixin
@include mix-app-theme($app-theme);

Dokumente: Theming Ihrer Winkelmaterial-App

29
Sashel Niles Gruber

Anpassen der Präsentation unter Verwendung Ihres eigenen Themas SASS ist, wie die andere Antwort zeigt, eine großartige kurzfristige Lösung und gibt Ihnen viel Kraft für die Präsentation. Im Idealfall würde dies zu einem Teil der Kernthemadeklarationen werden, sodass <mat-button-toggle-group color="primary"> (möglicherweise auch <mat-button-toggle color="primary">) nur ohne zusätzliche Schritte funktioniert.

Wenn Sie dies in Zukunft einfacher gestalten möchten, geben Sie diese Ausgabe einen Daumen hoch.

3
Coderer
mat-button-toggle-group {
  box-shadow: none;
}

mat-button-toggle {
    border: 1px rgba(0,0,0,0) solid !important;
    margin-top: 5px !important;
    padding: 0 5px !important;
    z-index: 3 !important;
}

mat-button-toggle:hover {
    border: 1px #000 solid !important;
    background-color: #FFF !important;
    border-radius: 5px !important;
}

.mat-button-toggle-checked {
          box-shadow: 0 0 30px #000 !important;
    border: 1px #000 solid !important;
    border-radius: 5px !important;
    background-color: #FFF !important;
}

.mat-button-toggle-input {
    background-color: none !important;
    padding-left: 32px !important;
}

wenn Sie nur den Stil des Häkchens ändern möchten

0
juliana fernandez

Eine Problemumgehung kann wie folgt aussehen:

<mat-button-toggle-group>
  <mat-button-toggle value="letter">
    <button mat-button color="primary" style="pointer-events:none;">
      Letter
    </button>
  </mat-button-toggle>
  <mat-button-toggle value="legal">
    <button mat-button color="accent" style="pointer-events:none;">
      Legal
    </button>
  </mat-button-toggle>
</mat-button-toggle-group>
0
Sergiu Starciuc