📌  相关文章
📜  Framework7卡

📅  最后修改于: 2021-01-02 05:53:21             🧑  作者: Mango

Framework7卡

Framework7卡用于包含单个主题的组织信息，例如照片，链接和文本。

卡主要与列表视图一起使用，以包含和组织您的信息。

有7种类型的framework7卡：

  • 卡片HTML布局：基本的卡片HTML布局使用卡片类来安排其项目。
  • 带卡的列表视图：通过将卡列表类添加到
    ，可以将卡用作列表视图元素。

卡片HTML布局

基本的卡片HTML布局：


    
Header

    

        
Card content

    

    
Footer

这里：

：卡片容器

  • ：卡标题。主要用于显示卡标题。可选的。
  • ：卡片页脚用于一些其他信息或自定义操作/链接。可选的。
  • ：卡片内容的主要容器。需要。

    • =

：附加的内部包装器。用于为卡片内容添加其他填充。可选的。

卡的HTML布局包含几个类：

Index Class Description
1) cards It is the card container.
2) card-header It is the optional card header that is used to display card title.
3) card-footer It is optional and used for specifying additional information or custom links.
4) card-content It is the main container for content of the card and is required.
5) card-content-inner It is the optional additional inner wrapper that is used for additional padding to content.

注意：卡片页眉和卡片页脚都具有flexbox布局，其中项目具有中心垂直对齐。如果要将项目排序到页眉/页脚的顶部或底部，可以使用valign属性。

卡片HTML布局示例



   
      
      
      
      Card HTML Layout
      
      
      
   

   
      
      
      

         

            

               

               
                  

                     

                        
 

                        
Card HTML Layout

                        
 

                     

                  


                  

                     
Simple Cards

                     
                     

                        

                           
Lorem ipsum dolor sit amet, 
                              consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
                              dolore magna aliqua.

                        

                     

                     
                     

                        
Card header

                        

                           
Lorem ipsum dolor sit amet, 
                              consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
                              dolore magna aliqua.

                        

                        
Card Footer

                     

                     
                     

                        

                           
Another card. Lorem ipsum dolor sit 
                              amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 
                              et dolore magna aliqua. 

                        

                     

                     
                     
Styled Cards

                     
                     

                        
Beautiful Mountains

                        
                        

                           

                              
Posted on May 20, 2015

                              
Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

                           

                        

                        
                        
LikeComment

                     

                     
                     
                     
                     
Cards with List View

                     
                     

                        

                           

                              
                           

                        

                     

                     
                     

                        
Tutorials:

                        

                           

                              
    
                                 
  • 
                                    
    
                                    
    
                                       
    
                                          
    Java
    
                                       
    
                                       
    Sonoo Jaiswal
    
                                    
    
                                 
    • 
                                 
                                 
  • 
                                    
    
                                    
    
                                       
    
                                          
    Oracle
    
                                       
    
                                       
    Ajeet Kumar
    
                                    
    
                                 
    • 
                                 
                                 
  • 
                                    
    
                                    
    
                                       
    
                                          
    Go
    
                                       
    
                                       
    Nippun Kumar
    
                                    
    
                                 
    • 
                              

                           

                        

                        
                        
 May 1, 201645 
                        comments

卡片列表视图

通过将cards-list类添加到

，可以将卡用作列表视图元素。

例



   
      
      
      
      List View With Cards
      
      
      
   

      
         

            

               

                  
                  
                     

                        

                           
 

                           
List View With Cards

                           
 

                        

                     
                   
                     

                        

                           
    
                              
  • 
                                 
    Card Header
    
                                 
    
                                    
    Content
    
                                 
    
                                 
    Card footer
    
                              
    •                    
                              
  • 
                                 
    Card Header
    
                                 
    
                                    
    Content
    
                                 
    
                                 
    Card footer
    
                              
    •                         
                              
  • 
                                 
    Card Header
    
                                 
    
                                    
    Content
    
                                 
    
                                 
    Card footer
    
                              
    •