📌  相关文章
📜  角材料-主题

📅  最后修改于: 2020-10-28 05:01:23             🧑  作者: Mango

Angular Material组件使用意图组类（例如md-primary，md-accent，md-warn）和其他类来实现色差，例如md-hue-1，md-hue-2或md-hue-3。以下组件支持上述类的使用。

  • md按钮
  • md-复选框
  • md-progress-circular
  • md-progress-linear
  • md-radio-button
  • md-slider
  • md-switch
  • md-tabs
  • md-text-float
  • md-工具栏

可以在应用程序配置期间使用$ mdThemingProvider配置主题。以下属性可用于分配不同的颜色调色板。

  • primaryPalette
  • accentPalette
  • warnPalette
  • backgroundPalette

例

以下示例显示了在Angular JS应用程序中主题的使用。

am_themes.htm

现场演示

      
      
      
      
      
      
      
            
   
   
    
      

         
            

               
Default Theme

            

         
         

         
                  
             
               
                  

                     
Using md-primary style

                  

               
                  
               
                  

                     
Using md-primary md-hue-1 style

                  

               
               
               
                  

                     
Using md-primary md-hue-2 style

                  

                  
               
                  

                     
Using md-accent style

                  

               
               
               
                  

                     
Using md-accent md-hue-1 style

                  

               
               
               
                  

                     
Using md-accent md-hue-2 style

                  

               
               
               
                  

                     
Using md-warn style

                  

               
               
               
                  

                     
Using md-warn md-hue-1 style

                  

               
               
               
                  

                     
Using md-warn md-hue-2 style

                  

                             
            
         
         
         

            
               

                  
Custom Theme

               

            
            

            
                     
                
                  
                     

                        
Using md-primary style

                     

                  
                  
                  
                     

                        
Using md-primary md-hue-1 style

                     

                  
                  
                  
                     

                        
Using md-primary md-hue-2 style

                     

                  
                  
                  
                     

                        
Using md-accent style

                     

                  
                  
                  
                     

                        
Using md-accent md-hue-1 style

                     

                  
                  
                  
                     

                        
Using md-accent md-hue-2 style

                     

                  
                  
                  
                     

                        
Using md-warn style

                     

                  
                  
                  
                     

                        
Using md-warn md-hue-1 style

                     

                  
                  
                  
                     

                        
Using md-warn md-hue-2 style

结果

验证结果。