如何從主面板獲得色相/顏色較淺

所以在角料2，我有我的主題設置如何從主面板獲得色相/顏色較淺

$store-primary: mat-palette($mat-storecast); 
$store-accent: mat-palette($mat-pink, A200, A100, A400); 

// The warn palette is optional (defaults to red). 
$store-warn: mat-palette($mat-red); 

// Create the theme object (a Sass map containing all of the palettes). 
$store-theme: mat-light-theme($store-primary, $store-accent, $store-warn); 

// Include theme styles for core and each component used in your app. 
// Alternatively, you can import and @include the theme mixins for each component 
// that you are using. 
@include angular-material-theme($store-theme);

我無法從他們的文檔弄清楚什麼是如何獲得不同色調的顏色從主調色板上即按鈕上的工具欄上。

<button md-mini-fab (click)="zoomIn()" color="primary"> 
    <md-icon>add</md-icon> 
</button>

現在看來似乎只能理解顏色=初級或顏色=口音etc..how你指定我想用初級-100或主-500等？

來源

2017-02-22 StevieB

官方答案目前這是不可能的。大多數組件上可用的color屬性只接受調色板類型 - 即主要，重音或警告。

如果你真的想這樣做的非官方答案是，如果你不介意濫用內部API，它是可能的（在逐個組件的基礎上）。例如，要在按鈕上獲取A100顏色，可以將自定義混合添加到主題。

// custom-button-theme.scss 
@import '[email protected]/material/core/theming/all-theme'; 
@import '[email protected]/material/button/_button-theme'; 

@mixin custom-button-theme($theme) { 

    .mat-raised-button.a100, .mat-fab.a100, .mat-mini-fab.a100 { 
    // _mat-button-theme-color is a mixin defined in _button-theme.scss 
    // which applies the given property, in this case background-color 
    // for each of the palettes - i.e. primary, accent and warn. 
    // The last parameter is the hue colour to apply. 
    @include _mat-button-theme-color($theme, 'background-color', 'A100'); 
    } 

}

然後在您的主要主題文件中導入自定義混合。

@import 'custom-button-theme.scss'; 
@include custom-button-theme($store-theme);

您的按鈕可以通過添加a100類來使用顏色。

<button md-mini-fab (click)="zoomIn()" color="primary" class="a100"> 
    <md-icon>add</md-icon> 
</button>

但需要注意的是，內部API可以隨時更改。此代碼已使用2.0.0-beta.2版進行了測試，但不能保證在出現此問題時它將與beta 3配合使用。

來源

2017-03-05 11:21:55 ianjoneill

好的，謝謝伊恩，我想這個會在不久的將來加入。 – StevieB

我用的角材1，我不知道，如果是同樣的方式，但我做的是使用指令：md-colors="::{background: 'themename-primary-100'}"當然在themename你把主題名稱：P

來源

2017-02-22 16:10:17

我試着像color =「primary-100」，但由於某種原因它改變了重音主題。很奇怪 – StevieB

你需要定義主題，在角度1它是這樣做的：'$ mdThemingProvider.theme（'themename'） .primaryPalette（'blue-grey'） .accentPalette（'lime'） .warnPalette （'紅'）; $ mdThemingProvider.setDefaultTheme（'themename'）;'然後你使用'md-colors =「:: {background：'themename-primary-100'}」' –

如果它是正確的，請標記答案是正確的我將其全部編輯在答案字段中以便更易讀。 –

如何從主面板獲得色相/顏色較淺

回答

相關問題