物化 CSS |帮手

物化 CSS 中有几个帮助器可用于设计需求，例如：

• 结盟
• 隐藏/显示内容
• 格式化

1.对齐：内容可以通过使用以下类水平或垂直对齐：

• 垂直对齐：通过将 valign-wrapper类添加到包含要对齐的项目的容器中，可以轻松完成。

  
    
  This is vertically aligned
  

• 水平对齐：这些类用于水平对齐内容：左对齐、右对齐、居中对齐。

  
      
  This is left aligned
    
    
  
      
  This is right aligned
    
    
  
      
  This is center aligned
    

• 快速浮动：还有其他用于对齐内容的类是left和right 。

  ...
  ...

2. 隐藏/显示内容：为了在特定屏幕上隐藏/显示内容，materialize 提供了易于使用的类。

Class	Screen Range
hide	Hidden from all devices
hide-on-small-only	Hidden for Mobile Only
hide-on-med-only	Hidden for Tablet Only
hide-on-med-and-down	Hidden for Tablet and Below
hide-on-med-and-up	Hidden for Tablet and Above
hide-on-large-only	Hidden for Desktop Only
show-on-small	Show for Mobile Only
show-on-medium	Show for Tablet Only
show-on-large	Show for Desktop Only
show-on-medium-and-up	Show for Tablet and Above
show-on-medium-and-down	Show for Tablet and Below

This will be hidden from mobile screen

3. 格式化：这些类有助于格式化各种内容。这些课程是——

• 截断：要截断省略号中的长文本行，将 truncate类添加到包含文本的标签中。

  
  This is an extremely long title that will be truncated
  

• Hover： hoverable是用于为框阴影添加动画的悬停类。

  
   Hoverable Card Panel
  

这是一个使用上述所有类的示例：

  

    
    
  
    
    
  
  
    
    

  

    
        
        
            
                This is vertically aligned
            
        
        
            
                This is left aligned
            
        
  
        
            
                This is right aligned
            
        
  
        
            
                This is center aligned
            
        
        
            ...
        
        
            ...
        
  
        
            Hidden for mobile only
        
            Hidden for Tablet Only 
        
            Hidden for Desktop Only
  
        
            
                This is an extremely long text 
                that will be truncated to show 
                the changes.
            
        
  
  
        
            this is hoverable
        
        
    
  
    
    
    

  

输出：