Question

我认为这很简单，但我很难在Angular2材料中设置卡片头的背景颜色而我找不到任何例子。因此，鉴于以下代码，我将非常感谢如何设置md-card-title的背景颜色：

<md-card>
   <md-card-header>
      <md-card-title>Title</md-card-title>
      <md-card-subtitle>Subtitle</md-card-subtitle>
   </md-card-header>
   <md-card-content>
       Body text
   </md-card-content>
</md-card>

Answer 1

只需在[style.backgroundColor]="'COLOR_YOU_WANT'"选择器中添加<md-card-header>：

<md-card>
   <md-card-header [style.backgroundColor]="'yellow'"> 
      <md-card-title>Title</md-card-title>
      <md-card-subtitle>Subtitle</md-card-subtitle>
   </md-card-header>
   <md-card-content>
       Body text
   </md-card-content>
</md-card>

链接到working demo。

或者，在css文件中添加一个类：

.custom-card {
  background-color: gray;
}

并在[ngClass]选择器中设置<md-card-header>：

<md-card>
   <md-card-header [ngClass]="{'custom-card':true}"> 
      <md-card-title>Title</md-card-title>
      <md-card-subtitle>Subtitle</md-card-subtitle>
   </md-card-header>
   <md-card-content>
       Body text
   </md-card-content>
</md-card>

或其他替代方法是使用[ngStyle]：

<md-card [ngStyle]="{'padding':'0px'}">
   <md-card-header [ngStyle]="{'background-color':'green'}"> 
      <md-card-title [ngStyle]="{'font-size':'24px'}">Title</md-card-title>
      <md-card-subtitle [ngStyle]="{'font-size':'12px', 'color':'white'}">Subtitle</md-card-subtitle>
   </md-card-header>
   <md-card-content>
       Body text
   </md-card-content>
</md-card>

Answer 2

其中任何一个都有助于设置标题背景：

使用::ng-deep

::ng-deep .mat-card-header {
    background-color: red !important;
    padding: 5px !important;
}

::ng-deep .mat-card {
    padding: 0 !important;
}

::ng-deep .mat-card-content {
    padding: 5px !important;
}

DEMO

在组件装饰器上使用encapsulation: ViewEncapsulation.None

.mat-card-header {
    background-color: red !important;
    padding: 5px !important;
}

.mat-card {
    padding: 0 !important;
}

.mat-card-content {
    padding: 5px !important;
}

DEMO

Answer 3

Angular Material使用默认颜色（您正在使用的颜色托盘的主颜色）。所以有两种方式：

覆盖主题颜色
使用#Clear Screen CLS function Get-RemoteRegistryProgram { <# .Synopsis Uses remote registry to read installed programs .DESCRIPTION Use dot net and the registry key class to query installed programs from a remote machine .EXAMPLE Get-RemoteRegistryProgram -ComputerName Server1 #> [CmdletBinding()] Param ( [Parameter(ValueFromPipeline=$true, ValueFromPipelineByPropertyName=$true, Position=0)][string]$ComputerName = $env:COMPUTERNAME, [Parameter(ValueFromPipeline=$true, ValueFromPipelineByPropertyName=$true, Position=1)][string]$SoftwareName ) begin { $hives = @( [Microsoft.Win32.RegistryHive]::LocalMachine, [Microsoft.Win32.RegistryHive]::CurrentUser ) $nodes = @( "Software\Microsoft\Windows\CurrentVersion\Uninstall", "Software\WOW6432Node\Microsoft\Windows\CurrentVersion\Uninstall" ) } process { $ComputerName $skip = $false forEach ($computer in $ComputerName) { forEach($hive in $hives) { try { $registry = [Microsoft.Win32.RegistryKey]::OpenRemoteBaseKey($hive,$computer) } catch { $skip = $true } if($skip -eq $false) { forEach($node in $nodes) { try { $keys = $registry.OpenSubKey($node).GetSubKeyNames() forEach($key in $keys) { $displayname = $registry.OpenSubKey($node).OpenSubKey($key).GetValue('DisplayName') #Modified by James if(($displayname) -like "*$SoftwareName*") { $displayname + "`t" + $computer >> c:\scripts\sysaidServers.txt } <# Modified by James if($displayname) { $installedProgram = @{ # ComputerName = $computer DisplayName = $displayname # Version = $registry.OpenSubKey($node).OpenSubKey($key).GetValue('DisplayVersion') } New-Object -TypeName PSObject -Property $installedProgram } #> } } catch { <# $orginalError = $PsItem Switch($orginalError.FullyQualifiedErrorId) { 'InvokeMethodOnNull' { #key maynot exists } default { throw $orginalError } } #> } } } } } } end { } } #Output the servers to a txt file function Get-Servers { param ([Parameter( Mandatory=$true)][string]$SaveFile) #Variables [array]$MyDomains="DomainA.com","DomainB.com","DomainC.com","DomainD.com" [array]$MySearchBase="dc=DomainA,dc=com","dc=DomainB,dc=com","dc=DomainC,dc=com","dc=DomainD,dc=com" for($i=0; $i -lt $MyDomains.Count; $i++) { #I only want servers running Windows Server OS $MyServers = Get-ADComputer -Filter 'OperatingSystem -like "Windows*Server*"' -Properties Name -SearchBase $($MySearchBase[$i]) -Server $($MyDomains[$i]) | Format-Table Name -HideTableHeaders | out-string #Remove all whitespace and export to txt file $MyServers.Trim() -replace (' ', '') >> $SaveFile } } function CheckServerSoftware { param ([Parameter( Mandatory=$true)][string]$SaveFile) Get-Content $SaveFile | ForEach-Object { if($_ -match $regex) { $computer = $_.ToString() Get-RemoteRegistryProgram -ComputerName $computer.Trim() $SoftwareName Write-Output "" } } } #Path to where our exported server list is $SaveFile = "c:\scripts\servers.txt" $SoftwareName = "SysAid" #If the file already exists, remove it Remove-Item $SaveFile #Create the text file with servers Get-Servers $SaveFile #Import our server list and check software on each server CheckServerSoftware $SaveFile标记覆盖默认颜色，如下所示：!important

Answer 4

您可以将填充0设置为mat-card，并将填充设置为card内部元素（mat-card-header，mat-card-content）：

<mat-card style="padding:0"> <mat-card-header style="padding:1rem; backgorund-color: blue"> ... </mat-card-header> <mat-card-content style="padding:1rem"> ... </mat-card-contetn> </mat-card>

Angular2材料上的卡片头背景颜色

4 个答案: